Cambiar el icono del marcador al hacer clic con el folleto

Question

Tengo un mapa con muchos (>100) marcadores en él. Me gustaría hacer que al hacer clic en ellos, el icono cambie a una versión resaltada. He creado dos iconos personalizados, uno normal y otro resaltado. He conseguido que esto funcione con marcadores individuales, pero no puedo encontrar ninguna manera de configurarlo para que cada icono se pueda cambiar haciendo clic en él.

Aquí está el código de trabajo para un icono:

var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon});

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

Sin embargo, tengo muchos marcadores y uso un bucle for para colocarlos:

//points is a 2 dim array with lat/long pairs
for (i = 0; i <= points.length-1; i++) {
    var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon});    
}

marker.on('click', function(e) {
  marker.setIcon(selectedIcon);
});

Intenté dar a cada marcador un nombre de variable único utilizando un array:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); 
    testmarker[i].on('click', function(e) {
alert(e.latlng); e.setIcon(selectedIcon); 
}); 
}

Lo que sólo me da "indefinido" en la alerta.

Cambiar testmarker[i].on a this.map.on sólo da una alerta al hacer clic en el mapa (no cambia el icono).

Cambiando toda esa línea por:

testmarker[i].on('click', function(e) {
alert(e.latlng); testmarker[i].setIcon(selectedIcon);
});

Cambia el último (cuando se hace clic en cualquiera), a la vez que da una alerta indefinida.

¿Cómo puedo configurar los marcadores para que cada uno pueda ser cambiado individualmente con un clic, pero sin usar cientos de bloques de código repetidos para cada uno?

Answer 1

Terminé resolviendo esto. También descubrí que se pueden añadir opciones arbitrarias y acceder a ellas después. Eso es útil para asignar ids únicos a los marcadores:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}