{"id":13565968,"url":"https://github.com/timwis/leaflet-choropleth","last_synced_at":"2025-04-04T13:08:48.417Z","repository":{"id":57289893,"uuid":"45837167","full_name":"timwis/leaflet-choropleth","owner":"timwis","description":"Choropleth plugin for Leaflet (color scale based on value)","archived":false,"fork":false,"pushed_at":"2019-06-13T08:11:22.000Z","size":380,"stargazers_count":183,"open_issues_count":14,"forks_count":233,"subscribers_count":9,"default_branch":"gh-pages","last_synced_at":"2025-03-28T12:06:54.712Z","etag":null,"topics":["choropleth","color-scale","leaflet","leaflet-choropleth"],"latest_commit_sha":null,"homepage":"http://timwis.com/leaflet-choropleth/examples/basic","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timwis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-09T12:40:23.000Z","updated_at":"2025-03-07T13:15:50.000Z","dependencies_parsed_at":"2022-08-25T04:21:49.746Z","dependency_job_id":null,"html_url":"https://github.com/timwis/leaflet-choropleth","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwis%2Fleaflet-choropleth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwis%2Fleaflet-choropleth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwis%2Fleaflet-choropleth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timwis%2Fleaflet-choropleth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timwis","download_url":"https://codeload.github.com/timwis/leaflet-choropleth/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182348,"owners_count":20897379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["choropleth","color-scale","leaflet","leaflet-choropleth"],"created_at":"2024-08-01T13:01:59.114Z","updated_at":"2025-04-04T13:08:48.387Z","avatar_url":"https://github.com/timwis.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Leaflet Choropleth [![Build Status](https://travis-ci.org/timwis/leaflet-choropleth.svg?branch=gh-pages)](https://travis-ci.org/timwis/leaflet-choropleth) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n\n[![NPM](https://nodei.co/npm/leaflet-choropleth.png?compact=true)](https://nodei.co/npm/leaflet-choropleth/)\n\nChoropleth plugin for Leaflet (color scale based on value) - [Demo](http://timwis.com/leaflet-choropleth/examples/basic)\n\n[![screenshot](http://i.imgur.com/5DXlLG8l.jpg)](http://timwis.com/leaflet-choropleth/examples/basic)\n\nThis plugin extends `L.geoJson`, giving each feature a `style.fillColor` that corresponds to a specified value \nin its `properties` object. For information on how to use `L.geoJson`, see the Leaflet \n[tutorial](http://leafletjs.com/examples/geojson.html) and [documentation](http://leafletjs.com/reference.html#geojson).\n\nWhile Leaflet provides a [choropleth tutorial](http://leafletjs.com/examples/choropleth.html), that approach requires you to\nspecify exact breakpoints and colors. This plugin uses [chroma.js](http://gka.github.io/chroma.js/) to abstract that for you.\nJust tell it which property in the GeoJSON to use and some idea of the color scale you want.\n\n## Usage\n```javascript\nL.choropleth(geojsonData, {\n\tvalueProperty: 'incidents', // which property in the features to use\n\tscale: ['white', 'red'], // chroma.js scale - include as many as you like\n\tsteps: 5, // number of breaks or steps in range\n\tmode: 'q', // q for quantile, e for equidistant, k for k-means\n\tstyle: {\n\t\tcolor: '#fff', // border color\n\t\tweight: 2,\n\t\tfillOpacity: 0.8\n\t},\n\tonEachFeature: function(feature, layer) {\n\t\tlayer.bindPopup(feature.properties.value)\n\t}\n}).addTo(map)\n```\n### Advanced\n* **colors**: If you prefer to specify your own exact colors, use `colors: ['#fff', '#777', ...]` instead of `scale`.\nJust make sure the number of colors is the same as the number of `steps` specified.\n* **valueProperty**: To use computed values (such as [standardizing](http://axismaps.github.io/thematic-cartography/articles/standardize.html)),\nyou can use a function for `valueProperty` that is passed `(feature)` and returns a number ([example](examples/computed_values/demo.js)).\n\n## Installation\n* via NPM: `npm install leaflet-choropleth`\n* via Bower: `bower install leaflet-choropleth`\n\nInclude `dist/choropleth.js` from this repository on your page after Leaflet:\n```html\n\u003cscript src=\"path/to/leaflet.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/choropleth.js\"\u003e\u003c/script\u003e\n```\nOr, if using via CommonJS (Browserify, Webpack, etc.):\n```javascript\nvar L = require('leaflet')\nrequire('leaflet-choropleth')\n```\n\n## Examples\n* [Basic usage](examples/basic/demo.js)\n* [Legend](examples/legend/demo.js)\n* [Fetch \u0026 join](examples/fetch_join/demo.js)\n* [Computed values](examples/computed_values/demo.js) \n\n## Development\nThis project uses [webpack](http://webpack.github.io/) to build the JavaScript and \n[standard](https://github.com/feross/standard) for code style linting.\n\n* While developing, use `npm run watch` to automatically rebuild when files are saved\n* Use `npm test` to run unit tests and code style linter\n* Before committing `dist/`, use `npm run build` to optimize and minify for production use\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimwis%2Fleaflet-choropleth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimwis%2Fleaflet-choropleth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimwis%2Fleaflet-choropleth/lists"}