Leaflet.js Polyline from an array of LatLng points - remove/hide part of points connection based on distance

[danieladin]

Hello,

I'm new in Leaflet and I need to add a red polyline using an array of LatLng points like

var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

which turns blue on hover:

polyline.on("mouseover",_ function (e) {
        polyline.setStyle({ color: 'blue' });
});
polyLine.on("mouseout", function (e) {
        polyLine.setStyle({ color: 'red' })
    });

Is there a way to not connect points that are at a greater distance than x meters? Or hide the connection line? It should also change the displayed polyline color to blue on hover, even if some points are not connected (the ones that are not connected remain in that state, only the color changes). From what I've searched, I can calculate the distance between coordinates using map.distance(firstPoint, secondPoint) but I don't know if this can be added as a condition to the polyline option

As an example: I receive, when the page loads, a 4 points array: A,B,C and D with distance from A->B of 2 m, B->C 6m and C->D 3m. If I the max distance is 5m then I should have a connection only between A->B and C->D. When hover over the line between A->B it changes to blue and also C->D. Same for C->D connection on hover. C->D turns blue and also for A->B. When the mouse is not over the line it changes back to red