Mapping Pollutants with Leaflet.js

Written by , July 21, 2016


There are plenty of of ways to visualize data, but mapping data is one of the most powerful ways to make it immediately mean something to the viewer.  Creating maps that make data meaningful is satisfying for some of the same reasons I like doing the dishes. This might seem like a weird comparison, but bear with me, I’m a weird gal… what can I say?

Start and End

The thing I like most about doing the dishes is being able to SEE the progress and accomplishment. The starting point is simply a kitchen with dirty dishes, pots, pans, and food all over and unorganized.  The ending point is a clean looking and well organized kitchen.  Similarly with visualizing and mapping data, you start with something that doesn’t have much meaning at first glance and work to bring order and clarity to it. There’s something satisfying about starting with this:

Mapping data from a spreadsheet

Data displayed in Microsoft Excel

and ending with this:

Mapping Data - Interactive Web Map

Data displayed in an interactive web map

Pretty big difference, right? You can tell a lot about the data from just a glance at the map, let alone exploring the interactive features that display additional information. With that in mind, I’ll go through a high-level, introductory overview of the four (more or less) pieces that got us from a spreadsheet to an interactive web map. I plan on diving into more detail in future blog posts, so leave a comment if there is something in particular you’d like to hear more about.

NOTE:  I put this map together quickly for the sake of demonstration. There is plenty of code clean-up and additional styling that could be done of the legend, pop-ups, etc. What do you like to see in an interactive web map? Let me know in the comments!

1. Data and GeoJSON

When mapping data, you have to start with the data (of course!). I started with data from the Canadian National Pollutant Release Inventory (NPRI) in a .csv (comma separated values) file. In the screenshot above I had opened the .csv file in Microsfot Excel, but .csv files can also be opened in a text editor which will display a series of values separated by commas in a series of rows:

Mapping Data from a .csv file

Data in a .csv file, displayed in a text editor

.csv files are more versatile because they can be opened by a variety of applications while .xls files can only be opened by certain applications like Microsoft Excel.

Since I’ll be using JavaScript to create the map, I will to convert the data into JSON (JavaScript Object Notation). And because my data was geospatial in nature (meaning it had latitude and longitude points), I utilized a special format of JSON called GeoJSON.  Using QGIS (an open source Geographic Information System) to convert the data, it comes out looking like this:

Mapping data with GeoJSON

Data in GeoJSON format displayed in a text editor

2. HTML and CSS

There are three main components of many web pages that you see today: HTML, CSS, and JavaScript.

  • HTML (Hypertext Markup Language) provides the content of the page.
  • CSS (Cascading Style Sheets) controls what that content looks like including layout, colors, backgrounds, font styles, etc.
  • JavaScript is used to control the behavior of the page. When the user interacts with the page by clicking on something or hovering over something, the page responds using JavaScript.

So of course, my interactive web map uses HTML (on the left) and CSS (some of which is displayed on the right). There isn’t very much in the HTML because the only content on the webpage is the map (seen below with the <div id=”mapid”></div>) which is created by JavaScript and styled with CSS.

Mapping data with HTML   Mapping data with CSS

3. JavaScript and jQuery

The largest piece of this web map is the JavaScript. You probably guessed this, since JavaScript controls the user’s interactions with the webpage and we are building an INTERACTIVE web map. JavaScript is so ubiquitous on the web these days that programmers have created numerous JavaScript libraries. Using these libraries allows for faster and easier development of websites and web applications. jQuery is the most popular JavaScript library. You can see in the HTML file above that I’ve downloaded the file of pre-written JavaScript and included it: <script src=”js/jquery.js”></script>.

Below is the beginning of my JavaScript file. Wherever you see a symbol, my JavaScript is calling parts of the jQuery file.

Mapping data with JavaScript

4. Leaflet.js

Leaflet.js is an important lightweight JavaScript library for creating interactive maps. You can see that I included it in my HTML file just below the jQuery file. Leaflet.js allows me to pull my GeoJSON data into the map (with L.geoJSON which you can see in the file below) and use Mapbox to get my base map. It also helps me create the different colors and sizes of the circles (with L.circleMarker) to represent the different industries and amounts of pollutants released for each incident. It helps me create pop-ups with more information, a legend and the layers that allow the user to turn different data on and off on the map.

Mapping data with Leaflet

Mapping Data: the Results

By pulling all of these different pieces together, you can make your data clean, clear and concise to a customer, investor or stakeholder.  At the end of the day, you wouldn’t invite a client or your boss to see your dirty kitchen, so why would you show them your messy and unorganized data?

Make sure to explore the possibilities on the interactive map here and let me know if you have any fun data to map!

– Jess