How to change Leaflet marker color on mouseover?

Question

I'm having a hard time figuring out why the Leaflet method setstyle will change the color of a polygon but not the color of my markers.

Polygon works fine:

But the markers won't change colors:

I want to be able to mouseover a marker and changes its color. It seemed like setStyle would do this. But I keep getting layer.setStyle is not a function

I'm using Angular and Leaflet together to make the map (I'm using the angular-leaflet-directive).

Here's the mouseover part of the code:

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

When the marker get's moused over, it fires pointMousever which then tries to invoke setStyle on the LeafletEvent.target. I've console.logged the LeafletEvent and there is indeed the Target part of it:

Why would setStyle work for the polygon and not for the marker? What's the way to change the marker's color?

Answer 1

Figured it out thanks to some documentation reading.

The polygon in leaflet responds to setStyle but the marker can be changed using setIcon

Documentation for setIcon

Answer 2

Seems like you can't do that because a marker uses an image to render.

I think you'd need to grab the icon class of your marker and change the "iconUrl" attribute to whatever new image you want.

Source: Leaflet API Reference

Hope that helps,

DR

Answer 3

See Kyle Pennell's Answer :

The polygon in leaflet responds to setStyle but the marker can be changed using setIcon

You can use following lines :

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);

Answer 4

You can do it without having to create a million different icon images if you use CSS.

1. Add the marker
2. find the backgroundcolor attribute for the css and change it.

Here it is:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'