Choropleth plugin for Leaflet (color scale based on value)
Choropleth plugin for Leaflet (color scale based on value) - Demo
This plugin extends
L.geoJson, giving each feature a
style.fillColorthat corresponds to a specified value in its
propertiesobject. For information on how to use
L.geoJson, see the Leaflet tutorial and documentation.
While Leaflet provides a choropleth tutorial, that approach requires you to specify exact breakpoints and colors. This plugin uses chroma.js to abstract that for you. Just tell it which property in the GeoJSON to use and some idea of the color scale you want.
L.choropleth(geojsonData, { valueProperty: 'incidents', // which property in the features to use scale: ['white', 'red'], // chroma.js scale - include as many as you like steps: 5, // number of breaks or steps in range mode: 'q', // q for quantile, e for equidistant, k for k-means style: { color: '#fff', // border color weight: 2, fillOpacity: 0.8 }, onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.value) } }).addTo(map)
colors: ['#fff', '#777', ...]instead of
scale. Just make sure the number of colors is the same as the number of
stepsspecified.
valuePropertythat is passed
(feature)and returns a number (example).
npm install leaflet-choropleth
bower install leaflet-choropleth
Include
dist/choropleth.jsfrom this repository on your page after Leaflet:
htmlOr, if using via CommonJS (Browserify, Webpack, etc.):
javascript var L = require('leaflet') require('leaflet-choropleth')
This project uses webpack to build the JavaScript and standard for code style linting.
npm run watchto automatically rebuild when files are saved
npm testto run unit tests and code style linter
dist/, use
npm run buildto optimize and minify for production use