Skip to main content

Add a new layer to a slot

plus
This feature is available in the Mapbox GL JS v3

Learn how to migrate to Mapbox GL JS v3

This example uses a new slot property to add a layer to a predetermined location in the Standard style. Set the preferred slot on the Layer object before adding it to your map and your layer will be appropriately placed in the Standard style's layer stack.

SlotDescription
bottomAbove polygons (land, landuse, water, etc.)
middleAbove lines (roads, etc.) and behind 3D buildings
topAbove POI labels and behind Place and Transit labels. Note that the top slot is designed to be used with the symbol layers
not specifiedIf there is no identifier, the new layer will be placed above all existing layers in the style
book
Slots and performance-optimized layers reordering

During 3D globe and terrain rendering, GL JS aims to batch multiple layers together for optimal performance. This process might lead to a rearrangement of layers. Layers draped over globe and terrain, such as fill, line, background, hillshade, and raster, are rendered first. These layers are rendered underneath symbols, regardless of whether they are placed in the middle or top slots or without a designated slot.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a new layer to a slot</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.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',
// You can add layers to the predetermined slots within the Standard style basemap.
style: 'mapbox://styles/mapbox/standard',
center: [-74.0060152, 40.7127281],
zoom: 5,
maxZoom: 6
});

map.on('style.load', () => {
map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
});

map.addLayer({
'id': 'urban-areas-fill',
'type': 'fill',
// This property allows you to identify which `slot` in
// the Mapbox Standard your new layer should be placed in (`bottom`, `middle`, `top`).
'slot': 'middle',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
});
});
</script>

</body>
</html>
Was this example helpful?