@dereekb/dbx-web 9.5.5 → 9.6.2

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

@@ -1,14 +1,16 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, Directive, Host, Component, ElementRef, ViewChild, Input, ChangeDetectionStrategy, NgModule } 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 { CommonModule } from '@angular/common';
-import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isSameLatLngBound, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject } from '@dereekb/util';
+import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
 import * as i1 from 'ngx-mapbox-gl';
+import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
 import { cleanup, filterMaybe, onTrueToFalse, SubscriptionObject } from '@dereekb/rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime, skip } from 'rxjs';
+import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime } from 'rxjs';
 import * as MapboxGl from 'mapbox-gl';
-import { dbxColorBackground, disableRightClickInCdkBackdrop } from '@dereekb/dbx-web';
+import * as i3$1 from '@dereekb/dbx-web';
+import { dbxColorBackground, disableRightClickInCdkBackdrop, DbxRouterAnchorModule } from '@dereekb/dbx-web';
 import * as i3 from '@angular/material/sidenav';
 import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
 import * as i4 from '@angular/material/button';
@@ -25,7 +27,7 @@ class DbxMapboxConfig {
 }
 const DEFAULT_MAPBOX_STYLE = 'mapbox://styles/mapbox/streets-v11';
 const DEFAULT_MAPBOX_CENTER = [30.2690138665, -97.7408297965];
-const DEFAULT_MAPBOX_ZOOM = 12;
+const DEFAULT_MAPBOX_ZOOM = 8;
 const DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD = 200;
 class DbxMapboxService {
     constructor(config) {
@@ -75,7 +77,7 @@ class DbxMapboxMapStore extends ComponentStore {
         });
         this.dbxMapboxService = dbxMapboxService;
         this.latLngPoint = latLngPointFunction();
-        this.latLngBound = latLngBoundFunction();
+        this.latLngBound = latLngBoundFunction({ pointFunction: latLngPointFunction({ wrap: false, validate: false }) });
         // MARK: Effects
         this.setMapService = this.effect((input) => {
             return input.pipe(switchMap((service) => {
@@ -160,6 +162,56 @@ class DbxMapboxMapStore extends ComponentStore {
                 return this.mapInstance$.pipe(tap((map) => map.setMaxZoom(zoom)));
             }));
         });
+        this.setKeyboardDisabled = this.effect((input) => {
+            return input.pipe(switchMap((disabled) => {
+                return this.mapInstance$.pipe(tap((map) => {
+                    if (disabled === false) {
+                        map.keyboard.enable();
+                    }
+                    else {
+                        map.keyboard.disable();
+                    }
+                }));
+            }));
+        });
+        this.setDragRotateDisabled = this.effect((input) => {
+            return input.pipe(switchMap((disabled) => {
+                return this.mapInstance$.pipe(tap((map) => {
+                    if (disabled === false) {
+                        map.dragRotate.enable();
+                    }
+                    else {
+                        map.dragRotate.disable();
+                    }
+                }));
+            }));
+        });
+        this.setDragPanDisabled = this.effect((input) => {
+            return input.pipe(switchMap((disabled) => {
+                return this.mapInstance$.pipe(tap((map) => {
+                    if (disabled === false) {
+                        map.dragPan.enable();
+                    }
+                    else {
+                        map.dragPan.disable();
+                    }
+                }));
+            }));
+        });
+        this.setZoomDisabled = this.effect((input) => {
+            return input.pipe(switchMap((disabled) => {
+                return this.mapInstance$.pipe(tap((map) => {
+                    if (disabled === false) {
+                        map.scrollZoom.enable();
+                        map.doubleClickZoom.enable();
+                    }
+                    else {
+                        map.scrollZoom.disable();
+                        map.doubleClickZoom.disable();
+                    }
+                }));
+            }));
+        });
         this.setPitch = this.effect((input) => {
             return input.pipe(switchMap((pitch) => {
                 return this.mapInstance$.pipe(tap((map) => map.setPitch(pitch)));
@@ -269,17 +321,41 @@ class DbxMapboxMapStore extends ComponentStore {
         this.isRotating$ = this.whenInitialized$.pipe(switchMap(() => this.rotateState$.pipe(map((x) => x === 'rotating'), distinctUntilChanged(), shareReplay())));
         this._movingTimer = this.movingTimer();
         this._renderingTimer = this.lifecycleRenderTimer();
-        this.centerNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => this.latLngPoint(x.getCenter())))), shareReplay(1))));
+        this.centerNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => this.latLngPoint(x.getCenter())))), shareReplay(1))), shareReplay(1));
         this.center$ = this.whenInitialized$.pipe(switchMap(() => {
             return this.isMoving$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.centerNow$.pipe(first())), distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
+        }), shareReplay(1));
+        this.margin$ = this.state$.pipe(map((x) => x.margin), distinctUntilChanged((a, b) => a != null && b != null && a.fullWidth === b.fullWidth && a.leftMargin === b.leftMargin && a.rightMargin === b.rightMargin), shareReplay(1));
+        this.reverseMargin$ = this.margin$.pipe(map((x) => {
+            if (x) {
+                return { leftMargin: -x.leftMargin, rightMargin: -x.rightMargin, fullWidth: x.fullWidth };
+            }
+            else {
+                return x;
+            }
         }));
