fix(popup): now easier to use

Create a temporary popup when the popup is moved but closed right after because of closeOnClick option (like in popup-on-click). This way you don't need to track the status of the popup in this use case. You can now reopen the popup by the changing the ref of lngLat.
Wykks · Feb 11, 2018 · 1ca82c1 · 1ca82c1
1 parent 774ae15
commit 1ca82c1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/app/demo/examples/popup-on-click.component.ts b/src/app/demo/examples/popup-on-click.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { MapMouseEvent } from 'mapbox-gl';
 
 @Component({
@@ -28,7 +28,6 @@ import { MapMouseEvent } from 'mapbox-gl';
     <mgl-popup
       *ngIf="selectedPoint"
       [lngLat]="selectedPoint.geometry.coordinates"
-      (close)="selectedPoint = null"
     >
       <span [innerHTML]="selectedPoint.properties.description"></span>
     </mgl-popup>
@@ -41,9 +40,7 @@ export class PopupOnClickComponent {
   selectedPoint: GeoJSON.Feature<GeoJSON.Point> | null;
   cursorStyle: string;
 
-  constructor(
-    private ChangeDetectorRef: ChangeDetectorRef
-  ) {
+  constructor() {
     this.points = {
       'type': 'FeatureCollection',
       'features': [{
@@ -150,8 +147,6 @@ export class PopupOnClickComponent {
   }
 
   onClick(evt: MapMouseEvent) {
-    this.selectedPoint = null;
-    this.ChangeDetectorRef.detectChanges();
     this.selectedPoint = (<any>evt).features[0];
   }
 }
diff --git a/src/app/lib/popup/popup.component.ts b/src/app/lib/popup/popup.component.ts
@@ -50,7 +50,10 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.lngLat && !changes.lngLat.isFirstChange()) {
-      this.popupInstance!.setLngLat(this.lngLat!);
+      this.MapService.removePopup(this.popupInstance!);
+      const popupInstanceTmp = this.createPopup();
+      this.MapService.addPopup(popupInstanceTmp);
+      this.popupInstance = popupInstanceTmp;
     }
     if (changes.marker && !changes.marker.isFirstChange()) {
       const previousMarker: MarkerComponent = changes.marker.previousValue;
@@ -64,6 +67,15 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   }
 
   ngAfterViewInit() {
+    this.popupInstance = this.createPopup();
+  }
+
+  ngOnDestroy() {
+    this.MapService.removePopup(this.popupInstance!);
+    this.popupInstance = undefined;
+  }
+
+  private createPopup() {
     const options = {
       closeButton: this.closeButton,
       closeOnClick: this.closeOnClick,
@@ -73,23 +85,19 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
     Object.keys(options)
       .forEach((key) =>
         (<any>options)[key] === undefined && delete (<any>options)[key]);
-    this.popupInstance = new Popup(options);
-    this.popupInstance.once('close', () => {
+    const popupInstance = new Popup(options);
+    popupInstance.once('close', () => {
       this.close.emit();
     });
-    this.popupInstance.setDOMContent(this.content.nativeElement);
+    popupInstance.setDOMContent(this.content.nativeElement);
     this.MapService.mapCreated$.subscribe(() => {
       if (this.lngLat) {
-        this.popupInstance!.setLngLat(this.lngLat);
-        this.MapService.addPopup(this.popupInstance!);
+        popupInstance.setLngLat(this.lngLat);
+        this.MapService.addPopup(popupInstance);
       } else if (this.marker && this.marker.markerInstance) {
-        this.marker.markerInstance.setPopup(this.popupInstance);
+        this.marker.markerInstance.setPopup(popupInstance);
       }
     });
-  }
-
-  ngOnDestroy() {
-    this.MapService.removePopup(this.popupInstance!);
-    this.popupInstance = undefined;
+    return popupInstance;
   }
 }