feat(popup): add feature input

close #38
Wykks · Aug 4, 2018 · df15d48 · df15d48
1 parent 2b6f712
commit df15d48
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts b/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts
@@ -29,6 +29,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   @Input() offset?: number | PointLike | { [anchor: string]: [number, number] };
 
   /* Dynamic input */
+  @Input() feature?: GeoJSON.Feature<GeoJSON.Point>;
   @Input() lngLat?: LngLatLike;
   @Input() marker?: MarkerComponent;
 
@@ -44,16 +45,20 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   ) { }
 
   ngOnInit() {
-    if (this.lngLat && this.marker) {
-      throw new Error('marker and lngLat input are mutually exclusive');
+    if (this.lngLat && this.marker || this.feature && this.lngLat || this.feature && this.marker) {
+      throw new Error('marker, lngLat, feature input are mutually exclusive');
     }
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.lngLat && !changes.lngLat.isFirstChange()) {
+    if (
+      changes.lngLat && !changes.lngLat.isFirstChange() ||
+      changes.feature && !changes.feature.isFirstChange()
+    ) {
+      const newlngLat = changes.lngLat ? this.lngLat! : this.feature!.geometry!.coordinates!;
       this.MapService.removePopupFromMap(this.popupInstance!, true);
       const popupInstanceTmp = this.createPopup();
-      this.MapService.addPopupToMap(popupInstanceTmp, changes.lngLat.currentValue, this.popupInstance!.isOpen());
+      this.MapService.addPopupToMap(popupInstanceTmp, newlngLat, this.popupInstance!.isOpen());
       this.popupInstance = popupInstanceTmp;
     }
     if (changes.marker && !changes.marker.isFirstChange()) {
@@ -100,12 +105,12 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
 
   private addPopup(popup: Popup) {
     this.MapService.mapCreated$.subscribe(() => {
-      if (this.lngLat) {
-        this.MapService.addPopupToMap(popup, this.lngLat);
+      if (this.lngLat || this.feature) {
+        this.MapService.addPopupToMap(popup, this.lngLat ? this.lngLat : this.feature!.geometry!.coordinates!);
       } else if (this.marker && this.marker.markerInstance) {
         this.MapService.addPopupToMarker(this.marker.markerInstance, popup);
       } else {
-        throw new Error('mgl-popup need either lngLat or marker to be set');
+        throw new Error('mgl-popup need either lngLat/marker/feature to be set');
       }
     });
   }

diff --git a/projects/showcase/src/app/demo/examples/ngx-marker-cluster.component.ts b/projects/showcase/src/app/demo/examples/ngx-marker-cluster.component.ts
@@ -1,6 +1,5 @@
 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({
@@ -15,24 +14,23 @@ import { Cluster, Supercluster } from 'supercluster';
         </mat-list-item>
       </mat-list>
       <mat-paginator
-        [length]="count"
+        [length]="selectedCluster.properties.point_count"
         [pageSize]="5"
         (page)="changePage($event)"
       ></mat-paginator>
     `
 })
 export class ClusterPopupComponent implements OnChanges {
-  @Input() clusterId: GeoJSON.Feature<GeoJSON.Point>;
+  @Input() selectedCluster: 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()) {
+    if (changes.selectedCluster && !changes.selectedCluster.isFirstChange()) {
       this.paginator.firstPage();
     }
   }
@@ -43,7 +41,7 @@ export class ClusterPopupComponent implements OnChanges {
       offset = pageEvent.pageIndex * 5;
     }
     // Typing issue in supercluster
-    this.leaves = (<any>this.supercluster.getLeaves)(this.clusterId, 5, offset);
+    this.leaves = (<any>this.supercluster.getLeaves)(this.selectedCluster.properties!.cluster_id, 5, offset);
   }
 }
 
@@ -81,12 +79,11 @@ export class ClusterPopupComponent implements OnChanges {
     </mgl-marker-cluster>
     <mgl-popup
       *ngIf="selectedCluster"
-      [lngLat]="selectedCluster.lngLat"
+      [feature]="selectedCluster"
     >
       <demo-cluster-popup
         [supercluster]="supercluster"
-        [clusterId]="selectedCluster.id"
-        [count]="selectedCluster.count"
+        [selectedCluster]="selectedCluster"
       ></demo-cluster-popup>
     </mgl-popup>
   </mgl-map>
@@ -96,23 +93,15 @@ export class ClusterPopupComponent implements OnChanges {
 export class NgxMarkerClusterComponent implements OnInit {
   earthquakes: object;
   supercluster: Supercluster;
-  selectedCluster: {
-    lngLat: LngLatLike;
-    count: number;
-    id: number;
-  };
+  selectedCluster: GeoJSON.Feature<GeoJSON.Point>;
 
   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!
-    };
+    // Change the ref, to trigger mgl-popup onChanges (when the user click on the same cluster)
+    this.selectedCluster = { ...feature };
   }
 }