+        this.centerGivenMargin$ = this.whenInitialized$.pipe(switchMap(() => {
+            return this.reverseMargin$.pipe(switchMap((x) => {
+                if (x) {
+                    return this.center$.pipe(switchMap((_) => this.calculateNextCenterOffsetWithScreenMarginChange(x)));
+                }
+                else {
+                    return this.isMoving$.pipe(filter((x) => !x), switchMap(() => this.center$));
+                }
+            }));
+        }), shareReplay(1));
         this.boundNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => {
             const bound = x.getBounds();
-            return this.latLngBound([bound.getSouthWest(), bound.getNorthEast()]);
+            const boundSw = bound.getSouthWest();
+            const boundNe = bound.getNorthEast();
+            const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : boundSw;
+            const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : boundNe;
+            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.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))));
@@ -300,6 +376,7 @@ class DbxMapboxMapStore extends ComponentStore {
         this.doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent), distinctUntilChanged(), shareReplay(1));
         this.rightClickEvent$ = this.state$.pipe(map((x) => x.rightClickEvent), distinctUntilChanged(), shareReplay(1));
         // MARK: State Changes
+        this.setMargin = this.updater((state, margin) => (Object.assign(Object.assign({}, state), { margin: margin && (margin.rightMargin !== 0 || margin.leftMargin !== 0) ? margin : undefined })));
         this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined }));
         this._setLifecycleState = this.updater((state, lifecycleState) => (Object.assign(Object.assign({}, state), { lifecycleState })));
         this._setMoveState = this.updater((state, moveState) => (Object.assign(Object.assign({}, state), { moveState })));
