CODEWITHSUNDEEP
leafletmapbox
Md Johirul Islam
Md Johirul Islam

Reputation: 5162

Leaflet.js polyline color change on mouseover

I have a polyLine drawn using a list of points in Leaflet. Here is the code

road= new L.Polyline(pointList, {
    color: color,
    weight: 10,
    lineCap:"square",
    lineJoin:"bevel",
    opacity: 0.6,
    smoothFactor: 1
    });

I need to change the color of this polyLine to green on mouseover. I am using the following code. But it's not working.

road.on('mouseover', function (e) {
         var layer=e.target;
         layer.options["color"]="green";
         console.log(layer.options["color"]);

        });

Can anyone give me any idea how can i do it?

Upvotes: 2

Views: 6132

Answers (1)

Alexandru Pufan
Alexandru Pufan

Reputation: 1922

You should use setStyle method, like this:

road.on('mouseover', function() {
    this.setStyle({
        color: 'red'   //or whatever style you wish to use;
    });
});

Also, to revert to the initial style on mouseout, save that style in a variable, and write:

road.on('mouseout', function() {
    this.setStyle(initialStyle)
});

Upvotes: 8

Related Questions