Improve route interactivity by using canvas

js/Map.js

@@ -12,7 +12,12 @@ BR.Map = {
 
         var maxZoom = 19;
 
+        if (BR.Browser.touch) {
+            L.Draggable.prototype.options.clickTolerance = 10;
+        }
+
         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,6 +63,16 @@ 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

@@ -207,7 +207,7 @@ BR.Routing = L.Routing.extend({
     _addSegmentCasing: function (e) {
         // extend layer style to inherit beeline dashArray
         const casingStyle = Object.assign({}, e.layer.options, this.options.styles.trackCasing);
-        const casing = L.polyline(e.layer.getLatLngs(), casingStyle);
+        const casing = L.polyline(e.layer.getLatLngs(), Object.assign({}, casingStyle, { interactive: false }));
         this._segmentsCasing.addLayer(casing);
         e.layer._casing = casing;
         this._segments.bringToFront();