New clicking system

src/app/services/map.service.ts

@@ -2,6 +2,7 @@ import {BehaviorSubject} from "rxjs";
 import {distanceInM} from "../utils";
 import {environment} from "../../environments/environment";
 import {LatLng} from "../models/latlng";
+import {filter} from "rxjs/operators";
 
 declare const L;
 
@@ -29,15 +30,14 @@ export class MapService {
     private mapLayer;
     private weatherLayer;
 
-    click = new BehaviorSubject<{lat: number, lng: number}>(null);
+    click = new BehaviorSubject<{event: any, symbol?: any}>(null);
-    deleteMode = false;
     drawingColor = '#ff4141';
     drawingWeight = 10;
     map;
 
     constructor(private elementId: string) {
         this.map = L.map(elementId, {attributionControl: false, tap: true, zoomControl: false, maxBoundsViscosity: 1, doubleClickZoom: false}).setView({lat: 0, lng: 0}, 10);
-        this.map.on('click', (e) => this.click.next(e.latlng));
+        this.map.on('click', (e) => this.click.next({event: e}));
         this.setMapLayer();
     }
 
@@ -116,60 +116,50 @@ export class MapService {
     newCircle(latlng: LatLng, radius: number, opts: any={}) {
         opts.radius = radius;
         let circle = L.circle(latlng, opts).addTo(this.map);
-        circle.on('click', () => {
+        circle.on('click', e => this.click.next({event: e, symbol: circle}));
-            if(!opts.noDelete && this.deleteMode) {
-                this.delete(circle);
-            } else {
-
-            }
-        });
         return circle;
     }
 
     newMarker(latlng: LatLng, opts: any={}) {
         if(!opts.icon) opts.icon = MARKER;
         let marker = L.marker(latlng, opts).addTo(this.map);
+        if(opts.label) marker.bindTooltip(opts.label, {permanent: true, direction: 'bottom'});
         this.markers.push(marker);
-        marker.on('click', () => {
+        marker.on('click', e => this.click.next({event: e, symbol: marker}));
-            if(!opts.noDelete && this.deleteMode) {
-                this.delete(marker);
-            } else {
-
-            }
-        });
         return marker;
     }
 
     newMeasurement(latlng1: LatLng, latlng2: LatLng) {
-        let line = L.polyline([latlng1, latlng2], {color: '#ff4141', weight: 5}).addTo(this.map);
+        let line = L.polyline([latlng1, latlng2], {color: '#ff4141', weight: 5});
         let decoration = L.polylineDecorator(line, {patterns: [
-                {offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})},
+            {offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})},
-                {offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})}
+            {offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})}
-            ]}).addTo(this.map);
+        ]});
         this.measurements.push({line: line, decoration: decoration});
         let distance = distanceInM(latlng1.lat, latlng1.lng, latlng2.lat, latlng2.lng);
+        let group = L.layerGroup([line, decoration]);
+        line.on('click', e => this.click.next({event: e, symbol: group}));
+        group.addTo(this.map);
         line.bindPopup(`${distance > 1000 ? Math.round(distance / 100) / 10 : Math.round(distance)} ${distance > 1000 ? 'k' : ''}m`, {autoClose: false, closeOnClick: false}).openPopup();
-        line.on('click', () => { if(this.deleteMode) this.delete(line, decoration);});
+        return group;
-        return {line: line, decoration: decoration};
     }
 
     startDrawing() {
         this.lock();
-        let poly;
         this.drawListener = e => {
-            poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
+            let poly = L.polyline([e.latlng], {interactive: true, color: this.drawingColor, weight: this.drawingWeight}).addTo(this.map);
-            poly.on('click', () => { if(this.deleteMode) this.map.removeLayer(poly); });
+            poly.on('click', e => this.click.next({event: e, symbol: poly}));
             let pushLine = e => poly.addLatLng(e.latlng);
-            this.map.on('mousemove touchmove', pushLine);
+            this.map.on('touchmove', pushLine);
-            this.map.on('mouseup touchend', () => this.map.off('mousemove touchmove', pushLine));
+            this.map.on('touchend', () => this.map.off('touchmove', pushLine));
         };
 
-        this.map.on('mousedown touchstart', this.drawListener);
+        this.map.on('touchstart', this.drawListener);
     }
 
     stopDrawing() {
         this.lock(true);
         this.map.setMaxBounds(null);
-        this.map.off('mousedown touchstart', this.drawListener);
+        this.map.off('touchstart', this.drawListener);
     }
 }

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

@@ -7,6 +7,7 @@ import {ToolbarItem} from "../../models/toolbarItem";
 import {flyInRight, flyOutRight} from "../../animations";
 import {ARROW, MapLayers, MapService, WeatherLayers} from "../../services/map.service";
 import {Subscription} from "rxjs";
+import {MarkerComponent} from "../../components/marker/marker.component";
 
 declare const L;
 
@@ -31,7 +32,7 @@ export class MapComponent implements OnInit {
         {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
         {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
         {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
-        {name: 'Delete', icon: 'delete', toggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
+        {name: 'Delete', icon: 'delete', toggle: true},
         {name: 'Map Style', icon: 'terrain', subMenu: [
             {name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
             {name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
@@ -54,6 +55,17 @@ export class MapComponent implements OnInit {
 
     ngOnInit() {
         this.map = new MapService('map');
+
+        // Handle click actions
+        this.map.click.pipe(filter(e => !!e)).subscribe(e => {
+            const event = e.event;
+            const symbol = e.symbol;
+
+            if(!!symbol && this.menu[3].enabled) return this.map.delete(symbol);
+
+            if(symbol instanceof L.Marker) this.bottomSheet.open(MarkerComponent, {data: symbol});
+        });
+
         this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
             if(!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
             if(this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
@@ -77,10 +89,10 @@ export class MapComponent implements OnInit {
     }
 
     addMarker() {
-        this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(latlng => {
+        this.map.click.pipe(skip(1), take(1), filter(() => this.menu[0].enabled)).subscribe(e => {
             this.menu[0].enabled = false;
-            this.markers.push(latlng);
+            this.markers.push(e.event.latlng);
-            this.map.newMarker(latlng);
+            this.map.newMarker(e.event.latlng);
         });
     }
 
@@ -89,12 +101,12 @@ export class MapComponent implements OnInit {
     }
 
     startMeasuring() {
-        this.measuringSubscription = this.map.click.pipe(skip(1)).subscribe(latlng => {
+        this.measuringSubscription = this.map.click.pipe(skip(1)).subscribe(e => {
             if(this.lastMeasuringPoint) {
-                this.map.newMeasurement(this.lastMeasuringPoint.getLatLng(), latlng);
+                this.map.newMeasurement(this.lastMeasuringPoint.getLatLng(), e.event.latlng);
                 this.map.delete(this.lastMeasuringPoint);
             }
-            this.lastMeasuringPoint = this.map.newMarker(latlng);
+            this.lastMeasuringPoint = this.map.newMarker(e.event.latlng);
         })
     }