leafletjs : Highlight polyline on mouseover

rac3b3nn0n picture rac3b3nn0n · Oct 22, 2014 · Viewed 7.9k times · Source

Seems the title is quite self-explanatory but to elaborate more, here is what I'm having trouble with, I have an array of polylines that I am displaying on a map, now what I am aiming to do is, when I hover over a certain polyline from the list, only that polyline highlights (or changes color). What I have right now is something like this (this code is inside a loop that goes to the end filling polyLineArray with individual polyline data,

var pointList = [];

// pointList is an array and lat/lngs

var polyLineProperties = {
    color: 'red',
    opacity: 1,
    weight: 5,
    clickable: true
}

var polyLine = new L.polyline(pointList, polyLineProperties);
polyLine.on('mouseover', function() {
    // WHAT TO DO HERE to HIGHLIGHT that specific polyline.
});

polyLineArray.push(polyLine);

Hope someone could help me with this, it'll be nice, if someone could even advice on how to alter any property of a polyline and not just color.

Thank you and awaiting your replies :)

Answer

rac3b3nn0n picture rac3b3nn0n · Oct 22, 2014

Okay,

Sorry but I've managed to figure this one out, thanks to the tutorial on the following link,

Interactive Choropleth Map

This is all that was required,

polyLine.on('mouseover', function(e) {
    var layer = e.target;

    layer.setStyle({
        color: 'blue',
        opacity: 1,
        weight: 5
    });
});

Thank you all for reading.