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

Draw on mobile

Browse Source
This commit is contained in:
ztimson 2019-07-09 14:35:16 -04:00
parent 6c8a387e99
commit cb755ea7ae
1 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/map/map.component.ts
View File

@ -2,6 +2,7 @@ import {Component} from "@angular/core";
import {GeolocationService} from "../geolocation/geolocation.service"; import {GeolocationService} from "../geolocation/geolocation.service";
import {filter} from "rxjs/operators"; import {filter} from "rxjs/operators";
import {version} from "../../../package.json"; import {version} from "../../../package.json";
import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
declare const google; declare const google;
@ -14,13 +15,15 @@ export class MapComponent {
drawListener; drawListener;
mapApi: any; mapApi: any;
markers = []; markers = [];
mobile = false;
mode: 'marker' | 'circle' | 'square' | 'draw'; mode: 'marker' | 'circle' | 'square' | 'draw';
position: any; position: any;
remove = false; remove = false;
style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain'; style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
version = version; version = version;
constructor(public geolocation: GeolocationService) { constructor(bpObserver: BreakpointObserver, geolocation: GeolocationService) {
bpObserver.observe([Breakpoints.Handset]).subscribe(results => this.mobile = results.matches);
geolocation.location.pipe(filter(coord => !!coord)).subscribe(pos => { geolocation.location.pipe(filter(coord => !!coord)).subscribe(pos => {
if(this.mapApi) { if(this.mapApi) {
console.log(pos); console.log(pos);
@ -48,25 +51,20 @@ export class MapComponent {
draw() { draw() {
if(!this.drawListener) { if(!this.drawListener) {
this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), 'mousedown', () => { this.mapApi.setOptions({draggable: false});
this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), (this.mobile ? 'touchstart' : 'mousedown'), () => {
let poly = new google.maps.Polyline({map: this.mapApi, clickable: true}); let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
google.maps.event.addListener(poly, 'click', () => { google.maps.event.addListener(poly, 'click', () => {
if(this.remove) poly.setMap(null); if(this.remove) poly.setMap(null);
}); });
let moveListener = google.maps.event.addListener(this.mapApi, 'mousemove', e => poly.getPath().push(e.latLng)); let moveListener = google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchmove' : 'mousemove'), e => poly.getPath().push(e.latLng));
google.maps.event.addListener(this.mapApi, 'mouseup', () => google.maps.event.removeListener(moveListener)); google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener));
google.maps.event.addListener(poly, 'mouseup', () => google.maps.event.removeListener(moveListener)); google.maps.event.addListener(poly, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener));
});
this.mapApi.setOptions({
draggable: false
}); });
} else { } else {
this.mapApi.setOptions({draggable: true});
google.maps.event.removeListener(this.drawListener); google.maps.event.removeListener(this.drawListener);
this.drawListener = null; this.drawListener = null;
this.mapApi.setOptions({
draggable: true
});
} }
} }
} }