Use a clip layer to remove rendered features from 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 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.
A few notes on clip layer
- It requires a
geojsonor vectorsource. - The
clip-layer-typesproperty 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
minzoomandmaxzoom.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use a clip layer to remove rendered features from 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.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.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: [-74.006292, 40.712666],
zoom: 16.2,
pitch: 40,
bearing: 53,
style: 'mapbox://styles/mapbox/standard',
minZoom: 15,
maxZoom: 17
}));
map.on('style.load', () => {
// 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': [
[
[-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.
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']
},
'maxzoom': 16
});
// add a line layer to visualize the clipping region.
map.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
}
});
});
</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,
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 <div id="map" style={{ height: '100%' }} ref={mapContainerRef} />;
};
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.Was this example helpful?