user3398945
user3398945

Reputation: 93

Manipulate individual marker inside FeatureGroup

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

Answers (1)

dwq88397
dwq88397

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

Related Questions