Leaflet Omnivore + Clustering Markers + Filtering Marker Cluster Group

I try to make a map with mapbox and omnivore plugin of Leafet in order to search a data with the tutorial. I don't know how integrate this code from omnivore plugin in my case. I u

Solution 1:

You currently load your data through both jQuery $.getJSON and directly from your mapbox account.

Then if my understanding is correct, you would like to replace these methods by using leaflet-omnivore plugin?

Direct replacement is quite straight forward, as you could directly use:

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

Now it becomes slightly more complicated when you want to cluster your markers (using Leaflet.markercluster plugin in your case). But it is similar to $.getJSON since both perform an asynchronous AJAX request, and you have to make the conversion in a callback.

With leaflet-omnivore, you use the .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);
  });

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

---

EDIT

OK I missed your part where you "want to search the data" as done in the tutorial from mapbox you point to.

In your case it is more complicated as you want to cluster your markers, so you do not directly have your mapbox feature layer, but a marker cluster group.

A workaround would be to replace the content of that cluster group everytime you change the filtering condition on your geojsonLayer mapbox feature layer:

// 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);

Then for your popup, you have to create it and bind it manually, as mapbox feature layer needs your GeoJSON data to use the title attribute (if so, it automatically uses that info to fill the popup / "tooltip" content):

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>"
      );
    });
}

Unfortunately, it looks like .setFilter() removes that popup, so you would need to call this attachPopups() function after every setFilter.

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

Solution 2:

Thank you for your answer. In fact, I would like to use leaflet-omnivore plugin in order to search a data from geojson with url. The tutorial is : https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/ "Use setFilter as a fast search to filter out markers based on a user query".

How to display the popup from geojson with url in these new case ? layer.bindPopup(feature.properties.CODE);

Can I use all this features to build my map (search on markers, clustering markers...) ?