Prospekt Allesfresser + Clustering-Marker + Filtermarkierung Cluster-Gruppe

Question

Ich versuche, eine Karte mit Mapbox und Allesfresser-Plugin von Leafet zu machen, um eine Daten mit dem Tutorial zu suchen. Ich weiß nicht, wie ich diesen Code von Omnivore Plugin in meinem Fall integriere. Ich verwende für meine Daten eine Geojson-URL $.getJSON, Clustering-Marker mit MarkerCluster von Leaflet.

Vielen Dank für Ihre Antwort.

Mit freundlichen Grüßen.

Sandrine

EDIT

Ich versuche Marker Clustergruppe mit MapBox js Werkzeug zu filtern.

Es funktioniert sehr gut, aber ich möchte diese Funktion in mein Projekt einfügen. Aber ich weiß nicht, wie man mit den anderen Features macht: Allesfresser-Plugin, suche die Daten, zeige das Popup an, markiere Clustergruppe. Kannst du mir helfen ?

Meine js Fiddle "Filter Marker Clustergruppe": https://jsfiddle.net/sduermael78/rgoxpxwq/4/

Mein Projekt: https://jsfiddle.net/sduermael78/1uuubmwb/42/

Answer 1

Sie derzeit Ihre Daten sowohl durch jQuery $.getJSON und direkt von Ihrem MapBox Konto laden.

Dann, wenn mein Verständnis korrekt ist, möchten Sie diese Methoden ersetzen, indem Sie leaflet-omnivore Plugin verwenden?

Direkter Ersatz ist ziemlich geradlinig, wie Sie direkt verwenden:

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer()); 
geojsonLayer.addTo(map); 

Jetzt wird es etwas komplizierter, wenn Sie Ihre Markierungen clustern möchten (mit Leaflet.markercluster Plugin in Ihrem Fall). Aber es ist ähnlich zu $.getJSON, da beide eine asynchrone AJAX-Anfrage durchführen, und Sie die Umwandlung in einem Rückruf machen müssen.

Mit Faltblatt-Allesfresser verwenden Sie die .on("ready", callback) Syntax:

var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer()) 
    .on("ready", function() { 
    var markers = L.markerClusterGroup(); 
    markers.addLayer(geojsonLayer); 
    markers.addTo(mymap); 
    }); 

Aktualisiert JSFiddle: https://jsfiddle.net/1uuubmwb/39/

---

EDIT

OK ich deinen Teil verpasst, wo Sie „wollen Suchen Sie die Daten "wie im Tutorial aus der mapbox, auf die Sie zeigen.

In Ihrem Fall ist es komplizierter, da Sie Ihre Markierungen gruppieren möchten, so dass Sie nicht direkt Ihre Mapbox-Feature-Schicht, sondern eine Marker-Cluster-Gruppe haben.

wäre Eine Abhilfe den Inhalt dieser Clustergruppe jedes Mal wenn Sie die Filterbedingung auf Ihrer geojsonLayer MapBox Feature-Layer ändern zu ersetzen: manuell

// this will "hide" markers that do not match the filter. 
geojsonLayer.setFilter(showCode); 

// replace the content of marker cluster group. 
markers.clearLayers(); 
markers.addLayer(geojsonLayer); 

dann für Ihr Popup, müssen Sie es es schaffen und binden als MapBox Feature-Layer benötigt Ihre GeoJSON Daten das title Attribut zu verwenden (wenn ja, automatisch verwendet diese Informationen das Popup/„Tooltip“ Inhalt zu füllen):

function attachPopups() { 
    // Create popups. 
    geojsonLayer.eachLayer(function (layer) { 
     var props = layer.feature.properties; 

     layer.bindPopup(
     "<b>Code unité&nbsp;:</b> " + props.CODE_UNITE + "<br />" + 
     "<b>Adresse web&nbsp;:</b> <a href='" + props.ADRESSE_WEB + "' target='_blank'>" + props.ADRESSE_WEB + "</a>" 
    ); 
    }); 
} 

Leider sieht es aus wie .setFilter() löscht dieses Popup, so dass Sie diese attachPopups() Funktion nach jeder setFilter aufrufen müssen.

Demo: https://jsfiddle.net/1uuubmwb/40/

Answer 2

Vielen Dank für Ihre Antwort. In der Tat würde ich Flylet-Omnivore-Plugin verwenden, um Daten von Geojson mit URL zu suchen. Das Tutorial ist: https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/ "Verwenden Sie SetFilter als eine schnelle Suche zum Ausfiltern von Markierungen basierend auf einer Benutzerabfrage".

Wie wird das Popup von geojson mit URL in diesem neuen Fall angezeigt? layer.bindPopup(feature.properties.CODE);

Kann ich all diese Funktionen verwenden, um meine Karte zu erstellen (Suche nach Markern, Clustermarkern ...)?