ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Fixed drawing on mobile

Browse Source
This commit is contained in:
Zakary Timson 2019-08-24 12:02:43 -04:00
parent bc673ae6ab
commit 3c54a3786c
2 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/services/map.service.ts
View File

@ -36,7 +36,7 @@ export class MapService {
map; map;
constructor(private elementId: string) { 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.map.on('click', (e) => this.click.next(e.latlng));
this.setMapLayer(); this.setMapLayer();
} }
@ -58,6 +58,20 @@ export class MapService {
this.measurements.forEach(m => this.delete(m.line, m.decoration)); 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) { setMapLayer(layer?: MapLayers) {
if(this.mapLayer) this.map.removeLayer(this.mapLayer); if(this.mapLayer) this.map.removeLayer(this.mapLayer);
switch(layer) { switch(layer) {
@ -140,9 +154,10 @@ export class MapService {
} }
startDrawing() { startDrawing() {
this.map.setMaxBounds(this.map.getBounds()); this.lock();
let poly;
this.drawListener = e => { 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); }); poly.on('click', () => { if(this.deleteMode) this.map.removeLayer(poly); });
let pushLine = e => poly.addLatLng(e.latlng); let pushLine = e => poly.addLatLng(e.latlng);
this.map.on('mousemove touchmove', pushLine); this.map.on('mousemove touchmove', pushLine);
@ -153,6 +168,7 @@ export class MapService {
} }
stopDrawing() { stopDrawing() {
this.lock(true);
this.map.setMaxBounds(null); this.map.setMaxBounds(null);
this.map.off('mousedown touchstart', this.drawListener); this.map.off('mousedown touchstart', this.drawListener);
} }

31
src/main.ts
View File

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