Mountains and cities in 3D.
Tilt the map and the mountains rise from the ground, while buildings stand up in the city. Terrain works with every map style, and the Scene3D control adds roof shapes, city models and trees.
Real places in 3D.
Three places as they look on a live Maptoolkit map, rendered from our own tiles.
Mountains in 3D
The Grossglockner and the Pasterze glacier on the Hiking style. The terrain comes from a detailed elevation model, so every ridge, valley and glacier sits where it really is.
Buildings in the city
The Palace of Westminster from the Thames on the Street style, with the roof shapes and trees of the Scene3D control.
Every map style in 3D
St. Anton am Arlberg on the Winter style, with its lifts. Terrain works with each standard style and with your own.
Elevation data: Mapterhorn.
Tilt and turn the map.
The same tiles and terrain as in the gallery, live. Switch between the mountains, a ski resort and Vienna with its city model, and look around.
The Zugspitze, the Ischgl ski area and Vienna
Drag with the right mouse button to tilt and turn
On a phone, use two fingers
On websites and in apps.
3D terrain and 3D buildings are separate features. Websites get both; apps on iOS and Android get the buildings as blocks.
Websites
MapLibre GL JS
Data visualizations
deck.gl
Apps on iOS and Android
MapLibre Native, Flutter, React Native
Flat map libraries
Leaflet, OpenLayers
Terrain and buildings in MapLibre.
Terrain is one elevation source you add to the map. Buildings are already in the vector tiles, and the Scene3D control adds their roof shapes and trees. Tilt the camera (pitch) to see both.
// Hiking style, tilted, with 3D terrain
const map = new maplibregl.Map({
container: "map",
style: "https://styles.maptoolkit.net/maptoolkit/maptoolkit.hiking.json?api_key=YOUR_API_KEY",
center: [12.694, 47.074], zoom: 12, pitch: 65,
});
map.on("load", () => {
map.addSource("terrain", {
type: "raster-dem",
url: "https://tiles.maptoolkit.net/terrainrgb.json?api_key=YOUR_API_KEY",
encoding: "terrarium",
});
map.setTerrain({ source: "terrain", exaggeration: 1.5 });
});Terrarium encoding
The elevation tiles use Terrarium encoding. Set encoding to terrarium, otherwise the heights come out wrong without an error.
Elevation data
From Mapterhorn: Copernicus 30 m worldwide plus national models, for example 1 m in Austria and Germany.
3D buildings
The Street and Summer styles draw the buildings as blocks. The Scene3D control adds roof shapes, official city models such as Vienna’s and 3D trees from zoom 15, with MapLibre GL JS 6.
Any style
Add the terrain source to any standard style or your own. Other styles get 3D buildings with one fill-extrusion layer, or with roof shapes through the 3D Layers plugin.
Native apps
MapLibre Native draws 3D buildings as blocks on iOS and Android, without roof shapes. It does not support terrain yet.
API key
Styles and terrain tiles need your API key (api_key), like every Maptoolkit request.
What you can build in 3D.
Three possible uses. The images are rendered from open data as an illustration.
Tour pages
Show a hiking route over the real terrain, so visitors see the climb before they set off.
Property search
A listing in its street, with the buildings around it at their real height.
City apps
Apps on iOS and Android show the buildings of the Street style in 3D.
Route in the first example: Maptoolkit Routing API, walking.
Questions about 3D maps.
Short answers on terrain height, building heights, contour lines, 3D models and your own data in 3D.
Are the mountains shown at their real height?
With an exaggeration of 1, yes. Exaggeration is a setting that scales the relief. Values above 1 make mountains easier to read on screen, but they also misrepresent the ground. That matters if people use the map to plan a hike or a climb rather than just to look around, so choose the value to fit what your map is for.
How accurate are the building heights?
Building heights come from OpenStreetMap. Where a building has a height tag, that value is used, rounded up to whole meters; without one, the height is estimated from the number of floors, or set to 6 meters. Where an official 3D city model exists, as in Vienna, the Scene3D control shows that model instead.
Can I show the shape of the mountains without tilting the map?
Yes. Contour lines and hillshading show the shape of the land on a flat map. Contour lines come as their own vector tiles, made from the same Mapterhorn elevation data as the 3D terrain, and several standard styles already draw them. You can add them to any style, along with a hillshading layer. As you zoom in, the contour lines get closer together.
Can I place my own 3D models on the map?
Yes. The 3D Layers plugin places glTF models, such as huts, lifts or vehicles, at the points of your own data, spaced along lines or spread over areas. On 3D terrain, the models sit on the ground instead of floating or sinking into the slope. For existing 3D Tiles datasets, such as photogrammetry captures, you can use the three.js library.
Can I show my own data in 3D, such as floor plans?
Yes. The same technique that raises buildings works on your own shapes. Give each area a height and a base height, and the map raises it into a block, so floors can stack on top of each other. With a color for each room type and a filter by level, you can build an indoor map that shows one floor at a time.
See your use case on a Maptoolkit map.
In the demo, one of our engineers walks you through the platform, your data and the move from your current provider.