Drawing GPX tracks with shadows using Leaflet.js and Leaflet GPX

I am using Leaflet.js and Leaflet GPX to display a number of GPX tracks on a map. The tracks should have a white shadow so that they stand out better from the map. To do this, each track is added twice to the map, first as a shadow (wider line in white) and then as an actual track (thinner line). The order in which the elements are added to the map should actually be retained by Leaflet.

const trackColors = ['#FF6600', '#FF0066', '#6600FF', '#0066FF'];

// Create map
let map = L.map ('map');

// Create tile layer
L.tileLayer ('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png').addTo (map);

// Add GPX tracks
for (let i = 0; i < tracks.length; i++)
{
  // Create white track shadow, 8 pixels wide
  let trackShadow = new L.GPX (tracks [i],
  {
    async: true,
    marker_options:
    {
      startIconUrl: null,
      endIconUrl:   null,
      shadowUrl:    null
    },
    parseElements: ['track', 'route'],
    polyline_options:
    {
      color: '#FFFFFF',
      opacity: 0.6,
      weight: 8,
      lineCap: 'round'
    }
  }).addTo (map);

  // Create colored track, 4 pixels wide
  let track = new L.GPX (tracks [i],
  {
    async: true,
    marker_options:
    {
      startIconUrl: null,
      endIconUrl:   null,
      shadowUrl:    null
    },
    parseElements: ['track', 'route'],
    polyline_options:
    {
      color:   trackColors [i % trackColors.length],
      opacity: 1.0,
      weight:  4,
      lineCap: 'round'
    }
  }).addTo (map);
}

Unfortunately, it sometimes happens that the track shadow is drawn OVER the actual track, which means that the elements are automatically rearranged within Leaflet.

  • Is it possible to switch off the sorting of elements?
  • Is there perhaps an event in which I can manually reorder all tracks using bringToBack() and bringToFront() before the first drawing?