From 110c841d9d4915648bcd3ac5c66a6635f258f8e7 Mon Sep 17 00:00:00 2001 From: ztimson Date: Fri, 23 Aug 2019 16:27:45 -0400 Subject: [PATCH] Added some layers --- .../components/palette/palette.component.ts | 2 +- .../components/toolbar/toolbar.component.html | 52 +++++++++++++------ .../components/toolbar/toolbar.component.ts | 2 +- src/app/material.module.ts | 2 + .../toolbar => models}/toolbarItem.ts | 3 +- src/app/services/map.service.ts | 26 ++++++---- src/app/views/map/map.component.ts | 24 ++++++--- 7 files changed, 74 insertions(+), 37 deletions(-) rename src/app/{components/toolbar => models}/toolbarItem.ts (82%) diff --git a/src/app/components/palette/palette.component.ts b/src/app/components/palette/palette.component.ts index 155ff1e..f1327ff 100644 --- a/src/app/components/palette/palette.component.ts +++ b/src/app/components/palette/palette.component.ts @@ -6,7 +6,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; styleUrls: ['palette.component.scss'] }) export class PaletteComponent implements OnInit { - @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']; + @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#ff4141']; @Output() selectedChange = new EventEmitter(); diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html index e102740..fa684ba 100644 --- a/src/app/components/toolbar/toolbar.component.html +++ b/src/app/components/toolbar/toolbar.component.html @@ -4,31 +4,53 @@ {{version}}
-
- - + + + -
- - + - - + +
- - - + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts index d996d29..0515fdb 100644 --- a/src/app/components/toolbar/toolbar.component.ts +++ b/src/app/components/toolbar/toolbar.component.ts @@ -1,5 +1,5 @@ import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core"; -import {ToolbarItem} from "./toolbarItem"; +import {ToolbarItem} from "../../models/toolbarItem"; import {version} from '../../../../package.json'; @Component({ diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 2038d84..ef20b5a 100644 --- a/src/app/material.module.ts +++ b/src/app/material.module.ts @@ -6,6 +6,7 @@ import { MatToolbarModule } from "@angular/material"; import {NgModule} from "@angular/core"; +import {MatTooltipModule} from "@angular/material/tooltip"; export const materialModules = [ MatBottomSheetModule, @@ -19,6 +20,7 @@ export const materialModules = [ MatSliderModule, MatSnackBarModule, MatToolbarModule, + MatTooltipModule ]; @NgModule({ diff --git a/src/app/components/toolbar/toolbarItem.ts b/src/app/models/toolbarItem.ts similarity index 82% rename from src/app/components/toolbar/toolbarItem.ts rename to src/app/models/toolbarItem.ts index d621973..83e52d4 100644 --- a/src/app/components/toolbar/toolbarItem.ts +++ b/src/app/models/toolbarItem.ts @@ -1,6 +1,6 @@ export interface ToolbarItem { name: string; - icon: string; + icon?: string; hidden?: boolean; toggle?: boolean; individualToggle?: boolean; @@ -8,4 +8,5 @@ export interface ToolbarItem { enabled?: boolean; onEnabled?: () => void; onDisabled?: () => void; + subMenu?: ToolbarItem[]; } diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 034cca2..34fd1ed 100644 --- a/src/app/services/map.service.ts +++ b/src/app/services/map.service.ts @@ -31,7 +31,7 @@ export class MapService { click = new BehaviorSubject<{lat: number, lng: number}>(null); deleteMode = false; - drawingColor = '#d82b00'; + drawingColor = '#ff4141'; drawingWeight = 10; map; @@ -71,28 +71,32 @@ export class MapService { this.mapLayer = L.esri.basemapLayer('ImageryClarity'); } this.mapLayer.addTo(this.map); + if(this.weatherLayer) this.setWeatherLayer(this.weatherLayer.name); } 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) { 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; 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; 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; 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; 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; } - if(this.weatherLayer) this.weatherLayer.addTo(this.map); + if(this.weatherLayer) this.weatherLayer.layer.addTo(this.map); } newCircle(latlng: LatLng, radius: number, opts: any={}) { @@ -123,10 +127,10 @@ export class MapService { } 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: [ - {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: '#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: '#ff4141', stroke: true}})} ]}).addTo(this.map); this.measurements.push({line: line, decoration: decoration}); let distance = distanceInM(latlng1.lat, latlng1.lng, latlng2.lat, latlng2.lng); diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index 54104cb..c8af194 100644 --- a/src/app/views/map/map.component.ts +++ b/src/app/views/map/map.component.ts @@ -3,9 +3,9 @@ import {PhysicsService} from "../../services/physics.service"; import {filter, skip, take} from "rxjs/operators"; import {MatBottomSheet, MatSnackBar} from "@angular/material"; import {CalibrateComponent} from "../../components/calibrate/calibrate.component"; -import {ToolbarItem} from "../../components/toolbar/toolbarItem"; +import {ToolbarItem} from "../../models/toolbarItem"; import {flyInRight, flyOutRight} from "../../animations"; -import {ARROW, MapService} from "../../services/map.service"; +import {ARROW, MapLayers, MapService, WeatherLayers} from "../../services/map.service"; declare const L; @@ -16,23 +16,31 @@ declare const L; animations: [flyInRight, flyOutRight] }) export class MapComponent implements OnInit { + drawColor = '#ff4141'; + isNaN = isNaN; map: MapService; markers = []; position; positionMarker = {arrow: null, circle: null}; - - - drawColor = '#d82b00'; showPalette = false; - isNaN = isNaN; menu: ToolbarItem[] = [ {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: '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: 'Style', icon: 'terrain', enabled: true, toggle: true}, - {name: 'Weather', icon: 'cloud', toggle: true}, + {name: 'Map Style', icon: 'terrain', toggle: true, subMenu: [ + {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: 'Messages', icon: 'chat', hidden: true}, {name: 'Identity', icon: 'perm_identity', hidden: true},