Need help with leaflet-choropleth?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

timwis
138 Stars 184 Forks MIT License 77 Commits 13 Opened issues

Description

Choropleth plugin for Leaflet (color scale based on value)

Services available

!
?

Need anything else?

Contributors list

# 32,701
Markdow...
arcgis
google-...
stdin
56 commits
# 14,795
q
pandas
keyboar...
keymap
5 commits
# 272,286
Shell
C
HTML
leaflet
2 commits
# 246,421
JavaScr...
Python
Postgre...
Django
1 commit
# 511,044
elastic...
Shell
w3c
HTML
1 commit
# 504,751
JavaScr...
leaflet
1 commit

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.