How to change Leaflet marker color on mouseover?

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

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

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);