Merge pull request #743 from gisaia/feat/fitBoundsPadding

feat: add padding when zooming on a geometry when importing it
gisaia · Sep 28, 2023 · 40ac49e · 40ac49e
2 parents 5da4058 + 0de3a6b
commit 40ac49e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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
@@ -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) {