Geographic Information Systems Asked by Arrakis_Surfer on September 7, 2020
I am trying to create buttons that add and remove layer groups and I am not having any luck. Can you take a look at how I have this set up?
var main = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWljaGFlbGNwIiwiYSI6ImNrN3V5eHVwNTAxMzgza2x1d2s1N3lkbmIifQ.Rmgw9tQHXVTL5_w6jvGjlw'
});
var map = L.map('mapid', {
center: [59.3307804,18.0569225],
zoom: 11,
layers: [main],
fullscreenControl: true,
zoomControl: false,
dragging: !L.Browser.mobile
});
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);
var baseMaps = {
"All Activities": allWater,
"<span id='icons1'>Beaches</span>": allBeaches,
"<span id='icons2'>Wading pools</span>": waterR,
"<span id='icons3'>Swimming pools</span>": pools
};
var control= L.control.layers(baseMaps, null, {collapsed:false});
control.addTo(map);
Here are the functions I have written but they don’t seem to work. I am using onclick=
to trigger the functions
function WaterFilter0(){
map.addLayer(allWater)
if(map.hasLayer(allBeaches)){
map.removeLayer(allBeaches);
} else if(map.hasLayer(waterR)){
map.removeLayer(waterR);
} else if(map.hasLayer(pools)){
map.removeLayer(pools);
}
}
function WaterFilter1(){
map.addLayer(allBeaches)
if(map.hasLayer(allWater)){
map.removeLayer(allWater);
} else if(map.hasLayer(waterR)){
map.removeLayer(waterR);
} else if(map.hasLayer(pools)){
map.removeLayer(pools);
}
}
function WaterFilter2(){
map.addLayer(waterR)
if(map.hasLayer(allWater)){
map.removeLayer(allWater);
} else if(map.hasLayer(allBeaches)){
map.removeLayer(allBeaches);
} else if(map.hasLayer(pools)){
map.removeLayer(pools);
}
}
function WaterFilter3(){
map.addLayer(pools)
if(map.hasLayer(allWater)){
map.removeLayer(allWater);
} else if(map.hasLayer(allBeaches)){
map.removeLayer(allBeaches);
} else if(map.hasLayer(waterR)){
map.removeLayer(waterR);
}
}
</script>
This is code is live here: https://www.leksplay.com/tabs
I see two issues
if
statements on lines 1227, 1229, 1231 and 1233 (also shown above in the functions you've posted). If you open your browser console (typically F12) you'll see these errors. A simple fix to each of these: map.addLayer(allBeaches);
onclick
events in lines 498-507 will not execute the functions without including parens, onclick="WaterFilter0()"
, instead of onclick="WaterFilter0"
After making those changes, I was able to see the layers.
Correct answer by toms on September 7, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP