Ukryj/pokaż warstwęGrupy w ulotce z własnymi przyciskami

Question

Mam mapę ulotek z kilkoma znacznikami. Umieściłem te znaczniki w "Grupach warstw", aby pokazać i ukryć kategorie znaczników. To są moje markery:

var aa = L.marker([48.185556, 11.620278]).bindPopup('AA'), 
bb = L.marker([48.152222, 11.592778]).bindPopup('BB'), 
cc = L.marker([48.161209, 11.597989]).bindPopup('CC'), 
dd = L.marker([48.14350, 11.58775]).bindPopup('DD'), 
ee = L.marker([48.14989, 11.59094]).bindPopup('EE'), 
ff = L.marker([48.15958, 11.60608]).bindPopup('FF'); 

var restaurants = L.layerGroup([aa, bb]); 
var sport = L.layerGroup([cc, dd]); 
var sights = L.layerGroup([ee, ff]); 

To działa całkiem dobrze, gdy używam warstwy kontrolujące i overlayMaps:

var overlayMaps = { 
"Restaurants": restaurants, 
"Sport": sport, 
"Sights": sights 
}; 

L.control.layers(overlayMaps).addTo(map); 

Ale teraz chcę być w stanie dokonać tej pracy (ukrywania i wyświetlania grupy warstw) z moimi własnymi "przyciskami" (ikonami). Moje html:

<div class="header"> 
      <a href="#"> 
      <span class="fontawesome-food"></span> 
      <span class="fontawesome-heart-empty"></span> 
      <span class="fontawesome-eye-open"></span> 
      </a> 
    </div> 

myślę, że to możliwe removeLayer czy coś takiego, ale ja po prostu nie rozumiem, jak to działało (pokaz i ukryć restauracji-, sport- i zabytków-layer). Chcemy więc przekonać, że moje warstwy są widoczne po kliknięciu ikon w nagłówku i że znikają po kliknięciu po raz drugi. Dzięki wielkie!

Answer 1

Najpierw trzeba link dla każdej warstwy

<ul> 
    <li><a id="restaurants" href="#">restaurants</a></li> 
    <li><a id="sport" href="#">sport</a></li> 
    <li><a id="sights" href="#">sights</a></li> 
</ul> 

Następnie dla każdego łącza można napisać obsługi tak (przykład z jQuery)

$("#restaurants").click(function(event) { 
    event.preventDefault(); 
    if(map.hasLayer(restaurants)) { 
     $(this).removeClass('selected'); 
     map.removeLayer(restaurants); 
    } else { 
     map.addLayer(restaurants);   
     $(this).addClass('selected'); 
    } 
}); 

Masz tu przykład http://jsfiddle.net/FranceImage/c5Yfb/

Answer 2

Najpierw potrzebujesz nazw klas dla trzech przycisków (restauracji, sportu i zabytków). Następnie w javscript dodać: `

<script> 
     var restaurants = document.getElementsByClassName("restaurants"); 
     var sports = document.getElementsByClassName("sports"); 
     var sights = document.getElementsByClassName("sights"); 

     restaurants.onclick = function(e){ 

      // setFilter takes a feature object and returns 
       true to show it and false to hide 
      map.featureLayer.setFilter(function(f) { 
       return f.properties['marker-symbol'] === 'restaurants'; 
      }); 
      return false; 
     }; 

To setFilter -function, które chcesz używać i tutaj jest dobrym przykładem Mpabox - Filtering Markers.

Rozwiązanie z @FranceImage powinno również działać dobrze.