leaflet-choropleth

by timwis

Choropleth plugin for Leaflet (color scale based on value)

132 Stars 153 Forks Last release: over 4 years ago (v1.1.2) MIT License 77 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Leaflet Choropleth Build Status js-standard-style

NPM

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

screenshot

This plugin extends

L.geoJson
, giving each feature a
style.fillColor
that corresponds to a specified value in its
properties
object. 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.

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
from this repository on your page after Leaflet:
html


Or, if using via CommonJS (Browserify, Webpack, etc.):
javascript
var L = require('leaflet')
require('leaflet-choropleth')

Examples

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.