Add a new layer to a slot | Mapbox GL JS

This feature is available in the 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.

Slot	Description
`bottom`	Above polygons (land, landuse, water, etc.)
`middle`	Above lines (roads, etc.) and behind 3D buildings
`top`	Above POI labels and behind Place and Transit labels. Note that the `top` slot is designed to be used with the `symbol` layers
not specified	If there is no identifier, the new layer will be placed above all existing layers in the style

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.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.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?