Add hillshading
This example adds raster hillshading to a map by adding the Mapbox Terrain-DEM raster tileset as a raster-dem source with a hillshade layer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add hillshading</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.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',
// The Mapbox Light style doesn't contain hillshading.
// You could also add it in Mapbox Studio.
style: 'mapbox://styles/mapbox/light-v11',
center: [-119.55, 37.71],
zoom: 9
});
map.on('load', () => {
map.addSource('dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1'
});
map.addLayer(
{
'id': 'hillshading',
'source': 'dem',
'type': 'hillshade'
},
// Insert below land-structure-polygon layer,
// where hillshading sits in the Mapbox Streets style.
'land-structure-polygon'
);
});
</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: mapContainerRef.current,
style: 'mapbox://styles/mapbox/light-v11',
center: [-119.55, 37.71],
zoom: 9
});
mapRef.current.on('load', () => {
mapRef.current.addSource('dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
});
mapRef.current.addLayer(
{
id: 'hillshading',
source: 'dem',
type: 'hillshade'
},
'land-structure-polygon'
);
});
return () => {
mapRef.current.remove();
};
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }} />;
};
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?