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