@dereekb/dbx-web 9.6.3 → 9.7.0

package/fesm2020/dereekb-dbx-web-mapbox.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, Inject, Directive, Host, Component, ElementRef, ViewChild, Input, ChangeDetectionStrategy, SkipSelf, Injector, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { cleanup, filterMaybe, onTrueToFalse, SubscriptionObject } from '@dereekb/rxjs';
-import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
+import { cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, asObservable } from '@dereekb/rxjs';
+import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, vectorsAreEqual, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter, LAT_LONG_10M_PRECISION, roundNumberToStepFunction } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime } from 'rxjs';
+import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime, combineLatestWith } from 'rxjs';
 import * as MapboxGl from 'mapbox-gl';
+import { bounds } from '@mapbox/geo-viewport';
 import * as i1 from 'ngx-mapbox-gl';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
 import * as i3$1 from '@dereekb/dbx-web';
@@ -20,8 +21,8 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i6 from 'angular-resize-event';
 import { AngularResizeEventModule } from 'angular-resize-event';
 import * as i2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeMarkForCheck, DbxInjectionComponentModule } from '@dereekb/dbx-core';
-import * as i2$2 from '@angular/material/menu';
+import { AbstractSubscriptionDirective, safeMarkForCheck, tapDetectChanges, DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import * as i2$1 from '@angular/material/menu';
 
 class DbxMapboxConfig {
 }
@@ -57,6 +58,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     type: Optional
                 }] }]; } });
 
+function mapboxViewportBoundFunction(config) {
+    const { mapCanvasSize, tileSize = 512 } = config;
+    const dimensions = [mapCanvasSize.x, mapCanvasSize.y];
+    return ({ center, zoom }) => {
+        const boundingBox = bounds([center.lng, center.lat], zoom, dimensions, tileSize);
+        const [swLng, swLat, neLng, neLat] = boundingBox;
+        const result = {
+            sw: { lat: swLat, lng: swLng },
+            ne: { lat: neLat, lng: neLng }
+        };
+        return result;
+    };
+}
+
 /**
  * Store used for retrieving information.
  */
@@ -70,8 +85,9 @@ class DbxMapboxMapStore extends ComponentStore {
             retainContent: true
         });
         this.dbxMapboxService = dbxMapboxService;
-        this.latLngPoint = latLngPointFunction();
-        this.latLngBound = latLngBoundFunction({ pointFunction: latLngPointFunction({ wrap: false, validate: false }) });
+        this.safeLatLngPoint = latLngPointFunction();
+        this.latLngPoint = latLngPointFunction({ wrap: false, validate: false });
+        this.latLngBound = latLngBoundFunction({ pointFunction: this.latLngPoint });
         // MARK: Effects
         this.setMapService = this.effect((input) => {
             return input.pipe(switchMap((service) => {
@@ -105,6 +121,12 @@ class DbxMapboxMapStore extends ComponentStore {
                         addListener('click', (x) => this._setClickEvent(x));
                         addListener('dblclick', (x) => this._setDoubleClickEvent(x));
                         addListener('contextmenu', (x) => this._setRightClickEvent(x));
+                        const refreshForResize = () => {
+                            const { clientWidth: x, clientHeight: y } = map.getCanvas();
+                            this._setMapCanvasSize({ x, y });
+                        };
+                        addListener('resize', refreshForResize);
+                        refreshForResize();
                         const subs = [];
                         return {
                             service,
@@ -137,7 +159,7 @@ class DbxMapboxMapStore extends ComponentStore {
         });
         this.setCenter = this.effect((input) => {
             return input.pipe(switchMap((center) => {
-                const centerPoint = this.latLngPoint(center);
+                const centerPoint = this.safeLatLngPoint(center);
                 return this.mapInstance$.pipe(tap((map) => map.setCenter(centerPoint)));
             }));
         });
@@ -256,21 +278,21 @@ class DbxMapboxMapStore extends ComponentStore {
         this.jumpTo = this.effect((input) => {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.latLngPoint(inputCenter) : undefined;
+                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
                 return this.mapInstance$.pipe(tap((map) => map.jumpTo({ ...x.to, center }, x.eventData)));
             }));
         });
         this.easeTo = this.effect((input) => {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.latLngPoint(inputCenter) : undefined;
+                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
                 return this.mapInstance$.pipe(tap((map) => map.easeTo({ ...x.to, center }, x.eventData)));
             }));
         });
         this.flyTo = this.effect((input) => {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.latLngPoint(inputCenter) : undefined;
+                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
                 return this.mapInstance$.pipe(tap((map) => map.flyTo({ ...x.to, center }, x.eventData)));
             }));
         });
