Implement pan to, fix zooming on map change

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

@@ -0,0 +1,13 @@
+<div (click)="handleClick($event)" class="rounded-circle gps-location">
+  <svg height="100%" width="100%" viewBox="0 0 96 96">
+    <g
+    id="XMLID_1_"><circle      
+      class="pan-to"  [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
+      cx="48"
+      cy="48"
+      r="9.8000002"/><path     
+      class="pan-to" [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
+      d="M 80.5,44.8 H 73.8 C 72.3,33 63,23.7 51.3,22.2 v -6.7 h -6.5 v 6.7 C 33,23.7 23.7,33 22.2,44.8 h -6.7 v 6.5 h 6.7 C 23.7,63 33,72.3 44.8,73.8 v 6.7 h 6.5 V 73.8 C 63,72.3 72.3,63 73.8,51.3 h 6.7 z M 48,67.5 C 37.2,67.5 28.5,58.8 28.5,48 28.5,37.2 37.2,28.5 48,28.5 c 10.8,0 19.5,8.7 19.5,19.5 0,10.8 -8.7,19.5 -19.5,19.5 z"
+      inkscape:connector-curvature="0"/></g>
+  </svg>
+</div>

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

@@ -0,0 +1,28 @@
+@import "../../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+.gps-location {
+  display:block; 
+  width:2.5em;
+  height:2.5em;
+  background-color: white;
+  background-size: contain;
+  margin-top:0.5em;
+}
+
+.center, .tolerance, .border {
+  stroke-width: 0;
+}
+
+.pan-to {
+  fill: #333333;
+}
+
+.pan-to-centered {
+  fill: theme-color()
+}
+
+.pan-to-disabled {
+  fill: #808080;
+}

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

@@ -0,0 +1,84 @@
+import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+import {IMapState} from '../../../models/map.state'
+import {View} from 'ol';
+import { fromLonLat } from 'ol/proj';
+
+
+@Component({
+  selector: 'fm-map-pan-to-location',
+  templateUrl: './pan-to-location.component.html',
+  styleUrls: ['./pan-to-location.component.scss']
+})
+export class PanToLocation  implements OnInit,OnChanges{
+
+  view: View;
+  map: MapComponent;
+  @Input() position: Position;
+  @Input() mapState: IMapState;
+  @Input() animate: boolean;
+
+  constructor(@Host() map: MapComponent,private changeDetectorRef$: ChangeDetectorRef ) {
+    this.map = map;
+  }
+
+  ngOnInit() {  
+    this.view = this.map.instance.getView();
+    this.view.on('change:center', () => {
+      this.changeDetectorRef$.detectChanges();
+    });
+  }
+
+  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;
+    // }
+  }
+
+  p
+
+  public centered():boolean {
+    if(this.position && this.mapState) {
+      let center = this.view.getCenter();
+      let newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
+      let x1 = newCenter[0].toFixed(0);
+      let x2 = center[0].toFixed(0);
+      let y1 = newCenter[1].toFixed(0);
+      let y2 = center[1].toFixed(0);
+      return x1==x2 && y1==y2;  
+    }
+    return false;
+  }
+
+  public disabled():boolean {
+    return !this.position;
+  }
+
+  handleClick(event:Event) {
+    if(this.position) {
+      let view = this.map.instance.getView();
+      let newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
+      let extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
+      var options = { padding: [0, 0, 0, 0],minResolution:1 };
+      let size = this.map.instance.getSize();
+      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      let threshold = 44 * rem;
+      var left = 1 * rem;
+      var right = 1 * rem;
+      var bottom = Math.round(size[1] / 2);
+      var top = 1 * rem;
+      if (size[0] > threshold) {
+        bottom = 1 * rem;
+        left = 23 * rem;
+      }
+      //options.padding = [top, right, bottom, left];
+      if (this.animate) options["duration"] = 2000;
+      view.fit(extent, options);  
+    }
+    event.preventDefault();
+  }
+}