@@ -350,23 +427,22 @@ class DbxMapboxMapStore extends ComponentStore {
         }))));
     }
     calculateNextCenterOffsetWithScreenMarginChange(sizing) {
-        return this.atNextIdle().pipe(switchMap(() => this.bound$.pipe((first(),
-            map((bounds) => {
-                const diff = diffLatLngBoundPoints(bounds);
-                const center = latLngBoundCenterPoint(bounds);
-                const offsetWidth = sizing.leftMargin + sizing.rightMargin; // 300 + 0
-                const newWidth = sizing.fullWidth - offsetWidth; // 1000 - 300 - 0
-                const newWidthRatio = newWidth / sizing.fullWidth; // 700 / 1000
-                const newCenterLongitudeWidth = diff.lng * newWidthRatio; // 70% offset
-                const effectiveOffset = {
-                    lat: 0,
-                    lng: newCenterLongitudeWidth / 2
-                };
-                const newCenter = addLatLngPoints(bounds.sw, effectiveOffset);
-                newCenter.lat = center.lat; // retain center position
-                // console.log({ sizing, bounds, effectiveOffset, newWidth, offsetWidth, diff, center, newCenter });
-                return newCenter;
-            })))));
+        return this.atNextIdle().pipe(switchMap(() => this.bound$.pipe(first(), map((bounds) => {
+            const diff = diffLatLngBoundPoints(bounds);
+            const center = latLngBoundCenterPoint(bounds);
+            const offsetWidth = sizing.leftMargin + sizing.rightMargin; // 300 + 0
+            const newWidth = sizing.fullWidth - offsetWidth; // 1000 - 300 - 0
+            const newWidthRatio = newWidth / sizing.fullWidth; // 700 / 1000
+            const newCenterLongitudeWidth = diff.lng * newWidthRatio; // 70% offset
+            const effectiveOffset = {
+                lat: 0,
+                lng: newCenterLongitudeWidth / 2
+            };
+            const newCenter = addLatLngPoints(bounds.sw, effectiveOffset);
+            newCenter.lat = center.lat; // retain center position
+            // console.log({ sizing, bounds, effectiveOffset, newWidth, offsetWidth, diff, center, newCenter });
+            return newCenter;
+        }))));
     }
 }
 DbxMapboxMapStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStore, deps: [{ token: DbxMapboxService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -450,12 +526,14 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
         this.dbxMapboxMapStore = dbxMapboxMapStore;
         this._resized = new Subject();
         this._updateMargins = new Subject();
+        this._forceHasContent = new BehaviorSubject(false);
         this._side = new BehaviorSubject('right');
         this._openToggle = new BehaviorSubject(true);
         this._color = new BehaviorSubject(undefined);
         this._toggleSub = new SubscriptionObject();
         this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
-        this.opened$ = combineLatest([this.dbxMapboxMapStore.hasContent$, this._openToggle]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
+        this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
+        this.opened$ = combineLatest([this.hasContent$, this._openToggle]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
         this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
         this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.opened$]).pipe(
         //
@@ -483,7 +561,8 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
                 }
             });
         });
-        this._toggleSub.subscription = combineLatest([this.opened$.pipe(distinctUntilChanged(), skip(1)), this._updateMargins]).subscribe(([opened]) => {
+        let init = false;
+        this._toggleSub.subscription = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).subscribe(([opened]) => {
             let { right } = this.container._contentMargins;
             this.container.updateContentMargins();
             setTimeout(() => {
@@ -494,14 +573,19 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
                 right = (right || 0) * flip;
                 const element = this.content.nativeElement;
                 const width = element.clientWidth;
-                const easeTo = this.dbxMapboxMapStore
-                    .calculateNextCenterOffsetWithScreenMarginChange({
+                const margin = {
                     leftMargin: 0,
                     rightMargin: right,
                     fullWidth: width
-                })
-                    .pipe(first(), map((center) => ({ to: { center, duration: 3200, essential: false } })));
-                this.dbxMapboxMapStore.easeTo(easeTo);
+                };
+                const easeTo = this.dbxMapboxMapStore.calculateNextCenterOffsetWithScreenMarginChange(margin).pipe(first(), map((center) => ({ to: { center, duration: 3200, essential: false } })));
+                this.dbxMapboxMapStore.setMargin(opened ? margin : undefined);
+                if (!init) {
+                    this.dbxMapboxMapStore.easeTo(easeTo);
+                }
+                else {
+                    init = true;
+                }
             });
         });
     }
@@ -512,6 +596,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
         this._openToggle.complete();
         this._color.complete();
         this._toggleSub.destroy();
+        this._forceHasContent.complete();
     }
     toggleDrawer(open) {
         if (open == null) {
@@ -529,6 +614,11 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             this._openToggle.next(opened);
         }
     }
