From 72588f3fd968adbc2e2af5b202654301c1d06d3d Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 4 May 2022 22:21:51 +0200
Subject: [PATCH] Only use Canvas for routing segments

Routing trailers are lagging behind and Canvas by default might have side effects (Plugins)
---
 js/Map.js                 |  1 -
 js/plugin/Heightgraph.js  | 10 ----------
 js/plugin/Routing.js      |  2 --
 js/plugin/TracksLoader.js |  5 +++++
 js/util/Track.js          |  1 +
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/js/Map.js b/js/Map.js
index dbcb69c..3e1f1d9 100644
--- a/js/Map.js
+++ b/js/Map.js
@@ -17,7 +17,6 @@ BR.Map = {
         }
 
         map = new L.Map('map', {
-            renderer: L.canvas({ tolerance: BR.Browser.touch ? 10 : 5 }),
             zoomControl: false, // add it manually so that we can translate it
             worldCopyJump: true,
             minZoom: 0,
diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js
index 8cc1660..715ee3f 100644
--- a/js/plugin/Heightgraph.js
+++ b/js/plugin/Heightgraph.js
@@ -63,16 +63,6 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
             },
         },
 
-        onAdd(map) {
-            // As we're using canvas, initialize an `svg` root that is needed for map marker,
-            // see `Heightgraph._showMapMarker`
-            if (!document.querySelector('.leaflet-overlay-pane svg')) {
-                L.svg().addTo(map);
-            }
-
-            return L.Control.Heightgraph.prototype.onAdd.call(this, map);
-        },
-
         addBelow: function (map) {
             // waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
             // this.width($('#map').outerWidth());
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index 58fbbd5..cfc6c43 100644
--- a/js/plugin/Routing.js
+++ b/js/plugin/Routing.js
@@ -51,7 +51,6 @@ BR.Routing = L.Routing.extend({
 
         this._segmentsCasing = new L.FeatureGroup().addTo(map);
         this._loadingTrailerGroup = new L.FeatureGroup().addTo(map);
-        this._loadingTrailerRenderer = L.svg(); // CSS animation based on SVG path element
 
         var container = L.Routing.prototype.onAdd.call(this, map);
 
@@ -389,7 +388,6 @@ BR.Routing = L.Routing.extend({
                 opacity: this.options.styles.trailer.opacity,
                 dashArray: [10, 10],
                 className: 'loading-trailer',
-                renderer: this._loadingTrailerRenderer,
             });
             this._loadingTrailerGroup.addLayer(loadingTrailer);
         }
diff --git a/js/plugin/TracksLoader.js b/js/plugin/TracksLoader.js
index a68990a..bef99e0 100644
--- a/js/plugin/TracksLoader.js
+++ b/js/plugin/TracksLoader.js
@@ -70,6 +70,11 @@ BR.tracksLoader = function (map, layersControl, routing, pois) {
             }
         },
     });
+
+    // make sure tracks are always shown below route by adding a custom pane below `leaflet-overlay-pane`
+    map.createPane('tracks');
+    map.getPane('tracks').style.zIndex = 350;
+
     var tracksLoaderControl = new TracksLoader();
     tracksLoaderControl.addTo(map);
 
diff --git a/js/util/Track.js b/js/util/Track.js
index 19734ca..27cb7fa 100644
--- a/js/util/Track.js
+++ b/js/util/Track.js
@@ -32,6 +32,7 @@ BR.Track = {
                     zIndexOffset: -1000,
                 });
             },
+            pane: 'tracks',
         };
     },