Renamed prefixes in angular.json

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html

@@ -0,0 +1,15 @@
+<div class="gps-location">
+  <svg #location height="1000" width="1000">
+    <defs>
+      <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
+        <stop offset="0%" class="stop1" />
+        <stop offset="100%" class="stop2" />
+      </linearGradient>
+    </defs>
+    <circle class="tolerance" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
+    <path *ngIf="showHeading" class="heading" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
+    <circle class="border" cx="500" cy="500" r="7" stroke="none" />
+    <circle class="center" cx="500" cy="500" r="6" stroke="none" />
+
+  </svg>
+</div>

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss

@@ -0,0 +1,36 @@
+@import "../../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+.gps-location {
+  display:none; 
+}
+
+.center, .tolerance, .border {
+  stroke-width: 0;
+}
+
+.tolerance {
+  fill: theme-color();
+  fill-opacity:0.4;
+}
+
+.border {
+  fill: white;
+}
+
+.center {
+  fill: theme-color();
+}
+
+.stop1 {
+  stop-color: theme-color();
+  stop-opacity:1;
+}
+
+.stop2 {
+  stop-color: theme-color();
+  stop-opacity: 0;
+}
+
+

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+import Overlay from 'ol/Overlay';
+import { fromLonLat, toLonLat } from 'ol/proj';
+
+
+@Component({
+  selector: 'fm-map-gps-location',
+  templateUrl: './gps-location.component.html',
+  styleUrls: ['./gps-location.component.scss']
+})
+export class GpsLocation  implements OnInit,OnChanges{
+
+  @Input() enable:boolean;
+  public instance: Overlay;
+  @Input() position: Position;
+  @Input() location: number[]=[0,0];
+  @Input() locationTolerance: number = 0;
+  @Input() showHeading: boolean = false;
+  @Input() heading: number = 0;
+  @Input() headingTolerance: number = 0;
+  public locTolerancePixels: number = 0;
+  public path: string = "";
+  public rotate: string = "";
+  private resolution: number = 0;
+  @ViewChild('location') locationElement: ElementRef;
+
+  constructor(private map: MapComponent) {
+    
+  }
+
+  recalcLocationTolerance() {
+    this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
+  }
+
+  ngOnInit() {
+    this.instance = new Overlay({
+      stopEvent:false,
+      positioning: 'center-center',
+      position: fromLonLat( this.location),
+      element: this.locationElement.nativeElement
+    });
+    var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
+    var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
+    var y1 = Math.round(500 - y);
+    var x1 = Math.round(500 - x);
+    var y2 = Math.round(y1);
+    var x2 = Math.round(500 + x);
+    this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
+    this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
+    this.locTolerancePixels = this.locationTolerance;
+    this.map.instance.addOverlay(this.instance);
+    this.map.instance.getView().on('change:resolution', (evt) => {
+      this.resolution = evt.target.get('resolution');
+      this.recalcLocationTolerance();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.position && this.instance) {
+      var p = changes.position.currentValue as Position;
+      this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
+      this.locationTolerance = p.coords.accuracy;
+      this.recalcLocationTolerance();
+      this.heading = p.coords.heading;
+    }
+  }
+}