feat (wip): reference point on map

src/app/components/map/map.component.html

@@ -1,5 +1,9 @@
 <div (dragover)="onFileHovered($event)"
   id="map" class="map w100 h100" #map>
+
+  <div class="test" #referencepreview>
+    <mat-icon>home</mat-icon>
+  </div>
 </div>
 
 <div class="map-header">
@@ -90,3 +94,4 @@
   map
 </mat-icon>
 </span>
+

src/app/components/map/map.component.scss

@@ -165,3 +165,17 @@ button {
   right: 1px;
   top: 1px;
 }
+.test {
+  background: white;
+  border: 7px solid #c9cac5;
+  position: absolute;
+  top: 5%;
+  left:10%;
+  width: 35px;
+  height: 35px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 80%;
+}

src/app/components/map/map.component.ts

@@ -48,6 +48,7 @@ export class MapComponent implements OnInit, OnDestroy  {
   @Output() loadUrlState = new EventEmitter<void>();
   @ViewChild('overlay', { static: true }) overlayRef: ElementRef;
   @ViewChild('map', { static: true }) mapRef: ElementRef;
+  @ViewChild('referencepreview', { static: true }) referencePreview: ElementRef;
   @ViewChild('browsetooltip', {static: false}) browseDisclaimer: ElementRef;
 
   public drawMode$ = this.store$.select(mapStore.getMapDrawMode);
@@ -264,7 +265,46 @@ export class MapComponent implements OnInit, OnDestroy  {
         isOpen => this.isFiltersMenuOpen = isOpen
       )
     );
+    this.subs.add(
+      this.mapService.referencePointRelation.subscribe((thing: any) => {
+        if(thing === null) {
+          this.referencePreview.nativeElement.style.visibility = "hidden";
 
+          return
+        }
+        let mapExtent = thing[0];
+        let referencePointCoords = thing[1];
+
+        let left_offset = 50;
+        let top_offset = 50;
+        // if(referencePointCoords[1] < mapExtent[3] && referencePointCoords[1] > mapExtent[1]) {
+        //   top_offset = ((referencePointCoords[1] - mapExtent[1]) / (mapExtent[3] - mapExtent[1])) * 100
+        // }
+        // 44% top
+        // 95% left
+        // probably need a better calc of this actually
+        if(referencePointCoords[0] < 0) {
+          left_offset = 0;
+        } else if(referencePointCoords[0] > mapExtent[0]) {
+          left_offset = mapExtent[0] - 50;
+        } else {
+          left_offset = referencePointCoords[0] - 21
+        }
+        if(referencePointCoords[1] < 0) {
+          top_offset = 0;
+        } else if(referencePointCoords[1] > mapExtent[1]) {
+          top_offset = mapExtent[1] - 50
+        } else {
+          top_offset = referencePointCoords[1] - 21
+        }
+
+
+
+        let a = this.referencePreview.nativeElement;
+        a.style.visibility = "shown"
+        a.style = `left: ${left_offset}px; top: ${top_offset}px;`;
+      })
+    )
   }
 
   public onFileHovered(e): void {

src/app/services/map/map.service.ts

@@ -46,6 +46,7 @@ import { SetGeocode } from '@store/filters';
 import { Extent } from 'ol/extent';
 import { MultiPolygon } from 'ol/geom';
 import GeoJSON from 'ol/format/GeoJSON.js';
+import * as olExtent from 'ol/extent';
 
 @Injectable({
   providedIn: 'root'
@@ -155,6 +156,8 @@ export class MapService {
     )
   );
 
+  private referencePoint;
+  public referencePointRelation = new Subject<Number[]>();
   constructor(
     private wktService: WktService,
     private legacyAreaFormat: LegacyAreaFormatService,
@@ -476,6 +479,7 @@ export class MapService {
       this.onMapReady(this.map);
     });
   }
+  private referencePointLayer;
 
   private createNewMap(overlay): Map {
     this.overviewMap = new OverviewMap({
@@ -486,6 +490,10 @@ export class MapService {
       className: 'ol-overviewmap ol-custom-overviewmap',
     });
 
+    const source = new VectorSource();
+    this.referencePointLayer = new VectorLayer({
+      source
+    })
 
     const newMap = new Map({
       layers: [
@@ -495,6 +503,7 @@ export class MapService {
         this.selectedLayer,
         this.mapView?.gridlines,
         this.pinnedProducts,
+        this.referencePointLayer
       ],
       target: 'map',
       view: this.mapView.view,
@@ -506,6 +515,8 @@ export class MapService {
     newMap.addInteraction(this.timeseriesClick);
     newMap.addInteraction(this.selectHover);
     newMap.addInteraction(this.selectSarviewEventHover);
+
+    this.referencePoint = new Feature(new Point([-13636084.632833757, 4583385.933366808]));
     this.selectClick.on('select', e => {
       // netcdf-layer
       // if (this.drawService.in)
@@ -534,6 +545,11 @@ export class MapService {
       const [lon, lat] = proj.toLonLat(e.coordinate, this.epsg());
       this.mousePositionSubject$.next({ lon, lat });
     });
+    newMap.on('pointerdrag', (_e) => {
+      if(this.referencePoint) {
+        this.updateReferencePreview();
+      }
+    })
 
     newMap.on('movestart', () => {
       newMap.getViewport().style.cursor = 'crosshair';
@@ -563,7 +579,7 @@ export class MapService {
     this.drawService.getLayer().setZIndex(100);
     this.focusLayer.setZIndex(99);
     this.selectedLayer.setZIndex(98);
-
+    this.referencePointLayer.getSource().addFeature(this.referencePoint)
 
     newMap.on('moveend', e => {
       const currentMap = e.map;
@@ -579,7 +595,21 @@ export class MapService {
 
     return newMap;
   }
-
+  private updateReferencePreview() {
+    let mapExtent = this.map.getView().calculateExtent()
+    let referencePointCoords = this.referencePoint.getGeometry().getCoordinates();
+    let result = olExtent.containsCoordinate(
+      mapExtent,
+      referencePointCoords
+    )
+    referencePointCoords = this.map.getPixelFromCoordinate(referencePointCoords)
+    if(!result) {
+      this.referencePointRelation.next([this.map.getSize(), referencePointCoords, ])
+    }
+    else {
+      this.referencePointRelation.next(null)
+    }
+  }
   private updatedMap(): Map {
     if (this.map.getView().getProjection().getCode() !== this.mapView.projection.epsg) {
       this.map.setView(this.mapView.view);