Added square tool

src/app/models/mapSymbol.ts

@@ -21,7 +21,7 @@ export interface Circle extends MapSymbol {
     radius?: number;
 }
 
-export interface Square extends MapSymbol {
+export interface Rectangle extends MapSymbol {
     latlng: LatLng;
     latlng2: LatLng;
 }

src/app/services/map.service.ts

@@ -1,7 +1,7 @@
 import {BehaviorSubject} from "rxjs";
 import {latLngDistance} from "../utils";
 import {environment} from "../../environments/environment";
-import {Circle, LatLng, Marker, Measurement} from "../models/mapSymbol";
+import {Circle, LatLng, Marker, Measurement, Rectangle} from "../models/mapSymbol";
 
 declare const L;
 
@@ -151,6 +151,14 @@ export class MapService {
         return group;
     }
 
+    newRectangle(r: Rectangle) {
+        if(!r.color) r.color = '#ff4141';
+        let rect = new L.Rectangle([r.latlng, r.latlng2], r).addTo(this.map);
+        rect.symbol = r;
+        rect.on('click', e => this.click.next({event: e, symbol: rect}));
+        return rect;
+    }
+
     startDrawing() {
         this.lock();
         this.drawListener = e => {

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

@@ -35,10 +35,10 @@ export class MapComponent implements OnInit {
     measuringSubscription: Subscription;
 
     menu: ToolbarItem[] = [
-        {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
+        {name: 'Marker', icon: 'room', toggle: true, click: () => this.addMarker()},
         {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
-        {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => { this.addCircle(); }},
+        {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => this.addCircle()},
-        {name: 'Square', icon: 'crop_square', toggle: true},
+        {name: 'Square', icon: 'crop_square', toggle: true, click: () => this.addRectangle()},
         {name: 'Polygon', icon: 'details', toggle: true},
         {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
         {name: 'Delete', icon: 'delete', toggle: true},
@@ -121,6 +121,20 @@ export class MapComponent implements OnInit {
         });
     }
 
+    addRectangle() {
+        let lastPoint;
+        this.map.click.pipe(skip(1), take(2)).subscribe(e => {
+            if(lastPoint) {
+                this.menu[3].enabled = false;
+                console.log({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
+                this.map.newRectangle({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
+                this.map.delete(lastPoint);
+                return;
+            }
+            lastPoint = this.map.newMarker({latlng: e.event.latlng});
+        })
+    }
+
     center(pos?) {
         if(!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
         this.map.centerOn(pos);