Mapbox builds the full mapping stack: collecting geographic data, cutting it into vector tiles, and rendering maps on many platforms. But it’s important that workflows can leverage our individual tools as well.

By bringing Mapbox’s satellite and elevation tiles into Three.js – a popular Javascript framework for WebGL –

I was able to drape the imagery over the extruded terrain and make a fully interactive 3D map to explore mountains and valleys around the world. Check it out here!

Ayers Rock

3D Map of rocks

Løkvollen, Norway

Icy elevation

Mt. St. Helens

3D map

Unlike similar experiments, this is not limited to pre-rendered scenes but is a true slippy map that loads new tiles as you move around. Three.js provides handy geometric primitives and interaction handlers that greatly simplifies this integration.

How we made the map

By decoding Mapbox elevation tiles from RGB values to height in meters, we can generate a grid of elevation corresponding to every pixel in the tile.

Stages of creating elevation maps

Left to right: terrain-rgb tile, Three.js plane geometry, mesh with satellite imagery draped atop.

Three.js makes it easy to generate arbitrary 3D shapes in WebGL. By feeding our elevations into a THREE.PlaneGeometry object, we make a three-dimensional, skeletal bump map of our tile.

Next we retrieve the corresponding satellite imagery for the tile we’ve chosen and use Three’s texture loader to drape it onto our previous mesh. This way we create terrain with realistic contours and shading.

We’re only scratching the surface of what’s possible with Mapbox data and third-party libraries. Stay tuned for similar experiments with Unity in the coming days, and let us know what you’ve made!