CODEWITHSUNDEEP
leafletmarker
upendra
upendra

Reputation: 349

Change marker icon on click leaflet

Original-markerIcon = leaflet/images/marker-icon-2x.png current-markerIcon = leaflet/images/map-marker.png

I have many markers and I want to change marker icon of the current clicked marker.If I click again on another marker change all marker Icon to original marker and current marker with current Icon.

I also have label attached with each marker. When I click on current Icon I want to change also the label of that marker or remove the label.

How can I achieve this ?

thank you. enter image description here Image with marker visible with original-markerIcon

EDIT-1

L.Icon.Change = L.Icon.Default.extend({
                        options: {
                            iconUrl: 'leaflet/images/map-marker.png',
                            iconSize: new L.Point(150, 75),
                        }
                    });
                    var changeIcon = new L.Icon.Change();

                    L.Icon.Original = L.Icon.Default.extend({
                        options: {
                            iconUrl: 'leaflet/images/marker-icon-2x.png',
                            iconSize: new L.Point(45, 81),
                        }
                    });
                    var originalIcon = new L.Icon.Original();

                    marker.on('click',function(e){
                        for(var i = 0 ; i < $scope.markers.length ; i++){
                            $scope.markers[i].setIcon(originalIcon);
                        }


                    })


                    // marker click event to show the center pano
                    $scope.markers[index].on('click',function(e){
                        $scope.markers[index].setIcon(changeIcon);
                     });

Upvotes: 1

Views: 1938

Answers (1)

Firdavsbek Narzullaev
Firdavsbek Narzullaev

Reputation: 78

If i am not mistaking there is a function named as "eachLayer" in map. I think when you create a marker, leaflet gives an automatic ID for that. So you have to give that ID in "eachLayer" function. And when it finds appropriate marker, there should be a function "popupclose". To add it will be better if you show your code...!

Upvotes: 1

Related Questions