1

On a simple Leaflet map, with leafleat-routing-machine, if two routes pass by the same place, only the top one is visible. I can live with this if I can choose which route is on top, (for example by clicking on it). Go, given a route, how can I put it on top?

Here is a simple code sample I would like to improve:

map = L.map("map");

L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
}).addTo(map);

var route1 = L.Routing.control({
    waypoints: [
        L.latLng(-22.985308, -43.204845),
        L.latLng(-22.983449, -43.202773),
    ],
}).addTo(map);

var route2 = L.Routing.control({
    waypoints: [
        L.latLng(-22.983449, -43.204845),
        L.latLng(-22.984708, -43.202430),
    ],
}).addTo(map);

// Now I would love this to exist:
function bringOnTop() {
    ...
}

bringOnTop(route1);
bringOnTop(route2);
  • Which routing plugin are you using? Please include key parts of your code in the quiestion. – TomazicM Jul 4 at 14:44
  • @TomazicM The name of the plugin was already in the question title. I wrote it again in the question body so there is no more ambiguity. The code sample is nothing more than a "two routes hello world". It is not very useful in my opinion, because it does not give a lot of context, but since you asked for it, here it is. Now I doubt this question will receive any answer with the "on hold" status and the "-1" score... can you do something about this? Thank you. – azmeuk Jul 5 at 9:51
  • Reasons why your question was put on hold are very clearly stated above. If you don't publish your code it's just quessing where your problem lies. You know your code and know that it's "nothing more than ...", but I don't know that until I see the code. I don't have enough reputation to propose re-open, maybe someone else will now @Ian Turton. – TomazicM Jul 5 at 10:16
  • 1
    once you edit your question it will be placed in the reopen queue for users to vote on reopening it. Your current code snippet doesn't show how you are handling the click and attempting to select one or other of the routes. Some screenshots might make it clearer too. – Ian Turton Jul 5 at 10:31
  • 1
    My question is not about selecting a route nor about clicking, it is simply about bringing a route on top of the other routes. The "click" thing was an example. I reformulated the question so it is clearer, and added some piece of dummy code to show how I would like it to be in an ideal case. – azmeuk Jul 5 at 13:16
1

Final solution is quite simple but was very hard to come by.

Every element displayed on Leaflet map is placed in one of the standard map panes, which are DOM elements used to control the ordering of layers on the map. It is also possible to have user defined panes for fine tuning display order of overlays with DOM zIndex property. User defined pane has to be set as pane option when defining new layer.

Leaflet-routind-machine plugin creates routing lines as polylines and places all of them in overlayPane pane where they are all equal as far as zIndex is concerned.

Since routing lines are created with L.polyline method, it is possible to assign each one of them to separate pane with pane option, the only problem is how to get this option to the place where actuall creation takes place.

After a lot of trials and inspecting the guts of plugin it turned out that this option can simply be specified as on of the styles in lineOptions option of L.Routing.control method.

So to make possible dynamically choosing which of two routing lines is on top, two map panes are defined and then their zIndex is changed as needed. In the example below initially line 1 (red) is displayed above line 2 (blue) and then after 3 seconds line 2 (blue) is placed above line 1 (red).

var pane1 = map.createPane('pane1');
var pane2 = map.createPane('pane2');

pane1.style.zIndex = 2000;
pane2.style.zIndex = 3000;

var route1 = L.Routing.control({
    waypoints: [
        L.latLng(-22.985308, -43.204845),
        L.latLng(-22.983449, -43.202773),
    ],
     lineOptions: {styles: [{pane:'pane1', color: 'blue', opacity: 1, weight: 2}]}
}).addTo(map);

var route2 = L.Routing.control({
    waypoints: [
        L.latLng(-22.983449, -43.204845),
        L.latLng(-22.984708, -43.202430),
    ],
    lineOptions: {styles: [{pane:'pane2', color: 'red', opacity: 1, weight: 2}]}
}).addTo(map);

setTimeout(function() {
  pane1.style.zIndex = 3000;
  pane2.style.zIndex = 2000;
}, 3000);

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.