Faltblatt gestylt mit Layer-Steuerung und Cluster

Question

ich eine Karte erstellen, die this styled layer control plug in und die Marker-Cluster verwendet stecken.

Ich habe beide Plug-Ins bekommen mit meinen Daten auf eigene Faust zu arbeiten, kann aber‘ Finde heraus, wie man sie zusammenbringt.

Ich habe heruntergeladen und die Marker-Cluster-Layer-Support-Dateien aufgenommen und versucht, sie zu implementieren, aber es hat nichts geändert.

Grundsätzlich gibt es eine Kategorie für jeden Tag der Woche, und dann innerhalb jeden Tages Filter, um Essen oder Trinken Informationen zu zeigen, so dass ich diese Art von Schicht Kontrolle benötigen. Ich bin auch offen für Vorschläge, wie meine eigene Schichtsteuerung zu schaffen, die so ist (Schichten Gruppierung und dann mit dem Sie innerhalb dieser Gruppen filtern)

var base = L.tileLayer('https://api.mapbox.com/styles/v1/agrosh/cj6p9fuxu2di72ss05n5nhycx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWdyb3NoIiwiYSI6ImNpeWFscjNkZzAwN3AycW55aXB6eWtjZnoifQ.ZudIxK3hMrxAX8O4BXhiEg', { 
     }); 

     var zoomLevel = 13; 
     var setLat = 35.593464; 
     var setLong = -82.551934; 

     var map = L.map('map', { 
      center: [setLat, setLong], 
      zoom: zoomLevel 
     }); 
     map.addLayer(base); 


    var mondayFood = [ 
     { 
"name":"name", 
"details":"ex", 
"address":"", 
"website":"", 
"lat":35.591140, 
"lng":-82.552111, 
"yelp":"", 
"google":"", 
"img":"img" 
     }]; 

    var mondayDrink = [ 
    { 
"name":"name", 
"details":"ex", 
"address":"", 
"website":"", 
"lat":35.594446, 
"lng":-82.555602, 
"yelp":"", 
"google":"", 
"img":"img" 
     }]; 



    var markerClusters = L.markerClusterGroup.layerSupport().addTo(map); 

    // monday 
    for (var i = 0; i < mondayFood.length; ++i) 
    { 

    var monFood = mondayFood[i].img; 

var mF = L.marker([mondayFood[i].lat, mondayFood[i].lng], {icon: myIcon}) 
       .bindPopup(monFood); 

     markerClusters.addLayer(mF); 

    } 

    for (var i = 0; i < mondayDrink.length; ++i) 
    { 
var monDrink = mondayDrink[i].img; 

var mD = L.marker([mondayDrink[i].lat, mondayDrink[i].lng], {icon: myIcon}) 
       .bindPopup(monDrink); 
markerClusters.addLayer(mD); 

    } 

    var overlays = [ 
         { 
          groupName : "Monday", 
          expanded : true, 
          layers : { 
           "Food" : mondayFood 
           "Drink" : mondayDrink, 

          }]; 
         } 

    var options = { 
      container_width  : "300px", 
      group_maxHeight  : "80px", 
      //container_maxHeight : "350px", 
      exclusive   : false, 
      collapsed : true, 
      position: 'topright' 
     }; 

     var control = L.Control.styledLayerControl(overlays, options); 
     map.addControl(control); 

Answer 1

Die Schichten Steuer Leaflet Schichten verarbeiten kann, nicht glatt JavaScript Datenobjekt.

In Ihrem Fall würden Sie Ihre Layer mD und mF wahrscheinlich nicht einmal direkt verwenden, da sie nur temporär in Ihren Loops verwendet werden.

Stattdessen ist der klassische Weg, Leaflet Layer Groups zu verwenden, um Ihre Getränkmarker und Nahrungsmittelmarker zu sammeln. MCG.layersupport wurde entwickelt, um mit diesen Layergruppen umgehen zu können.

var markerClusters = L.markerClusterGroup.layerSupport().addTo(map); 
var groupFood = L.layerGroup().addTo(markerClusters); 
var groupDrink = L.layerGroup().addTo(markerClusters); 

for (var i = 0; i < mondayFood.length; ++i) { 
    var mF = L.marker([mondayFood[i].lat, mondayFood[i].lng]); 
    //markerClusters.addLayer(mF); 
    mF.addTo(groupFood); 
} 

for (var i = 0; i < mondayDrink.length; ++i) { 
    var mD = L.marker([mondayDrink[i].lat, mondayDrink[i].lng]); 
    //markerClusters.addLayer(mD); 
    mD.addTo(groupDrink); 
} 

var overlays = [{ 
    groupName: "Monday", 
    expanded: true, 
    layers: { 
    //"Food": mondayFood, 
    //"Drink": mondayDrink 
    "Food": groupFood, 
    "Drink": groupDrink 
    } 
}]; 

var control = L.Control.styledLayerControl(overlays); 
map.addControl(control); 

Live-Demo: http://plnkr.co/edit/ufoKZ0BJbjXILPV3iLpj?p=preview