I am trying to add a geojson layer with interactive functionality to my leaflet map. I am mostly using this (dated)blog: http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/

My result to date:

  • it changes the style of a selected feature on mouseclick
  • a popup come up on mouseclick
  • it changes the style back on mouseover

Could anybody help me with this question:

How can I change back the style on the next mouseclick instead of mouseover?

1 Answer 1


you can use global variables to keep track of the current layer and popup; then reset these when you click to move to a new layer highlight:

// declare these in global scope, e.g. after setting highlightStyle
// name these whatever you want, case doesn't matter

layer.on("click", function (e) {
  // start by clearing the existing highlighted layer and popup, if they exist
  if (CURRENTLAYER) CURRENTLAYER.setStyle(defaultStyle); 

  // keep a reference to the current layer that you are about to highlight
  CURRENTLAYER = layer; 

  // the remainder of your code can stay as it is...
  // but, *after* constructing the popup, keep a reference to that, too

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.