The situation: I work on a web application where routes (represented by polylines) are displayed, that are partly overlapping, meaning some segments belong to more routes.
The data: The polylines are included as GeoJSON files (Feature Collection) within Leaflet. Unless the routes are not overlapping, the display works fine and the routes are highlighted in a different color when they are selected by the user.
The problem: The problem appears when routes have partly the same segments - where only the route that is later loaded with the GeoJSON file displays correctly, as it is put on the other route that has been loaded before. Thus, some routes (the ones that are beneath the later loaded ones) are not displayed correctly, but cut off at the position where the route on-top overlaps.
Possible solutions: I have been looking for solutions for several days now, but I cannot figure how to deal with this problem. My question is similar to this question here (https://stackoverflow.com/questions/42251451/leaflet-tooltips-for-overlapping-polylines), but I could not get it to work.
Another way I thought it could work is, when the user clicks on a route, the ID is read out, and this route of the GeoJSON file could be loaded again and put on top of the map. What I don't know is how to access a specific polyline within a GeoJSON file and how to deal with it, when a segment is clicked, where multiple routes overlap.
This is the code I have so far:
var routes = L.geoJson(routes,
{
style: style_route,
onEachFeature: onEachFeature
});
routes.addTo(map);
var defaultRoutes = "";
function onEachFeature(feature, layer)
{
layer.on('click', function (e)
{
routeID = feature.properties.RouteID;
//style the selected route differently
var clickedFeature = e.target;
clickedFeature.setStyle(style_routeClicked);
//reset the style for the route if a new route is selected
if (defaultRoutes) defaultRoutes.setStyle(style_route);
defaultRoutes = clickedFeature;
});
}
