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