Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

leafletjs : Highlight polyline on mouseover

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

like image 619
rac3b3nn0n Avatar asked Oct 22 '14 09:10

rac3b3nn0n


1 Answers

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.

like image 53
rac3b3nn0n Avatar answered Jan 05 '23 02:01

rac3b3nn0n