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

Added some layers

Browse Source
This commit is contained in:
Zakary Timson 2019-08-23 16:27:45 -04:00
parent a019278d38
commit 110c841d9d
7 changed files with 74 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/palette/palette.component.ts
View File

@ -6,7 +6,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
styleUrls: ['palette.component.scss'] styleUrls: ['palette.component.scss']
}) })
export class PaletteComponent implements OnInit { export class PaletteComponent implements OnInit {
@Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']; @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
@Output() selectedChange = new EventEmitter<string>(); @Output() selectedChange = new EventEmitter<string>();

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

@ -4,31 +4,53 @@
</button> </button>
<small class="ml-1 text-muted">{{version}}</small> <small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto"> <div class="ml-auto">
<div *ngFor="let item of menuItems; let i = index" class="d-inline mx-1"> <ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i <= maxMenuItems"> <ng-container *ngIf="i < maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'icon'}"></ng-container>
</ng-container> </ng-container>
</div> </ng-container>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="menu"> <button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #overflowMenu="matMenu">
<ng-container *ngFor="let item of menuItems; let i = index"> <ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i > maxMenuItems"> <ng-container *ngIf="i >= maxMenuItems">
<button mat-menu-item> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'menu'}"></ng-container>
<mat-icon>{{item.icon}}</mat-icon>
{{item.name}}
</button>
</ng-container> </ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>
<ng-template #menuItem let-item> <ng-template #menuItem let-item let-mode="mode">
<ng-container> <ng-container *ngIf="mode == 'icon' && !item.subMenu">
<button mat-icon-button [ngClass]="{'selected': item?.enabled}" class="ml-1" (click)="clickWrapper(item)"> <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matTooltip]="item.name">
<mat-icon>{{item?.icon}}</mat-icon> <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="mode == 'menu' && !item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{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)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container>
</ng-container>
</mat-menu>
</ng-container>
<ng-container *ngIf="mode == 'menu' && item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container>
</ng-container>
</mat-menu>
</ng-container>
</ng-template> </ng-template>

2
src/app/components/toolbar/toolbar.component.ts
View File

