TransWikia.com

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

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

One Answer

I see two issues

  1. 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);
  2. 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.

Correct answer by toms on September 7, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP