Add 3D terrain to a map
This example adds 3D terrain to a map using setTerrain with a raster-dem source.
It uses exaggeration to exaggerate the height of the terrain.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add 3D terrain to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
zoom: 14,
center: [-114.26608, 32.7213],
pitch: 80,
bearing: 41,
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-streets-v12'
});
map.on('style.load', () => {
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
'tileSize': 512,
'maxzoom': 14
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
});
</script>
</body>
</html>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: 'map',
zoom: 14,
center: [-114.26608, 32.7213],
pitch: 80,
bearing: 41,
style: 'mapbox://styles/mapbox/satellite-streets-v12'
});
mapRef.current.on('style.load', () => {
mapRef.current.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxzoom: 14
});
mapRef.current.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
});
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.More Examples
View some examples of our other style features here:
EXAMPLE
Rain Example Mapbox GL JS
This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.
EXAMPLE
Snow Example Mapbox GL JS
This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.
Was this example helpful?