ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Added some circle drawing tool

Browse Source
This commit is contained in:
Zakary Timson 2019-08-25 12:04:15 -04:00
parent b8bb4aed2b
commit 30b74dd91c
4 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/toolbar/toolbar.component.html
View File

@ -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">

1
src/app/models/toolbarItem.ts
View File

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

3
src/app/services/map.service.ts
View File

@ -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}));

18
src/app/views/map/map.component.ts
View File

@ -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;
});
}