malwoodsantoro · May 25, 2021 23:10
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Show and hide layers</title>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
 <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/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: #FF69B4;
        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: #FF69B4;
        color: #fff;
    }

    #menu a.active {
        background-color: #FFC0CB;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #FF69B4;
    }
 </style>

 <nav id="menu"></nav>
 <div id="map"></div>

 <script>
 	mapboxgl.accessToken = 'pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 15,
        center: [-71.97722138410576, -13.517379300798098]
    });

    map.on('load', function() {
        // add source and layer for museums
        map.addSource('museums', {
            type: 'vector',
            url: 'mapbox://mapbox.2opop9hr'
        });
        map.addLayer({
            'id': 'museums',
            'type': 'circle',
            'source': 'museums',
            'layout': {
                // make layer invisible by default
                'visibility': 'none'
            },
            'paint': {
                'circle-radius': 8,
                'circle-color': 'rgba(55,148,179,1)'
            },
            'source-layer': 'museum-cusco'
        });

        // add source and layer for contours
        map.addSource('contours', {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-terrain-v2'
        });
        map.addLayer({
            'id': 'contours',
            'type': 'line',
            'source': 'contours',
            'source-layer': 'contour',
            'layout': {
                // make layer invisible by default
                'visibility': 'none',
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': '#877b59',
                'line-width': 5
            }
        });       
    });
    
    
    // enumerate ids of the layers
    var toggleableLayerIds = ['museums', 'contours'];

    // set up the corresponding toggle button for each layer
    for (var i = 0; i < toggleableLayerIds.length; i++) {
        var id = toggleableLayerIds[i];

        var link = document.createElement('a');
        link.href = '#';
        link.className = '';
        link.textContent = id;

        link.onclick = function(e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation(); 
            for (var j = 0; j < toggleableLayerIds.length; j++) {
                if (clickedLayer === toggleableLayerIds[j]) {
                	layers.children[j].className = 'active';
                	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
                }
                else {
                	layers.children[j].className = '';
                	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
                }
            }
        };

        var layers = document.getElementById('menu');
        layers.appendChild(link);
    }
        
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Show and hide layers</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/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: #FF69B4;
	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: #FF69B4;
	color: #fff;
	}

	#menu a.active {
	background-color: #FFC0CB;
	color: #ffffff;
	}

	#menu a.active:hover {
	background: #FF69B4;
	}
	</style>

	<nav id="menu"></nav>
	<div id="map"></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	zoom: 15,
	center: [-71.97722138410576, -13.517379300798098]
	});

	map.on('load', function() {
	// add source and layer for museums
	map.addSource('museums', {
	type: 'vector',
	url: 'mapbox://mapbox.2opop9hr'
	});
	map.addLayer({
	'id': 'museums',
	'type': 'circle',
	'source': 'museums',
	'layout': {
	// make layer invisible by default
	'visibility': 'none'
	},
	'paint': {
	'circle-radius': 8,
	'circle-color': 'rgba(55,148,179,1)'
	},
	'source-layer': 'museum-cusco'
	});

	// add source and layer for contours
	map.addSource('contours', {
	type: 'vector',
	url: 'mapbox://mapbox.mapbox-terrain-v2'
	});
	map.addLayer({
	'id': 'contours',
	'type': 'line',
	'source': 'contours',
	'source-layer': 'contour',
	'layout': {
	// make layer invisible by default
	'visibility': 'none',
	'line-join': 'round',
	'line-cap': 'round'
	},
	'paint': {
	'line-color': '#877b59',
	'line-width': 5
	}
	});
	});


	// enumerate ids of the layers
	var toggleableLayerIds = ['museums', 'contours'];

	// set up the corresponding toggle button for each layer
	for (var i = 0; i < toggleableLayerIds.length; i++) {
	var id = toggleableLayerIds[i];

	var link = document.createElement('a');
	link.href = '#';
	link.className = '';
	link.textContent = id;

	link.onclick = function(e) {
	var clickedLayer = this.textContent;
	e.preventDefault();
	e.stopPropagation();
	for (var j = 0; j < toggleableLayerIds.length; j++) {
	if (clickedLayer === toggleableLayerIds[j]) {
	layers.children[j].className = 'active';
	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
	}
	else {
	layers.children[j].className = '';
	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
	}
	}
	};

	var layers = document.getElementById('menu');
	layers.appendChild(link);
	}

	</script>

	</body>
	</html>