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
Hello,
I'm new in Leaflet and I need to add a red polyline using an array of LatLng points like
which turns blue on hover:
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 optionAs 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