@@ -339,30 +361,34 @@ class DbxMapboxMapStore extends ComponentStore {
             const bound = x.getBounds();
             const boundSw = bound.getSouthWest();
             const boundNe = bound.getNorthEast();
-            const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : boundSw;
-            const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : boundNe;
+            const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : { lat: boundSw.lat, lng: boundSw.lng };
+            const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : { lat: boundNe.lat, lng: boundNe.lng };
             return this.latLngBound(sw, ne);
         }))), shareReplay(1))));
         this.bound$ = this.whenInitialized$.pipe(switchMap(() => {
             return this.isRendering$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.boundNow$.pipe(first())), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
         }));
+        this.boundSizing$ = this.bound$.pipe(map((x) => diffLatLngBoundPoints(x)), shareReplay(1));
         this.boundWrapsAroundWorld$ = this.bound$.pipe(map((x) => latLngBoundWrapsMap(x)), distinctUntilChanged(), shareReplay(1));
         this.isWithinBoundFunction$ = this.bound$.pipe(map((x) => isWithinLatLngBoundFunction(x)), shareReplay(1));
         this.overlapsBoundFunction$ = this.bound$.pipe(map((x) => overlapsLatLngBoundFunction(x)), shareReplay(1));
         this.zoomNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => x.getZoom()))), shareReplay(1))));
         this.zoom$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isZooming$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.zoomNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+            return this.isZooming$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.zoomNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
         }));
         this.pitchNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getPitch()))), shareReplay(1))));
         this.pitch$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.pitchNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.pitchNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
         }));
         this.bearingNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getBearing()))), shareReplay(1))));
         this.bearing$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.bearingNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.bearingNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
         }));
         this.content$ = this.state$.pipe(map((x) => x.content), distinctUntilChanged(), shareReplay(1));
         this.hasContent$ = this.content$.pipe(map(Boolean));
+        this.currentMapCanvasSize$ = this.state$.pipe(map((x) => x.mapCanvasSize), distinctUntilChanged((a, b) => a != null && b != null && vectorsAreEqual(a, b)), shareReplay(1));
+        this.mapCanvasSize$ = this.currentMapCanvasSize$.pipe(filterMaybe());
+        this.viewportBoundFunction$ = this.mapCanvasSize$.pipe(map((x) => mapboxViewportBoundFunction({ mapCanvasSize: x })), shareReplay(1));
         this.clickEvent$ = this.state$.pipe(map((x) => x.clickEvent), distinctUntilChanged(), shareReplay(1));
         this.doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent), distinctUntilChanged(), shareReplay(1));
         this.rightClickEvent$ = this.state$.pipe(map((x) => x.rightClickEvent), distinctUntilChanged(), shareReplay(1));
