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.

An Introduction to Leaflet, Part I: CSVs and Pop-ups

Leaflet is an open source JavaScript library for publishing interactive web-based and mobile maps. Most tutorials on Leaflet's website are geared towards creating basic maps with a small number of features.

Despite this, the code libraries are capable of doing much more!  Today's post will focus on importing and using point data in spreadsheet form, specifically comma separated value files or *.csv.  (In the next post, we will look at other data types and formats.)  l will use the Leaflet Simple CSV Plugin that contains many different features, which I will describe later.

The data
The data set contains locations of homicides (417) in Chicago during 2013.  It also contains attribute data for incident, type, circumstances, arrests, date, and, location.  It is available through Chicago's large open data portal.

End product:
If you want to skip to see the end result, click this link: http://webmapexamples.net/leaflet-simple-csv-master/index.html.  The screenshot below shows the map on an iPad Mini (Gen 1). Click for a closer vew.

On iPad Mini: A Leaflet Map of Homicides in Chicago, 2013

How I got there...
There are several Leaflet plugins to import *.csv files.  On the web, I found the Leaflet Simple CSV Plugin by Matthew Perry that incorporates several different plugins, including a bonus one for clustering/collecting markers, into one set of code. Furthermore, it contains code for allowing attribute data from the *.csv file to be displayed when a marker is clicked.  

Pop-up displaying attribute data from the *.csv about the homicide

The code package put together many different capabilities. It was easy-to-use, modify, has documentation, and a working example.  I accessed the maps on several devices: two different computers, the iPad mini, an iPhone 4S, and a Nexus 7 tablet.  The only device that had an issue was the iPhone 4S.  When clicking a point market, pop-up attribute data was not always displayed and simply flickered.  I am still looking into this and will post anything I found out.

Resources for Learning Leaflet
Leaflet.js Essentials (Published August 2014)

Where to learn JavaScript and more coding skills for free
Codecademy