@ -1,5 +1,5 @@
import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core"; import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core";
import {ToolbarItem} from "./toolbarItem"; import {ToolbarItem} from "../../models/toolbarItem";
import {version} from '../../../../package.json'; import {version} from '../../../../package.json';
@Component({ @Component({

2
src/app/material.module.ts
View File

@ -6,6 +6,7 @@ import {
MatToolbarModule MatToolbarModule
} from "@angular/material"; } from "@angular/material";
import {NgModule} from "@angular/core"; import {NgModule} from "@angular/core";
import {MatTooltipModule} from "@angular/material/tooltip";
export const materialModules = [ export const materialModules = [
MatBottomSheetModule, MatBottomSheetModule,
@ -19,6 +20,7 @@ export const materialModules = [
MatSliderModule, MatSliderModule,
MatSnackBarModule, MatSnackBarModule,
MatToolbarModule, MatToolbarModule,
MatTooltipModule
]; ];
@NgModule({ @NgModule({

3
src/app/components/toolbar/toolbarItem.ts → src/app/models/toolbarItem.ts
View File

@ -1,6 +1,6 @@
export interface ToolbarItem { export interface ToolbarItem {
name: string; name: string;
icon: string; icon?: string;
hidden?: boolean; hidden?: boolean;
toggle?: boolean; toggle?: boolean;
individualToggle?: boolean; individualToggle?: boolean;
@ -8,4 +8,5 @@ export interface ToolbarItem {
enabled?: boolean; enabled?: boolean;
onEnabled?: () => void; onEnabled?: () => void;
onDisabled?: () => void; onDisabled?: () => void;
subMenu?: ToolbarItem[];
} }

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

@ -31,7 +31,7 @@ export class MapService {
click = new BehaviorSubject<{lat: number, lng: number}>(null); click = new BehaviorSubject<{lat: number, lng: number}>(null);
deleteMode = false; deleteMode = false;
drawingColor = '#d82b00'; drawingColor = '#ff4141';
drawingWeight = 10; drawingWeight = 10;
map; map;
@ -71,28 +71,32 @@ export class MapService {
this.mapLayer = L.esri.basemapLayer('ImageryClarity'); this.mapLayer = L.esri.basemapLayer('ImageryClarity');
} }
this.mapLayer.addTo(this.map); this.mapLayer.addTo(this.map);
if(this.weatherLayer) this.setWeatherLayer(this.weatherLayer.name);
} }
setWeatherLayer(layer?: WeatherLayers) { setWeatherLayer(layer?: WeatherLayers) {
if(this.weatherLayer) this.map.removeLayer(this.weatherLayer); if(this.weatherLayer) {
this.map.removeLayer(this.weatherLayer.layer);
this.weatherLayer = null;
}
switch(layer) { switch(layer) {
case WeatherLayers.CLOUDS_NEW: case WeatherLayers.CLOUDS_NEW:
this.weatherLayer = L.OWM.clouds({appId: environment.openWeather, opacity: 0.5}); this.weatherLayer = {name: WeatherLayers.CLOUDS_NEW, layer: L.OWM.clouds({appId: environment.openWeather, opacity: 0.5})};
break; break;
case WeatherLayers.PRECIPITATION_NEW: case WeatherLayers.PRECIPITATION_NEW:
this.weatherLayer = L.OWM.precipitation({appId: environment.openWeather, opacity: 0.5}); this.weatherLayer = {name: WeatherLayers.PRECIPITATION_NEW, layer: L.OWM.precipitation({appId: environment.openWeather, opacity: 0.5})};
break; break;
case WeatherLayers.SEA_LEVEL_PRESSURE: case WeatherLayers.SEA_LEVEL_PRESSURE:
this.weatherLayer = L.OWM.pressure({appId: environment.openWeather, opacity: 0.5}); this.weatherLayer = {name: WeatherLayers.SEA_LEVEL_PRESSURE, layer: L.OWM.pressure({appId: environment.openWeather, opacity: 0.5})};
break; break;
case WeatherLayers.WIND_NEW: case WeatherLayers.WIND_NEW:
this.weatherLayer = L.OWM.wind({appId: environment.openWeather, opacity: 0.5}); this.weatherLayer = {name: WeatherLayers.WIND_NEW, layer: L.OWM.wind({appId: environment.openWeather, opacity: 0.5})};
break; break;
case WeatherLayers.TEMP_NEW: case WeatherLayers.TEMP_NEW:
this.weatherLayer = L.OWM.temperature({appId: environment.openWeather, opacity: 0.5}); this.weatherLayer = {name: WeatherLayers.TEMP_NEW, layer: L.OWM.temperature({appId: environment.openWeather, opacity: 0.5})};
break; break;
} }
if(this.weatherLayer) this.weatherLayer.addTo(this.map); if(this.weatherLayer) this.weatherLayer.layer.addTo(this.map);
} }
newCircle(latlng: LatLng, radius: number, opts: any={}) { newCircle(latlng: LatLng, radius: number, opts: any={}) {
@ -123,10 +127,10 @@ export class MapService {
} }
newMeasurement(latlng1: LatLng, latlng2: LatLng) { newMeasurement(latlng1: LatLng, latlng2: LatLng) {
let line = L.polyline([latlng1, latlng2], {color: '#d82b00', weight: 5}).addTo(this.map); let line = L.polyline([latlng1, latlng2], {color: '#ff4141', weight: 5}).addTo(this.map);
let decoration = L.polylineDecorator(line, {patterns: [ let decoration = L.polylineDecorator(line, {patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#d82b00', 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: '#d82b00', stroke: true}})} {offset: '-100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, headAngle: 180, pathOptions: {color: '#ff4141', stroke: true}})}
]}).addTo(this.map); ]}).addTo(this.map);
this.measurements.push({line: line, decoration: decoration}); this.measurements.push({line: line, decoration: decoration});
let distance = distanceInM(latlng1.lat, latlng1.lng, latlng2.lat, latlng2.lng); let distance = distanceInM(latlng1.lat, latlng1.lng, latlng2.lat, latlng2.lng);

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

@ -3,9 +3,9 @@ import {PhysicsService} from "../../services/physics.service";
import {filter, skip, take} from "rxjs/operators"; import {filter, skip, take} from "rxjs/operators";
import {MatBottomSheet, MatSnackBar} from "@angular/material"; import {MatBottomSheet, MatSnackBar} from "@angular/material";
import {CalibrateComponent} from "../../components/calibrate/calibrate.component"; import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
import {ToolbarItem} from "../../components/toolbar/toolbarItem"; import {ToolbarItem} from "../../models/toolbarItem";
import {flyInRight, flyOutRight} from "../../animations"; import {flyInRight, flyOutRight} from "../../animations";
import {ARROW, MapService} from "../../services/map.service"; import {ARROW, MapLayers, MapService, WeatherLayers} from "../../services/map.service";
declare const L; declare const L;
@ -16,23 +16,31 @@ declare const L;
animations: [flyInRight, flyOutRight] animations: [flyInRight, flyOutRight]
}) })
export class MapComponent implements OnInit { export class MapComponent implements OnInit {
drawColor = '#ff4141';
isNaN = isNaN;
map: MapService; map: MapService;
markers = []; markers = [];
position; position;
positionMarker = {arrow: null, circle: null}; positionMarker = {arrow: null, circle: null};
drawColor = '#d82b00';
showPalette = false; showPalette = false;
isNaN = isNaN;
menu: ToolbarItem[] = [ menu: ToolbarItem[] = [
{name: 'Marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()}, {name: 'Marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()},
{name: 'Draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()}, {name: 'Draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
{name: 'Measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()}, {name: 'Measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()},
{name: 'Delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false}, {name: 'Delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
{name: 'Style', icon: 'terrain', enabled: true, toggle: true}, {name: 'Map Style', icon: 'terrain', toggle: true, subMenu: [
{name: 'Weather', icon: 'cloud', toggle: true}, {name: 'ESRI:Topographic', click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
{name: 'ESRI:Satelite', click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
{name: 'ESRI:Satelite Clear', click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)}
]},
{name: 'Weather', icon: 'cloud', toggle: true, subMenu: [
{name: 'None', click: () => this.map.setWeatherLayer()},
{name: 'Temperature', click: () => this.map.setWeatherLayer(WeatherLayers.TEMP_NEW)},
{name: 'Wind', click: () => this.map.setWeatherLayer(WeatherLayers.WIND_NEW)},
{name: 'Sea Level Pressure', click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)},
{name: 'Clouds', click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
]},
{name: 'Calibrate', icon: 'explore', click: () => this.calibrate()}, {name: 'Calibrate', icon: 'explore', click: () => this.calibrate()},
{name: 'Messages', icon: 'chat', hidden: true}, {name: 'Messages', icon: 'chat', hidden: true},
{name: 'Identity', icon: 'perm_identity', hidden: true}, {name: 'Identity', icon: 'perm_identity', hidden: true},