Markkers are displayed twice with Leaflet search

Question

I've made a map, based on a geojson file and with clustered markers.

Then I tried to add the leaflet-search plugin. The search feature works : when I search somtehing, it opens the good popup (informations are generated by "complex" routines).

But now I have my markers displayed twice : the ones I previously created, then those displayed by the search plugin.

How to make leaflet-search to not display its own markers ?

I hope I was clear enough. Bellow here is a sample of my code (I tried to made it readable) :

var geojsonFeature = { mygeojsondata };


// Runs several function to generate an "information page" for each feature
function createPopupInfo(feature, layer) {
    var pop = render_name(feature);
    //
    // ...
}

var nbfeatures = 0;
var layer1 = new L.geoJSON(geojsonFeature, {
    onEachFeature: createPopupInfo,
    pointToLayer: function (feature, latlng) {
        nbfeatures++;
        var marker = L.marker(latlng)
        arrayOfLatLngs.push(latlng);
        marker.on("add", function (event) {
            // Retrieve the layer through event.target http://leafletjs.com/reference-1.0.0.html#event-target
            event.target.openPopup();
            var latLngs = [marker.getLatLng()];
            var markerBounds = L.latLngBounds(latLngs);
            map.fitBounds(markerBounds);
        });
        map.maxBoundsViscosity = 0;
        return marker;
    }
});


var searchControl = new L.Control.Search({
    layer: layer1,
    propertyName: 'search_index',
    marker: false,
    moveToLocation: function (latlng, title, map) {
        map.setView(latlng, 17);
    }
});

searchControl.on('search:locationfound', function (e) {
    if (e.layer._popup)
        e.layer.openPopup();

}).on('search:collapsed', function (e) {
    layer1.eachLayer(function (layer) { //restore feature color
        layer1.resetStyle(layer);
    });
});

// Clustering
var markers = L.markerClusterGroup();
markers.addLayer(layer1);
map.addLayer(markers);

Answer 1

I found what didn't work, I must pass the "clustered layer" :

var searchControl = new L.Control.Search({
    layer: markers,
    propertyName: 'search_index',
    ...

Sources : https://gis.stackexchange.com/questions/310797/using-l-control-search-and-l-markerclustergroup https://github.com/stefanocudini/leaflet-search/issues/166 And another example : http://embed.plnkr.co/46VJcp/

Answer 2

When the search finds something, harness that event to remove the layer with all the markers:

searchControl.on('search:locationfound', function (e) {
    if (e.layer._popup) e.layer.openPopup();
    markers.removeLayer(layer1)
})

Of course you'll also want to add these markers back in when you close the search:

searchControlon('search:collapsed', function (e) {
    markers.addLayer(layer1);
    layer1.eachLayer(function (layer) { //restore feature color
        layer1.resetStyle(layer);
    });
});

I would say its good UX to also add them all back in when the search comes up empty, but theres' no obvious event for that with leaflet-search.