feat(MarkerClusterer): enable clusterclick event

Add clusterClick event to MarkerCluster. fixes: #1272
sebholstein · Sep 17, 2019 · 1f2724b · 1f2724b
1 parent 29e4ebb
commit 1f2724b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/packages/js-marker-clusterer/directives/marker-cluster.ts b/packages/js-marker-clusterer/directives/marker-cluster.ts
@@ -1,10 +1,12 @@
-import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
+import { Directive, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange } from '@angular/core';
 
 import { InfoWindowManager, MarkerManager } from '@agm/core';
 import { ClusterManager } from '../services/managers/cluster-manager';
 
 import { CalculateFunction, ClusterOptions, ClusterStyle } from '../services/google-clusterer-types';
 
+import { Subscription } from 'rxjs';
+
 /**
  * AgmMarkerCluster clusters map marker if they are near together
  *
@@ -79,11 +81,15 @@ export class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, ClusterOp
   @Input() imagePath: string;
   @Input() imageExtension: string;
 
+  @Output() clusterClick: EventEmitter<void> = new EventEmitter<void>();
+
+  private _observableSubscriptions: Subscription[] = [];
   constructor(private _clusterManager: ClusterManager) { }
 
   /** @internal */
   ngOnDestroy() {
     this._clusterManager.clearMarkers();
+    this._observableSubscriptions.forEach((s) => s.unsubscribe());
   }
 
   /** @internal */
@@ -117,8 +123,22 @@ export class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, ClusterOp
     }
   }
 
+  private _addEventListeners() {
+    const handlers = [
+      {
+        name: 'clusterclick',
+        handler: () => this.clusterClick.emit(),
+      },
+    ];
+    handlers.forEach((obj) => {
+      const os = this._clusterManager.createClusterEventObservable(obj.name).subscribe(obj.handler);
+      this._observableSubscriptions.push(os);
+    });
+  }
+
   /** @internal */
   ngOnInit() {
+    this._addEventListeners();
     this._clusterManager.init({
       gridSize: this.gridSize,
       maxZoom: this.maxZoom,

diff --git a/packages/js-marker-clusterer/services/google-clusterer-types.ts b/packages/js-marker-clusterer/services/google-clusterer-types.ts
@@ -1,4 +1,4 @@
-import { GoogleMap, LatLngBounds, Marker } from '@agm/core/services/google-maps-types';
+import { GoogleMap, LatLngBounds, Marker, MVCObject } from '@agm/core/services/google-maps-types';
 
 export interface CalculatorResult {
   text: string;
@@ -7,7 +7,7 @@ export interface CalculatorResult {
 
 export type CalculateFunction = (marker: Marker[], count: number) => CalculatorResult;
 
-export interface MarkerClustererInstance {
+export interface MarkerClustererInstance extends MVCObject {
   zoomOnClick_: boolean;
   averageCenter_: boolean;
   imagePath_: string;

diff --git a/packages/js-marker-clusterer/services/managers/cluster-manager.ts b/packages/js-marker-clusterer/services/managers/cluster-manager.ts
@@ -1,4 +1,5 @@
 import { Injectable, NgZone } from '@angular/core';
+import { Observable, Observer } from 'rxjs';
 
 import 'js-marker-clusterer';
 
@@ -139,6 +140,16 @@ export class ClusterManager extends MarkerManager {
     });
   }
 
+  createClusterEventObservable<T>(eventName: string): Observable<T> {
+    return Observable.create((observer: Observer<T>) => {
+      this._zone.runOutsideAngular(() => {
+        this._clustererInstance.then((m: MarkerClustererInstance) => {
+          m.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
+        });
+      });
+    });
+  }
+
   setCalculator (c: AgmMarkerCluster): void {
     this.getClustererInstance().then(cluster => {
       if (typeof c.calculator === 'function') {