So I’m going to do some writing on zoom-level design techniques or tactics for digital, interactive, mapping on devices. I figure this is one of the biggest issues we face as cartographers of digital map products so it merits quite a bit of in-depth instructional material. However, that kind of material hasn’t really been written up in a systematic way that I know of yet. We’ve got some guidance on it over at Mapbox (Styling for zoom levels) but not much else.

These are some of the topics that I think should be covered, but I am sure there are more:

• How to create and use a zoom field in your data. This would be a tutorial on, for example, showing only the larger cities at larger zoom levels and adding in smaller cities as the user zooms in. To do this you have to specify both the zoom level that the user has clicked on as well as specify what data to grab using the zoom field. So let’s say you have a zoom field in the data called “zoomlevel”, you’d have code that looks something like

  [zoom<8][zoomlevel=1] {styling for cities with zoomlevel of 1}

  [zoom>=8][zoomlevel=2]{styling for cities with zoomlevel of 2}

 

• How to incrementally change the styling based on the zoom level. So your line styling for road widths might increase by .5 at each  zoom level, for instance. Along with this is the idea of best practices. If you are using the same width for all road lines at zooms 3 through 5 you could just denote it in one line of code such as

  [zoom>=3][zoom<=5] { styling }

  This has the benefit of simplifying and lessening the length of your code. But it might be better to separate it out into different lines so that you can go back in and tweak the styling more easily (I prefer it this way as long as it doesn’t get too long):

  [zoom=3] { styling }

  [zoom=4] { styling }

  [zoom=5] { styling }

• I think there should be some tips on how to test as well. For example, I’ve found that testing figure-ground separators (land/water halos) at zooms 3 and 4 is easiest when looking at small islands, because then you can really see if you are completely obscuring the land or not with your halo. Other testing tips* might include making sure you pan around to find where the seams are in the tiles to ascertain whether or not labels are being cut off, and what to do if that occurs.

• Including a nice table on how zoom levels relate to map scale would be handy for the reader too.

• Guidelines on which common map features might be best to show at which zoom levels. Maybe this would also be a table that shows, for example, that local roads should show up at zooms 12 and higher. Of course, these would just be guidelines for those who need to construct quick maps, not standards to adhere to at all costs.

This is just a start. Please, if you have anything to add that will help those who are just beginning to create digital maps, things that you wish you had known from the get-go, let us know in the comments!

* Could be a whole chapter of itself. Especially if you open the can of worms called “unit testing for maps”. Which is sorely needed. Anyone having information on techniques for that or links for us please share.

A reader recently asked what he needs to know to be a digital cartographer. It’s a potentially complicated answer because there are a lot of emerging technologies in this space. What I might recommend now could be superseded by something else as soon as 6 months from now. Given that, I wouldn’t hard-code (so to speak) the advice that follows. Instead, keep your learning flexible and explore all paths that it leads you down. For now, here are some tools/technologies you can familiarize yourself with as you seek to become a digital cartographer extraordinaire.

Note that I’m not getting into a myriad of datasources and haven’t even touched on the design portion of cartography, which in no way diminishes the importance of those. Also note this is just one pathway of many possibilities.

The list is particularly heavy on OpenSreetMap but the associated tools are good to know regardless. A combination of these tools could be used in a classroom exercise. In no particular order:

• Cascading Style Sheets: CSS. Check out the w3schools tutorial* and the MapBox CartoCSS reference
• OpenStreetMap: OSM. Check out the map, go to the conference, look at how CartoCSS is used to style OSM road data in a map style called OSM Bright
• Structured Query Language: SQL. Check out the w3schools tutorial* and look at how SQL is used to query OSM data in a map style called OSM Bright
• Check out imposm, an importer for OpenStreetMap data
• Use TileMill to make your first map and serve it up with MapBox

*There is some controversy surrounding these tutorials. However, I’ve still found them to be useful. If you have alternative tutorial suggestions please post them in the comments.

There are three ways to control draw order in TileMill. You have to keep all three in mind when developing a map because they all work together to determine how the final product is going to look.

1. If you have multiple stylesheets, they render in the order in which you put them in the TileMill project.
2. Also, just as with regular CSS, the code at the bottom renders over the code at the top of each stylesheet. In cascadenik, if you want to case a road you can put all the code into one code block because cascadenik has outline, inline, and line properties whereas CartoCSS just has the line property. To do the same thing in CartoCSS you’d use multiple symbolizers. So you’d have road_fill::outline {code}, road_fill::line {code}, and road_fill::inline {code}, in that order so that the inline styles are drawn on top of the line styles, which are drawn on top of the outline style. That way you can have your thick outline (the road “casing”), with another color on top (the road line) and another thin color inside and on top (the road centerline, perhaps).
3. Don’t forget to also order the data in the layer list at the bottom-left, which I generally keep open during development. You order the layers by moving the mouse to the left of the layer name you want to move, waiting until it turns into a four direction arrow, then dragging it where you want it. The highest layer in the list renders over the layers below it. See below:

