Add flyover to any app with Mapbox GL Director

Drew Bollinger
Development Seed
Published in
2 min readDec 8, 2020

Today, we are launching Mapbox GL Director, an interface to generate terrain flyovers for apps and websites. With Mapbox GL Director, set up a sequence of shots like in a video editing suite. Mapbox GL Director then generates code to paste into an application to create 3D flyovers. The tool is built on the new Mapbox GL JS SDK, using the Camera API, that just launched this morning, and leverages 3D rendering improvements in Mapbox GL JS v2 and the new Mapbox Sky API.

Build this…

An animated 3d map showing a simulated flyover above the Ethiopian Highlands
Ethiopian Highlands

… using this.

A demonstration of a web graphic user interface for creating 3d simulated flyovers

Flyovers and 3D maps provide context and perspective, especially when terrain is part of the story. By following a GPX trace, bring users along for an Iditarod, a dangerous border crossing, a hike along the PCT, or their afternoon run. In the next few weeks, a GPX trace plugin is coming to Mapbox GL Director. Sign up for updates.

A 3d map of Interlaken, Switzerland. The town sits in a valley, alongside a blue lake
Interlaken, Switzerland

Terrain Plus Data

Overlaying data unlocks powerful new insights: landslide risk, microclimate zones, wildlife habitat range, solar mini-grid proposals, and more. In the coming weeks, there will be new features to overlay, combine, and style data directly within Mapbox GL Director. Sign up for updates.

A 3d map showing nighttime light output over Accra, Ghana
Nightlights over Accra, Ghana. Source: VIIRS/NOAA

Build better together

The code behind Mapbox GL director is open source under an MIT license. You can contribute to the project or file bugs and feature requests on GitHub.

--

--

Drew Bollinger
Development Seed

open data, satellite imagery, JS, python, ML @developmentseed