timwis / leaflet-choropleth Goto Github PK

View Code? Open in Web Editor NEW

180.0 10.0 232.0 380 KB

Choropleth plugin for Leaflet (color scale based on value)

Home Page: http://timwis.com/leaflet-choropleth/examples/basic

License: MIT License

JavaScript 100.00%

leaflet leaflet-choropleth choropleth color-scale

leaflet-choropleth's Introduction

Leaflet Choropleth

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

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:

<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

leaflet-choropleth's People

Contributors

Stargazers

Watchers

Forkers

rgdonohue ondrej-tucek abrin geoyi thdtjsdn jamesramm trantorm kica94 bhaskarvk jeffokunkoz ericpalakovichcarr ruijiezhu kernc amsterdam whloyi zzcyrus deepak6sp emilygithubdeprecated vbivigneshg anucpy javierl79 shongjung gopherj quantumba maptastik carlosmurguia stephanieyb jjustin25 jakeander bocinsky tewarishishir madhavi-r thusneem manda036 nonabsorbing yeagster andresgpotdevin carinananana chenchen-yu timothysharpe safwanengg lsorelle steveanalyst brownal05 cynthiahuallanca wenbin-billy-zhao tjkulbeth ironbark427 ragavkumar ofarag1 hkapil ykhmelnitskiy caeebe robintw kellyskwon ascott4680 cbrillaz jkill2 ankitasawant02 chienyuanhung amitmals sib109 griffinpeifer swordfish1212 jacksdata gutzcarlos nvnehemias wcopeland118 nithiye griffindiemer ashwin148 lonnykramer rboscan vicblab kenneth-edwards svl8epa4gh yepanothermike mikayla-kosmala danfujii ramneekc youssefmroue mahathiv yichun-jin soiqualang jack-c28 juliedundas dcchacon 30m3e ktaufer marvinabeyta benjov juan4545 jaramana imdanielleho tariere chrisbock76 etumi ringwang0312 ashvinrajput nabilq

leaflet-choropleth's Issues

Set Scale

Is it possible to set the scale/breaks manually? something like scale: ["50", "80", "100"]?

Change style dynamically

Feature request: is it possible to change the style after creating a layer? I'd like to show a map and then have a drop down of feature names, and then update the layer to colour by that feature, possibly with a different colour scale.

At present I don't think it can be easily done because the colour mapping info is stored in opts which has the scope of the L.choropleth constructor - changing mylayer.options and forcing a style update with mylayer.setStyle(mylayer.options.style) doesn't work. I can't actually see how a style function can get anything from the layer options, but my JS skills are poor, especially understanding scope in JS...

add option to use Jenks natural breaks for classification

A new addition would be to allow users to classify data using Jenks natural breaks. Tom MacWrights Simple Statistics does a nice job of making the calculation.

See my implementation here.

Also, is this "issue" the right place to submit this? More like feature wish list.

Quantile

They way quantile should work is like this: An equal number if items should be assigned to each bucket.
However, when I use the q in the PlugIn, not the same number of items are assigned to each class. Sometimes, there six or seven items per class while in others there are only two or three. But the classes should have the same size?!

Ensure embedability

Currently uses webpack for building ... make sure it's embedable

Rewrote the plugin

I'm not creating a PR but I would like you to take a look at my fork

https://github.com/bhaskarvk/leaflet-choropleth

Here's what I've done to it

Added support for more chroma-js options like bezier interpolate, fix lightness, channel mode
Rewrote it so that it can work along with omnivore. For now though it requires my fork of omnivore. This allows the plugin to be used not only for GeoJSON but every file that omnivore supports so TopoJSON/KML/GFX/CSV/WKT
Added ability to customize and add a legend automatically if so desired.

Please let me know what you think, and whether you would be interested in merging this.

Last number in limit is smaller than the rest using quantile

["10065", 20996.75, 24371, 28654.5, "8924"] OR
["10172", "18263", "21779", "27054", "9815"] - 9815 should be 148729 in this case

The map is drawing the right colors, its just the last limit # is wrong. Ideas?

Map

This is a chroma issue. See seblow.

Allow users to set style property

At the moment this is being overridden and doesn't inherit the style option passed as one would expect

Change legend scale without minima/maxima?

Hi, is it possible to modify the legend for a density map? For example, if I select colors White, Red, steps 5, and have a feature value between 0 to 100,000, the map and legend is created with 0 as White and 100,000 as red. But, I rather want it to categorize based on ranges of values. For example. <20,000, 20,000-70,000, >100,000. How is it possible to modify the legend this way?

Zoom to County Level

Is there a way this works using fitBounds() and getBounds() onEachFeature layer? I've tried using a function similiar to this -https://leafletjs.com/examples/choropleth/example.html so that I can zoom to county or state level on 'click'. But seems to not be able to read choropleth layer properties the same as geojson.

extend for topojson functionality

is it possible to extend this nice plugin to handle as well topojson?

Demo: File not found

http://timwis.com/leaflet-choropleth/demo

Update: fixed with http://timwis.com/leaflet-choropleth/examples/basic

Possible to utilise chroma's domain setting?

Firstly, I love your choropleth plugin. It's working great, except the color scale setting isn't quite precise enough for what I need.

I've tried using chroma's domain setting (https://gka.github.io/chroma.js/#scale-domain) to be more specific about how it sets colors, but it doesn't seem to pass through your plugin.

Is it possible to enhance the plugin to utilize this setting?

Thanks in advance

Using large file with + 10000 polygons

I tried with a + 10000 polygons geojson file (22mb) it runs thru it all but the map freeze and I can not pan. I can zoom in and out but not pan. Is there a way to be able to use it with the geojson-vt to render it faster similar to http://bl.ocks.org/sumbera/c67e5551b21c68dc8299?
Thanks

style bug

in line 61 you have: return _.extend(userStyle(), style) . Must be: return _.extend(userStyle(feature), style)

Drop bower support and remove compiled code from source control

Including dist makes it inconvenient to submit pull requests -- the submitter isn't sure whether to include it in the PR, and the author has no insight into whether the new compiled file accurately reflects the latest source code. I think instead we'd run the build command during npm publish. The gh-pages branch also needs it for the demos, so we could use travis to compile and push from the master branch to gh-pages.

This would probably mean bower no longer works, though, as there's no compiled version sitting on github. Do people still use bower? Any other advantages to having the built file in source control?

Add legend support

Suggested by @crvanpollard

var L = require('leaflet') is not defined

Trying to use the leaflet plugin but I get errors at" choropleth.js:1" Uncaught ReferenceError: require choropleth.js:1 is not defined. Error shows up here "var L = require('leaflet')".

I have no clue why.
I am using chrome with the developer tools

Thanks

at the moment i am recreating the whole layer every time.

thanks!