An Introduction to Leaflet, Part II: Adding GeoJSON from an External File

Last time, I wrote about adding data from a spreadsheet.  In today's post, I will show how to load GeoJSON data from an external file and create a legend with mutually exclusive categories.

In many tutorials, GeoJSON data is incorporated as part of the code.  However, with a large number of features comes a large block of code that can make writing and debugging difficult. So, reading in the data straight from an external file is valuable.  (One method that is not recommended is creating a JavaScript variable in the GeoJSON file.)

I will be condensing a longer blog post by Lyzi Diamond but feel free to head over to her page for the full explanation and the complete details.  I will also be using code from the Leaflet chloropleth map tutorial, and give its legend a needed update.

The Data
For this post, I will be creating a map of health insurance rates  (2012) in Texas based on data gathered for a post earlier this year on health insurance rates.

What You Will Need
You will need jQuery, a JavaScript library that makes life easier.

Loading the GeoJSON file
In the head of the document, in between style tags, load the jQuery script and reference the GeoJSON file using a link relation.  Here, the file is texas2.geojson.

<script src="./jquery.min.js"></script>
<link rel="polygon" type="application/json" href="/leaflet/healthinsurance/texas2.geojson">    

...and in the body...

$.getJSON($('link[rel="polygon"]').attr("href"), function(data){
var geojson = L.geoJson(data,{...
                .,,with additional code for styling and the popup.

Styling
The Leaflet chloropleth tutorial has nice code for styling by creating two JavaScript functions and using ColorBrewer for getting colors in hexadecimal.

The Legend
The legend code from the Leaflet tutorial is really neat but it needs a little updating.  The legend's categories are not mutually exclusive.  So, I created two arrays (one for the lower bound, the other for upper bound of the categories for percent uninsured) instead of just one for the lower bound in the tutorial.

  var div = L.DomUtil.create('div', 'info legend'),
        lower = [2,12.6,16.9,21,26],
        upper = [12.5,16.8,20.9,25.9,"plus"],
        labels = [];

    // loop through our density intervals and generate a label with a colored square for each interval
    for (var i = 0; i < lower.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(lower[i] + 1) + '"></i> ' +
            lower[i] + '&ndash;' + upper[i]+'<br>';
   }
    return div;
};

I've updated Leaflet's code to make a mutually exclusive legend.

The Final Map
The final map can be viewed at: http://webmapexamples.net/leaflet/healthinsurance/Texas.html. Don't forget,on the webpage you can right-click with your mouse and select "view source" to see the final code.

The final map has popups for County Name + Percent Uninsured

I am still deciding on the topic for the next Leaflet post.  If you have any suggestions, please leave them in the comment section below.