February 04, 2014 / by John

Why You Should Love CartoCSS

My addiction to Geographic Information Systems began with cartography. The practice of good cartography speaks to me because it combines both art and science to relay a map’s meaning and purpose to the audience. With GIS moving to the cloud and the advent of web maps, all the traditional rules for cartography go out the window and you’re left with a whole new host of problems like load time and responsive layouts. For the past month I’ve been dedicating (too) many of my evenings to playing with a relatively new technique to stylize web maps, it’s an open source project by MapBox, and it’s called CartoCSS.

Quick Crash Course

Web maps are really images: whether you are making a map in ArcGIS Online, TileMill, or Google Maps, you are seeing PNG image files that are being generated by a renderer. TileMill is powered by a successful open source renderer project called Mapnik which provides the user with a number of fundamental styles for 10 different types of map symbolizers. These symbolizers provide different classifications of how points, polygons, and lines are drawn on a map:

  • Line (for lines & polygons)
  • Polygon (for polygons)
  • Point (for points)
  • Text (for points, lines, and polygons)
  • Shield (for points & lines)
  • Line Pattern (for lines & polygons)
  • Polygon Pattern (for polygons)
  • Raster (for rasters)
  • Markers (for points, lines, & polygons)
  • Buildings

Why This Matters

With CartoCSS, a designer can very easily associate styling with one of the 10 map symbolizer types that represent geometry, giving virtually full control of how every element is rendered for visualization. Map designers can now author not only their own base maps but also any type of layer added through TileMill. Users can apply cascading rules that enable layers to glow and even implement routine stylings to configure brightness, size, opacity, and data layer overlap. CartoCSS and TileMill are very well documented, making it fairly easy for users to get started.

Just to get the wheels turning I put together a very simple dot density map showing the hazardous waste sites in the Chesapeake Bay Watershed. On a watershed wide level, users can see the spatial distribution and “clustering” of these sites in metropolitan counties.

If you look closely, the styling or “style.mss” (see scary code below) for this map is very straight forward. All map layers such as the watershed outline, bay county boundaries, and hazardous waste sites are all present on the style sheet and are instantiated by a “#.” So for example the hazardous waste site layer is written as: #hazardouswastesites.

Next we can apply styling rules to each symbolizer in the layer. In the gist above we are representing our #hazardouswastesites as points that are glowing green. If you want to share a creation from TileMill you can easily set up a free MapBox account that will enable your map to be incorporated into websites and applications. With a bit of practice you’ll be able to build highly stylized maps in house and save organizational dollars on both map design and web application development, good luck and happy map making!

2014 Chesapeake Commons. All rights reserved.