1

I've a map with a geojson layer containing markers, polygons and lines.

I made a module so that when a feature is clicked, its properties are displayed in a frame and not in standard Leaflet popup. It works perfectly well and I'm quite happy with it.

Point is that I'd like to have the selected feature to highlight when clicked and return to unselected state when another one is clicked.

Do you have an idea on how I can achieve that ?

1

It's easy have two styles, I had a green for my stateLayer and created a Highlight layer, then in the onEachFeature function create a layer on-click function.

        layer.on("click", function (e) { 
            stateLayer.setStyle(style); //resets layer colors
            layer.setStyle(highlight);  //highlights selected.
        }); 

working example, right click view source. http://www.gistechsolutions.com/leaflet/DEMO/basic/basic_Poly.html

  • Thanks you Bill ! And how do you do if I have feature AND marker ? – Laurent Jan 28 at 15:38
  • By feature you mean marker, polyline, polygon right? My example works on polylines or polygons or circlemarkers. For markers I usually just put a small circlemarker under them. Here is an example of my yellow select on a marker. gistechsolutions.com/leaflet/DEMO/Simple/indexMap3.html – Bill Chappell Jan 28 at 17:43
  • Yes, this is what I mean. Do you have an example that included all kind of features ? Thanks you for your help btw – Laurent Jan 28 at 22:35
  • Here is a page of examples I used for a class.I have examples of circlemarkers, polylines and polygons here, right clck on the example, view source to see how I did it. gistechsolutions.com/leaflet/DEMO The style and getColor functions are similar for all except regular markers, which don't change unless you do fontawesome markers. – Bill Chappell Jan 28 at 22:45
  • Thanks Bill, That is very interesting. I'll have a look at it – Laurent Jan 29 at 10:52

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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