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 11:26:30 -04:00
parent 5bfbb7c6f1
commit bc673ae6ab
3 changed files with 71 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/toolbar/toolbar.component.ts
View File

@ -20,7 +20,7 @@ export class ToolbarComponent implements AfterViewInit {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
ngAfterViewInit() { 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[]) { clickWrapper(item: ToolbarItem, menu?: ToolbarItem[]) {

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

63
src/main.ts
View File

@ -1,9 +1,9 @@
import 'hammerjs'; import 'hammerjs';
import { enableProdMode } from '@angular/core'; import {enableProdMode} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import {AppModule} from './app/app.module';
import { environment } from './environments/environment'; import {environment} from './environments/environment';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
@ -11,3 +11,58 @@ if (environment.production) {
platformBrowserDynamic().bootstrapModule(AppModule) 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);