«
»

Creating a new Hot OSM map


 
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:

 


 
 

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

This entry was posted on April 27, 2017, 7:42 am and is filed under Web Maps. You can follow any responses to this entry through RSS 2.0. Both comments and pings are currently closed.

Comments are closed.