feat: added Mapbox functions to DbxMapboxStore

dereekb · Aug 20, 2022 · 9a9f5f4 · 9a9f5f4
1 parent c986e5b
commit 9a9f5f4
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 62 deletions.
diff --git a/apps/demo/src/app/modules/doc/modules/extension/container/mapbox.component.html b/apps/demo/src/app/modules/doc/modules/extension/container/mapbox.component.html
@@ -4,6 +4,7 @@
     <!-- Examples -->
     <h3>DbxMapboxMapStore</h3>
     <doc-feature-example header="[dbxMapboxMap]" hint="This directive initializes an mgl-map and optionally connects it to an available DbxMapboxMapStore.">
+      <p>The DbxMapboxMapStore exposes a number of observables that provide the latest information about the state of a map.</p>
       <dbx-content-container>
         <dbx-content-container>
           <h4>DbxMapboxMapStore</h4>
@@ -17,15 +18,24 @@ <h4>DbxMapboxMapStore</h4>
           <p>Pitch: {{ pitch$ | async | json }} | Pitch Now: {{ pitchNow$ | async | json }}</p>
           <p>Bearing: {{ bearing$ | async | json }} | Bearing Now: {{ bearingNow$ | async | json }}</p>
           <p>Bound: {{ bound$ | async | json }} | Bound Now: {{ boundNow$ | async | json }}</p>
+          <p>Click: {{ click$ | async | json }} | Double Click: {{ doubleClick$ | async | json }}</p>
         </dbx-content-container>
         <div style="height: 300px; width: 100%">
           <mgl-map dbxMapboxMap></mgl-map>
         </div>
-        <div>
-          <button mat-button (click)="centerAustin()">Austin, TX</button>
-          <button mat-button (click)="centerBryan()">Bryan, TX</button>
-          <button mat-button (click)="centerDenver()">Denver, CO</button>
-        </div>
+        <dbx-bar fxLayout="row wrap">
+          <button mat-button (click)="centerAustin()">Austin, TX (jump)</button>
+          <button mat-button (click)="centerBryan()">Bryan, TX (fly)</button>
+          <button mat-button (click)="centerDenver()">Denver, CO (ease)</button>
+          <span class="dbx-spacer"></span>
+          <button mat-button (click)="resetBearing()">Reset Bearing</button>
+          <button mat-button (click)="resetNorthPitch()">Reset North Pitch</button>
+          <button mat-button (click)="rotateToSouth()">Rotate To South</button>
+          <span class="dbx-spacer"></span>
+          <button mat-button (click)="useStreetsMap()">Street Map</button>
+          <button mat-button (click)="useDarkMap()">Dark Map</button>
+          <button mat-button (click)="useSatelliteMap()">Sat Map</button>
+        </dbx-bar>
       </dbx-content-container>
     </doc-feature-example>
     <h3>Forms</h3>

diff --git a/apps/demo/src/app/modules/doc/modules/extension/container/mapbox.component.ts b/apps/demo/src/app/modules/doc/modules/extension/container/mapbox.component.ts
@@ -1,8 +1,10 @@
-import { latLngString } from '@dereekb/util';
+import { latLngString, LatLngTuple } from '@dereekb/util';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Component } from '@angular/core';
 import { mapboxLatLngField } from '@dereekb/dbx-form/mapbox';
 import { DbxMapboxMapStore } from 'packages/dbx-web/mapbox/src/lib/mapbox.store';
