Leaflet Quantile Map

My goal was to get a quantile map working - a map of different counties in California, colored based on some arbitrary quantity contained in the GeoJSON. The end product would look like this:

I was already able to get this working in QGIS - see QGIS#Making_Quantitative_Maps and below image:

Random Quantity Map

The GeoJSON

I am generating the GeoJSON from the same script as shown in on the page QGIS#Visualizing_Quantitative_Maps. It is embedding a random number in the GeoJSON properties for each California county. This is the quantity that is then used to color the GeoJSON layer.

Loading GeoJSON with Leaflet Ajax

In order to load a GeoJSON file straight into a Leaflet map, you need to install the Leaflet Ajax plugin, which basically takes care of the Ajax request that is required to do that. You can find the minimized Javascript for the Leaflet Ajax plugin on Github.

Setting Color with GeoJSON Property

I was able to add each GeoJSON object into new layers in the map by using the L.geoJson.ajax method made available by the Leaflet Ajax plugin:

var geoj = new L.geoJson.ajax(jinjaData['siteurl']+"/carandom.geojson",{onEachFeature:enhanceLayer}).addTo(m);

The onEachFeature call was used to modify each GeoJSON layer - creating a popup message with all the GeoJSON parameters, and modifying the color based on the random number assigned to the county.

The enhanceLayer function, which is called for each feature and layer, looks like this:

(note that derived_quantity is the random number, and is between 0 and 10):

// f = feature, l = layer

function enhanceLayer(f,l){

    // add popup
    var out = [];
    if (f.properties){
        for(key in f.properties){
            out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));

        // http://leafletjs.com/reference.html#path-options
        l.setStyle({
            fillColor: getColor(f.properties['derived_quantity']/10.0),
            fillOpacity: 0.75,
            stroke: false
        });
        console.log(f.properties['derived_quantity']/10.0);
    }
}

The color was set using the getColor method, which was constructed using Color Brewer:

function getColor(d) {
    // d should be between 0 and 1
    //
    // 6 scale blues
    var blue = ['rgb(239,243,255)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(49,130,189)','rgb(8,81,156)'];
    return blue[Math.round(d*6)];
}

Passing Info from Jinja/HTML to Javascript

I had one last dilemma, which came about because I was managing my site with Pelican and hosting it on Github pages: how could I point to my GeoJSON file location when there was a site prefix being set by Pelican?

The solution was to pass information from the HTML file to the Javascript code by using a dummy data tag: I passed the SITEURL parameter in to the HTML:

<meta id="jinja-site-url" data-siteurl="{{ SITEURL }}"></meta>

and pulled it out in the Javascript:

var jinjaData = $('#jinja-site-url').data();