> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Use a clip layer to remove rendered features from 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/ja/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 the 3D content from the Mapbox Standard style.
The `clip` layer is configured to remove certain features (from zoom level 16 and below) within the polygon shown in red.
Zoom out slightly and you will see the `clip` layer take effect and remove the buildings, trees and symbols.
> **Note: A few notes on clip layer**
>
> - It requires a `geojson` or vector `source`.
> - The `clip-layer-types` property can be used to configure it such that it also removes trees, wind turbines and symbols from the map.
> - It only removes content from layers that are located below it in the style layer stack.
> - It can be activated at a certain zoom range using layer `minzoom` and `maxzoom`.
> Example code:
**JavaScript**
```html
Use a clip layer to remove rendered features from 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: [-74.006292, 40.712666],
zoom: 16.2,
pitch: 40,
bearing: 53,
style: 'mapbox://styles/mapbox/standard',
minZoom: 15,
maxZoom: 17
});
mapRef.current.on('style.load', () => {
// 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: [
[
[-74.00618, 40.71406],
[-74.00703, 40.71307],
[-74.00787, 40.71206],
[-74.00766, 40.71176],
[-74.00624, 40.71204],
[-74.00487, 40.71252],
[-74.00421, 40.71315],
[-74.00618, 40.71406]
]
],
type: 'Polygon'
}
}
]
}
});
// add the clip layer and configure it to also remove symbols and trees.
// clipping becomes active from zoom level 16 and below.
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']
},
maxzoom: 16
});
// add a line layer to visualize the clipping region.
mapRef.current.addLayer({
id: 'eraser-debug',
type: 'line',
source: 'eraser',
paint: {
'line-color': 'rgba(255, 0, 0, 0.9)',
'line-dasharray': [0, 4, 3],
'line-width': 5
}
});
});
}, []);
return ;
};
export default MapboxExample;
```