Do Cartography With This One Weird Tool

Posted by G.P. in Workflow on June 26, 2017

It’s about time I wrote another post. This one is sure to excite.
 
Today I’ve been musing about the strange tools we GIS people use during the course of our daily work. For example, I’ve been using Google Drawings* to paste screenshots, crop them to 200 x 133 pixels, and add them to AGOL as thumbnails. My client’s public facing layers and webmaps weren’t looking too good in searches because the thumbnails were the basic defaults. Here’s some of the results:
 
beforeafter
 
Google Drawings is super easy for this basic task for various reasons including the fact that snapping to page edges is built-in. Using a product like Inkscape gives you a lot more functionality, but each thing needs to be set ahead of time, such as the proper snapping, so more basic tasks are done more quickly using simpler software like this. I suppose the danger there is using the wrong tool solely because other software is harder to use. In the beginning of my career I was certainly guilty of using Power Point for quick image manipulation, which in retrospect was not really the best choice. (Understatement.)
 
Speaking of thumbnail images, it seems that making them look good is one of those newer type of things that GIS people need to have in their designer toolkit. We didn’t really need to create thumbnails 5 or 10 years ago but now, with most of our layers and maps online, it makes sense to use them as clickable entryways into our content. Not to mention we might use thumbnails for social media posts as well. I did find a short tutorial on thumbnail making from Esri for those seeking a little more help in this area.
 
Another designer-y skill that is new and goes along these lines is gif making. A lot of the most shared maps on social media are animated gifs of change over time such as:


By the way, who hasn’t made a map of U.S. territorial expansion? Here’s one I made for a U.S. history textbook years ago. It’s not an animated gif. :(
 
TerritorialExpansionColor2
 
Without a doubt I need to get on the animated map gif bandwagon but I haven’t yet. What are the tools that you use for this? Tips appreciated via twitter/comments, thanks!
 
Related twitter poll:
 

 

*Not to be confused with the amazing new Quick, Draw! thing that @geospacedman pointed out this morning (warning, addictive).

2 Comments

Creating a new Hot OSM map

Posted by G.P. in Web Maps on April 27, 2017

 
Using Tegola and Tegola-OSM I’ve been working on approximating the HOT OSM map style in Mapbox GL. Using the handy CartoCSS available for this style, by-eye comparisons with the raster tile map, and personal interpretation for the 3d building elements, we’ve got this going:
 
nyc2

 

View the demo live here. It’ll be a bit slow and not so great at zoom 4, but we are working on that. I mean, it’s the OSM data of the entire world styled at all zoom levels (plus a bit of natural earth data for admin boundaries and more to come) so there’s a huge amount of data to work with here and lots of things to work out to get right.

If you aren’t familiar with vector tile maps, note that you can shift the pitch (tilt) via Ctrl + left-click + drag. That’s something that we cartographic consultants need to start teaching our clients. Also, different parts of the GL spec are operational on desktop vs iOS vs Android so depending on your device your results will vary a bit at this time.

Maputnik, for the most part, makes it “easy” to style a map as long as you have an endpoint like Tegola serving up some good data (the Tegola endpoint is still very much under development and is undergoing some optimizations and doesn’t have every single map item we’d like to have quite yet).

I say “easy” in quotes because as with everything there is still a learning curve and, as with everything, it is still under development as well. There are a few things that have to be added to the style.json by hand so anything beyond its interface capabilities will require knowledge of json.

Like the data-driven styling on the buildings in this map. You can see an example of that in the image above where the hospital building (type=hospital) is a bit reddish compared to the other buildings. In Maputnik this style still looks like all the buildings except the hospitals and schools are black whereas live it looks the way it is supposed to. Thus I await with eagerness the incorporation of all the cool new things available in the GL spec. :)

Here’s that bit of code for the building tilt data-driven styling. You can see the “default” property isn’t used and instead, mysteriously, the empty quote does the job for providing the default gray color.

codesnip

 

One of the more interesting style choices that came up was where to put the road labels. Google maps puts road labels above 3d buildings when you view on your mobile device and tilt (two finger swipe). This might be ideal for a small amount of screen real estate when you’re using the map for navigation but I think that on larger screens and with different map purposes the street labels can look cleaner when they are beneath the 3d buildings. Take a look at this thread for some opinions on this:

 


 
 

