Map Sandbox Project

A sandbox for designing and implementing comparative thematic maps.

Base Map

A base map is the canvas on which we will draw our geoanalytic visualizations. This post gives a brief summary of base map design using Mapbox.

Mapbox

In order to build a thematic map to visualize crime statistics and other neighborhood attributes, we’ll need a base map to provide the background context that shows basic geographical information like streets, buildings, parks, and waterways. In this project, we’ll tap into the powerful mapping tool Mapbox. It provides tools for styling and deploying maps that are based on OpenStreetMap data, with API’s allowing maps to be easily embedded in web pages and mobile apps.

The service operates under a freemium model, so you can sign up for free and get started immediately. Subscription rates are primarily based on map views, with the free plan allowing for 3000 views/month. They provide an online map editor for very basic features (e.g. choosing the colors of streets, land areas, waterways, etc) and a desktop app call Tilemill for advanced map design. So far the online editor has been sufficient for my needs, but it’s nice knowing the advanced customization capability is there if I need it.

Base map design

The base map is meant to provide a geographical context for the thematic data being visualized. The base map styling should be done using neutral colors and the features should be somewhat subdued because we’ll be adding colored features to this base layer that encode the statistics we’re interested in and we want those features to stand out.

A base map I designed using the Mapbox online editor.

Embedding a map

Mapbox provides a JavaScript library mapbox.js that is integrated with the leaflet.js library for building interactive maps. I’m a JavaScript newbie at the moment, so my coding is largely based on finding pre-existing examples to use as a starting point and then adding my own tweaks and customizations.

It’s straightforward to embed a map into a web page. First you need to add a reference to the library and the mapbox CSS in the <head> element:

1
2

<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet'/>

Somewhere in your html source, you also need to provide the actual JavaScript code that embeds the map into the correct element. The key mapbox function is L.mapbox.map(element_id, map_id, options), where element_id is the id of the html element and map_id is the unique identifier of your base map, e.g.:

1
2
3
4
5
6

<script type='text/javascript'>
    var map = L.mapbox.map('mbmap', 'jamieinfinity.g7e1c0h2', {
                scrollWheelZoom: false
              });
    map.setView(new L.LatLng(38.632, -90.24), 13);
</script>

Finally, wherever you want the map to appear in your content you’ll need to place the <div id='element_id'> tag. For the map above, this is:

1

<div style='height:360px' id='mbmap' class='mapboxmap'></div>