Changing marker icon on click and then back to original state when click elsewhere in Leaflet?

Question

I'm trying to get this function on my custom Leaflet map https://rodadagua.netlify.app/

I've found some very close examples and questions on here but being a complete novice unfortunately I have no idea what I´m doing.

This is essentially the same question https://stackoverflow.com/questions/17997247/change-and-change-back-leaflet-icon-on-click but with such basic knowledge I can't work it out. Also I found this question https://stackoverflow.com/questions/61890461/leaflet-map-on-click-changing-color-of-all-markers and example https://jsfiddle.net/vz7jmnqs/2/ is essentially what I'm after but again I can't work out how to include it in my code and make it work.

I want to change marker icon when clicked (so that it shows a different coloured version) and then return back to original state (original icon/colour) when click elsewhere, anywhere, eg. close the associated popup or click on the map or click on another marker.

The closet I've got to is I can change the icon on a click, but I want to change it back.

var defaultIcon = L.icon({
    iconUrl: 'scripts/leaflet/images/marker-icon.png',
    shadowUrl: 'scripts/leaflet/images/marker-shadow.png',
});

var brownIcon = L.icon({
    iconUrl: 'scripts/leaflet/images/marker-icon-brown.png',
    shadowUrl: 'scripts/leaflet/images/marker-shadow.png',
});

var testmarker = L.marker([0.0, 0.0], {icon: defaultIcon}).addTo(map);

testmarker.on('click', function(e) {
  testmarker.setIcon(brownIcon);
});   

I'm using the basic Leaflet script to define the map etc. then all of my markers and popups are set up like this example:

var marker_Waldemar = L.marker([15.0, -40.0]).addTo(map);
marker_Waldemar.bindPopup('<h3>EMEF Prof. Waldemar Rodrigues</h3><p><iframe src="https://galeriafeira.netlify.app/" width="500" height="354" style="border:none;"></iframe></p><p><b>Feira de Ci&ecirc;ncias</b></p>', {
    maxWidth : 520,
    maxHeight : 450,
});

I would like to know exactly what code I need to put in and where.

Answer 1

Solution below is based on assumption that each marker will have a popup that opens upon marker click.

Logic goes as follows:

• when marker is clicked, popup opens and marker icon is changed;
• when marker popup is closed (it can be by the same marker click, popup close button click, another marker click, anywhere on map click), marker icon is set back to original icon.

Most economic way to do this is to define marker creation function, where all necessary things are taken care of:

• marker created, on desired coordinates and with desired icon and popup;
• processing function are defined for popupupen and popupclose marker events, where change of marker icon is taken care of.

Code for such a marker creating function could then look something like this:

function defineMarker(coords, icon, selectedIcon, popupTxt, popupWidth, popupHeight) {
  var markerIcon = icon;
  var marker = L.marker(coords, {
    icon: icon
  }).bindPopup(popupTxt, {
    maxWidth: popupWidth,
    maxHeight: popupHeight
  });
  marker.on('popupopen', function(evt) {
    marker.setIcon(selectedIcon);
  });
  marker.on('popupclose', function(evt) {
    var marker = evt.target;
    marker.setIcon(markerIcon);
  });
  
  return(marker);
}

Creation of your marker_Waldemar marker could then look like this:

var txt_Waldemar = '<h3>EMEF Prof. Waldemar Rodrigues</h3><p><iframe src="https://galeriafeira.netlify.app/" width="500" height="354" style="border:none;"></iframe></p><p><b>Feira de Ci&ecirc;ncias</b></p>'
var marker_Waldemar = defineMarker([15.0, -40.0], defaultIcon, brownIcon, txt_Waldemar, 520, 450);
marker_Waldemar.addTo(map);

Answer 2

You could have a script that changes all markers back to default and call that before you change your clicked marker.

map.eachLayer(function(layer) {
   if( layer instanceof L.Marker ) {
     layer.setIcon(defaultIcon);
    }
});