WFNEWS-2229 Fix zoom in for First Nations (#2003)

* WFNEWS-2228 2229 Fix zoom to and highlight polygons for local authorities

* WFNEWS-2229 Fix zoom in for First Nations

* WFNEWS-2229 fix zoom call for poly/multipoly

* Change to use AfterContentInit

client/wfnews-war/src/main/angular/src/app/components/preview-panels/local-authorities/local-authorities.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterContentInit, Component } from '@angular/core';
 import { MapUtilityService } from '@app/components/preview-panels/map-share-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
 import { convertToDateYear, hidePanel, showPanel, displayLocalAuthorityType } from '@app/utils';
@@ -8,7 +8,7 @@ import { convertToDateYear, hidePanel, showPanel, displayLocalAuthorityType } fr
   templateUrl: './local-authorities.component.html',
   styleUrls: ['./local-authorities.component.scss']
 })
-export class LocalAuthoritiesComponent implements OnInit{
+export class LocalAuthoritiesComponent implements AfterContentInit{
   constructor(
     private commonUtilityService: CommonUtilityService,
     private mapUtilityService: MapUtilityService
@@ -18,8 +18,12 @@ export class LocalAuthoritiesComponent implements OnInit{
   displayLocalAuthorityType = displayLocalAuthorityType;
   public data;
 
-  ngOnInit(): void {
-    this.zoomIn();
+  ngAfterContentInit(): void {
+    try {
+      this.zoomIn();
+    } catch(error) {
+      console.error('Could not zoom to local authority: ' + error)
+    }
   }
 
   setContent(data) {
@@ -37,26 +41,16 @@ export class LocalAuthoritiesComponent implements OnInit{
 
   zoomIn() {
     if (this.data?.layerId && this.data?.geometry?.coordinates?.length > 0) { 
-
-        if(this.data?.layerId === 'abms-regional-districts' || this.data?.layerId === 'abms-municipalities') {  
-            if(this.data.geometry.coordinates[0][0] && this.isNumberArray(this.data.geometry.coordinates[0][0]) && this.data.geometry.coordinates[0].length === 1) {
-              this.mapUtilityService.fixPolygonToMap(this.data.geometry.coordinates[0][0], this.data.geometry.coordinates[0]);
-            }
-            else if(this.data.geometry.coordinates[0] && this.isNumberArray(this.data.geometry.coordinates[0])) {
-              this.mapUtilityService.fixPolygonToMap(this.data.geometry.coordinates[0], this.data.geometry.coordinates);
-            } 
-        } else {
-          const coordinates = this.commonUtilityService.extractPolygonData(this.data.geometry.coordinates[0]);
-          if (coordinates.length) {
-            this.mapUtilityService.fixPolygonToMap(coordinates);
-          }
-        }
+        if(this.isNumberArray(this.data.geometry.coordinates[0][0])) {
+          this.mapUtilityService.fixMultipolygonToMap(this.data.geometry.coordinates, this.data.geometry.coordinates);
+        } else if(this.isNumberArray(this.data.geometry.coordinates[0])) {
+          this.mapUtilityService.fixPolygonToMap(this.data.geometry.coordinates[0], this.data.geometry.coordinates)
+        } 
     }
   }
 
  isNumberArray(array) {
-  const num = parseFloat(array[0]);
-  return Number.isNaN(num) ? false : true;
+  return typeof array[0][0] === 'number';
  }
 
 }

client/wfnews-war/src/main/angular/src/app/components/preview-panels/map-share-service.ts

@@ -8,31 +8,73 @@ import { getActiveMap } from '@app/utils';
 })
 export class MapUtilityService {
   highlightPolygons: L.Polygon[] = [];
-
-  constructor(private commonUtilityService: CommonUtilityService) {}
+  viewer = getActiveMap().$viewer;
+  constructor(private commonUtilityService: CommonUtilityService) { }
 
   fixPolygonToMap(polygonData: number[][], response?: any[]) {
-    const viewer = getActiveMap().$viewer;
+
     const convex = this.commonUtilityService.createConvex(polygonData);
-    const bounds = convex?.reduce((acc, coord) => [
-      [Math.min(acc[0][0], coord[1]), Math.min(acc[0][1], coord[0])],
-      [Math.max(acc[1][0], coord[1]), Math.max(acc[1][1], coord[0])]
-    ], [[Infinity, Infinity], [-Infinity, -Infinity]]);
-    viewer.map.fitBounds(bounds);
+    this.fitBounds(convex)
+
+    for (const polygon of this.highlightPolygons) {
+      this.viewer.map.removeLayer(polygon);
+    }
 
+    if (response) {
+      this.highlightPolygon(response)
+    }
+
+  }
+
+  fixMultipolygonToMap(multiPolygonData: number[][], response: any[]) {
+
+    let convexMulti: any[][] = [];
+    let convexArr: any[] = [];
+
     for (const polygon of this.highlightPolygons) {
-      viewer.map.removeLayer(polygon);
+      this.viewer.map.removeLayer(polygon);
+    }
+
+    if (response) {
+      for (const coord of response as any[])
+        this.highlightPolygon(coord)
     }
 
+    // retrieve convex from each ploygon 
+    for(const polygon of multiPolygonData){
+      for(const poly of polygon){
+        convexMulti.push(this.commonUtilityService.createConvex(poly));
+      }
+    }
+
+    // add all coordinates to single array to create bounds
+    for(const arr of convexMulti as any[]){
+      for(const array of arr as any[]){
+        convexArr.push(array)
+      }
+    }
+
+    this.fitBounds(convexArr)
+  }
+
+  highlightPolygon(response: any[]) {
     for (const ring of response) {
       const multiSwappedPolygonData: number[][] = ring.map(([latitude, longitude]) => [longitude, latitude]);
       const polygon = L.polygon(multiSwappedPolygonData, {
         weight: 3,
         color: 'black',
         fillColor: 'white',
         fillOpacity: 0.3
-      }).addTo(viewer.map);
+      }).addTo(this.viewer.map);
       this.highlightPolygons.push(polygon);
     }
   }
+
+  fitBounds(coords) {
+    const bounds = coords?.reduce((acc, coord) => [
+      [Math.min(acc[0][0], coord[1]), Math.min(acc[0][1], coord[0])],
+      [Math.max(acc[1][0], coord[1]), Math.max(acc[1][1], coord[0])]
+    ], [[Infinity, Infinity], [-Infinity, -Infinity]]);
+    this.viewer.map.fitBounds(bounds);
+  }
 }