Add location pin on zoom in

client/wfnews-war/src/main/angular/src/app/components/preview-panels/closed-rec-sites/closed-rec-sites.component.html

@@ -26,7 +26,7 @@
         </div>
         <div class="button-row">
             <div class="buttons">
-                <button mat-flat-button class="mobile-button" (click)="zoomIn()" >
+                <button mat-flat-button class="mobile-button" (click)="zoomInWithLocationPin()" >
                     <mat-icon class="incident-icon-title" svgIcon='zoom-in'></mat-icon>
                     Zoom to
                 </button>

client/wfnews-war/src/main/angular/src/app/components/preview-panels/closed-rec-sites/closed-rec-sites.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { MapConfigService } from '@app/services/map-config.service';
-import { convertToDateYear, hidePanel, showPanel, getActiveMap } from '@app/utils';
+import { convertToDateYear, hidePanel, showPanel, zoomInWithLocationPin } from '@app/utils';
 
 @Component({
   selector: 'wfnews-closed-rec-sites',
@@ -11,8 +11,10 @@ export class ClosedRecSitesComponent {
   constructor(private mapConfigService: MapConfigService) {}
 
   convertToDateYear = convertToDateYear;
+  zoomInWithLocationPin = zoomInWithLocationPin;
   public data;
-  defaultZoomLevel = 13;
+  defaultZoomLevel = 11;
+  pinDrop;
 
   setContent(data) {
     this.data = data;
@@ -27,19 +29,4 @@ export class ClosedRecSitesComponent {
     hidePanel('desktop-preview');
   }
 
-  zoomIn(){
-    const long = Number(this.data?._identifyPoint?.longitude);
-    const lat = Number(this.data?._identifyPoint?.latitude);
-
-    if(long && lat) {
-      this.mapConfigService.getMapConfig().then(() => {
-        getActiveMap().$viewer.panToFeature(
-          window['turf'].point([long, lat]),
-          this.defaultZoomLevel
-        );
-      });
-    }
-  }
-
-}
-
+}

client/wfnews-war/src/main/angular/src/app/components/preview-panels/road-events-preview/road-events-preview.component.html

@@ -29,7 +29,7 @@
         </div>
         <div class="button-row">
             <div class="buttons">
-                <button mat-flat-button class="mobile-button" (click)="zoomIn()">
+                <button mat-flat-button class="mobile-button" (click)="zoomInWithLocationPin()">
                     <mat-icon class="incident-icon-title" svgIcon='zoom-in'></mat-icon>
                     Zoom to
                 </button>

client/wfnews-war/src/main/angular/src/app/components/preview-panels/road-events-preview/road-events-preview.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { MapConfigService } from '@app/services/map-config.service';
-import { convertToDateYear, hidePanel, showPanel, openLink, getActiveMap } from '@app/utils';
+import { convertToDateYear, hidePanel, showPanel, openLink, zoomInWithLocationPin } from '@app/utils';
 import { AppConfigService } from '@wf1/core-ui';
 
 @Component({
@@ -14,8 +14,10 @@ export class RoadEventsPreviewComponent {
 
   convertToDateYear = convertToDateYear;
   openLink = openLink
+  zoomInWithLocationPin = zoomInWithLocationPin;
   public data;
-  defaultZoomLevel = 13;
+  defaultZoomLevel = 11;
+  pinDrop;
 
   setContent(data) {
     this.data = data;
@@ -29,19 +31,5 @@ export class RoadEventsPreviewComponent {
     showPanel('identify-panel-wrapper')
     hidePanel('desktop-preview');
   }
-
-  zoomIn(){
-    const long = Number(this.data?._identifyPoint?.longitude);
-    const lat = Number(this.data?._identifyPoint?.latitude);
-
-    if(long && lat) {
-      this.mapConfigService.getMapConfig().then(() => {
-        getActiveMap().$viewer.panToFeature(
-          window['turf'].point([long, lat]),
-          this.defaultZoomLevel
-        );
-      });
-    }
-  }
 
 }

client/wfnews-war/src/main/angular/src/app/utils/index.ts

@@ -879,3 +879,38 @@ export function addMarker(incident: any) {
   const viewer = getActiveMap().$viewer;
   this.marker.addTo(viewer.map);
 }
+
+export function zoomInWithLocationPin(){
+  const viewer = getActiveMap().$viewer;
+  const long = Number(this.data?._identifyPoint?.longitude);
+  const lat = Number(this.data?._identifyPoint?.latitude);
+
+  if(long && lat) {
+    this.mapConfigService.getMapConfig().then(() => {
+      getActiveMap().$viewer.panToFeature(
+        window['turf'].point([long, lat]),
+        this.defaultZoomLevel
+      );
+    });
+    const markerOptions = {
+      icon: L.divIcon({
+        className: 'custom-icon-class',
+        html: `<div class="custom-marker" style="margin-top:-30px">
+              <img alt="icon" src="/assets/images/svg-icons/pin-drop.svg"/>
+            </div>`,
+        iconSize: [32, 32],
+      }),
+      draggable: false,
+    };
+      if (this.pinDrop) {
+        viewer.map.removeLayer(this.pinDrop);
+      }
+
+      this.pinDrop = L.marker(
+        [lat, long],
+        markerOptions,
+      ).addTo(viewer.map);
+    }
+  }
+
+