From 3f8a02797bfbe74da0b3b0f288ad18bd253f525e Mon Sep 17 00:00:00 2001 From: ssylver93 <107515688+ssylver93@users.noreply.github.com> Date: Mon, 8 Jul 2024 09:11:11 -0700 Subject: [PATCH] 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 --- .../local-authorities.component.ts | 34 +++++----- .../preview-panels/map-share-service.ts | 62 ++++++++++++++++--- 2 files changed, 66 insertions(+), 30 deletions(-) diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/local-authorities/local-authorities.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/local-authorities/local-authorities.component.ts index 8f25e885db..a18c08607b 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/local-authorities/local-authorities.component.ts +++ b/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'; } } diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/map-share-service.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/map-share-service.ts index fff8c98b7a..52b5c7f395 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/map-share-service.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/map-share-service.ts @@ -8,22 +8,56 @@ 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, { @@ -31,8 +65,16 @@ export class MapUtilityService { 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); + } } \ No newline at end of file