Function with map.addLayer() and map.removeLayer() not working

Question

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

score 3 · Accepted Answer · edited Aug 20 '20 at 09:14

I see two issues

You are missing semi-colons before the 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);
Your 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.

Function with map.addLayer() and map.removeLayer() not working

1 Answers1

Linked