How to build an interactive map with CartoDB

It'll take you much less time than it took me to write this guide

Yesterday I published an article about the recent eruption of the Calbuco Volcano in Chile, and a central part of it was an interactive map of every volcanic eruption for the last 2,000 years.

In case you didn’t see it (shame on you), here it is again.

Darker red blobs on the map represent a greater number of volcanic eruptions. Hovering over a volcano will give you its name, while clicking it brings up a little window that tells you when it last erupted and a variety of other facts.

Underlying all of that, red lines weaving across the map indicate the borders of the tectonic plates.

Maps like this can be brilliant storytelling tools as well as just great fun to play with, and they’re completely free to make. Want to give it a go yourself? Here’s how.

 

Sign up to CartoDB

The tool we’ll be using is called CartoDB. It’s not the only mapping service around, but it’s free, straightforward to use, and as we’ll see you can do quite a bit with it. One word of warning though: CartoDB’s free plans don’t allow you to make the data you’re using private, so if you’re working on something you’d rather stayed hidden then you’ll need to pay up.

First off, you’ll need to make an account. There are limits to how much data you can store at once with a free account, but they’re pretty generous.

If you’re a student or academic, you can sign up for free at the bottom of this page to get a little extra space. Everybody else, sign up here.

 

Download the data

I’ve already gone to the trouble of acquiring and cleaning the datasets we’ll be using (you’re very welcome), so all you need to do is click the links below and download them somewhere you can find them again – we’ll need to put them all on CartoDB in just a second.

The first two datasets come from the Global Volcanism Program of the National Museum of Natural History at the Smithsonian Institute.

 
Volcanoes.csv
Volcanoes.csv contains a list of every volcano, its characteristics and location. That’s enough to make a pretty impressive map by itself, but remember that we want to map eruptions.

 
Eruptions.csv
That’s where the other file comes in. Eruptions.csv contains every volcanic eruption from 0 CE to 6th May 2015 when it was downloaded. I’ve filtered out those that have been discredited – our data contains only the confirmed and uncertain eruptions.

 
Tectonic_boundaries.json
Grab this file too. It gives us the shapes of the tectonic plates, courtesy of Hugo Ahlenius and Peter Bird via GitHub.

 

Upload time

Okay, let’s start by clicking the big green Create New Map button, then click Connect Dataset. You’ll need to upload all three files at some point, so we might as well make it now. Just pick one and click Connect Dataset.

Each time you upload a file, CartoDB will open it automatically. Don’t worry about that for now though: just ignore anything it says, click the arrow in the top left corner to close it and repeat the process for the other two files.

 

Merging two datasets

Now, you’ll have noticed that the Volcanoes and the Tectonic plates files automatically plotted themselves onto the map, but Eruptions didn’t.

That’s because it doesn’t contain the exact location of the volcano that erupted. Luckily, the Volcanoes file does – it has the exact latitude and longitude of every volcano, and that’s why it was able to plot automatically.

What we need to do is join those two files together, so we know where the eruptions happened.

Click on the Eruptions file you uploaded and make sure you’re in the data view (there’s a slider at the top of the screen).

The table contains a variety of fields, but the key column for now is the column labelled volcano_number. This number is unique to a volcano, and corresponds with a number in the Volcanoes file. Because these are the same, we can use this column to join the two datasets together.

Click the Merge Datasets button in the grey bar on the right hand side of the screen (third from the bottom). Select Column Join and hit next.

Now for the clever bit. In the right hand box, select volcano_number. Make sure the Merge all columns switch below the box is blue. Now select the Volcanoes file in the left box and click volcano_number in that one as well. Again, the Merge all columns switch should be blue.

All done? Hit Merge Datasets and call it volcanic eruptions.

 

Filter out the inactive volcanoes

If you switch to the map view of your new table, you can see that the volcanoes are now plotted onto the map.

