Clever Geek Handbook

Leafletjs: Select polyline on mouseover

The title seems to be clear enough, but to go into more detail about what I ran into I have a lot of polylines that I show on the map, now I want that when I hover over a specific polyline from the list, only this polyline highlights (or changes color). Now I have something like this (this code is inside a loop that ends up filling the 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 can help me, it will be nice if someone can even advise on how to change any property of the polyline, not just the color.

Thanks and looking forward to your responses :)

+3


source to share


1 answer


Good,

Sorry, but I managed to figure it out thanks to the guide at the following link,

Choropleth interactive map



That's all it took

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

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

Thanks everyone for reading.

+7


source






More articles:


All Articles