> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Show and hide layers
This example adds a clickable interface that allows a user to enable and disable two different map layers.
The interface uses [`setLayoutProperty`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setlayoutproperty) to toggle the value for each layer's [`visibility`](https://docs.mapbox.com/style-spec/reference/layers/) property between `visible` and `none`.
> Example code:
**JavaScript**
```html
Show and hide layers
```
**React**
```jsx
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const menuStyle = {
background: '#fff',
position: 'absolute',
zIndex: 1,
top: 10,
right: 10,
borderRadius: 3,
width: '120px',
border: '1px solid rgba(0, 0, 0, 0.4)',
fontFamily: "'Open Sans', sans-serif"
};
const menuItemStyle = {
fontSize: '13px',
color: '#404040',
display: 'block',
margin: '0',
padding: '10px',
textDecoration: 'none',
border: 'none',
textAlign: 'center',
cursor: 'pointer',
width: '100%'
};
const activeMenuItemStyle = {
backgroundColor: '#3887be',
color: '#ffffff'
};
const MapboxExample = () => {
const mapContainerRef = useRef(null);
const mapRef = useRef(null);
const [activeLayerIds, setActiveLayerIds] = useState(['museums', 'contours']);
const [mapLoaded, setMapLoaded] = useState(false);
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',
zoom: 15,
center: [-71.97722138410576, -13.517379300798098]
});
mapRef.current.on('load', () => {
setMapLoaded(true);
mapRef.current.addSource('museums', {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
});
mapRef.current.addLayer({
id: 'museums',
type: 'circle',
source: 'museums',
layout: {
visibility: 'visible'
},
paint: {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'museum-cusco'
});
mapRef.current.addSource('contours', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
});
mapRef.current.addLayer({
id: 'contours',
type: 'line',
source: 'contours',
'source-layer': 'contour',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#877b59',
'line-width': 1
}
});
});
mapRef.current.on('idle', () => {
if (
!mapRef.current.getLayer('contours') ||
!mapRef.current.getLayer('museums')
) {
return;
}
});
}, []);
useEffect(() => {
if (!mapLoaded) return;
const allLayerIds = ['museums', 'contours'];
// for each layerId, check whether it is included in activeLayerIds,
// show and hide accordingly by setting layer visibility
allLayerIds.forEach((layerId) => {
if (activeLayerIds.includes(layerId)) {
mapRef.current.setLayoutProperty(layerId, 'visibility', 'visible');
} else {
mapRef.current.setLayoutProperty(layerId, 'visibility', 'none');
}
});
}, [activeLayerIds]);
const handleClick = (e) => {
const layerId = e.target.id;
if (activeLayerIds.includes(layerId)) {
setActiveLayerIds(activeLayerIds.filter((d) => d !== layerId));
} else {
setActiveLayerIds([...activeLayerIds, layerId]);
}
};
return (
<>
);
};
export default MapboxExample;
```