Add Leaflet Search through a Feature Group

Question

Similar to Search for markers in a markercluster group Leaflet-MarkerCluster

But i am using a Control group ontop of Marker Cluster so they will be displayed upon a radio button click.

var map = L.map("map"),

parentGroup = L.markerClusterGroup(options), // Could be any other Layer Group type.
  
// arrayOfMarkers refers to layers to be added under the parent group as sub group feature
    
mySubGroup = L.featureGroup.subGroup(parentGroup, arrayOfMarkers);

parentGroup.addTo( map );
mySubGroup.addTo( map );

I am attempting to implement Leaflet Search - but as per the documentation says it requires a group layer of markers as the second parameter for it work. Trouble is using L.featureGroup.subGroup requires an array of markers.

Attempted to iterate through mySubGroup at run time to get the layers of markers using Leaflet eachLayer but this will duplicate the amount of markers i have on the map for the search to work.

var markersLayer = new L.LayerGroup().addTo( this.map );

forEach( mySubGroup, layers => {
    layers.eachLayer( function (layer ) {
        console.log ( layer );

        markersLayer.addLayer( layer );

    })
});

   map.addControl( new L.Control.Search({layer: markersLayer}) );

@FalkeDesign this will remove my mySubGroup clusters and replace it with single point markers — Zeon
Then don't add the layergroup to the map var markersLayer = new L.LayerGroup() else you will always duplicate the markers. But I don't know if this works with the SearchControl — Falke Design

Zeon Zeon · Accepted Answer · 2020-04-02T14:13:33

Solved this issue - though it's quite inefficient. If you can find a more elegant solution to avoid duplication then feel free to contribute it as an answer!

 var title = layer.options.title;

// iterate through the cluster points
forEach( mySubGroup, layers => {
    layers.eachLayer(function (layer) {
        var title = layer.options.title; // match the search title to marker title

         marker = new L.Circle(new L.LatLng(layer.getLatLng().lat,layer.getLatLng().lng),
            {radius: 0, title: title, fill: 'red', fillOpacity: 0, opacity: 0 }); // Create an invisible L circle marker for each cluseter marker 


        markersLayer.addLayer(marker);

    })
});

You then add the markersLayer to the Leaflet Search

Add Leaflet Search through a Feature Group

1 Answers