Leaflet.js Essentials

Creating a normalized choropleth map

In this example, you will create a choropleth map that displays both the total area and the total area divided by the total land area. The following steps will walk you through this:

1. Using the code from the previous example, add another color function with values for the new ranges. They will be much smaller values than values for the total:

   function densitycolor(x) {
   return x > 0.15 ? '#990000' :
   x> 0.12  ? '#d7301f' :
   x> 0.06  ? '#ef6548' :
   x> 0.03  ? '#fc8d59' :
   x> 0.01  ? '#fdbb84' :
   x> 0.005   ? '#fdd49e' :
   x> 0   ? '#fee8c8' :'#fff7ec';                      
   }

2. Next, define another style function. The key difference in this function is that the value passed to the color function will be water/land:

   function densityStyle(feature) { return ...