But there’s a problem. That’s all the volcanoes, not just the ones that have erupted. We need to filter out the ones that haven’t erupted in the last 2,000 years. Luckily, that’s easy to do.

Find the column labelled eruption_number and click the heading. Select Filter by this column.

The right side of the screen will pop out to show you the code your button clicking made. Don’t worry about this. Just flick back to map view, and you’ll see that now only the erupting volcanoes are shown.

Click create dataset from query on the green bar that has appeared at the top of the screen and give it a name. Press Create dataset.

 

Making a map

That’s the hard work done, now for the fun! In your new table, head to map view and click on the wizards icon in the grey right hand bar.

This is where you pick the kind of map you want. We could do a few of these, but because we’ve got multiple eruptions happening in exactly the same place, the best for us is Intensity.

Our map is starting to look like our map! You can change the size, transparency and colour of the circles and the lines around them. I think yellow works well for volcanoes, but I took the stroke thickness down to 0.5.

Now might be a good time to change the colour of the basemap too. Click the basemap button in the top left corner and pick one. I chose Nokia Night, but you can have whatever you like.

 

Creating the Info window – hover

The Info window is what will pop up when you hover over or click on a volcano. If you try at the moment, it just tells you that you haven’t selected any fields, so let’s do that now.

Click the infowindow tab on the grey bar, just below wizards.

This page has two tabs – Click and Hover. We’ll start with Hover, so click that tab to change to it.

We want the name of the volcano to appear when we hover over it, so scroll down until you find the volcano_name option, and turn the switch blue by clicking it. We also want to untick the title box – there’s no need to have the heading “Volcano Name” appear.

If you hover over the map now, you can see the names appear. Use the menu below the Click & Hover tabs to switch between a light and dark pop up box.

 

Creating the Info window – click

Hit the Click tab. Now, we could layout what comes up when you click in just the same way, but to keep things interesting we’ll use the HTML view instead.

Click the </>  symbol to enter HTML view. If you know what you’re doing then feel free to mess around with it. If not, just replace everything in the box with this:

<div class=”cartodb-popup header yellow v2″>

<a href=”#close” class=”cartodb-popup-close-button close”>x</a>

<div class=”cartodb-popup-header”>

<h1>{{volcano_name}}</h1>

<span class=”separator”></span>

</div>

<div class=”cartodb-popup-content-wrapper”>

<div class=”cartodb-popup-content”>

<p><strong>{{volcano_name}}</strong> last erupted in <strong>{{last_known_eruption}}</strong>.</p>

<h4>Region</h4>

<p>{{subregion}}</p>

<h4>Explosivity</h4>

<p>VEI {{vei}}</p>

<h4>Volcano type</h4>

<p>{{primary_volcano_type}}</p>

<h4>Main rock type</h4>

<p>{{dominant_rock_type}}</p>

<h4>tectonic setting</h4>

<p>{{tectonic_setting}}</p>

<h4>eruption category</h4>

<p>{{eruption_category}}</p>

</div>

</div>

<div class=”cartodb-popup-tip-container”>

</div>

</div>

Click Apply, and see what happens when you click the volcanoes on the map now. A big window with information from both our original datasets table appears.

 

Adding the plate boundaries

Almost there. One of things we want to be able to show is that the volcanoes are close to tectonic plate boundaries, so we need to show them on the map too. To do that, we’re going to need to add our third dataset as a new layer.

Click the blue Add layer text at the top of the grey sidebar, and choose our boundaries file from the dropdown menu. Click add layer.

At this point, CartoDB will ask you to save the map. Remember, the name you give it will be public!

Once you’ve saved it, your tectonic boundaries will appear. Ta-da.

 

Finishing touches

To finish it off, use the Add element button in the top left to give you map a title and add any annotations you want.

 

Share your map

That’s it, you’re all done! You can use the Export image button in the top bar to capture a still image of your map, or if you want to embed it in a website or send someone a link so they can play with it interactively then click Share in the top right corner.