From 0de3a6b5680879c6bd48c0b8d90067e6acf182e0 Mon Sep 17 00:00:00 2001
From: QuCMGisaia <quentin.martin-cocher@gisaia.com>
Date: Thu, 28 Sep 2023 17:17:10 +0200
Subject: [PATCH] feat: add padding when zooming on a geometry when importing
 it

---
 .../mapgl-import/mapgl-import.component.ts    |  2 +-
 .../lib/components/mapgl/mapgl.component.ts   | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/projects/arlas-components/src/lib/components/mapgl-import/mapgl-import.component.ts b/projects/arlas-components/src/lib/components/mapgl-import/mapgl-import.component.ts
index cb113f0d..776a6a95 100644
--- a/projects/arlas-components/src/lib/components/mapgl-import/mapgl-import.component.ts
+++ b/projects/arlas-components/src/lib/components/mapgl-import/mapgl-import.component.ts
@@ -596,7 +596,7 @@ export class MapglImportComponent {
       if (importedResult.geojson.features.length > 0) {
         this.dialogRef.componentInstance.isRunning = false;
         if (this.fitResult) {
-          this.mapComponent.map.fitBounds(extent(importedResult.geojson));
+          this.mapComponent.paddedFitBounds(extent(importedResult.geojson));
         }
         if (this.mapComponent.drawData.features.length > 0) {
           this.mapComponent.drawData.features.forEach(df => importedResult.geojson.features.push(df));
diff --git a/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts b/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts
index 5a095fde..0a7cd7f3 100644
--- a/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts
+++ b/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts
@@ -293,6 +293,12 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
   @Input() public offset: { north: number; east: number; south: number; west: number; } =
     { north: 0, east: 0, south: 0, west: 0 };
 
+  /**
+   * @Input : Angular
+   * @description Padding value applied around a fitBounds to fully show the area targeted
+   * */
+  @Input() public fitBoundsPadding = 10;
+
   /**
    * @Input : Angular
    * @description Subject to which the component subscribes to redraw on the map the `data` of the given `source`.
@@ -1418,6 +1424,20 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
     this.showBasemapsList = false;
   }
 
+  /**
+   * Wrapper method to fit the map to the given bounds with enough padding to properly visualize the area
+   */
+  public paddedFitBounds(bounds: mapboxgl.LngLatBoundsLike, options?: mapboxgl.FitBoundsOptions) {
+    const paddedOptions = Object.assign({}, options);
+    paddedOptions.padding = {
+      top: this.offset.north + this.fitBoundsPadding,
+      bottom: this.offset.south + this.fitBoundsPadding,
+      left: this.offset.west + this.fitBoundsPadding,
+      right: this.offset.east + this.fitBoundsPadding
+    };
+    (<mapboxgl.Map>this.map).fitBounds(bounds, paddedOptions);
+  }
+
   private latLngToWKT(features) {
     let wktType = 'POLYGON[###]';
     if (features.length > 1) {