Tuesday, November 10, 2015

London in 3D

The Berliner Morgenpost's Berlin's neue Skyline is one of my favorite maps of 2015 - so far. Webkid has now posted a brilliant tutorial on how the map was made. Interactive 3D Maps With OSMBuildings provides a great walk-through of how the map was made and all the code that you need to create your own 3D map.

At the heart of Berlin's neue Skyline is 3d building data from OSM Buildings. Webkid's tutorial shows how you can use Tween.js to animate between different 3D buildings on the map.

Using Webkid's tutorial I created my own 3D Map of London in less than an hour. This map is only a quick test to see if I could follow Webkid's walk-through. It isn't meant to be a serious guide to London.

I added waypoints.js to Webkid's code so that I could create a story map, similar to the map in the Berliner Morgenpost map. Just scroll down the page to watch the Tween,js animations between the different 3d buildings.

No comments: