Estoy tratando de cambiar el marcador de imagen cuando el usuario hace clic en uno específico. El problema aquí es que cuando hago clic en un mercado cambia la imagen, pero cuando hago clic fuera o en otro mercado, no pasa nada. (Pantalla corta debajo)
Esto si mi JS:
var LeafIcon = L.Icon.extend({ options: { iconSize: [38, 95], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76], }, }); var greenIcon = new LeafIcon({ iconUrl: project.path.base + "images/map/marker-in.png", }), redIcon = new LeafIcon({ iconUrl: project.path.base + "images/map/marker-active.png", }); var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon }) .on("click", (e, j) => { e.target.setIcon(redIcon); console.log("target", e.target) }) .addTo(map) .bindPopup($popin.innerHTML);Recuerda la última selección y restablece ese marcador
var greenIcon = new LeafIcon({ iconUrl: project.path.base + "images/map/marker-in.png", }), redIcon = new LeafIcon({ iconUrl: project.path.base + "images/map/marker-active.png", }); var lastMarker; var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon }) .on("click", (e, j) => { if(lastMarker){ lastMarker.setIcon(greenIcon); } e.target.setIcon(redIcon); console.log("target", e.target) lastMarker = e.target; }) .addTo(map) .bindPopup($popin.innerHTML);Una forma diferente es establecer y restablecer el marcador siempre que la ventana emergente esté abierta/cerrada:
var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon }) .on("popupopen", (e) => { e.target.setIcon(redIcon); }) .on("popupclose", (e) => { e.target.setIcon(greenIcon); }) .addTo(map) .bindPopup($popin.innerHTML);