Tuesday 5th January 2010

Hill-shading on OpenCycleMap.org

It was over 18 months ago that I was originally trying to get hill-shading and hill-colouring working on OpenCycleMap (in fact, it wasn’t even called that back then, but that’s a different story). I eventually dropped the hill-shading part of it due to nasty boundary artefacts between source tiles, and due to the fact that the shading, well, didn’t look as nice as I wanted. It was all a bit grey and manky.

Hill Shade Teaser

So instead I launched just the hill-colouring in August 2008, which I was very happy with, and put hill-shading on the back burner. Time passed. Much time.

A few weeks ago, I rolled up my sleeves and got stuck in to figuring out how to do the hillshading properly. With some pointers from Matt, Mike and the OSM Wiki, I played around for a few days until I liked the end result.
Hill Shading results

Here’s a look at Snowdon before hill-shading. The colours do a good job of showing the lie of the land, but it’s a bit flat:
Snowdon Before Shading
Detail:
Snowdon Before Shading (Detail)
And what Snowdon looks like now. The shading lifts the peaks out from the map, and gives them a more solid-object feel:
Snowdon After Shading
Detail:
Snowdon After Shading (Detail)
It really helps most in complex mountains, like here in the Alps, where the contours would otherwise become a jumble and it’s hard to tell valleys from ridges. With the shading, it’s easy.
Valleys in the Alps

It’s a hard balancing act, since OpenCycleMap is first and foremost a map for cyclists, and too much hill-shading overpowers and distracts from the rest of the map. But then again, too little and it doesn’t seem worth the effort! I went for a subtle approach, where it’s enough to make the hills stand out but little enough you might not consciously notice. Unfortunately the effect is diminished in forested areas, and by dense contours, since it’s only the background height colouring that is shaded and those things start obscuring stuff.

Also, I was never really happy with the “drab grey” approach to shading – just making the shadows grey and the highlights white using alpha-blending – so I settled in the end for “hardlight” compositing. It’s a bit like the evolution of GUI buttons from Windows 3.11 (”right, top and left edges are white, other two edges are black, grey in the middle”) with those from MacOSX (”ooh, shiny”). Compare OpenCycleMap to Google Terrain and other hill-shaded maps, and I’m quite proud of the results.

If you have a map project that could do with some good-looking terrain info, then I’m available for freelance work.

14 Comments »

  1. Beautiful – I love it ! The only thing I would still nitpick about it the positioning of the numerical elevation values : to enhance readability, maybe the algorithm could ensure separation and try positioning them on the least sloped side of the mountain.

    Comment by Jean-Marc Liotier — 5/1/2010 @ 4:59 pm

  2. This is awesome. Thanks for sharing the link, I will not tire posting it all over the place. We need more beautiful cartography like this.

    Comment by Arnulf Christl — 5/1/2010 @ 5:42 pm

  3. Beautiful. OCM is looking nicer and nicer. Any plans to add routing anytime soon?

    Comment by Bone — 5/1/2010 @ 5:56 pm

  4. @Bone: For UK routing, see http://www.cyclestreets.net/ (which uses OpenCycleMap as its cartography – thanks to Andy’s excellent work).

    Comment by Martin, CycleStreets — 5/1/2010 @ 7:57 pm

  5. Looks beautiful – thanks for all your hard work!

    Simon

    Comment by Simon Redding — 6/1/2010 @ 10:30 am

  6. I’ve got access to global routing services – it’s just the javascript that would take the time (not my favourite side of development). If anyone wants to try their hand at adding routing then let me know – otherwise it’ll stay on my todo list for a while.

    Comment by Andy — 6/1/2010 @ 11:04 am

  7. Wow, subtle and incredibly gorgeous!

    Comment by Michal Migurski — 7/1/2010 @ 8:01 pm

  8. publicity warning: http://wiki.openstreetmap.org/wiki/Featured_Images/Jan-Mar_2010#Week_2

    Comment by OJW — 9/1/2010 @ 1:57 am

  9. Lovely map – infact my favourite (hence my query) – Im soon to receive a Garmin 705 and wish to have such map on it – are your maps for the UK available to download for such device?

    Im yet to explore the Garmins full potential, but want to hit the ground running with a quality map.

    Others available like OpenMTBMap.org offer similar, but like the look for yours.

    I will be pointing my cycling friends to this site to view the map. thanks

    Comment by Ben — 9/1/2010 @ 8:19 pm

  10. Hi Ben – you can buy a microSD card with opencyclemap data preloaded at http://shop.opencyclemap.org/products/opencyclemap-gps-uk-ireland

    Comment by Andy — 11/1/2010 @ 4:31 pm

  11. Fantastic work, it is a really great enhancement to the NZ Southern Alps
    many thanks

    Comment by dave g — 17/1/2010 @ 11:06 am

  12. Great stuff – I think the shading is much more useful for hiking/cycling maps than the elevation coloring (and it doesn’t suffer from the problem of how to color different heights of the world consistently – think Alps vs. Himalayas).

    The best hillshading I’ve seen is by Eduard Imhof: http://butdoesitfloat.com/135873/Geovisualization-communicates-geospatial-information-in-ways-that
    Replicating his beautiful blue-tinted shades would be great. Something for me to think about for the new version of Kosmos ;)

    Comment by Igor Brejc — 18/1/2010 @ 6:38 pm

  13. Love the hill shading, but while admiring it in the lake district noticed that Derwent water isn’t showing up as a lake (blue). Just though you should know.

    Comment by Ian Newby — 19/1/2010 @ 12:48 am

  14. Thanks Ian. The problem with Derwent Water is a bug in the multipolygon handling, see http://trac.openstreetmap.org/ticket/1656

    Comment by Andy — 19/1/2010 @ 11:20 am

Leave a comment