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!
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.
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!