Dynamic hill shading in the browser

November 04 2013 by Vladimir Agafonkin

What if the map on your iPhone was responsive, changing the shadows based on the time of day? We’re experimenting with this new level of customizable maps. From planning a hike at a particular time to having the map auto adjust as you walk — we’re playing with ways to dynamically adjust maps based on your environment.

Here’s one of our little experiments that demonstrates this — dynamic hillshading, created with the power of your browser. It allows you to instantly adjust the position of the Sun and other parameters that affect how the terrain is illuminated.

It’s a combination of focused technology — TileMill generates a map that encodes height into color, then Canvas interprets each tile and we dynamically compute shadows and highlights with Web Workers.