https://github.com/timwis/leaflet-choropleth
Choropleth plugin for Leaflet (color scale based on value)
https://github.com/timwis/leaflet-choropleth
choropleth color-scale leaflet leaflet-choropleth
Last synced: 6 days ago
JSON representation
Choropleth plugin for Leaflet (color scale based on value)
- Host: GitHub
- URL: https://github.com/timwis/leaflet-choropleth
- Owner: timwis
- License: mit
- Created: 2015-11-09T12:40:23.000Z (over 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2019-06-13T08:11:22.000Z (over 5 years ago)
- Last Synced: 2025-02-08T19:06:50.716Z (13 days ago)
- Topics: choropleth, color-scale, leaflet, leaflet-choropleth
- Language: JavaScript
- Homepage: http://timwis.com/leaflet-choropleth/examples/basic
- Size: 371 KB
- Stars: 182
- Watchers: 10
- Forks: 233
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Leaflet Choropleth [](https://travis-ci.org/timwis/leaflet-choropleth) [](http://standardjs.com/)
[](https://nodei.co/npm/leaflet-choropleth/)
Choropleth plugin for Leaflet (color scale based on value) - [Demo](http://timwis.com/leaflet-choropleth/examples/basic)
[](http://timwis.com/leaflet-choropleth/examples/basic)
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](http://leafletjs.com/examples/geojson.html) and [documentation](http://leafletjs.com/reference.html#geojson).
While Leaflet provides a [choropleth tutorial](http://leafletjs.com/examples/choropleth.html), that approach requires you to
specify exact breakpoints and colors. This plugin uses [chroma.js](http://gka.github.io/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
```javascript
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](http://axismaps.github.io/thematic-cartography/articles/standardize.html)),
you can use a function for `valueProperty` that is passed `(feature)` and returns a number ([example](examples/computed_values/demo.js)).
## 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
* [Basic usage](examples/basic/demo.js)
* [Legend](examples/legend/demo.js)
* [Fetch & join](examples/fetch_join/demo.js)
* [Computed values](examples/computed_values/demo.js)
## Development
This project uses [webpack](http://webpack.github.io/) to build the JavaScript and
[standard](https://github.com/feross/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