Only use Canvas for routing segments

Routing trailers are lagging behind and Canvas by default might have side effects (Plugins)

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,

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());

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

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

js/util/Track.js

@@ -32,6 +32,7 @@ BR.Track = {
                     zIndexOffset: -1000,
                 });
             },
+            pane: 'tracks',
         };
     },