レイヤーの表示と非表示 | Mapbox GL JS | ドキュメント

異なるデータセットを表示するカスタムレイヤースイッチャーを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>レイヤーの表示と非表示</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
 
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
 
#menu a:last-child {
border: none;
}
 
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
 
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
 
#menu a.active:hover {
background: #3074a4;
}
</style>
 
<nav id="menu"></nav>
<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',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 15,
center: [-71.97722138410576, -13.517379300798098]
});
 
// Wait until the map has finished loading.
map.on('load', () => {
// Add a custom vector tileset source. This tileset contains
// point features representing museums. Each feature contains
// three properties. For example:
// {
//     alt_name: "Museo Arqueologico",
//     name: "Museo Inka",
//     tourism: "museum"
// }
map.addSource('museums', {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
});
map.addLayer({
'id': 'museums',
'type': 'circle',
'source': 'museums',
'layout': {
// Make the layer visible by default.
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'museum-cusco'
});
 
// Add the Mapbox Terrain v2 vector tileset. Read more about
// the structure of data in this tileset in the documentation:
// https://docs.mapbox.com/vector-tiles/reference/mapbox-terrain-v2/
map.addSource('contours', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
});
map.addLayer({
'id': 'contours',
'type': 'line',
'source': 'contours',
'source-layer': 'contour',
'layout': {
// Make the layer visible by default.
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#877b59',
'line-width': 1
}
});
});
 
// After the last frame rendered before the map enters an "idle" state.
map.on('idle', () => {
// If these two layers were not added to the map, abort
if (!map.getLayer('contours') || !map.getLayer('museums')) {
return;
}
 
// Enumerate ids of the layers.
const toggleableLayerIds = ['contours', 'museums'];
 
// Set up the corresponding toggle button for each layer.
for (const id of toggleableLayerIds) {
// Skip layers that already have a button set up.
if (document.getElementById(id)) {
continue;
}
 
// Create a link.
const link = document.createElement('a');
link.id = id;
link.href = '#';
link.textContent = id;
link.className = 'active';
 
// Show or hide layer when the toggle is clicked.
link.onclick = function (e) {
const clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
 
const visibility = map.getLayoutProperty(
clickedLayer,
'visibility'
);
 
// Toggle layer visibility by changing the layout object's visibility property.
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(
clickedLayer,
'visibility',
'visible'
);
}
};
 
const layers = document.getElementById('menu');
layers.appendChild(link);
}
});
</script>
 
</body>
</html>