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 :)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With