From 6c8a387e9968a9ccec7199e5232c2dca33c8e844 Mon Sep 17 00:00:00 2001
From: ztimson <ztimson@psdrcs.com>
Date: Tue, 9 Jul 2019 14:10:34 -0400
Subject: [PATCH] Added drawing

---
 src/app/map/map.component.html | 13 +++++++------
 src/app/map/map.component.ts   | 30 +++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index 52b8399..a2f1176 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -4,11 +4,12 @@
     </button>
     <small class="ml-1 text-muted">{{version}}</small>
     <div class="ml-auto">
-        <button mat-icon-button (click)="mode = 'marker'"><mat-icon>room</mat-icon></button> <!-- Add Marker -->
-        <button mat-icon-button><mat-icon>create</mat-icon></button> <!-- Create shape -->
-        <button mat-icon-button><mat-icon>straighten</mat-icon></button> <!-- Measure distance -->
-        <button mat-icon-button [matMenuTriggerFor]="mapStyle"><mat-icon>layers</mat-icon></button>
-        <mat-menu #mapStyle="matMenu">
+        <button mat-icon-button (click)="mode = 'marker'" [ngClass]="{'selected': mode == 'marker'}"><mat-icon>room</mat-icon></button>
+        <button mat-icon-button (click)="draw()" [ngClass]="{'selected': !!drawListener}"><mat-icon>create</mat-icon></button>
+        <button mat-icon-button><mat-icon>straighten</mat-icon></button>
+        <button mat-icon-button (click)="remove = !remove" [ngClass]="{'selected': remove}"><mat-icon>delete</mat-icon></button>
+        <button mat-icon-button [matMenuTriggerFor]="styleMenu"><mat-icon>layers</mat-icon></button>
+        <mat-menu #styleMenu="matMenu">
             <button mat-menu-item (click)="style = 'satellite'" [ngClass]="{'selected': style == 'satellite'}">Satellite</button>
             <button mat-menu-item (click)="style = 'terrain'" [ngClass]="{'selected': style == 'terrain'}">Terrain</button>
             <button mat-menu-item (click)="style = 'roadmap'" [ngClass]="{'selected': style == 'roadmap'}">Road</button>
@@ -18,7 +19,7 @@
         <button mat-icon-button><mat-icon>perm_identity</mat-icon></button>
     </div>
 </mat-toolbar>
-<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
+<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" [disableDoubleClickZoom]="true" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
     <ng-container *ngIf="position">
         <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
         <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 059a86d..dc69453 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -3,16 +3,20 @@ import {GeolocationService} from "../geolocation/geolocation.service";
 import {filter} from "rxjs/operators";
 import {version} from "../../../package.json";
 
+declare const google;
+
 @Component({
     selector: 'map',
     templateUrl: 'map.component.html',
     styleUrls: ['map.component.scss']
 })
 export class MapComponent {
+    drawListener;
     mapApi: any;
     markers = [];
-    mode: 'marker';
+    mode: 'marker' | 'circle' | 'square' | 'draw';
     position: any;
+    remove = false;
     style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
     version = version;
 
@@ -41,4 +45,28 @@ export class MapComponent {
             this.mode = null;
         }
     }
+
+    draw() {
+        if(!this.drawListener) {
+            this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), 'mousedown', () => {
+                let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
+                google.maps.event.addListener(poly, 'click', () => {
+                    if(this.remove) poly.setMap(null);
+                });
+                let moveListener = google.maps.event.addListener(this.mapApi, 'mousemove', e => poly.getPath().push(e.latLng));
+                google.maps.event.addListener(this.mapApi, 'mouseup', () => google.maps.event.removeListener(moveListener));
+                google.maps.event.addListener(poly, 'mouseup', () => google.maps.event.removeListener(moveListener));
+            });
+
+            this.mapApi.setOptions({
+                draggable: false
+            });
+        } else {
+            google.maps.event.removeListener(this.drawListener);
+            this.drawListener = null;
+            this.mapApi.setOptions({
+                draggable: true
+            });
+        }
+    }
 }