feat(markerCluster): expose supercluster by Ouput load event

Update demo to use the new way of using markerCluster
Supercluster methods as template var is going to be removed in the next major version

src/app/lib/marker-cluster/marker-cluster.component.ts

@@ -11,7 +11,9 @@ import {
   OnInit,
   SimpleChanges,
   TemplateRef,
-  NgZone
+  NgZone,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { merge } from 'rxjs/observable/merge';
@@ -69,6 +71,8 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
   /* Dynamic input */
   @Input() data: GeoJSON.FeatureCollection<GeoJSON.Point>;
 
+  @Output() load = new EventEmitter<Supercluster>();
+
   @ContentChild(PointDirective, { read: TemplateRef }) pointTpl: TemplateRef<any>;
   @ContentChild(ClusterPointDirective, { read: TemplateRef }) clusterPointTpl: TemplateRef<any>;
 
@@ -104,6 +108,7 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
       });
     this.supercluster = supercluster(options);
     this.supercluster.load(this.data.features);
+    this.load.emit(this.supercluster);
   }
 
   ngOnChanges(changes: SimpleChanges) {

src/app/showcase/demo/demo.module.ts

@@ -32,7 +32,7 @@ import { NgxCustomMarkerIconsComponent } from './examples/ngx-custom-marker-icon
 import { NgxDragAMarkerComponent } from './examples/ngx-drag-a-marker.component';
 import { NgxDragAPointComponent } from './examples/ngx-drag-a-point.component';
 import { NgxGeoJSONLineComponent } from './examples/ngx-geojson-line.component';
-import { ClusterPointComponent, NgxMarkerClusterComponent } from './examples/ngx-marker-cluster.component';
+import { ClusterPopupComponent, NgxMarkerClusterComponent } from './examples/ngx-marker-cluster.component';
 import { NgxScaleControlComponent } from './examples/ngx-scale-control.component';
 import { PopupOnClickComponent } from './examples/popup-on-click.component';
 import { PopupComponent } from './examples/popup.component';
@@ -144,7 +144,7 @@ export const DEMO_ROUTES: Routes = [
     PopupOnClickComponent,
     ZoomtoLinestringComponent,
     NgxMarkerClusterComponent,
-    ClusterPointComponent,
+    ClusterPopupComponent,
     Display3dBuildingsComponent
   ]
 })

src/app/showcase/demo/examples/ngx-marker-cluster.component.ts

