> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Use a clip layer to replace a landmark on the map
> **Note (new): 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](https://docs.mapbox.com/mapbox-gl-js/guides/migrate/)
> **Note (warning): 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](https://docs.mapbox.com/mapbox-gl-js/example/clip-layer/).
> Example code:
**JavaScript**
```html
Use a clip layer to replace a landmark on the map
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
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 ;
};
export default MapboxExample;
```