0

I'm trying to figure out how to modify the Find Task in ESRI-leaflet so that when the user types in a new text for search, the old selection is cleared.

Currently, when you "find" one feature (For example, search for any state name here: http://esri.github.io/esri-leaflet/examples/finding-features.html), the only way to clear the highlighting is reload the entire page. If you perform another search, the second selection is added to the first, instead of replacing the first.

I have examined the documentation here: http://esri.github.io/esri-leaflet/api-reference/tasks/find.html, but can't find any indication of how to clear highlighting. I'm also pretty new to Javascript and Leaflet, and I'm wondering if there is some Leaflet methods I should be incorporating here.

1

The find task is adding a geojson layer of the found location to the leaflet map right here:

L.geoJson(featureCollection, 
   {
      style: { color: 'red' },
      onEachFeature: function (feature, layer) {
         layer.bindPopup(feature.properties.GNIS_NAME);
      }
   }).addTo(map);

If you make that layer a variable:

var geoJsonLayer = L.geoJson ...

You will be able to call: map.removeLayer(geonJsonLayer);

So what you'll want to do, in the callback of the find task, is check if the geoJsonLayer is added to the map, if so remove it before adding the new one.

Here is the link to the leaflet docs about modifying the map:

Hope that helps!

Update: Here is a jsFiddle showing you how you can use an if statement to test whether the layer exists, and if so, remove it before adding a new one.

3
  • Slv, this is going to be a very elementary question. According to your suggestion, I've been struggling to write an if-statement to go inside the goBtn() function. if (something) {map.removeLayer(geonJsonLayer);} But I can't figure out what the 'something' is. How do I translate "a geoJsonLayer variable is already on the map" into javascript? Also, is this the right approach? To put this if-statement inside the goBtn() function?
    – Abijah
    Dec 20 '15 at 17:55
  • FIXED: I abandoned the if-statement strategy, and wired the map.removeLayer(geoJsonLayer) command to a brand new button marked "Clear." Now the user the clear the previous selection manually. I would still like to be able to figure out how to get the selection to clear automatically, but for now, the Clear button is a good work-around.
    – Abijah
    Dec 20 '15 at 19:57
  • Hi Abijah, You're on the right track. If you declare var geoJsonLayer; as an empty variable outside of your callback function you can then set it to equal the layer when you get the response object. This will allow you to test if it has a layer assigned to it. Here is a jsFiddle that shows what you can do: link. The on click funtion will remove the layer from the map before re-adding it, with a different color. Hope that helps!
    – slv
    Dec 21 '15 at 2:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.