@@ -1,25 +1,49 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material';
+import { LngLatLike } from 'mapbox-gl';
+import { Cluster, Supercluster } from 'supercluster';
 
 @Component({
   // tslint:disable-next-line:component-selector
-  selector: 'demo-cluster-point',
+  selector: 'demo-cluster-popup',
   template: `
-    <div class="marker-cluster" (click)="alert()">
-      {{ feature.properties?.point_count }}
-    </div>
-  `
+      <mat-list>
+        <mat-list-item
+          *ngFor="let leaf of leaves"
+        >
+          {{ leaf.properties['Primary ID'] }}
+        </mat-list-item>
+      </mat-list>
+      <mat-paginator
+        [length]="count"
+        [pageSize]="5"
+        (page)="changePage($event)"
+      ></mat-paginator>
+    `
 })
-export class ClusterPointComponent {
-  @Input() feature: GeoJSON.Feature<GeoJSON.Point>;
-  @Input() getLeavesFn: (limit?: number, offset?: number) => GeoJSON.Feature<GeoJSON.Point>[];
-  @Input() getClusterExpansionZoomFn: () => number;
-
-  alert() {
-    const clusters = this.getLeavesFn();
-    let message = 'childs: ';
-    message += clusters.map((cluster) => cluster.properties!['Primary ID']).join(', ');
-    message += ` getClusterExpansionZoom(): ${this.getClusterExpansionZoomFn()}`;
-    alert(message);
+export class ClusterPopupComponent implements OnChanges {
+  @Input() clusterId: GeoJSON.Feature<GeoJSON.Point>;
+  @Input() supercluster: Supercluster;
+  @Input() count: number;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  leaves: GeoJSON.Feature<GeoJSON.Point>[];
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.changePage();
+    if (changes.count && !changes.count.isFirstChange()) {
+      this.paginator.firstPage();
+    }
+  }
+
+  changePage(pageEvent?: PageEvent) {
+    let offset = 0;
+    if (pageEvent) {
+      offset = pageEvent.pageIndex * 5;
+    }
+    // Typing issue in supercluster
+    this.leaves = (<any>this.supercluster.getLeaves)(this.clusterId, 5, offset);
   }
 }
 
@@ -36,6 +60,7 @@ export class ClusterPointComponent {
       [data]="earthquakes"
       [maxZoom]="14"
       [radius]="50"
+      (load)="supercluster = $event"
     >
       <ng-template mglPoint let-feature>
         <div
@@ -45,18 +70,49 @@ export class ClusterPointComponent {
           {{ feature.properties['Primary ID'] }}
         </div>
       </ng-template>
-      <ng-template mglClusterPoint let-feature let-getLeavesFn="getLeavesFn" let-getClusterExpansionZoomFn="getClusterExpansionZoomFn">
-        <demo-cluster-point [feature]="feature" [getLeavesFn]="getLeavesFn" [getClusterExpansionZoomFn]="getClusterExpansionZoomFn"></demo-cluster-point>
+      <ng-template mglClusterPoint let-feature>
+        <div
+          class="marker-cluster"
+          (click)="selectCluster($event, feature)"
+        >
+          {{ feature.properties?.point_count }}
+        </div>
       </ng-template>
     </mgl-marker-cluster>
+    <mgl-popup
+      *ngIf="selectedCluster"
+      [lngLat]="selectedCluster.lngLat"
+    >
+      <demo-cluster-popup
+        [supercluster]="supercluster"
+        [clusterId]="selectedCluster.id"
+        [count]="selectedCluster.count"
+      ></demo-cluster-popup>
+    </mgl-popup>
   </mgl-map>
   `,
   styleUrls: ['./examples.css', './ngx-marker-cluster.component.css']
 })
 export class NgxMarkerClusterComponent implements OnInit {
   earthquakes: object;
+  supercluster: Supercluster;
+  selectedCluster: {
+    lngLat: LngLatLike;
+    count: number;
+    id: number;
+  };
 
   async ngOnInit() {
     this.earthquakes = await import('./earthquakes.geo.json');
   }
+
+  selectCluster(event: MouseEvent, feature: Cluster) {
+    event.stopPropagation(); // This is needed, otherwise the popup will close immediately
+    this.selectedCluster = {
+      // Change the ref, to trigger mgl-popup onChanges (when the user click on the same cluster)
+      lngLat: [ ...feature.geometry!.coordinates ],
+      count: feature.properties.point_count!,
+      id: feature.properties.cluster_id!
+    };
+  }
 }

src/app/showcase/demo/stackblitz-edit/stackblitz-edit.component.ts

@@ -155,7 +155,9 @@ margin: 0;
         '@angular/forms': '*',
         'url': '*',
         'querystring': '*',
-        '@types/mapbox-gl': '*'
+        'rxjs-compat': '*',
+        '@types/mapbox-gl': '*',
+        '@types/supercluster': '*'
       }
     };
     await this.zone.runOutsideAngular(async () => {

src/app/showcase/shared.module.ts

@@ -13,7 +13,8 @@ import {
   MatRadioModule,
   MatSidenavModule,
   MatSlideToggleModule,
-  MatToolbarModule
+  MatToolbarModule,
+  MatPaginatorModule
   } from '@angular/material';
 import { NgxMapboxGLModule } from '../lib';
 
@@ -31,6 +32,7 @@ const Modules = [
   MatInputModule,
   MatIconModule,
   MatSidenavModule,
+  MatPaginatorModule,
   FormsModule,
   NgxMapboxGLModule
 ];

src/assets/stackblitz-base.txt

@@ -12,7 +12,8 @@ import {
   MatProgressSpinnerModule,
   MatRadioModule,
   MatSlideToggleModule,
-  MatToolbarModule
+  MatToolbarModule,
+  MatPaginatorModule
   } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -33,6 +34,7 @@ const demoArray = Object.values(demo);
     MatCardModule,
     MatSlideToggleModule,
     MatProgressSpinnerModule,
+    MatPaginatorModule,
     NgxMapboxGLModule.forRoot({
       accessToken: 'pk.eyJ1Ijoid3lra3NzIiwiYSI6ImNqMjR6aTdmdzAwNHMzMnBvbjBucjlqNm8ifQ.6GjGpofWBVaIuSnhdXQb5w'
     })