Added some circle drawing tool

src/app/components/toolbar/toolbar.component.html

@@ -25,17 +25,17 @@
 <ng-template #menuItem let-item let-menu="menu" let-mode="mode">
     <ng-container *ngIf="mode == 'icon' && !item.subMenu">
         <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
         </button>
     </ng-container>
     <ng-container *ngIf="mode == 'menu' && !item.subMenu">
         <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
         </button>
     </ng-container>
     <ng-container *ngIf="mode == 'icon' && item.subMenu">
         <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
         </button>
         <mat-menu #subMenu="matMenu">
             <ng-container *ngFor="let child of item.subMenu">
@@ -45,7 +45,7 @@
     </ng-container>
     <ng-container *ngIf="mode == 'menu' && item.subMenu">
         <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matMenuTriggerFor]="subMenu">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
         </button>
         <mat-menu #subMenu="matMenu">
             <ng-container *ngFor="let child of item.subMenu">

src/app/models/toolbarItem.ts

@@ -1,5 +1,6 @@
 export interface ToolbarItem {
     name: string;
+    faicon?: string;
     icon?: string;
     hidden?: boolean;
     toggle?: boolean;

src/app/services/map.service.ts

@@ -115,7 +115,8 @@ export class MapService {
         if(this.weatherLayer) this.weatherLayer.layer.addTo(this.map);
     }
 
-    newCircle(latlng: LatLng, radius: number, opts: any={}) {
+    newCircle(latlng: LatLng, radius?: number, opts: any={}) {
+        if(!radius) radius = 100_000 / this.map.getZoom();
         opts.radius = radius;
         let circle = L.circle(latlng, opts).addTo(this.map);
         circle.on('click', e => this.click.next({event: e, symbol: circle}));

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

@@ -26,7 +26,6 @@ export class MapComponent implements OnInit {
     drawColor = '#ff4141';
     isNaN = isNaN;
     map: MapService;
-    markers = [];
     position;
     positionMarker = {arrow: null, circle: null};
     shareDialog = false;
@@ -37,6 +36,9 @@ export class MapComponent implements OnInit {
     menu: ToolbarItem[] = [
         {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
         {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
+        {name: 'Circle', faicon: 'far fa-circle', toggle: true, click: () => { this.addCircle(); }},
+        {name: 'Square', faicon: 'far fa-square', toggle: true},
+        {name: 'Polygon', faicon: 'fas fa-draw-polygon', toggle: true},
         {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
         {name: 'Delete', icon: 'delete', toggle: true},
         {name: 'Map Style', icon: 'terrain', subMenu: [
@@ -69,7 +71,7 @@ export class MapComponent implements OnInit {
 
         // Handle click actions
         this.map.click.pipe(filter(e => !!e)).subscribe(e => {
-            if(!!e.symbol && this.menu[3].enabled) return this.map.delete(e.symbol);
+            if(!!e.symbol && this.menu[6].enabled) return this.map.delete(e.symbol);
             if(e.symbol instanceof L.Marker) this.bottomSheet.open(MarkerComponent, {data: e.symbol});
         });
 
@@ -90,10 +92,16 @@ export class MapComponent implements OnInit {
         });
     }
 
+    addCircle() {
+        this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(e => {
+            this.menu[2].enabled = false;
+            this.map.newCircle(e.event.latlng);
+        });
+    }
+
     addMarker() {
         this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(e => {
             this.menu[0].enabled = false;
-            this.markers.push(e.event.latlng);
             this.map.newMarker(e.event.latlng);
         });
     }
@@ -120,13 +128,13 @@ export class MapComponent implements OnInit {
     }
 
     startCalibrating() {
-        this.menu[6].enabled = true;
+        this.menu[9].enabled = true;
         this.calibration = this.bottomSheet.open(CalibrateComponent, {
             hasBackdrop: false,
             disableClose: true
         });
         this.calibration.afterDismissed().subscribe(() => {
-            this.menu[6].enabled = false;
+            this.menu[9].enabled = false;
             this.calibration = null;
         });
     }