Let's Build a Map!

Sarah Frostenson
Twitter: @sfrostenson
Github: @sfrostenson
Slides: frostenson.com/talks/2015-03-nicar-mapbox

What is Mapbox?

A geographical baselayer...

What is Mapbox?

A geographical baselayer + DATA OVERLAY


  1. How to build a map in Mapbox Studio or Tile Mill.
  2. How to build the same map using Mapbox.js.

Step One: Does Your Data Have a Geographic Field?

You need some kind of geographic field in your data to join to a shapefile or generate geojson / topojson file, etc.

  • FIPS code
  • Latitude / Longitude coordinates
  • Or geocode your data. Checkout geomancer from the AP.

Data Formats Recognized by Mapbox Studio & Tile Mill

  • csv (must contain colums w/ lat/lon coordinates)
  • shapefile
  • GeoJSON
  • KML
  • GeoTIFF
  • SQLite or PostGIS

Our Data Story

  • Unemployment rates by county for 2013
  • Source: Bureau Labor of Statistics
  • Found the raw data from 2000-2013 in an Excel file at the USDA.
  • Yes, getting the raw data to unemployment.geojson takes a few steps.
  • But don't worry, I've outlined exactly how to do it w/ minimal pain involved here.

Let's Get Mapping!

But First, Beware!

While TileMill still works now, know that Mapbox aims to fully replace and improve upon TileMill with Mapbox Studio.

Method I: Mapping in Mapbox Studio

Step One: Import our GeoJSON and Upload Data

  1. Create a new project and select Blank source.
  2. Click New layer and import our data.
  3. Change your zoom level to see our data.
  4. Click anywhere on the map.
  5. Rename layer name unemployment. Save our project.
  6. Upload our data to Mapbox.com.
  7. Copy our data's Map Id.

Method I: Mapping in Mapbox Studio

Step Two: Style our data

  1. Select Projects and Styles (instead of Sources).
  2. Click on Layers and Change source to add our data's Map Id.
  3. Create a style sheet for our data.

Method I: Mapping in Mapbox Studio

Our CartoCSS styles

#unemployment {
    line-color: #a3a3a3;
  	line-width: 0.8;
  	polygon-opacity: 0.6;
  [unemploy_3 = -99] { polygon-fill: #a3a3a3; }
  [unemploy_3 >= 0.9][unemploy_3 <= 5.0] { polygon-fill: #edf8fb; }
  [unemploy_3 >= 5.1][unemploy_3 <= 6.3] { polygon-fill: #b3cde3; }
  [unemploy_3 >= 6.4][unemploy_3 <= 7.5] { polygon-fill: #8c96c6; }
  [unemploy_3 >= 7.6][unemploy_3 <= 9.2] { polygon-fill: #8856a7; }
  [unemploy_3 > 9.2] { polygon-fill: #810f7c; }

Method I: Mapping in Mapbox Studio

Adding Interactivity

  1. Close Mapbox Studio. Navigate to the folder where you saved your styles.
  2. Open project.yml.
  3. Change interactivity_layer: '' to interactivity_layer: unemployment
  4. Change template: '' to
    template: |-
      {{unemploy_1}}, {{unemploy_2}}
    Unemployment rate: {{unemploy_3}}

Method I: Mapping in Mapbox Studio

Upload Project

  1. Use unemployment-styles as name and upload to Mapbox.
  2. Go to your Mapbox.com account and check for project under Styles.

Method I: Mapping in Mapbox Studio

Building A Simple HTML page

Go to https://github.com/sfrostenson/talks/blob/tree/master/2015-03-nicar-mapbox/mbstudio-map/index.html

Got Map?

Tile Mill

Tile Mill Hover Data

So Why Not Use TileMill?

  1. First of all, you can. I've included a tutorial at the end of the slides in Resources.
  2. TileMill makes tiles. Mapbox Studio makes vectors. Vectors won't look fuzzy under high resolutions. Images will.
  3. You can't customize your baselayer in TileMill. But you can in Mapbox Studio.

Method II: Mapping using Mapbox.js

  1. Navigate to https://github.com/sfrostenson/talks/tree/master/2015-03-nicar-mapbox/mapboxjs-map
  2. Create a new folder separate from your Mapbox Studio work and download both index.html and unemployment.geojson (it's slightly different than what's on your computer.)

Method II: Mapping using Mapbox.js

Line 65 in index.html:

						var unemploymentLayer = L.geoJson(unemployData, { style: style, onEachFeature: onEachFeature }).addTo(map);

Variable in unemployment.geojson:

					var unemployData = {
    "features": [
            "geometry": {
                "coordinates": [

Method II: Mapping using Mapbox.js

Interactivity and Styles

var popup = L.popup();

unemploymentLayer.on('mouseover', function(e) {

unemploymentLayer.on('mouseout', function(e) {

Got Map?

PRO/CONS of Methods?

Mapbox Limitations?

Effective Uses of Mapbox