diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index a8282c1..04dbc7c 100644 --- a/src/modules/InteractivePoly.ts +++ b/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 }); } } }); diff --git a/src/styles/map.less b/src/styles/map.less index 214fb9e..e539ab0 100644 --- a/src/styles/map.less +++ b/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; }