Fixed drawing on mobile

src/app/components/toolbar/toolbar.component.ts

@@ -20,7 +20,7 @@ export class ToolbarComponent implements AfterViewInit {
 
     @HostListener('window:resize', ['$event'])
     ngAfterViewInit() {
-        setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 200) / 75), 1);
+        setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 100) / 75), 1);
     }
 
     clickWrapper(item: ToolbarItem, menu?: ToolbarItem[]) {

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}).setView({lat: 0, lng: 0}, 10);
+        this.map = L.map(elementId, {attributionControl: false, zoomControl: false, maxBoundsViscosity: 1}).setView({lat: 0, lng: 0}, 10);
         this.map.on('click', (e) => this.click.next(e.latlng));
         this.setMapLayer();
     }
@@ -140,21 +140,20 @@ export class MapService {
     }
 
     startDrawing() {
-        this.map.dragging.disable();
-
-        this.drawListener = () => {
-            let poly = L.polyline([], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
+        this.map.setMaxBounds(this.map.getBounds());
+        this.drawListener = e => {
+            let 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', pushLine);
-            this.map.on('mouseup', () => this.map.off('mousemove', pushLine));
+            this.map.on('mousemove touchmove', pushLine);
+            this.map.on('mouseup touchend', () => this.map.off('mousemove touchmove', pushLine));
         };
 
-        this.map.on('mousedown', this.drawListener);
+        this.map.on('mousedown touchstart', this.drawListener);
     }
 
     stopDrawing() {
-        this.map.dragging.enable();
-        this.map.off('mousedown', this.drawListener);
+        this.map.setMaxBounds(null);
+        this.map.off('mousedown touchstart', this.drawListener);
     }
 }

src/main.ts

@@ -1,13 +1,68 @@
 import 'hammerjs';
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 
 if (environment.production) {
-  enableProdMode();
+    enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+    .catch(err => console.error(err));
+
+// Add touch events to leaflet
+declare const L;
+
+L.Map.mergeOptions({touchExtend: true});
+
+L.Map.TouchExtend = L.Handler.extend({
+    initialize: function (map) {
+        this._map = map;
+        this._container = map._container;
+        this._pane = map._panes.overlayPane;
+    },
+    addHooks: function () {
+        L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
+        L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this);
+        L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this);
+    },
+    removeHooks: function () {
+        L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
+        L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
+        L.DomEvent.off(this._container, 'touchmove', this._onTouchMove);
+    },
+    _onTouchStart: function (e) {
+        if (!this._map._loaded) return;
+
+      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});
+    },
+    _onTouchMove: function(e) {
+        if(!this._map._loaded) return;
+        console.log('fire');
+      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);