At EcoHackNYC last weekend, I spent a lot of time talking with fantastic people about publishing maps from raster data using TileMill. A great post from NASA’s Earth Observatory on a new dataset inspired to make my own visualization of global forest heights, and I wanted to capture the process of working with raster data in TileMill.

Funky blue-to-fusia colors dramatically expose clear patterns of deforestation visible throughout the Amazon near Rodonia.

Raster mapping with open source tools

The high-resolution (1km) data is available for download from the project’s website. You’ll notice that it’s saved as a geotiff, an open [raster](( format for geo-referenced images. A variety of open source tools exist for processing raster data. I used QuantumGIS to open the image and start styling. Once colors have been decided, GDAL allows you to burn your new color ramp into your image. After saving, use TileMill to bake your map to mbtiles and upload it to MapBox Hosting.

Picking out colors in QuantumGIS

After selecting the ‘style’ tab in the properties pane, set the Colormap drop down menu to ‘ColorMap’.


Now head over to the ColorMap tab. Set the ‘Number of Entries’ field to 5, and hit classify. This will classify your data five into equal intervals.


QGIS should default to a pretty ridiculous blue-to-red color ramp. You can edit the colors by clicking on them directly, or by specifying a pre-determined ramp from the drop down menu.


Using GDAL to color your raster data

Once you’ve picked out a color ramp you like, it’s time to use GDAL to permanently re-color your image. Grab the RGB values from the color picker, pictured above, and copy them into a .txt file with your favorite text editor. The first column will need to be your data values from qgis, followed by the red, green, and blue values, each separated by a tab. No need for column header. Here’s the ramp I used.

0   0   0   0
18.25   0   17  73
36.5    84  0   167
54.7    186 0   219
65  255 4   248

I tweaked the data values to exaggerate the color ramp, but the differences should be minor. Save the file as simard-forest-ramp.txt. Now you can run the following command from your command line:

gdaldem color-relief ~/<path-to>/Simard_Pinto_3DGlobalVeg_JGR.tif simard-forest-ramp.txt output-forest.tif


Open a new project in TileMill and load your .tiff as a new layer. Get rid of the #countries layer, and change the map background so that your Carto looks like this:

Map { background-color: #000}

#simardforests {
  raster-scaling: bilinear;

Your map should appear. Just hit upload in the export menu to start sharing your map online. Read our documentation for more info on reprojecting geotiffs and working with terrain data. If you want more inspiration, check out some of previous work like AJ’s map of gridded population density

Thanks to Javier and the Vizzuality team for putting on EcoHackNYC. It was great to see so many highly motivated scientists, designers, data analysts, and hardware hackers come together to hack on some of the most compelling new technologies being used to address environmental problems. Among the highlights were csabuilder, a tool to crowdsource interest in Community Supported Agriculture, and new balloons for The Public Laboratory’s balloon mapping kit. One of the most impressive projects was Species Sphere, an interactive visualization of the international trade in wildlife built with CartoDB and d3.js put together in only eight hours. Check out Vizzuality’s blog for a full recap.