Archive for April, 2017

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