Menu
I'd like to toggle between layers in Mapbox GL JS. I've created some radio buttons that partly work in that you can switch from one layer to the other but not back or forth.
Below is my code for toggling the layers so far:
var layerList = document.getElementById('toggle');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setLayoutProperty(layerId, 'visibility');
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
Here's the rest of the code (simplified) and a link to jsbin https://jsbin.com/cigekutiho/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'>
</script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet'/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toggle {
position: absolute;
padding: 10px;
background: #dddddd;
font-family: Helvetica;
}
.rounded-toggle {
position: absolute;
border: 1px solid rgba(0,0,0,0.4);
font-family: Helvetica;
width: 200px;
height: 47px;
text-align: center;
margin-left: 550px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='map'></div>
<div class='rounded-toggle inline' id='toggle'>
<input id='Test_A' type='radio' name='rtoggle' value='Test_A' checked='checked'>
<label for='Test_A'>Test A</label>
<input id='Test_B' type='radio' name='rtoggle' value='Test_B'>
<label for='Test_B'>Test B</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGlhbWJvbHRvbnVrIiwiYSI6IjJyeWxEMzgifQ.OROtY7TDOwNOmAOfCZeo4w';
var map_zoom = L.mapbox.map('map');
map_zoom.removeControl(map_zoom.zoomControl);
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/liamboltonuk/cjfykyscf6i272snyorquvam6',
attributionControl: false,
minZoom: 13,
center: [-0.042582, 51.518039]
});
map.on('load', function () {
map.addSource('Test_A', {
type: 'vector',
url: 'mapbox://liamboltonuk.bv937ecm'
});
map.addLayer({
'id': 'Test_A',
'type': 'circle',
'source': 'Test_A',
'layout':
{
'visibility': 'visible'
},
'paint': {
'circle-radius': 4,
'circle-color': {
property: 'conct',
type: 'interval',
stops: [
[1, '#00477a'],
[700, '#00477a']
]
},
'circle-opacity': {
stops: [
[12, 1],
[13, 0.75]
]
},
},
'source-layer': 'LAEI_2013_N0x-5pzq5d'
});
});
map.on('load', function () {
map.addSource('Test_B', {
type: 'vector',
url: 'mapbox://liamboltonuk.bv937ecm'
});
map.addLayer({
'id': 'Test_B',
'type': 'circle',
'source': 'Test_B',
'layout':
{
'visibility': 'none'
},
'paint': {
'circle-radius': 4,
'circle-color': {
property: 'conct',
type: 'interval',
stops: [
[1, '#66e8ff'],
[700, '#66e8ff']
]
},
'circle-opacity': {
stops: [
[12, 1],
[13, 0.75]
]
},
},
'source-layer': 'LAEI_2013_N0x-5pzq5d'
});
});
var layerList = document.getElementById('toggle');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setLayoutProperty(layerId, 'visibility');
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>
506
asked Aug 31 '26 00:08
Map.setLayoutProperty takes 3 arguments (layer, name, value). So to make the layer invisible use:
map.setLayoutProperty('my-layer', 'visibility', 'none');
then to make it visible again use:
map.setLayoutProperty('my-layer', 'visibility', 'visible');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
