3

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 ?

Improve this question

1 Answer 1

Reset to default
4

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

Improve this answer
7
  • Thanks you Bill ! And how do you do if I have feature AND marker ?
    – Laurent
    Commented Jan 28, 2019 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
    Commented Jan 28, 2019 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
    Commented Jan 28, 2019 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
    Commented Jan 28, 2019 at 22:45
  • Thanks Bill, That is very interesting. I'll have a look at it
    – Laurent
    Commented Jan 29, 2019 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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