> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Add a new layer to a slot
> **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/)
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 |
> **Note: 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.
> Example code:
**JavaScript**
```html
Add a new layer to a slot
```
**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,
style: 'mapbox://styles/mapbox/standard',
center: [-74.0060152, 40.7127281],
zoom: 5,
maxZoom: 6
});
mapRef.current.on('style.load', () => {
mapRef.current.addSource('urban-areas', {
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
});
mapRef.current.addLayer({
id: 'urban-areas-fill',
type: 'fill',
slot: 'middle',
source: 'urban-areas',
layout: {},
paint: {
'fill-color': '#f08',
'fill-opacity': 0.4
}
});
});
}, []);
return ;
};
export default MapboxExample;
```