Raw HTML of blog post re: Buffalo Tinting

index.html

Since the ancient days - well, since late 1993 or so - production cartographers have been been stuck in an awkward technical limbo between GIS and art. <a href="http://www.gsd.harvard.edu/gis/manual/illustrator/index.htm" target="_blank">Two platforms</a> were required to get a map from vector geoprocessing to publication-quality graphics: Mostly ESRI's ArcGIS for the former and mostly Adobe's Creative Suite for the latter. Sure the two tried to overlap each other as time went on ("Seven hours to export a 900dpi TIFF and I can still see the pixels? Thanks ArcMap!"), but the basic math was tough to overcome: with finite memory on a workstation, ArcGIS focuses its resources on geoprocessing at the expense of the graphic outputs, and vice-versa.<br />
<br />
This was the way of it when I started mapping. And the classic example of "You can't do that in GIS" is the buffalo tint <a href="http://maps.nationalgeographic.com/maps/print-collection/sagarmatha-national-park-map.html" target="_blank">popularized and used to wicked effect by National Geographic Maps</a>.&nbsp;Basically it's a targeted feature fade, meant to draw attention to a focal point or to one side of a divide. And pretty hot too.<br />
<br />
And it's not really possible in ArcMap. Here, let's try doing the inverse of a fade, which is easier to envision. This is more of a halo, and it's theoretically possible to do this by adding line layer after line layer, each offset and transparent-ed a bit more than the last:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-ZIOo5OTngns/UEpj0hfxz6I/AAAAAAAAUvo/vQWnJqtPp3Y/s1600/buffalo3b.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="441" src="http://3.bp.blogspot.com/-ZIOo5OTngns/UEpj0hfxz6I/AAAAAAAAUvo/vQWnJqtPp3Y/s640/buffalo3b.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Buffalo Halo a la ArcMap</td></tr>
</tbody></table>
Not too shabby, I suppose. A fade out from a clear focal feature. Maybe a bit heavy-handed, but it gets the message across. Too bad it took 30 minutes of clicking into <i>five successive sub-menus on each of ten layers </i>to get it done. And since ArcMap isn't a graphic engine, there's no anti-aliasing, and pixels are visible in every feature. This is not a production-quality graphic.<br />
<br />
Let's try that again with <a href="http://mapbox.com/tilemill/" target="_blank">Tilemill</a>. I know I know, it's not a GIS engine, but it's a lot closer to one than Adobe Illustrator is, <a href="http://layersmagazine.com/mapublisher-8-1.html" target="_blank">try as they might</a>. Tilemill has full support for operations like selecting and styling by attributes as well as basic geoprocessing if the data is tied to a source like PostGIS, Google's data API or CartoDB's SQL API. Also it's free and open-source (I love that such news is ancillary to my point here. Woot!). As <a href="http://geosprocket.blogspot.com/2012/08/data-driven-symbology-in-carto_7.html" target="_blank">I've mentioned before</a>, Tilemill brings the efficiency of CSS code to the map styling process, and it pushes everything through the sophisticated Mapnik graphic driver to look damn pretty for web or print.<br />
<br />
Code will save us, right? Here, check it out:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-yPcQsR3_wzk/UEqbw4yz58I/AAAAAAAAUw4/wgXbRvyCf1c/s1600/buffalo1d.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="416" src="http://4.bp.blogspot.com/-yPcQsR3_wzk/UEqbw4yz58I/AAAAAAAAUw4/wgXbRvyCf1c/s640/buffalo1d.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Buffalo Halo a la Tilemill</td></tr>
</tbody></table>
This is a more subtle effect, with no striping artifacts, and all the linework is anti-aliased for smoothness. Bonus points for also providing<a href="http://a.tiles.mapbox.com/v3/landplanner.buffalo2.html#5.00/7.320/31.330" target="_blank"> an interactive output</a>&nbsp;where the halo&nbsp;scales dynamically.<br />
<br />
So what kind of <a href="http://mapbox.com/tilemill/docs/manual/carto/" target="_blank">Carto CSS</a> went into that? Oh, just <i><a href="https://gist.github.com/3668668" target="_blank">more than three hundred lines</a> of recursively offset style code.</i>&nbsp;Oy. It's true that it's portable (feel free to plug the code into your own project), but it's not ideal. Definitely not for fast projects under a deadline.<br />
<br />
This is where compositing comes in. Last month, the indefatigable Mapnik team added support for <a href="http://www.imagemagick.org/Usage/compose/" target="_blank">the graphical magic</a> that underpins programs like illustrator. This is part <a href="http://mapnik.org/news/2012/08/27/stamen-compositing-mapnik-v2.1/" target="_blank">of a long-running effort</a> by cartographic designers at <a href="http://stamen.com/" target="_blank">Stamen</a> and <a href="http://developmentseed.org/" target="_blank">Development Seed</a> to get out from under the Iron Adobe boot. (or the supple&nbsp;<a href="http://www.gimp.org/" target="_blank">GIMP</a>&nbsp;moccasin, I suppose). With compositing, all sorts of things become a lot easier to do in Tilemill, for instance what we've been trying above is now <a href="https://gist.github.com/3671174" target="_blank">about 30 lines of CartoCSS</a>, and much richer:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-W-SWJ99KQJg/UEqfGPINr4I/AAAAAAAAUxM/5EQ5232aDUk/s1600/buffalo1e.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="512" src="http://4.bp.blogspot.com/-W-SWJ99KQJg/UEqfGPINr4I/AAAAAAAAUxM/5EQ5232aDUk/s640/buffalo1e.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Buffalo Halo with Mapnik Compositing Mojo in Tilemill</td></tr>
</tbody></table>
The possibilities are sort of mind-boggling, and I invite all the actual graphic designers of the world to figure them out (The composite parameter alone in CartoCSS has 35 options). In the meantime I'll continue to look for ways to enhance my mapping toolkit; the next post will focus on reversing the direction of this effect, like in the NatGeo example linked above.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-laBnsvHnyuw/UEqkp2OD5yI/AAAAAAAAUxg/XzqfW5rlmt8/s1600/buffalo4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="481" src="http://1.bp.blogspot.com/-laBnsvHnyuw/UEqkp2OD5yI/AAAAAAAAUxg/XzqfW5rlmt8/s640/buffalo4.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Free-Range Buffalo Halo, Thriving in its Natural Environment.</td></tr>
</tbody></table>
<br />
<br />