feat(AgmMap): add optional fit bounds padding

add optional `fitBoundsPadding` property that when defined will be forwarded to the native maps `fitBounds` method. fixes: #1660 #1471
sebholstein · Sep 16, 2019 · 29e4ebb · 29e4ebb
1 parent 74ceb2f
commit 29e4ebb
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/packages/core/directives/map.ts b/packages/core/directives/map.ts
@@ -6,7 +6,7 @@ import { FitBoundsService } from '../services/fit-bounds';
 import { GoogleMapsAPIWrapper } from '../services/google-maps-api-wrapper';
 import {
   FullscreenControlOptions, LatLng, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral,
-  MapRestriction, MapTypeControlOptions, MapTypeId, MapTypeStyle, PanControlOptions,
+  MapRestriction, MapTypeControlOptions, MapTypeId, MapTypeStyle, Padding, PanControlOptions,
   RotateControlOptions, ScaleControlOptions, StreetViewControlOptions, ZoomControlOptions,
 } from '../services/google-maps-types';
 import { CircleManager } from '../services/managers/circle-manager';
@@ -204,6 +204,11 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
    */
   @Input() fitBounds: LatLngBoundsLiteral | LatLngBounds | boolean = false;
 
+  /**
+   * Padding amount for the bounds.
+   */
+  @Input() fitBoundsPadding: number | Padding;
+
   /**
    * The initial enabled/disabled state of the Scale control. This is disabled by default.
    */
@@ -521,19 +526,19 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
         }
         break;
       default:
-        this._updateBounds(this.fitBounds);
+        this._updateBounds(this.fitBounds, this.fitBoundsPadding);
     }
   }
 
   private _subscribeToFitBoundsUpdates() {
     this._zone.runOutsideAngular(() => {
       this._fitBoundsSubscription = this._fitBoundsService.getBounds$().subscribe(b => {
-        this._zone.run(() => this._updateBounds(b));
+        this._zone.run(() => this._updateBounds(b, this.fitBoundsPadding));
       });
     });
   }
 
-  protected _updateBounds(bounds: LatLngBounds | LatLngBoundsLiteral) {
+  protected _updateBounds(bounds: LatLngBounds | LatLngBoundsLiteral, padding?: number | Padding) {
     if (!bounds) {
       return;
     }
@@ -543,10 +548,10 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
       bounds = newBounds;
     }
     if (this.usePanning) {
-      this._mapsWrapper.panToBounds(bounds);
+      this._mapsWrapper.panToBounds(bounds, padding);
       return;
     }
-    this._mapsWrapper.fitBounds(bounds);
+    this._mapsWrapper.fitBounds(bounds, padding);
   }
 
   private _isLatLngBoundsLiteral(bounds: LatLngBounds | LatLngBoundsLiteral): bounds is LatLngBoundsLiteral {

diff --git a/packages/core/index.ts b/packages/core/index.ts
@@ -4,7 +4,7 @@ export * from './services';
 export * from './map-types';
 
 // Google Maps types
-export { LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle, PolyMouseEvent } from './services/google-maps-types';
+export { LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle, Padding, PolyMouseEvent } from './services/google-maps-types';
 
 // core module
 // we explicitly export the module here to prevent this Ionic 2 bug:

diff --git a/packages/core/services/google-maps-api-wrapper.ts b/packages/core/services/google-maps-api-wrapper.ts
@@ -180,12 +180,12 @@ export class GoogleMapsAPIWrapper {
     return this._map.then((map) => map.panBy(x, y));
   }
 
-  fitBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral): Promise<void> {
-    return this._map.then((map) => map.fitBounds(latLng));
+  fitBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
+    return this._map.then((map) => map.fitBounds(latLng, padding));
   }
 
-  panToBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral): Promise<void> {
-    return this._map.then((map) => map.panToBounds(latLng));
+  panToBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
+    return this._map.then((map) => map.panToBounds(latLng, padding));
   }
 
   /**

diff --git a/packages/core/services/google-maps-types.ts b/packages/core/services/google-maps-types.ts
@@ -34,8 +34,8 @@ export interface GoogleMap extends MVCObject {
   getMapTypeId(): MapTypeId;
   getZoom(): number;
   setOptions(options: MapOptions): void;
-  panToBounds(latLngBounds: LatLngBounds | LatLngBoundsLiteral): void;
-  fitBounds(bounds: LatLngBounds | LatLngBoundsLiteral): void;
+  panToBounds(latLngBounds: LatLngBounds | LatLngBoundsLiteral, padding?: number | Padding): void;
+  fitBounds(bounds: LatLngBounds | LatLngBoundsLiteral, padding?: number | Padding): void;
 }
 
 export interface LatLng {
@@ -162,6 +162,13 @@ export interface LatLngBounds {
   union(other: LatLngBounds | LatLngBoundsLiteral): LatLngBounds;
 }
 
+export interface Padding {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
+
 export interface LatLngBoundsLiteral {
   east: number;
   north: number;