diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html index 78e0264..67730f2 100644 --- a/src/app/components/toolbar/toolbar.component.html +++ b/src/app/components/toolbar/toolbar.component.html @@ -25,17 +25,17 @@ @@ -45,7 +45,7 @@ diff --git a/src/app/models/toolbarItem.ts b/src/app/models/toolbarItem.ts index 83e52d4..5b1a24e 100644 --- a/src/app/models/toolbarItem.ts +++ b/src/app/models/toolbarItem.ts @@ -1,5 +1,6 @@ export interface ToolbarItem { name: string; + faicon?: string; icon?: string; hidden?: boolean; toggle?: boolean; diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index cf7fbf5..9d0b9a0 100644 --- a/src/app/services/map.service.ts +++ b/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})); diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index 6ba891b..46f6117 100644 --- a/src/app/views/map/map.component.ts +++ b/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; }); }