+import { KnownMapboxStyle } from '@dereekb/dbx-web/mapbox';
+import { map } from 'rxjs';
 
 @Component({
   templateUrl: './mapbox.component.html',
@@ -25,6 +27,8 @@ export class DocExtensionMapboxComponent {
   readonly bearingNow$ = this.dbxMapboxMapStore.bearingNow$;
   readonly bound$ = this.dbxMapboxMapStore.bound$;
   readonly boundNow$ = this.dbxMapboxMapStore.boundNow$;
+  readonly click$ = this.dbxMapboxMapStore.clickEvent$.pipe(map((x) => x?.lngLat.toArray()));
+  readonly doubleClick$ = this.dbxMapboxMapStore.doubleClickEvent$.pipe(map((x) => x?.lngLat.toArray()));
 
   readonly defaultLatLngFieldValue = {
     latLng: latLngString(30.5989668, -96.3831949),
@@ -46,14 +50,44 @@ export class DocExtensionMapboxComponent {
   constructor(readonly dbxMapboxMapStore: DbxMapboxMapStore) {}
 
   centerAustin() {
-    this.dbxMapboxMapStore.setCenter([30.269026910097345, -97.74083986490928]);
+    this.dbxMapboxMapStore.jumpTo({ center: [30.269026910097345, -97.74083986490928] });
   }
 
   centerBryan() {
-    this.dbxMapboxMapStore.setCenter([30.599056767713982, -96.38305877734588]);
+    const center: LatLngTuple = [30.599056767713982, -96.38305877734588];
+    this.dbxMapboxMapStore.flyTo({ center });
   }
 
   centerDenver() {
-    this.dbxMapboxMapStore.setCenter([39.76501871707782, -104.90412501004826]);
+    const center: LatLngTuple = [39.76501871707782, -104.90412501004826];
+    this.dbxMapboxMapStore.easeTo({ to: { center } });
+  }
+
+  resetBearing() {
+    this.dbxMapboxMapStore.resetPitchAndBearing();
+  }
+
+  snapToNorth() {
+    this.dbxMapboxMapStore.snapToNorth();
+  }
+
+  resetNorthPitch() {
+    this.dbxMapboxMapStore.resetNorthPitch();
+  }
+
+  rotateToSouth() {
+    this.dbxMapboxMapStore.rotateTo(-180);
+  }
+
+  useStreetsMap() {
+    this.dbxMapboxMapStore.setStyle('mapbox://styles/mapbox/streets-v11' as KnownMapboxStyle);
+  }
+
+  useDarkMap() {
+    this.dbxMapboxMapStore.setStyle('mapbox://styles/mapbox/dark-v10' as KnownMapboxStyle);
+  }
+
+  useSatelliteMap() {
+    this.dbxMapboxMapStore.setStyle('mapbox://styles/mapbox/satellite-v9' as KnownMapboxStyle);
   }
 }
diff --git a/packages/dbx-web/mapbox/src/index.ts b/packages/dbx-web/mapbox/src/index.ts
@@ -1 +1 @@
-export * from './lib/mapbox.module';
+export * from './lib';
diff --git a/packages/dbx-web/mapbox/src/lib/index.ts b/packages/dbx-web/mapbox/src/lib/index.ts
@@ -1,3 +1,5 @@
 export * from './mapbox.module';
+export * from './mapbox.service';
 export * from './mapbox.store.map.directive';
 export * from './mapbox.store';
+export * from './mapbox';
diff --git a/packages/dbx-web/mapbox/src/lib/mapbox.service.ts b/packages/dbx-web/mapbox/src/lib/mapbox.service.ts
@@ -1,31 +1,19 @@
 import { Injectable, Optional } from '@angular/core';
-import { LatLngInput } from '@dereekb/util';
+import { LatLngPointInput, Milliseconds } from '@dereekb/util';
 import { MapboxOptions } from 'mapbox-gl';
-import { MapboxZoomLevel } from './mapbox';
+import { KnownMapboxStyle, MapboxZoomLevel } from './mapbox';
 
 export class DbxMapboxConfig {
   readonly defaultStyle?: MapboxOptions['style'];
   readonly defaultZoom?: MapboxZoomLevel;
-  readonly defaultCenter?: LatLngInput;
+  readonly defaultCenter?: LatLngPointInput;
+  readonly defaultStoreRefreshPeriod?: number;
 }
 
-export type KnownMapboxStyle = 'mapbox://styles/mapbox/streets-v11' | 'mapbox://styles/mapbox/outdoors-v11' | 'mapbox://styles/mapbox/light-v10' | 'mapbox://styles/mapbox/dark-v10' | 'mapbox://styles/mapbox/satellite-v9' | 'mapbox://styles/mapbox/satellite-streets-v11' | 'mapbox://styles/mapbox/navigation-day-v1' | 'mapbox://styles/mapbox/navigation-night-v1';
-
-export const KNOWN_MAPBOX_STYLES: KnownMapboxStyle[] = [
-  //
-  'mapbox://styles/mapbox/streets-v11',
-  'mapbox://styles/mapbox/outdoors-v11',
-  'mapbox://styles/mapbox/light-v10',
-  'mapbox://styles/mapbox/dark-v10',
-  'mapbox://styles/mapbox/satellite-v9',
-  'mapbox://styles/mapbox/satellite-streets-v11',
-  'mapbox://styles/mapbox/navigation-day-v1',
-  'mapbox://styles/mapbox/navigation-night-v1'
-];
-
 export const DEFAULT_MAPBOX_STYLE: KnownMapboxStyle = 'mapbox://styles/mapbox/streets-v11';
-export const DEFAULT_MAPBOX_CENTER: LatLngInput = [30.2690138665, -97.7408297965];
+export const DEFAULT_MAPBOX_CENTER: LatLngPointInput = [30.2690138665, -97.7408297965];
 export const DEFAULT_MAPBOX_ZOOM: MapboxZoomLevel = 12;
+export const DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD: Milliseconds = 200;
 
 @Injectable({
   providedIn: 'root'
@@ -45,7 +33,11 @@ export class DbxMapboxService {
     return this._config.defaultZoom ?? DEFAULT_MAPBOX_ZOOM;
   }
 
-  get defaultCenter(): LatLngInput {
+  get defaultCenter(): LatLngPointInput {
     return this._config.defaultCenter ?? DEFAULT_MAPBOX_CENTER;
   }
+
+  get mapboxMapStoreTimerRefreshPeriod(): number {
+    return this._config.defaultStoreRefreshPeriod ?? DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD;
+  }
 }