javascript - Leaflet omnivore + clustering markers + filtering marker cluster group -

i try make map mapbox , omnivore plugin of leafet in order search data tutorial. don't know how integrate code omnivore plugin in case. use datas geojson url $.getjson, clustering markers markercluster of leaflet.

thank response.

best regards.

sandrine

edit

i try filter marker cluster group mapbox js tool.

it works insert feature project. don't know how make other features : omnivore plugin, search data, displaying popup, marker cluster group. me ?

my js fiddle "filtering marker cluster group" : https://jsfiddle.net/sduermael78/rgoxpxwq/4/

my project : https://jsfiddle.net/sduermael78/1uuubmwb/42/

you load data through both jquery $.getjson , directly mapbox account.

then if understanding correct, replace these methods using leaflet-omnivore plugin?

direct replacement quite straight forward, directly use:

var geojsonlayer = omnivore.geojson("filepath", null, l.mapbox.featurelayer()); geojsonlayer.addto(map); 

now becomes more complicated when want cluster markers (using leaflet.markercluster plugin in case). similar $.getjson since both perform asynchronous ajax request, , have make conversion in callback.

with leaflet-omnivore, use .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 missed part "want search data" done in tutorial mapbox point to.

in case more complicated want cluster markers, not directly have mapbox feature layer, marker cluster group.

a workaround replace content of cluster group everytime change filtering condition on geojsonlayer mapbox feature layer:

// "hide" markers not match filter. geojsonlayer.setfilter(showcode);  // replace content of marker cluster group. markers.clearlayers(); markers.addlayer(geojsonlayer); 

then popup, have create , bind manually, mapbox feature layer needs geojson data use title attribute (if so, automatically uses info fill 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, looks .setfilter() removes popup, need call attachpopups() function after every setfilter.

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