feat(SebmGoogleMap): support bounds_changed event

Closes #200 Closes #450
sebholstein · Jun 19, 2016 · 4bbc3b3 · 4bbc3b3
1 parent a3267b0
commit 4bbc3b3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/core/directives/google-map.ts b/src/core/directives/google-map.ts
@@ -4,7 +4,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {MouseEvent} from '../events';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
 import {LatLng, LatLngLiteral} from '../services/google-maps-types';
-import {MapTypeStyle} from '../services/google-maps-types';
+import {LatLngBounds, MapTypeStyle} from '../services/google-maps-types';
 import {CircleManager} from '../services/managers/circle-manager';
 import {InfoWindowManager} from '../services/managers/info-window-manager';
 import {MarkerManager} from '../services/managers/marker-manager';
@@ -42,7 +42,7 @@ import {MarkerManager} from '../services/managers/marker-manager';
     'backgroundColor', 'draggableCursor', 'draggingCursor', 'keyboardShortcuts', 'zoomControl',
     'styles', 'usePanning', 'streetViewControl'
   ],
-  outputs: ['mapClick', 'mapRightClick', 'mapDblClick', 'centerChange', 'idle'],
+  outputs: ['mapClick', 'mapRightClick', 'mapDblClick', 'centerChange', 'idle', 'boundsChange'],
   host: {'[class.sebm-google-map-container]': 'true'},
   styles: [`
     .sebm-google-map-container-inner {
@@ -179,6 +179,11 @@ export class SebmGoogleMap implements OnChanges,
    */
   centerChange: EventEmitter<LatLngLiteral> = new EventEmitter<LatLngLiteral>();
 
+  /**
+   * This event is fired when the viewport bounds have changed.
+   */
+  boundsChange: EventEmitter<LatLngBounds> = new EventEmitter<LatLngBounds>();
+
   /**
    * This event is fired when the map becomes idle after panning or zooming.
    */
@@ -209,6 +214,7 @@ export class SebmGoogleMap implements OnChanges,
     this._handleMapCenterChange();
     this._handleMapZoomChange();
     this._handleMapMouseEvents();
+    this._handleBoundsChange();
     this._handleIdleEvent();
   }
 
@@ -274,6 +280,13 @@ export class SebmGoogleMap implements OnChanges,
     this._observableSubscriptions.push(s);
   }
 
+  private _handleBoundsChange() {
+    const s = this._mapsWrapper.subscribeToMapEvent<void>('bounds_changed').subscribe(() => {
+      this._mapsWrapper.getBounds().then((bounds: LatLngBounds) => this.boundsChange.emit(bounds));
+    });
+    this._observableSubscriptions.push(s);
+  }
+
   private _handleMapZoomChange() {
     const s = this._mapsWrapper.subscribeToMapEvent<void>('zoom_changed').subscribe(() => {
       this._mapsWrapper.getZoom().then((z: number) => this.zoom = z);

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -10,6 +10,9 @@ export * from './directives';
 export * from './services';
 export * from './events';
 
+// Google Maps types
+export {LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle} from './services/google-maps-types';
+
 export const GOOGLE_MAPS_PROVIDERS: any[] = [
   BROWSER_GLOBALS_PROVIDERS,
   provide(MapsAPILoader, {useClass: LazyMapsAPILoader}),

diff --git a/src/core/services/google-maps-api-wrapper.ts b/src/core/services/google-maps-api-wrapper.ts
@@ -73,6 +73,10 @@ export class GoogleMapsAPIWrapper {
 
   getZoom(): Promise<number> { return this._map.then((map: mapTypes.GoogleMap) => map.getZoom()); }
 
+  getBounds(): Promise<mapTypes.LatLngBounds> {
+    return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
+  }
+
   setZoom(zoom: number): Promise<void> {
     return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
   }

diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts
@@ -7,6 +7,7 @@ export interface GoogleMap {
   addListener(eventName: string, fn: Function): void;
   getCenter(): LatLng;
   setCenter(latLng: LatLng|LatLngLiteral): void;
+  getBounds(): LatLngBounds;
   getZoom(): number;
   setOptions(options: MapOptions): void;
 }