Fixed drawing on mobile

src/app/services/map.service.ts

@@ -36,7 +36,7 @@ export class MapService {
     map;
 
     constructor(private elementId: string) {
-        this.map = L.map(elementId, {attributionControl: false, zoomControl: false, maxBoundsViscosity: 1}).setView({lat: 0, lng: 0}, 10);
+        this.map = L.map(elementId, {attributionControl: false, tap: true, zoomControl: false, maxBoundsViscosity: 1, doubleClickZoom: false}).setView({lat: 0, lng: 0}, 10);
         this.map.on('click', (e) => this.click.next(e.latlng));
         this.setMapLayer();
     }
@@ -58,6 +58,20 @@ export class MapService {
         this.measurements.forEach(m => this.delete(m.line, m.decoration));
     }
 
+    lock(unlock?: boolean) {
+        if(unlock) {
+            this.map.setMaxBounds(null);
+            this.map.boxZoom.disable();
+            this.map.touchZoom.enable();
+            this.map.scrollWheelZoom.enable();
+        } else {
+            this.map.setMaxBounds(this.map.getBounds());
+            this.map.boxZoom.disable();
+            this.map.touchZoom.disable();
+            this.map.scrollWheelZoom.disable();
+        }
+    }
+
     setMapLayer(layer?: MapLayers) {
         if(this.mapLayer) this.map.removeLayer(this.mapLayer);
         switch(layer) {
@@ -140,9 +154,10 @@ export class MapService {
     }
 
     startDrawing() {
-        this.map.setMaxBounds(this.map.getBounds());
+        this.lock();
+        let poly;
         this.drawListener = e => {
-            let poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
+            poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
             poly.on('click', () => { if(this.deleteMode) this.map.removeLayer(poly); });
             let pushLine = e => poly.addLatLng(e.latlng);
             this.map.on('mousemove touchmove', pushLine);
@@ -153,6 +168,7 @@ export class MapService {
     }
 
     stopDrawing() {
+        this.lock(true);
         this.map.setMaxBounds(null);
         this.map.off('mousedown touchstart', this.drawListener);
     }

src/main.ts

@@ -33,36 +33,29 @@ L.Map.TouchExtend = L.Handler.extend({
         L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
         L.DomEvent.off(this._container, 'touchmove', this._onTouchMove);
     },
+    _eventWrapper: function(e) {
+        let containerPoint = this._map.mouseEventToContainerPoint(e);
+        let layerPoint = this._map.containerPointToLayerPoint(containerPoint);
+        let latlng = this._map.layerPointToLatLng(layerPoint);
+
+        return {
+            latlng: latlng,
+            layerPoint: layerPoint,
+            containerPoint: containerPoint,
+            originalEvent: e
+        }
+    },
     _onTouchStart: function (e) {
         if (!this._map._loaded) return;
-
+        this._map.fire('touchstart', this._eventWrapper(e));
-      var containerPoint = this._map.mouseEventToContainerPoint(e),
-          layerPoint = this._map.containerPointToLayerPoint(containerPoint),
-          latlng = this._map.layerPointToLatLng(layerPoint);
-
-        this._map.fire('touchstart', {
-          latlng: latlng,
-          layerPoint: layerPoint,
-          containerPoint: containerPoint,
-            originalEvent: e
-        });
     },
     _onTouchEnd: function (e) {
         if (!this._map._loaded) return;
-        this._map.fire('touchend', {originalEvent: e});
+        this._map.fire('touchend', this._eventWrapper(e));
     },
     _onTouchMove: function(e) {
         if(!this._map._loaded) return;
-        console.log('fire');
+        this._map.fire('touchmove', this._eventWrapper(e));
-      var containerPoint = this._map.mouseEventToContainerPoint(e),
-          layerPoint = this._map.containerPointToLayerPoint(containerPoint),
-          latlng = this._map.layerPointToLatLng(layerPoint);
-        this._map.fire('touchmove', {
-          latlng: latlng,
-          layerPoint: layerPoint,
-          containerPoint: containerPoint,
-          originalEvent: e
-        });
     }
 });
 L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);