Saturday, January 16, 2021

Make Your Own 3D Animated Map

Mapbox GL Director is a useful and fun tool for creating custom 3D map animations with Mapbox's new impressive 3D terrain features. The tool provides a very easy to use interface for creating custom map animations with Mapbox's 3D terrain, sky and camera features.

Mapbox GL Director consists of an intuitive interface which allows you to choose any location on Earth as the basis of your map animation.You can then choose two different camera angles of your selected location and Mapbox GL Director will create the HTML code for an animated fly-by between your two camera angles.

Mapbox GL Director includes a number of options which allow you to change the appearance of your animated map. You can adjust the level of the terrain exaggeration (to make hills appear larger or smaller). You can also adjust the direction and angle of sun-light (to change the terrain shadows). 

When you have finished creating your 3D animated fly-by you can download or cut-and-paste the HTML code which will create your own animated Mapbox map. In order to publish this map you will need your own Mapbox account token and you will also need to host the map yourself.

Mapbox GL Director exports the HTML and JavaScript code for your created map. It is therefore perhaps most useful for people who are already familiar with creating maps with Mapbox GL and just want an easy interface for quickly creating animated 3D maps. I can't help thinking that there would be a very large market for a Mapbox GL Director wizard which included an option to export custom user created animated 3D scenes as animated GIF's.


Denko said...

Wow. Thanks for posting this, Keir - can't wait to try it. Regarding the animated gif angle, didn't you create one for this post? How did you manage to post the 3D zoom in on the Golden gate Bridge (spectacular, BTW).

Keir Clarke said...

@Denko - I actually cheated with that Golden Gate Bridge GIF. I 'borrowed' that GIF from a Tweet posted by the Mapbox Twitter account.

Keir Clarke said...

@Denko - If you want to create your own GIF you could screencast a map flyby (there are a few screencast Chrome extensions if you use the Chrome browser) and then use something like to convert the video to a GIF.