Book Image

Leaflet.js Essentials

By : Paul Crickard III, Paul Crickard
Book Image

Leaflet.js Essentials

By: Paul Crickard III, Paul Crickard

Overview of this book

Table of Contents (13 chapters)
Leaflet.js Essentials
About the Author
About the Reviewers

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 {
    fillColor: densitycolor(,
    weight: 1,
    opacity: 1,
          color: 'white',
          fillOpacity: 1
  3. Create two buttons on the bottom of the...