1

I am displaying many gpx tracks on a map using leaflet-gpx, and I can bring them to the back of the other tracks:

LG = new L.GPX(...)  //loads the track (not detailed here)

LG.on('click',function(e){
var track = e.target;
track.bringToBack();}

and this works, the track is behind all the other ones.

However, I would like to be able to bring it back to the front by clicking on it again, with something like this toggle:

if track.isInFront{  //this property does not exist
   track.bringToBack();}
else {track.bringToFront();}

but I haven't found the way to get the track.isInFront property. I tried getting the zIndex via various track.ZIndex, or track.getZIndex() but it just returns undefined or an error: getZIndex is not a function.

track.setZIndex(100) does not raise an error, and bring the tracks forwards or backwards depending on the value, but I still cannot find a way to read-back the ZIndex.

Is there a way to know where the track is in relation to the others? Or to get its ZIndex ?

As a workaround to bring the track back to the front, I can clear and redraw the track via the tickboxes of the L.control, but it's a bit more clicking.

1 Answer 1

1

Since GPX tracks are polylines, zIndex does not apply to them, since in Leaflet they are implemented as paths within same SVG element. The one that comes later is on the top. Methods bringToFront() and bringToBack just put selected path at the start/end of SVG element.

This means you have to take care of info if path/layer is in the front. You can do that by using some custom option with any name that does not conflict with Leaflet layer properties, for example isInFront.

Your code could then look something like this:

LG.on('click', function(e) {
  var track = evt.target;
  var isInFront = track.isInFront;
  if (isInFront)
    track.bringToBack();
  else {
    track.bringToFront();
  }
  track.isInFront = !isInFront;
};

The only caveat here is initial setting of isInFront option for the GPX path that is the last one added to the map. This one should have isInFront option set to 'true', but then the one before that (if there was any) would have it to be set to false. But all this depends on the logic of your app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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