From 47f3a06be6127e2bdf16e753105b4905cb5efd96 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Thu, 20 May 2021 13:11:18 +0200
Subject: [PATCH] Improve route interactivity by using canvas

---
 js/Map.js                |  5 +++++
 js/plugin/Heightgraph.js | 10 ++++++++++
 js/plugin/Routing.js     |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/js/Map.js b/js/Map.js
index 08c4f97..dbcb69c 100644
--- a/js/Map.js
+++ b/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,
diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js
index 715ee3f..8cc1660 100644
--- a/js/plugin/Heightgraph.js
+++ b/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());
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index 0bcb459..63665b4 100644
--- a/js/plugin/Routing.js
+++ b/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();