Styling geodata in Mapbox Studio Classic

We’re currently working with a client in the broadcast radio industry and we wanted to illustrate their nationwide reach with radio stations across the country. So we created this map using data about FM radio stations and population density in the US. Let’s see how easy it can be to create an interesting map.

map-tutorial

 

What you’ll need:

A Mapbox account
Mapbox Studio Classic installed
Shapefiles with the data (Population density: public.zip, FM radio stations: fm.zip)

 

Mapbox and Mapbox Studio

For the uninitiated, Mapbox provides a service comparable to Google Maps with more features and flexibility. Mapbox Studio Classic is a desktop app that allows even more control over map styles and custom data. Mapbox Studio is becoming a web-based tool that’s currently in beta (hence the ‘Classic’ moniker on the desktop app).

 

Shapefiles

Shapefiles are a common format for geo data. The format actually consists of a collection of files, at least a .shp, .shx and a .dbf. It’s quite easy to find public data in shape file format just by searching the web.

 

1. Uploading the data

To start we need to get our data up on Mapbox. We’ll upload the zipped shapefiles is via the uploads section on mapbox.com. Once they’ve been processed you’ll see them in the Data section. Note the Map IDs with your username in them.

Screenshot 2015-11-17 11.19.36

 

2. Get the data into Mapbox Studio

Fire up Mapbox Studio Classic and create a new project. The ‘Basic’ starter style will work (we’ll hide it later anyhow).
Screenshot 2015-11-17 11.20.38

So we have a basic map going. On the right you’ll see some CSS-like code called CartoCSS. This is how we’ll style the map.

Screenshot 2015-11-17 11.42.27

Now lets add our data. On the left click ‘Layers’ and then ‘Change source’ This is where those Map IDs will come into play. Paste them next to mapbox.mapbox-streets-v5 separated by commas (no spaces) and click ‘Apply’

Screenshot 2015-11-17 12.24.46

Now you’ll see your data layers #public and #fm in with the other layers. You can also click them to see the data associated with them. However, you’ll notice the map hasn’t changed at all, that’s because we need to style the data.

Screenshot 2015-11-17 12.25.15

 

3. Style the data

Time to write some cartoCSS. Let’s get started by just making sure our data is there.
Add the following and save your project. (The map will update when you save.)

#fm {
  marker-width:2;
  marker-line-width:0;
  marker-fill:#64d500;
  marker-allow-overlap:true;
  marker-opacity:.5;
}

You should see markers for every FM radio station in the US now.

Screenshot 2015-11-17 14.47.33

Now for the real power of cartoCSS which is conditional styling based on data. Every radio station has a Class designation in the data. Some quick Googling shows that the different classes indicate different signal strengths. So we can make the higher power stations larger. With cartoCSS you can reference an piece of data by using brackets and even create conditional statements.

#fm {
  marker-width:2;
  marker-line-width:0;
  marker-fill:#64d500;
  marker-allow-overlap:true;
  marker-opacity:.5;
  [CLASS="A"] { marker-width: 2 }
  [CLASS="B1"] { marker-width: 2 }
  [CLASS="B"] { marker-width: 2.5 }
  [CLASS="C3"] { marker-width: 2 }
  [CLASS="C2"] { marker-width: 2.5 }
  [CLASS="C1"] { marker-width: 4 }
  [CLASS="C0"] { marker-width: 5.5 }
  [CLASS="C"] { marker-width: 7 }
}

So what we’re doing here is changing the marker width depending on what the ‘Class’ value is in the data.

Screenshot 2015-11-17 13.20.55

Now let’s style up the population density markers. If you view the data you’ll see this layer has specific population density values for major urban areas. So we can style the markers based on the population density.

#public {
  marker-width:[pop2010];
  marker-fill:transparent;
  marker-line-color:#64d500;
  marker-allow-overlap:true;
  marker-line-width: 3;
  marker-opacity:.5;
}

So that results in super huge circles all over the map. Luckily we can also do basic math in cartoCSS. Dividing by 150 should do the trick:

marker-width:[pop2010]/150;

Screenshot 2015-11-17 14.50.31

Looks great. let’s limit it to just the US. Each marker has a ‘country_is’ value. So if we only style markers where the value is USA we should get the result we want.

#public {
  [country_is="USA"] {
    marker-width:[pop2010]/150;
    marker-fill:transparent;
    marker-line-color:#64d500;
    marker-allow-overlap:true;
    marker-line-width: 3;
    marker-opacity:.5;
  }
}

Another cool thing we can do is change styles based on zoom levels. Those circles stay quite big when we zoom out, let’s add an adjustment:

[zoom<4] {marker-width:[pop2010]/250}

Now when the zoom level is less than 4 those circles will be smaller.
The next step is to remove the default map. Clear out all the styles except the ones we added and

Map { background-color: black; }

Screenshot 2015-11-17 13.55.33

 

4. Export

Awesome! Now we can export as a png with the export button in the upper right with options for zoom level and resolution.  Removing the map background-color style will also let us export as a transparent png.

So creating maps with real data like this one is actually quite simple and you can create an great looking map relatively quickly. Next time we’ll look at creating a similar map in the new web-based Mapbox Studio.

 

Philip Tadros - Founder
Family man, serial entrepreneur. Coffee and beer.