@@ -373,6 +399,7 @@ class DbxMapboxMapStore extends ComponentStore {
         this._setMoveState = this.updater((state, moveState) => ({ ...state, moveState }));
         this._setZoomState = this.updater((state, zoomState) => ({ ...state, zoomState }));
         this._setRotateState = this.updater((state, rotateState) => ({ ...state, rotateState }));
+        this._setMapCanvasSize = this.updater((state, mapCanvasSize) => ({ ...state, mapCanvasSize }));
         this._setClickEvent = this.updater((state, clickEvent) => ({ ...state, clickEvent }));
         this._setDoubleClickEvent = this.updater((state, doubleClickEvent) => ({ ...state, doubleClickEvent }));
         this._setRightClickEvent = this.updater((state, rightClickEvent) => ({ ...state, rightClickEvent }));
@@ -419,7 +446,7 @@ class DbxMapboxMapStore extends ComponentStore {
     }
     calculateNextCenterOffsetWithScreenMarginChange(sizing) {
         return this.atNextIdle().pipe(switchMap(() => this.bound$.pipe(first(), map((bounds) => {
-            const diff = diffLatLngBoundPoints(bounds);
+            const diff = diffLatLngBoundPoints(bounds, true);
             const center = latLngBoundCenterPoint(bounds);
             const offsetWidth = sizing.leftMargin + sizing.rightMargin; // 300 + 0
             const newWidth = sizing.fullWidth - offsetWidth; // 1000 - 300 - 0
@@ -492,7 +519,7 @@ class DbxMapboxLayoutDrawerComponent {
     }
 }
 DbxMapboxLayoutDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxMapboxLayoutDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+DbxMapboxLayoutDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout-drawer', host: {
@@ -635,7 +662,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
     }
 }
 DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerColor: "drawerColor" }, viewQueries: [{ propertyName: "container", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-drawer-container class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerColor: "drawerColor" }, viewQueries: [{ propertyName: "container", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-drawer-container class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout', template: "<mat-drawer-container class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [ngClass]=\"(drawerButtonClasses$ | async) || ''\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"] }]
@@ -724,7 +751,7 @@ class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
         this._active.next(active ?? true);
     }
 }
-DbxMapboxMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMenuComponent, deps: [{ token: DbxMapboxMapStore }, { token: i2$2.MatMenuTrigger, host: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMenuComponent, deps: [{ token: DbxMapboxMapStore }, { token: i2$1.MatMenuTrigger, host: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DbxMapboxMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMenuComponent, selector: "dbx-mapbox-menu", inputs: { active: ["dbxMapboxMenu", "active"] }, host: { properties: { "style.top": "pos.y", "style.left": "pos.x" }, styleAttribute: "visibility: hidden; position: fixed" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMenuComponent, decorators: [{
             type: Component,
@@ -738,7 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }, { type: i2$2.MatMenuTrigger, decorators: [{
+        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }, { type: i2$1.MatMenuTrigger, decorators: [{
                     type: Host
                 }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
                 type: Input,
@@ -802,7 +829,8 @@ class DbxMapboxMarkerComponent {
         this._marker = marker;
     }
     get latLng() {
-        return this._marker?.latLng;
+        const input = this._marker?.latLng;
+        return input ? DbxMapboxMarkerComponent._latLngPoint(input) : undefined;
     }
     get anchor() {
         return this._marker?.anchor;
@@ -842,7 +870,7 @@ class DbxMapboxMarkerComponent {
         }
         const imageInput = this._marker?.image;
         const image = imageInput ? (typeof imageInput === 'string' ? imageInput : getValueFromGetter(imageInput, width)) : undefined;
-        let style = {
+        const style = {
             ...this._marker?.style,
             width: width + 'px',
             height: height + 'px',
@@ -852,6 +880,7 @@ class DbxMapboxMarkerComponent {
         return style;
     }
 }
+DbxMapboxMarkerComponent._latLngPoint = latLngPointFunction({ wrap: true });
 DbxMapboxMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DbxMapboxMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: { marker: "marker" }, ngImport: i0, template: `
     <mgl-marker *ngIf="marker" [lngLat]="latLng">
@@ -860,11 +889,11 @@ DbxMapboxMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
           <div class="dbx-mapbox-marker-content" [ngStyle]="style">
             <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
           </div>
-          <div class="dbx-mapbox-marker-label" *ngIf="label">{{ label }}</div>
+          <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ label }}</div>
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column;font-weight:700}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
@@ -874,15 +903,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
           <div class="dbx-mapbox-marker-content" [ngStyle]="style">
             <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
           </div>
-          <div class="dbx-mapbox-marker-label" *ngIf="label">{{ label }}</div>
+          <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ label }}</div>
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column;font-weight:700}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { marker: [{
                 type: Input
             }] } });
 
+/**
+ * Component used to render a set of DbxMapboxMarker values from the input data and marker factory.
+ */
+class DbxMapboxMarkersComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this._data = new BehaviorSubject(undefined);
+        this._markerFactory = new BehaviorSubject(undefined);
+        this.markers$ = combineLatest([this._data.pipe(distinctUntilChanged()), this._markerFactory.pipe(distinctUntilChanged())]).pipe(map(([data, markerFactory]) => {
+            if (data?.length && markerFactory) {
+                return data.map(markerFactory);
+            }
+            else {
+                return [];
+            }
+        }), tapDetectChanges(this.cdRef), shareReplay(1));
+    }
+    get data() {
+        return this._data.value;
+    }
+    set data(data) {
+        this._data.next(data);
+    }
+    get markerFactory() {
+        return this._markerFactory.value;
+    }
+    set markerFactory(markerFactory) {
+        this._markerFactory.next(markerFactory);
+    }
+    ngOnDestroy() {
+        this._data.complete();
+        this._markerFactory.complete();
+    }
+}
+DbxMapboxMarkersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxMarkersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMarkersComponent, selector: "dbx-mapbox-markers", inputs: { data: "data", markerFactory: "markerFactory" }, ngImport: i0, template: `
+    <dbx-mapbox-marker *ngFor="let marker of markers$ | async" [marker]="marker"></dbx-mapbox-marker>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-mapbox-markers',
+                    template: `
+    <dbx-mapbox-marker *ngFor="let marker of markers$ | async" [marker]="marker"></dbx-mapbox-marker>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], markerFactory: [{
+                type: Input
+            }] } });
+
 const declarations = [
     //
     DbxMapboxMapDirective,
@@ -890,6 +972,7 @@ const declarations = [
     DbxMapboxLayoutDrawerComponent,
     DbxMapboxMenuComponent,
     DbxMapboxMarkerComponent,
+    DbxMapboxMarkersComponent,
     DbxMapboxMapStoreInjectionBlockDirective
 ];
 class DbxMapboxModule {
@@ -913,6 +996,7 @@ DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         DbxMapboxLayoutDrawerComponent,
         DbxMapboxMenuComponent,
         DbxMapboxMarkerComponent,
+        DbxMapboxMarkersComponent,
         DbxMapboxMapStoreInjectionBlockDirective], imports: [
         //
         CommonModule,
@@ -929,6 +1013,7 @@ DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         DbxMapboxLayoutDrawerComponent,
         DbxMapboxMenuComponent,
         DbxMapboxMarkerComponent,
+        DbxMapboxMarkersComponent,
         DbxMapboxMapStoreInjectionBlockDirective] });
 DbxMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, imports: [
         //
@@ -959,6 +1044,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 }]
         }] });
 
+/**
+ * Creates the styling for rendering a dot.
+ *
+ * @param background
+ * @param color
+ * @returns
+ */
+function dbxMapboxColoredDotStyle(background, color) {
+    return {
+        background,
+        padding: '2px',
+        color: color || 'white',
+        'border-radius': '50%'
+    };
+}
+
+/**
+ * Filters the input objects based on their center and zoom values.
+ *
+ * This function caches the bounds computations for each of the input values.
+ *
+ * @param config
+ * @returns
+ */
+function filterByMapboxViewportBound(config) {
+    const { boundDecisionObs: inputBoundDecisionObs, boundFunctionObs: inputBoundFunctionObs, defaultZoom: inputDefaultZoom = 17, readValue, zoomRounding, precision = LAT_LONG_10M_PRECISION } = config;
+    const _latLngPoint = latLngPointFunction({ wrap: false, validate: false, precision });
+    const _roundZoom = roundNumberToStepFunction(zoomRounding || { step: 0.5, round: 'floor' });
+    const boundDecisionObs = asObservable(inputBoundDecisionObs);
+    const boundFunctionObs = asObservable(inputBoundFunctionObs);
+    return (input) => {
+        return boundFunctionObs.pipe(distinctUntilChanged(), switchMap((viewportBoundFunction) => {
+            const cache = new Map();
+            return input.pipe(map((values) => {
+                return values.map((value) => {
+                    const item = readValue(value);
+                    const centerLatLng = _latLngPoint(item.center);
+                    const zoomStep = _roundZoom(item.zoom || inputDefaultZoom);
+                    const cacheKey = `${zoomStep}_${centerLatLng.lat}_${centerLatLng.lng}`;
+                    const cachedValue = cache.get(cacheKey);
+                    let bound;
+                    if (!cachedValue) {
+                        bound = viewportBoundFunction({ center: centerLatLng, zoom: zoomStep });
+                        cache.set(cacheKey, bound);
+                    }
+                    else {
+                        bound = cachedValue;
+                    }
+                    return {
+                        value,
+                        bound
+                    };
+                });
+            }), combineLatestWith(boundDecisionObs), map(([items, boundFunction]) => {
+                let valuesInBounds = [];
+                items.forEach((item) => {
+                    if (boundFunction(item.bound)) {
+                        valuesInBounds.push(item.value);
+                    }
+                });
+                return valuesInBounds;
+            }));
+        }), shareReplay(1));
+    };
+}
+
 const KNOWN_MAPBOX_STYLES = [
     //
     'mapbox://styles/mapbox/streets-v11',
@@ -980,5 +1131,5 @@ function mapboxZoomLevel(input) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxConfig, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, mapboxZoomLevel, provideMapboxStoreIfParentIsUnavailable };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxConfig, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideMapboxStoreIfParentIsUnavailable };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map