Use a clip layer to replace a landmark on the map
Upgrade to Mapbox GL JS v3
This feature is available in Mapbox GL JS v3. Learn how to migrate in our migrate to v3 guide
Experimental Feature
Note that this is an experimental feature which is under development and is subject to change.
This example uses clip layer to remove a 3D building from the Mapbox Standard style in a specific area. It then adds a custom building model in its place.
To learn more about clip layers, see the related example Use a clip layer to remove 3D content from the map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use a clip layer to replace a landmark on the 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.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.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 = (window.map = new mapboxgl.Map({
container: 'map',
center: [-0.126326, 51.533582],
zoom: 15.27,
pitch: 42,
bearing: -50,
style: 'mapbox://styles/mapbox/standard',
minZoom: 15,
maxZoom: 16
}));
map.on('style.load', () => {
// set the light preset to be in dusk mode.
map.setConfigProperty('basemap', 'lightPreset', 'dusk');
// add a geojson source with a polygon to be used in the clip layer.
map.addSource('eraser', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {},
'geometry': {
'coordinates': [
[
[-0.12573, 51.53222],
[-0.12458, 51.53219],
[-0.12358, 51.53492],
[-0.12701, 51.53391],
[-0.12573, 51.53222]
]
],
'type': 'Polygon'
}
}
]
}
});
// add a geojson source which specifies the custom model to be used by the model layer.
map.addSource('model', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {
'model-uri':
'https://docs.mapbox.com/mapbox-gl-js/assets/tower.glb'
},
'geometry': {
'coordinates': [-0.12501974, 51.5332374],
'type': 'Point'
}
}
});
// add the clip layer and configure it to also remove symbols and trees.
// `clip-layer-scope` layout property is used to specify that only models from the Mapbox Standard Style should be clipped.
// this will prevent the newly added model from getting clipped.
map.addLayer({
'id': 'eraser',
'type': 'clip',
'source': 'eraser',
'layout': {
// specify the layer types to be removed by this clip layer
'clip-layer-types': ['symbol', 'model'],
'clip-layer-scope': ['basemap']
}
});
// add the model layer and specify the appropriate `slot` to ensure the symbols are rendered correctly.
map.addLayer({
'id': 'tower',
'type': 'model',
'slot': 'middle',
'source': 'model',
'minzoom': 15,
'layout': {
'model-id': ['get', 'model-uri']
},
'paint': {
'model-opacity': 1,
'model-rotation': [0.0, 0.0, 35.0],
'model-scale': [0.8, 0.8, 1.2],
'model-color-mix-intensity': 0,
'model-cast-shadows': true,
'model-emissive-strength': 0.8
}
});
});
</script>
</body>
</html>
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(() => {
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
center: [-0.126326, 51.533582],
zoom: 15.27,
pitch: 42,
bearing: -50,
style: 'mapbox://styles/mapbox/standard',
minZoom: 15,
maxZoom: 16
});
mapRef.current.on('style.load', () => {
// set the light preset to be in dusk mode.
mapRef.current.setConfigProperty('basemap', 'lightPreset', 'dusk');
// add a geojson source with a polygon to be used in the clip layer.
mapRef.current.addSource('eraser', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [
[
[-0.12573, 51.53222],
[-0.12458, 51.53219],
[-0.12358, 51.53492],
[-0.12701, 51.53391],
[-0.12573, 51.53222]
]
],
type: 'Polygon'
}
}
]
}
});
// add a geojson source which specifies the custom model to be used by the model layer.
mapRef.current.addSource('model', {
type: 'geojson',
data: {
type: 'Feature',
properties: {
'model-uri': 'https://docs.mapbox.com/mapbox-gl-js/assets/tower.glb'
},
geometry: {
coordinates: [-0.12501974, 51.5332374],
type: 'Point'
}
}
});
// add the clip layer and configure it to also remove symbols and trees.
// `clip-layer-scope` layout property is used to specify that only models from the Mapbox Standard Style should be clipped.
// this will prevent the newly added model from getting clipped.
mapRef.current.addLayer({
id: 'eraser',
type: 'clip',
source: 'eraser',
layout: {
// specify the layer types to be removed by this clip layer
'clip-layer-types': ['symbol', 'model'],
'clip-layer-scope': ['basemap']
}
});
// add the model layer and specify the appropriate `slot` to ensure the symbols are rendered correctly.
mapRef.current.addLayer({
id: 'tower',
type: 'model',
slot: 'middle',
source: 'model',
minzoom: 15,
layout: {
'model-id': ['get', 'model-uri']
},
paint: {
'model-opacity': 1,
'model-rotation': [0.0, 0.0, 35.0],
'model-scale': [0.8, 0.8, 1.2],
'model-color-mix-intensity': 0,
'model-cast-shadows': true,
'model-emissive-strength': 0.8
}
});
});
}, []);
return <div id="map" style={{ height: '100%' }} ref={mapContainerRef} />;
};
export default MapboxExample;
Was this example helpful?