————————————————————————————————————

No Comments

Map Take-Aways

Posted by G.P. in Best Practices on April 20, 2017

One key to cartographic success is employing a deft mixture of subtle and forthright elements in order to achieve that most difficult of harmonizations: effortless yet highly informative communication. Here’s an example that came up in my twitter thread just a few moments ago:

Here we see several elements that help to achieve the right balance:

  • Masked basemap: focuses reader attention on the area of interest while also providing geographic context.
  • Gray titling: “DISTRICT OF COLUMBIA” is in a light gray color, which minimizes its appearance despite its being diffused across the legend box. You see this often with titles in all-caps.
  • Black titling: “LAND USE PLAN” is what the map author really wants you to read first, so this is both in black and all-caps.
  • Legend box in light gray: since the light-gray text elements could blend with the light-gray masked basemap, the legend box is needed in this case, but it is kept subtle.
  • Bold colors for the landuses: landuse plan maps are notorious for their cartographic difficulty in that the combination of landuses and basemap information can make for an entirely cluttered aesthetic. Making the landuses the number one focus point was a good idea for this map.
  • Polygon boundary colors in slightly darker shades: slightly darker polygon boundaries in the same hue as the polygons helps to define the boundaries of the polygons while not overwhelming the map. Black boundaries on all polygons would not have served well here.

1 Comment

A New Kind of Directional Icon

Posted by G.P. in Design on March 26, 2017

Maps that use projections in which North is only constant along meridians are disingenuous when it comes to their north arrows and scale bars, since both scale and North vary depending on where they are on the map. On large scale maps this matters very little. On medium and small scale maps, however, this matters a lot. The typical solution for the directional indicator is to display graticule lines instead of a north arrow. There are some potential solutions for scale bars, too, but I will focus only on the directional indicators in this post.

The problem with using graticules is that they can clutter up the map unnecessarily. You can seek to minimize that clutter by using thin gray line symbology. In this example, you see how a thin gray graticule looks. Also notice that the north arrow that I’ve placed here solely for purposes of illustration is definitely erroneous for most parts of this map.

Graticules and north arrow

You can go a step further and run the graticule lines only over the portions of the map that aren’t as important: the oceans, for example. That isn’t always possible, especially for those of us who make extensive use of single-layer basemaps such as that shown above, where there is no way to place the graticule layer between the oceans and the land. In this particular example it wouldn’t much help to run the graticules solely over the ocean area anyway, since there is too little ocean area compared to the land area and therefore only a single meridian line would be visible.

In no way is a graticule grid covering this entire map a bad thing. But what if there might be another option to consider on maps that have a lot more information?

What if we made an icon out of the graticule grid to illustrate the directions, placed in a corner of the map just as we would have done with a north arrow if it had been an equirectangular projection? An illustration of this is probably the best way to explain it:

Map with graticule icon

Zooming in to the lower-right corner of the map:

Graticule icon zoomed in

To create this–and here I’m using ArcMap but it should be a very similar process in your GIS of choice–I created a new polygon data layer and edited it such that it contained one polygon of the extent of the map. This was pasted into a new data frame and that new data frame was set to the same projection as the first, then this data frame was zoomed to the extent of the new polygon layer. Now they both show the same exact location.

The new data frame needs to have the same height/width ratio as the main data frame so that the exact same graticules will show up in your graticule icon that would have shown up on the map itself had you placed them there. In this case the main page is 8.5 by 11 inches, so the secondary data frame is .77 by 1 inch.

The graticules, from Natural Earth data, are placed in this data frame and styled as thin gray lines, and the data frame is placed in the corner of the map along with the cardinal direction indicators in a nice serif font with matching gray font color.

As a side note, if anyone has seen this technique on any other existing maps please let me know as I have not yet come across it, and I would edit the “new” out of the title of this post accordingly.

2 Comments

Posted by G.P. in Design, Web Maps on January 6, 2017

I’ve been using a new vector tile style editor to create some maps. The editor is called Maputnik and is still in early development, but it is usable even at this early stage. I’m really impressed with how much of the mapbox gl js spec has been implemented and the multitude of complex tasks that it makes easy.

Here’s a couple of screenshots from a style I’m working on called Camo:

screenshot1 screenshot2

No Comments

Happy Holidays

Posted by G.P. in News on December 8, 2016

books2

No Comments