Leaflet and Leaflet-search: resetStyle does not work to clear highlights on a map, and appears to be "not a function"

0
votes

I am creating a map for scientific data found in certain locations. I have created independent geoJSON files (polygons) and variables for each location and loaded them into my leaflet map, as I would like to independently attach graphs into the popups for each location.

To allow for leaflet-search to work I made a new Layer group and added all the location variables into the group and this allows me to search for the location, zoom into it and highlight it.

My problem arises when I try to remove the highlight, as the resetStyle function does not work and in the console appears as "Uncaught TypeError: featuresLayer.resetStyle is not a function". When I import all the locations as a single geoJSON file I have no problems but then I don't know how to independently attach graphs for each location.

I have also tried to use the code that changed the color from default to green, back to default, however this also fails and I get a similar error: "Uncaught TypeError: Cannot read property 'setStyle' of undefined"

I have attached the relevant code below:

var featuresLayer = L.layerGroup([location137, location174, location282, location592, location1234, location1303, location1326, location1350, location1364, location1397, location1407, location1521, location1530, location1535, location1576, location1623, location1729, location1731, location1738, location1790, location1804, location1865, location1963, location2090, location2108, location2283, location2307, location2317, location2361, location2386, location2387, location2478, location2490, location2508, location2615, location2718, location2828, location2843, location2867, location2929, location2945]).addTo(map)

var searchbar = new L.Control.Search({
            position:"topright",
            layer: featuresLayer,
            propertyName: "name",
            marker: false,
            textPlaceholder: "Search",
            moveToLocation: function(latlng, title, map) {
            map.setView(latlng, 8); // access the zoom
            }
            });
            
        searchbar.on('search:locationfound', function(e) {
        e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
    }).on('search:collapsed', function(e) {

        featuresLayer.eachLayer(function(layer) {
            featuresLayer.resetStyle(layer);
        }); 
    });
         map.addControl(searchbar);
1
javahtmlleafletmapsreact-leaflet-search

1 Answers

0
votes

resetStyle is only working with a geoJSON Group.

Try:

var style = {
  weight: 3,
  opacity: 1,
  fill: false,
  color: "#3388ff",
  fill: false,
  fillColor: null,
  fillOpacity: 0.2
}

featuresLayer.eachLayer(function(layer) {
  layer.setStyle(style);
});