diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 037e647..8c115fe 100644 --- a/src/app/services/map.service.ts +++ b/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); } diff --git a/src/main.ts b/src/main.ts index 1a40b97..71bbcfc 100644 --- a/src/main.ts +++ b/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; - - 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 - }); + this._map.fire('touchstart', this._eventWrapper(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'); - 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 - }); + this._map.fire('touchmove', this._eventWrapper(e)); } }); L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);