Mapping Hurricane Sandy

October 26 2012 by Ian Villeda

This post was updated on Monday, October 29 at 1pm

Every hurricane generates a pile of maps - but maybe you want your own to integreate into your website or just want to pass the time making maps. Here’s a quick run down on how you can build your own maps of Hurricane Sandy with open data from the National Hurricane Center (NHC) and open source tools.

Data

NHC provides the GIS data in four shapefiles that show you where the hurricane will likely have an impact at various points over the projection period. We used all four, but how you take advantage of the data is up to you.

  • al182012.024A_5day_pts.shp: points where the hurricane will be every 12 hours over the next 5 days
  • al182012.024A_5day_lin.shp: lines showing the projected path of the eye of the storm
  • al182012.024A_5day_pgn.shp: polygons for 3-day and 5-day projection cones
  • al182012.024A_5day_ww_wwlin.shp: lines depicting coastal areas under hurricane and tropical storm watches and warnings.

You’ll notice that the filenames change according the basin, storm, year, adivsory number, and shapefile. Knowing the file naming structure can help with quickly scripting updates and find the data you need quickly.

Design

I then pulled the data into TileMill for styling. TileMill consumes shapefiles natively and as NHC’s come in the right projection, no special processing was necessary. For more information, check out http://mapbox.com/help for documentation on using your data in TileMill.

I created two different instances of the polygon layer (‘red’ and ‘yellow’)apply different effects and incorporated features new in the latest version of TileMill. See the full CartoCSS I used here.

#red[FCSTPRD=72]{
  polygon-fill:#f00;
  polygon-opacity:.5;
  line-width:0;
  image-filters: agg-stack-blur(5,5);
  }

#yellow[FCSTPRD=120]{
  polygon-fill:#ff0;
  line-color:#f90;
  line-width:1;
  polygon-opacity:.25;
  line-dasharray:4,6;
  comp-op:src-out;
  }

For more about the new features available in TileMill >= 0.10.0, see AJ’s recent post on customizing the Geograhy Class project.

Publish

Once you’re done styling, you can upload your layers directly to your MapBox account and composite them with a custome MapBox Streets layer. Now you can quickly embed you map in your website or blog, or build custom web apps using our API.

A tile map of Hurricane Sandy as projected today. Tiles rendered with TileMill, composited on top of MapBox Streets.


Alex and I put together two different examples of how you can use open source tools and open data from the NHC to visualize Hurricane Sandy’s projected path over the next five days.

A vector map of Hurricane Sandy as projected today. GeoJSON rendered in-browser with Polymaps on top of MapBox Streets.

Alex took advantage of the open source ogr2ogr to convert NHC’s hurricane data shapefiles into GeoJSON and used Polymaps to render the data in-browser on top of MapBox Streets. Ogr2ogr and other GDAL tools provide a powerful command-line toolset to process geodata. Converting a shapefile to GeoJSON with ogr2ogr is simple:

ogr2ogr -f "GeoJSON" hurricane.json hurricane.shp

I took a different approach, using TileMill I created a map layer displaying the same data, but served as tiles that live on MapBox hosting.

All you need to start creating your own maps is TileMil and a free account from MapBox. You can find our the code for these examples including TileMill projects in the Github repository. We’d love to see your maps so tweet us @MapBox.