Added draw color picker

src/app/views/map/map.component.html

@@ -6,8 +6,8 @@
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2" [clickable]="false"></agm-circle>
     </ng-container>
 </agm-map>
-<div class="palette">
-    <palette></palette>
+<div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
+    <palette [(selected)]="drawColor"></palette>
 </div>
 <div class="info p-2">
     <span *ngIf="!position" class="text-danger">No GPS</span>

src/app/views/map/map.component.scss

@@ -2,6 +2,13 @@
   height: calc(100vh - 40px);
 }
 
+.palette {
+  position: fixed;
+  z-index: 100;
+  top: 50px;
+  right: 15px;
+}
+
 .info {
   background-color: #00000050;
   position: fixed;

src/app/views/map/map.component.ts

@@ -6,19 +6,23 @@ import {CalibrateComponent} from "../../components/calibrate/calibrate.component
 import {ToolbarItem} from "../../components/toolbar/toolbarItem";
 import {BehaviorSubject} from "rxjs";
 import {LatLngLiteral} from "@agm/core";
+import {flyInRight, flyOutRight} from "../../animations";
 
 declare const google;
 
 @Component({
     selector: 'map',
     templateUrl: 'map.component.html',
-    styleUrls: ['map.component.scss']
+    styleUrls: ['map.component.scss'],
+    animations: [flyInRight('150ms'), flyOutRight('150ms')]
 })
 export class MapComponent {
+    drawColor: string;
     drawListener = [];
     mapApi: any;
     mapClick = new BehaviorSubject<LatLngLiteral>(null);
     position: any;
+    showPalette = false;
     style = 'terrain';
     isNaN = isNaN;
 
@@ -146,10 +150,11 @@ export class MapComponent {
     }
 
     startDraw() {
+        this.showPalette = true;
         this.mapApi.setOptions({draggable: false});
 
         let drawHander = () => {
-            let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
+            let poly = new google.maps.Polyline({map: this.mapApi, clickable: true, strokeColor: this.drawColor});
             google.maps.event.addListener(poly, 'click', () => {
                 if(this.menu[1][3].enabled) poly.setMap(null);
             });
@@ -170,6 +175,7 @@ export class MapComponent {
     }
 
     endDraw() {
+        this.showPalette = false;
         this.mapApi.setOptions({draggable: true});
         this.drawListener.forEach(listener => google.maps.event.removeListener(listener));
         this.drawListener = [];