InteractivePoly: touch hinting at mobile

src/modules/InteractivePoly.ts

@@ -148,13 +148,14 @@ export class Component extends Polyline {
       this.is_editing = false;
       this.stopDragHinting();
       this.stopDrawing();
-
+      this.touchHinter.removeFrom(this._map);
       this.fire('editordisable');
     },
     enable: () => {
       this.is_editing = true;
       this.showVisibleMarkers();
       this.startDragHinting();
+      this.touchHinter.addTo(this._map);
 
       this.fire('editorenable');
     },
@@ -525,9 +526,9 @@ export class Component extends Polyline {
   };
 
   touchHinter: Polyline = new Polyline([], {
-    weight: 25,
-    color: 'rgba(255, 255, 255, 0)',
+    weight: 24,
     smoothFactor: 3,
+    className: 'touch-hinter-poly'
     // bubblingMouseEvents: false,
   });
 
@@ -563,7 +564,7 @@ Component.addInitHook(function () {
       this.on('latlngschange', this.updateTouchHinter);
 
       if (window.innerWidth < 768) {
-        this.touchHinter.setStyle({ weight: 50 });
+        this.touchHinter.setStyle({ weight: 32 });
       }
     }
   });

src/styles/map.less

@@ -50,6 +50,7 @@
       width: 32px;
       height: 32px;
       transform: translate(-8px, -8px);
+      background: rgba(255, 50, 0, 0.3);
     }
   }
 
@@ -71,6 +72,14 @@
   }
 }
 
+.touch-hinter-poly {
+  stroke: rgba(255, 50, 0, 0);
+
+  @media (max-width: @mobile_breakpoint) {
+    stroke: rgba(255, 50, 0, 0.1);
+  }
+}
+
 .leaflet-control-container .leaflet-routing-container-hide {
     display: none;
 }