More styling
This commit is contained in:
ztimson
parent
5fd3efea25
commit
fc0e2cf4f9
@ -15,20 +15,20 @@ export class GeolocationService implements OnDestroy {
|
||||
this.watchRegistrationID = navigator.geolocation.watchPosition(pos => this.location.next(pos.coords), (error) => {
|
||||
switch(error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
snackBar.open('Geolocation permission denied', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
snackBar.open('Geolocation permission denied', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
snackBar.open('Geolocation unavailable', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
snackBar.open('Geolocation unavailable', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
snackBar.open('Geolocation timeout', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
snackBar.open('Geolocation timeout', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
break;
|
||||
default:
|
||||
snackBar.open('Geolocation experienced an unknown error', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
snackBar.open('Geolocation experienced an unknown error', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
snackBar.open('Geolocation is not supported', null, {horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
snackBar.open('Geolocation is not supported', null, {duration: 3000, horizontalPosition: 'right', panelClass: ['bg-warning', 'text-white']});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<mat-toolbar>
|
||||
<img src="/assets/images/logo.png" height="35px" width="auto"> <small class="ml-2 text-muted">{{version}}</small>
|
||||
<button mat-icon-button routerLink="/">
|
||||
<img src="/assets/images/logo.png" height="35px" width="auto">
|
||||
</button>
|
||||
<small class="ml-1 text-muted">{{version}}</small>
|
||||
<div class="ml-auto">
|
||||
<button mat-icon-button><mat-icon>room</mat-icon></button> <!-- Add Marker -->
|
||||
<button mat-icon-button (click)="mode = 'marker'"><mat-icon>room</mat-icon></button> <!-- Add Marker -->
|
||||
<button mat-icon-button><mat-icon>create</mat-icon></button> <!-- Create shape -->
|
||||
<button mat-icon-button><mat-icon>straighten</mat-icon></button> <!-- Measure distance -->
|
||||
<button mat-icon-button [matMenuTriggerFor]="mapStyle"><mat-icon>layers</mat-icon></button>
|
||||
@ -15,19 +18,20 @@
|
||||
<button mat-icon-button><mat-icon>perm_identity</mat-icon></button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy">
|
||||
<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
|
||||
<ng-container *ngIf="position">
|
||||
<agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
|
||||
<agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
|
||||
<agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
|
||||
<agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>
|
||||
<agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2"></agm-circle>
|
||||
</ng-container>
|
||||
<agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker>
|
||||
</agm-map>
|
||||
<div class="info p-2">
|
||||
<span *ngIf="!position" class="text-danger">No GPS</span>
|
||||
<div *ngIf="position" class="text-white">
|
||||
Heading:
|
||||
<span *ngIf="!position.heading" class="text-danger">No Heading</span>
|
||||
<span *ngIf="position.altitude">{{position.heading}}°</span>
|
||||
<span *ngIf="position.altitude">{{position.heading | number : '0.0'}}°</span>
|
||||
<br>
|
||||
Latitude: {{position.latitude | number : '0.0-5'}}
|
||||
<br>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
mat-toolbar {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: #00000050;
|
||||
position: fixed;
|
||||
@ -14,13 +18,7 @@
|
||||
}
|
||||
|
||||
.map {
|
||||
@media only screen and (max-width: 600px) {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.selected {
|
||||
|
||||
@ -10,8 +10,10 @@ import {version} from "../../../package.json";
|
||||
})
|
||||
export class MapComponent {
|
||||
mapApi: any;
|
||||
markers = [];
|
||||
mode: 'marker';
|
||||
position: any;
|
||||
style = 'terrain';
|
||||
style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
|
||||
version = version;
|
||||
|
||||
constructor(public geolocation: GeolocationService) {
|
||||
@ -32,4 +34,11 @@ export class MapComponent {
|
||||
if(!pos) pos = this.position;
|
||||
this.mapApi.setCenter({lat: pos.latitude, lng: pos.longitude});
|
||||
}
|
||||
|
||||
clicked(type: 'single' | 'double' | 'right', event) {
|
||||
if(this.mode == 'marker') {
|
||||
this.markers.push({latitude: event.coords.lat, longitude: event.coords.lng});
|
||||
this.mode = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,3 +6,15 @@
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
// Remove google maps branding
|
||||
a[href^="http://maps.google.com/maps"]{display:none !important}
|
||||
a[href^="https://maps.google.com/maps"]{display:none !important}
|
||||
|
||||
.gmnoprint a, .gmnoprint span, .gm-style-cc {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gmnoprint div {
|
||||
background:none !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user