+    set hasContent(hasContent) {
+        if (hasContent != null) {
+            this._forceHasContent.next(hasContent);
+        }
+    }
     set drawerColor(color) {
         this._color.next(color);
     }
@@ -537,7 +627,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", opened: "opened", 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=\"push\" [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", 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=\"push\" [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" }] });
 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=\"push\" [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"] }]
@@ -551,6 +641,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 type: Input
             }], opened: [{
                 type: Input
+            }], hasContent: [{
+                type: Input
             }], drawerColor: [{
                 type: Input
             }] } });
@@ -645,12 +737,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 args: ['dbxMapboxMenu']
             }] } });
 
+/**
+ * Token used by provideMapboxStoreIfDoesNotExist() to prevent injecting a parent DbxMapboxMapStore into the child view.
+ */
+class DbxMapboxMapStoreProviderBlock {
+    constructor(dbxMapboxMapStore) {
+        this.dbxMapboxMapStore = dbxMapboxMapStore;
+    }
+}
+DbxMapboxMapStoreProviderBlock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [{ token: DbxMapboxMapStore, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxMapboxMapStoreProviderBlock.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStoreProviderBlock });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: DbxMapboxMapStore, decorators: [{
+                        type: SkipSelf
+                    }] }];
+    } });
+class DbxMapboxMapStoreInjectionBlockDirective {
+}
+DbxMapboxMapStoreInjectionBlockDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DbxMapboxMapStoreInjectionBlockDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMapStoreInjectionBlockDirective, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxMapboxStoreParentBlocker]',
+                    providers: [DbxMapboxMapStoreProviderBlock]
+                }]
+        }] });
+/**
+ * Creates a Provider that initializes a new DbxMapboxMapStore if a parent does not exist.
+ *
+ * If a DbxMapboxMapStoreInjectionBlock is available in the context, and references the same dbxMapboxMapStore that is attempting to be injected, a new DbxMapboxMapStore is created.
+ *
+ * @returns
+ */
+function provideMapboxStoreIfParentIsUnavailable() {
+    return {
+        provide: DbxMapboxMapStore,
+        useFactory: (parentInjector, dbxMapboxMapStoreInjectionBlock, dbxMapboxMapStore) => {
+            if (!dbxMapboxMapStore || (dbxMapboxMapStore && dbxMapboxMapStoreInjectionBlock != null && dbxMapboxMapStoreInjectionBlock.dbxMapboxMapStore === dbxMapboxMapStore)) {
+                // create a new dbxMapboxMapStore to use
+                const injector = Injector.create({ providers: [{ provide: DbxMapboxMapStore }], parent: parentInjector });
+                dbxMapboxMapStore = injector.get(DbxMapboxMapStore);
+            }
+            return dbxMapboxMapStore;
+        },
+        deps: [Injector, [new Optional(), DbxMapboxMapStoreProviderBlock], [new Optional(), new SkipSelf(), DbxMapboxMapStore]]
+    };
+}
+
+class DbxMapboxMarkerComponent {
+    constructor() { }
+    get marker() {
+        return this._marker;
+    }
+    set marker(marker) {
+        this._marker = marker;
+    }
+    get latLng() {
+        var _a;
+        return (_a = this._marker) === null || _a === void 0 ? void 0 : _a.latLng;
+    }
+    get anchor() {
+        var _a;
+        return (_a = this._marker) === null || _a === void 0 ? void 0 : _a.anchor;
+    }
+    get label() {
+        var _a;
+        return (_a = this._marker) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    get icon() {
+        var _a;
+        return (_a = this._marker) === null || _a === void 0 ? void 0 : _a.icon;
+    }
+    get style() {
+        var _a, _b, _c;
+        let width = 0;
+        let height = 0;
+        const size = ((_a = this._marker) === null || _a === void 0 ? void 0 : _a.size) || 'medium';
+        if (typeof size === 'number') {
+            width = size;
+        }
+        else {
+            switch (size) {
+                case 'small':
+                    width = 18;
+                    break;
+                case 'medium':
+                    width = 24;
+                    break;
+                case 'large':
+                    width = 32;
+                    break;
+                case 'tall':
+                    width = 24;
+                    height = 32;
+                    break;
+            }
+        }
+        if (!height) {
+            height = width;
+        }
+        const imageInput = (_b = this._marker) === null || _b === void 0 ? void 0 : _b.image;
+        const image = imageInput ? (typeof imageInput === 'string' ? imageInput : getValueFromGetter(imageInput, width)) : undefined;
+        let style = Object.assign(Object.assign({}, (_c = this._marker) === null || _c === void 0 ? void 0 : _c.style), { width: width + 'px', height: height + 'px', 'font-size': width + 'px', 'background-image': image });
+        return style;
+    }
+}
+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">
+      <dbx-anchor [anchor]="anchor">
+        <div class="dbx-mapbox-marker">
+          <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>
+      </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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-mapbox-marker', template: `
+    <mgl-marker *ngIf="marker" [lngLat]="latLng">
+      <dbx-anchor [anchor]="anchor">
+        <div class="dbx-mapbox-marker">
+          <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>
+      </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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { marker: [{
+                type: Input
+            }] } });
+
 const declarations = [
     //
     DbxMapboxMapDirective,
     DbxMapboxLayoutComponent,
     DbxMapboxLayoutDrawerComponent,
-    DbxMapboxMenuComponent
+    DbxMapboxMenuComponent,
+    DbxMapboxMarkerComponent,
+    DbxMapboxMapStoreInjectionBlockDirective
 ];
 class DbxMapboxModule {
     static forRoot(config) {
@@ -671,7 +904,9 @@ DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         DbxMapboxMapDirective,
         DbxMapboxLayoutComponent,
         DbxMapboxLayoutDrawerComponent,
-        DbxMapboxMenuComponent
+        DbxMapboxMenuComponent,
+        DbxMapboxMarkerComponent,
+        DbxMapboxMapStoreInjectionBlockDirective
     ], imports: [
         //
         CommonModule,
@@ -679,13 +914,17 @@ DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         DbxInjectionComponentModule,
         MatButtonModule,
         MatIconModule,
-        AngularResizeEventModule
+        AngularResizeEventModule,
+        DbxRouterAnchorModule,
+        NgxMapboxGLModule
     ], exports: [
         //
         DbxMapboxMapDirective,
         DbxMapboxLayoutComponent,
         DbxMapboxLayoutDrawerComponent,
-        DbxMapboxMenuComponent
+        DbxMapboxMenuComponent,
+        DbxMapboxMarkerComponent,
+        DbxMapboxMapStoreInjectionBlockDirective
     ] });
 DbxMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, imports: [
         //
@@ -694,7 +933,9 @@ DbxMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         DbxInjectionComponentModule,
         MatButtonModule,
         MatIconModule,
-        AngularResizeEventModule
+        AngularResizeEventModule,
+        DbxRouterAnchorModule,
+        NgxMapboxGLModule
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,
@@ -706,7 +947,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                         DbxInjectionComponentModule,
                         MatButtonModule,
                         MatIconModule,
-                        AngularResizeEventModule
+                        AngularResizeEventModule,
+                        DbxRouterAnchorModule,
+                        NgxMapboxGLModule
                     ],
                     declarations,
                     exports: declarations
@@ -724,10 +967,15 @@ const KNOWN_MAPBOX_STYLES = [
     'mapbox://styles/mapbox/navigation-day-v1',
     'mapbox://styles/mapbox/navigation-night-v1'
 ];
+const MAPBOX_MIN_ZOOM_LEVEL = 0;
+const MAPBOX_MAX_ZOOM_LEVEL = 22;
+function mapboxZoomLevel(input) {
+    return Math.min(Math.max(input, MAPBOX_MIN_ZOOM_LEVEL), MAPBOX_MAX_ZOOM_LEVEL);
+}
 
 /**
  * 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, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES };
+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 };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map