Wondering what’s next for npm?Check out our public roadmap! »

    leaflet-choropleth

    1.1.4 • Public • Published

    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 on your page after Leaflet:

    <script src="path/to/leaflet.js"></script>
    <script src="path/to/choropleth.js"></script>

    Or, if using via CommonJS (Browserify, Webpack, etc.):

    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

    Install

    npm i leaflet-choropleth

    DownloadsWeekly Downloads

    366

    Version

    1.1.4

    License

    MIT

    Last publish

    Collaborators

    • avatar