Final map, using open government data, CartoDB and little bit of JavaScript.

Making beautiful, interactive maps (with some JavaScript)

I love maps. Especially ones that display data meaningfully. But the idea of making one myself using JavaScript was overwhelming (at least before starting HackerYou’s web development bootcamp last week).

Turns out it’s not too tricky, even for someone new to JavaScript, if you use CartoDB and their JavaScript library . Here’s how I made an interactive map displaying the condition of bridges across Ontario:

  • Step 1: Find and some data.

I decided to use the Ontario government’s bridge condition data. The provincial government has more than 2,000 bridges, which are inspected and given a “Bridge Condition Index” (BCI). An excellent, brand new bridge would have a score close to 100, whereas a bridge in bad shape would be closer to zero.

Using Google Sheets, I cleaned up the spreadsheet by taking out extra headings and unnecessary fields. I had a quick look at the range of BCI values so I had a rough idea what I was working with.

  • Step 2: Visualize it.

I imported the spreadsheet into CartoDB, which is free to use for up to 50 MB of data. I used the map wizard to make a choropleth map using a colour ramp to display the varying BCI values across the province. Bridge locations were in the spreadsheet as latitude and longitude already. I then edited what fields would show up on the tooltip when a user clicked on a particular bridge and changed colour theme of the map.

  • Step 3: More interaction.

I liked the map as it was and thought it was fairly informative. But I was pretty sure the data and map could do more. What if a user could look specifically for the best and worst bridges, instead of having to navigate more than 2000 values?

That’s where CartoDB.js comes in. The library lets your code interact with CartoDB maps. That means the ability to customize interactions and for users to query data. From looking at CartoDB’s examples, a selector seemed to be what I was looking for. Their example was a map of countries, with a selector to show or hide countries based on their size. On GitHub, the source code was available for that map.

  • Step 4: Make it happen.

Using CartoDB’s example, I made my map interactive so that users could choose to see all Ontario bridges or bridges with a BCI less than 40, less than 60, greater than 60 or greater than 90.

This involved tinkering with the source selector code to hookup my own map and data set. I also had to state what should be selected and from which column (in my case, “bci”). You can see at the bottom of this code how to shift the centre of the map and its zoom.

Here’s how my code for the selector ended up looking:

You can also change the look and position of the selector if you want to. Have fun making beautiful maps!