Leaflet Choropleth

Choropleth plugin for Leaflet (color scale based on value) - Demo

This plugin extends

L.geoJson

style.fillColor

properties

L.geoJson

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.

Usage

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)

Advanced

• colors: If you prefer to specify your own exact colors, use

  colors: ['#fff', '#777', ...]

  instead of

  scale

  . Just make sure the number of colors is the same as the number of

  steps

  specified.
• valueProperty: To use computed values (such as standardizing), you can use a function for

  valueProperty

  that is passed

  (feature)

  and returns a number (example).

Installation

• via NPM:

  npm install leaflet-choropleth

• via Bower:

  bower install leaflet-choropleth

Include

dist/choropleth.js

html

javascript
var L = require('leaflet')
require('leaflet-choropleth')

Examples

• Basic usage
• Legend
• Fetch & join
• Computed values

Development

This project uses webpack to build the JavaScript and standard for code style linting.

• While developing, use

  npm run watch

  to automatically rebuild when files are saved
• Use

  npm test

  to run unit tests and code style linter
• Before committing

  dist/

  , use

  npm run build

  to optimize and minify for production use