Mapbox Leaflet Heat Map using multi-hued color scales gradient

Possibly save 2 hours of your time: The application I worked on uses Mapbox Leaflet for the interactive map. It currently uses linear gradient for the heat map that starts from one color and ends in another color. The client likes to change that to multi color gradient. This allows easier differentiation of closer boundaries on the map.

This link from leaflet provides how to do this on the link below. It changes the style of fillColor to use a custom function that calculates and returns the color based on the density.

http://leafletjs.com/examples/choropleth/

The following site talks about how to select multi-hued color scales:

https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/

And this tool helps you define the color gradient:

https://gka.github.io/palettes/#colors=white,deeppink,yellow,#002060|steps=4|bez=1|coL=1

This tool helps you convert colors from hex to rgba:

https://www.hexcolortool.com/#ec132c

Mapbox Cookbook

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s