2

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;
    });
}
4

How about adding

defaultRoutes.bringToFront();

after adding the geojson featureGroup? (doc)
This should move the first layer on top of the new layer, so it will be selectable even when there are overlaps.

  • 2
    thank you so so much! I was not aware about this method, but it worked out immediately and it saved me so much time! – the_chimp Jun 19 '17 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.