Reputation: 93
Can anyone help me with how I might update a marker within a FeatureGroup for leaflet? I have hundreds of markers in the group, but would like the icon for a marker clicked by a user to change. My code so far:
var swpts=new L.FeatureGroup();
var data; //an array of information for the markers
for (i=0; i<data.length; i++){
ticon=L.icon({
...//some stuff that has different types of icons for the different markers
});
var tmarker=L.marker([data[i].lat,data[i].lon], {icon: ticon});
tmarker.on('click', function(i){
return function(){
tmarker.setIcon(icons[include(nidilist,nidi)]);
//function to pull a new kind of icon out of an array icons
//plus other things to happen when the listener is activated which require
//access to i
};
}(i),false);
swpts.addLayer(tmarker);
};
swpts.addTo(map);
The listener works fine for other actions, but I can't seem to get it to manipulate the actual marker in the FeatureGroup
. Normally I haven't had problems with a marker being able to reference itself inside a listener, so I am not sure why .setIcon
isn't working here. I've also tried adding a simple listener that only changes the icon, but that doesn't work either. Thanks for any help or suggestions.
Upvotes: 0
Views: 105
Reputation: 66
Have you ever tried debug in browser develop tool Or just console sth instead of .setIcon() in the return function to see if it's really called?
tmarker.on('click', function(i){
return function(){
console.info('test if called when click');
//tmarker.setIcon(icons[include(nidilist,nidi)]);
};
}(i),false);
Actually I guess that you just try to return a anonymous function(that never be excuted) so it may not works.And there may be something wrong with the params in .on()[api]https://www.mapbox.com/mapbox.js/api/v2.0.1/l-events/
tmarker.on('click', function(){
console.info('this will be called when click');
//tmarker.setIcon(icons[include(nidilist,nidi)]);
});
Upvotes: 0