Maps With Public Data

I’ve been having a great time working with public data and maps lately. The main reason that it has been so much fun revolves around the specific technology stack I am using to design and present them.

A map of the Bay Area, California showing Zodiac case locations.

Zodiac: public data and mapping are on to you!

NOTE: This information is out of date and the embedded maps which used to exist here are now static screenshots.

The above screenshot shows one example of a San Francisco Bay Area map that I’ve been gradually working on as part of some map related research into providing a geographical context into a specific set of past events which occurred in that area (sorry for the vagueness).

I’ve been able to quickly create and present some visually interesting maps which convey useful data on a range of subjects using technologies from MapBox such as TileMill, TileStream, and Wax.

Here is a brief overview of the MapBox solution, and some of the maps I have recently created with it.

Think globally, map locally

As you’ll see, the following maps all center around my local area, and since I’m mostly experimenting with the technology right now, these maps are on random subjects, though I do strive to ensure they are accurate. Please tweet @brianshumate if you find any serious flaw, and I’ll do my best to fix it.

Longboarding spots in Boone, North Carolina

A map showing longboarding spots in Boone, North Carolina

Longboarding spots in Boone, North Carolina

I’d previously made some nice maps with longboarding spots I frequent in Boone, NC based on OpenStreetMap, so I thought I’d do something like that with the MapBox tools first.

It’s worth noting that what you see in the above map is not just a service that I am pointing to and dropping markers on. This map was designed using U.S. Census Bureau data combined with my own GeoJSON data and styling rules using TileMill to arrive at the look and feel it has, including the styling of land areas, roadways, water bodies, marker data, and legends.

The TileMill application is available for OS X or Linux. It has a most excellent and intuitive user interface and will quickly feel familiar to web folks.

A screenshot showing the Mapbox TileMill software graphical user interface

Mapbox TileMill GUI

The TileMill app (shown in screen shot above) has an excellent browser based user interface where you use the CSS-like language carto to define the styles for your map’s layers and data. There’s also a very handy carto reference built right into TileMill.

Carto is an advanced CSS like language with nesting, variables, and other cool features similar to CSS meta languages like LESS and SASS.

The MBTiles specification is an interesting new way to store map tilesets and their associated metadata in an SQLite database.

After designing the map in TileMill, I use its export features to generate a set of image tiles in a format (MBTiles that the TileStream tile server can serve up to any kind of web application or site imaginable. TileMill can also export your map creations as PNG or PDF images, too.

Finally, I use the Modest Maps and Wax libraries to stream the map tilesets from my TileStream server, and display them here as embedded interactive maps!

That’s also putting it quite modestly, indeed; you can do some seriously amazing things with this trio of technologies, and some solid JavaScript chops.

The Development Seed home page is a perfect example of the kinds of amazing map visualizations one can create with these tools.

Terrain visualization

A terrain visualization map of Watauga county, North Carolina

Terrain visualization map of Watauga county, North Carolina

For creating the terrain visualization in the above map screenshot, I consulted MapBox documentation on using GDAL DEM utilities and STRM image data: Terrain visualization with digital elevation models and GDAL.

This simple map is a proof of concept, and uses only one interactive layer, the names of Watauga county communities, which are displayed on mouse over.

I learned quickly from making maps like this one, that it is a very serious craft requiring one work with a blend of design concerns like color theory along with more nerdy pursuits, such as command line wrangling.

Note that I am not a Cartographer and I have a lot to learn about map making, but I’m looking forward to making even better and more visually interesting maps with these tools in the future.

Here are all of the Github repositories for the MapBox projects mentined in this post: Carto, TileMill, TileStream, Wax

As I previously mentioned, the documentation for all of Mapbox’s tools is great; it’s well written, and uses good examples. Further, the projects are all open source and accessible on Github.

Watauga County food service ratings

A map of Watauga county, North Carolina restaurants color coded by linked county food safety rating

Watauga county, North Carolina restaurants color coded by food safety rating

This map combines public health inspection data which is scraped and converted to GeoJSON for restaurants and other food service services with the restaurant locations color coded by rating.

You can hover over each point for the name of the location and the rating, and you can click to get a bit more information for a given location.

In summary

The data used for these maps comes from the following sources: 2009 TIGER/Line® Shapefiles, Watauga County Health Department, Shuttle Radar Topography Mission, and my phone’s GPS. :)

The MapBox stack is very well made open source software with great attention to detail, and the folks behind it are responsive, helpful, and friendly. I’m looking forward to making more awesome maps, and seeing where this solution goes.