In this video, Emily Maitlis explains the history of elections in the United Kingdom via an amazingly intuitive map interface which happens to be displayed on a very large screen in a vertical orientation. The screen is oriented to match the geographic orientation. Genius? No. But would you have thought of it?

Also of great interest are the four large circular icons that she presses to change the map from one type to another. Time and again we see that users will click on large icons like those to switch map layers more readily than they will click check boxes on and off in more traditional layer switchers.

On the bottom of the screen is a timeline that the map user can also change. An excellent incorporation of an interactive fourth dimension.

Creating an equal-area map out of hexagons as an alternative to a simple choropleth of regions allows the map reader to focus on the population-weighted statistics rather than the area-weighted statistics since, in this case, the map data are population oriented, not area oriented (aka Modifiable Areal Unit Problem).

The whole thing, including Emily’s useful narrative, is amazing. Hat tip: @briantimoney.

When Franςois* claimed he had a TileMill – MapBox map up and running in 30 minutes, I had to try it out for myself. So, I spent a half day yesterday and a bit of time this morning downloading it, going through the tutorial, and then messing around with it. If you had just been trying to slap some simple point data on a map then you could have done it in close to 30 minutes for sure. For those users, the TileMill – Mapbox setup works quite well. However, I got immersed in trying to figure out as many of the capabilities as I could, so it took a bit longer. Oh, and there was also the slight problem with the export, explained below.

So first off, for those who don’t know, TileMill is an open source project by MapBox**. It allows you to upload your own spatial data, style it using CartoCSS, then export to formats like PDF, SVG, or upload straight to MapBox so that you can have MapBox serve it up for you in a dynamic webmap.

There are a lot of very enthused GIS folks who love TileMill for its great cartographic capabilities. I didn’t quite get to the point where I could enable a cool carto effect, but it does seem doable, maybe just not within a 30 minute learning time frame (or even a half-day time frame). In all, my experience was a good one, and I was sufficiently impressed to want to continue using it.

Some notes:

• If you want to do geographic manipulation to a dataset such as buffering, selecting by location, or other GIS tasks, you still have to use a GIS. TileMill is not a GIS.
• When you start a new project, the program asks you if you want to import their world dataset. This world dataset is great for small and medium scale maps. At a local, large-scale, it mocks me in cartoonish fashion. You will need your own background layer for large scale maps, or wait until you export it to MapBox, then add in their streets data (which is what I did).
• There are quirks you have to get used to just as in any program. Don’t let anyone say there isn’t a learning curve. There always is. For example, what’s the difference between “save” and “save&style”? Well, after some trial and error I realized that save&style adds the CartoCSS code to the stylesheet for you whereas “save” just adds a layer to the map without the corresponding code help.
• It still has some developer-speak in the text. For example, the Open Streets, DC example project states, “OpenStreetMap shapefile extracts provided by…” I believe the word “extracts” is meant just to show-off. But I nitpick. Similarly, it’ll help if you’re used to such language as this (found in the support area): “Does adding a ‘text-min-padding’ style to your text help out at all? I would start experimenting with values in the 10-50 range. This could also be coupled with a reduction in your buffer size.” So if you are used to point and click buttons in your GIS and you aren’t used to open source software, this will be a new way of talking, thinking, and writing for you. That’s okay. I’m just sayin’.
• The export dialog was telling me it would take 6 days to export my map. Thankfully, Dane Springmeyer (@springmeyer on twitter) pointed out that you have to set the maximum zoom level to something lower than the default of 22, with each lower zoom max representing a marked decrease in the number of tiles needing to be exported. When I lowered it to 12 it exported within a few seconds. Much better.

*In comments section of The TileMill Map Gallery post.

**It’s a mystery why the two aren’t integrated into one product.

Here’s my first mapping attempt. It uses the MapBox Streets background with colors changed somewhat, and some forest permit harvest data that I built for the Hood Canal Coordinating Council using existing state data and a custom algorithm for teasing out specific harvest areas by date. You can get information about individual harvests by hovering over the polygons. The dataset itself represents a large amount of effort in getting useable information out of a public dataset. It is nice to be able to show it off in webmap form. I can see a lot of other GIS analysts wanting to do this with their data quickly and easily.

Hover over the green polygons. These tooltips were a breeze to implement in TileMill.

There’s a lot of buzz surrounding the open source web mapping platform called TileMill, mainly for its massive map styling capabilities and apparent* ease of use. If nothing else, you at least have to visit their map gallery and browse some of the innovative mapping techniques on display.

Also, take a look at the help file Compositing Operations for a guide to all the ways that TileMill can change the textures and styles of your webmaps. Hat tip Bill Morris

Running Routes built with TileMill, by Tom MacWright

*I say “apparent” because I haven’t actually used it yet. But from what I can tell, it is easy in the sense that a lot of other webmap platforms are a bit difficult in comparison. That, of course, doesn’t mean that TileMill is easy when compared to, say, Illustrator or ArcGIS if drag-drop is what you’re used to.