@dereekb/dbx-web 9.24.18 → 9.24.20

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

@@ -4,7 +4,7 @@ import * as i2 from '@dereekb/dbx-core';
 import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, DbxInjectionComponentModule } from '@dereekb/dbx-core';
 import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
 import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, of, combineLatest, filter, first, startWith, interval, Subject, merge, throttleTime, BehaviorSubject } from 'rxjs';
-import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, vectorsAreEqual, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
+import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, isSameLatLngPoint, isSameVector, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngBoundCenterPoint, addLatLngPoints, vectorMinimumSizeResizeFunction, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@mapbox/geo-viewport';
@@ -167,7 +167,8 @@ class DbxMapboxMapStore extends ComponentStore {
             moveState: 'init',
             zoomState: 'init',
             rotateState: 'init',
-            retainContent: true
+            retainContent: true,
+            useVirtualBound: true
         });
         this.dbxMapboxService = dbxMapboxService;
         this.safeLatLngPoint = latLngPointFunction({ wrap: true });
@@ -446,6 +447,38 @@ class DbxMapboxMapStore extends ComponentStore {
         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.minimumVirtualViewportSize$ = this.state$.pipe(map((x) => x.minimumVirtualViewportSize), distinctUntilChanged(isSameVector), shareReplay(1));
+        this.currentMapCanvasSize$ = this.state$.pipe(map((x) => x.mapCanvasSize), distinctUntilChanged(isSameVector), shareReplay(1));
+        /**
+         * The map canvas size with consideration to the virtual viewport size.
+         */
+        this.mapCanvasSize$ = this.currentMapCanvasSize$.pipe(filterMaybe());
+        /**
+         * The map canvas size with consideration to the virtual viewport size.
+         */
+        this.virtualMapCanvasSize$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
+            if (minimumVirtualViewportSize) {
+                return this.minimumMapCanvasSize(minimumVirtualViewportSize);
+            }
+            else {
+                return this.mapCanvasSize$;
+            }
+        }), distinctUntilChanged(isSameVector), shareReplay(1));
+        this.rawViewportBoundFunction$ = this.mapCanvasSize$.pipe(map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
+        this.viewportBoundFunction$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
+            if (minimumVirtualViewportSize) {
+                return this.viewportBoundFunctionWithMinimumSize(minimumVirtualViewportSize);
+            }
+            else {
+                return this.rawViewportBoundFunction$;
+            }
+        }), shareReplay(1));
+        this.virtualBound$ = this.viewportBoundFunction$.pipe(switchMap((fn) => {
+            return combineLatest([this.center$, this.zoom$]).pipe(map(([center, zoom]) => fn({
+                center,
+                zoom
+            })));
+        }), 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) {
@@ -465,7 +498,7 @@ class DbxMapboxMapStore extends ComponentStore {
                 }
             }));
         }), shareReplay(1));
-        this.boundNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => {
+        this.rawBoundNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => {
             const bound = x.getBounds();
             const boundSw = bound.getSouthWest();
             const boundNe = bound.getNorthEast();
@@ -473,13 +506,22 @@ class DbxMapboxMapStore extends ComponentStore {
             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.rawBound$ = this.whenInitialized$.pipe(switchMap(() => {
+            return this.isRendering$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.rawBoundNow$.pipe(first())), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
         }));
+        this.useVirtualBound$ = this.state$.pipe(map((x) => x.useVirtualBound), distinctUntilChanged(), shareReplay(1));
+        this.bound$ = this.useVirtualBound$.pipe(switchMap((useVirtualBound) => {
+            if (useVirtualBound) {
+                return this.virtualBound$;
+            }
+            else {
+                return this.bound$;
+            }
+        }), 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.overlapsBoundFunction$ = this.virtualBound$.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(() => this.zoomNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
@@ -494,15 +536,14 @@ class DbxMapboxMapStore extends ComponentStore {
         }));
         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));
         // 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.setMinimumVirtualViewportSize = this.updater((state, minimumVirtualViewportSize) => (Object.assign(Object.assign({}, state), { minimumVirtualViewportSize })));
+        this.setUseVirtualBound = this.updater((state, useVirtualBound) => (Object.assign(Object.assign({}, state), { useVirtualBound })));
+        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined, useVirtualBound: state.useVirtualBound }));
         this._setLifecycleState = this.updater((state, lifecycleState) => (Object.assign(Object.assign({}, state), { lifecycleState })));
         this._setMoveState = this.updater((state, moveState) => (Object.assign(Object.assign({}, state), { moveState })));
         this._setZoomState = this.updater((state, zoomState) => (Object.assign(Object.assign({}, state), { zoomState })));
@@ -575,6 +616,20 @@ class DbxMapboxMapStore extends ComponentStore {
         const config = typeof input === 'function' ? { readValue: input } : input;
         return filterByMapboxViewportBound(Object.assign(Object.assign({}, config), { boundFunctionObs: this.viewportBoundFunction$, boundDecisionObs: this.overlapsBoundFunction$ }));
     }
+    minimumMapCanvasSize(minVector) {
+        const resizeFn = vectorMinimumSizeResizeFunction(minVector);
+        return this.mapCanvasSize$.pipe(map((x) => resizeFn(x)), distinctUntilChanged(isSameVector), shareReplay(1));
+    }
+    /**
+     * Creates a MapboxViewportBoundFunction observable that returns the minimum viewport size.
+     *
+     * @param minVector
+     * @returns
+     */
+    viewportBoundFunctionWithMinimumSize(minVector) {
+        const resizeFn = vectorMinimumSizeResizeFunction(minVector);
+        return this.mapCanvasSize$.pipe(map((x) => resizeFn(x)), distinctUntilChanged(isSameVector), map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
+    }
 }
 DbxMapboxMapStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxMapStore, deps: [{ token: DbxMapboxService }], target: i0.ɵɵFactoryTarget.Injectable });
 DbxMapboxMapStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxMapStore });
@@ -809,6 +864,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
         this._openToggle = new BehaviorSubject(true);
         this._color = new BehaviorSubject(undefined);
         this._toggleSub = new SubscriptionObject();
+        this.resized$ = this._resized.asObservable();
         this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
         this.mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
         this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
@@ -846,12 +902,12 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             let obs;
             if (mode === 'push') {
                 obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
-                    let { right } = this.container._contentMargins;
-                    this.container.updateContentMargins();
+                    let { right } = this.drawerContainer._contentMargins;
+                    this.drawerContainer.updateContentMargins();
                     setTimeout(() => {
                         const flip = opened ? 1 : -1;
                         if (opened) {
-                            right = this.container._contentMargins.right;
+                            right = this.drawerContainer._contentMargins.right;
                         }
                         right = (right || 0) * flip;
                         const element = this.content.nativeElement;
@@ -874,7 +930,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             }
             else {
                 obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
-                    this.container.updateContentMargins();
+                    this.drawerContainer.updateContentMargins();
                     x.triggerRepaint();
                 }));
             }
@@ -921,15 +977,18 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
         this._color.next(color);
     }
     onResized(event) {
-        this._resized.next();
+        this._resized.next(event);
     }
 }
 DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.2.12", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerColor: "drawerColor" }, viewQueries: [{ propertyName: "containerElement", first: true, predicate: MatDrawerContainer, descendants: true, read: ElementRef }, { propertyName: "drawerContainer", 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 #containerElement 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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"] }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { container: [{
+            args: [{ selector: 'dbx-mapbox-layout', template: "<mat-drawer-container #containerElement 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"] }]
+        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { containerElement: [{
+                type: ViewChild,
+                args: [MatDrawerContainer, { read: ElementRef }]
+            }], drawerContainer: [{
                 type: ViewChild,
                 args: [MatDrawerContainer]
             }], content: [{
@@ -1278,8 +1337,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Directive that synchronizes a map's virtual size with the size of the element.
+ */
+class DbxMapboxLayoutVirtualResizeSyncComponent extends SubscriptionObject {
+    constructor(dbxMapboxLayoutComponent) {
+        super();
+        this.dbxMapboxLayoutComponent = dbxMapboxLayoutComponent;
+        this.resizedVector$ = this.dbxMapboxLayoutComponent.resized$.pipe(map(() => {
+            const element = this.dbxMapboxLayoutComponent.containerElement.nativeElement;
+            const { clientWidth, clientHeight } = element;
+            return {
+                x: clientWidth,
+                y: clientHeight
+            };
+        }), distinctUntilChanged(isSameVector), shareReplay(1));
+    }
+    ngOnInit() {
+        this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$);
+    }
+}
+DbxMapboxLayoutVirtualResizeSyncComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: [{ token: DbxMapboxLayoutComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxMapboxLayoutVirtualResizeSyncComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxMapboxLayoutVirtualResizeSyncComponent, selector: "[dbxMapboxLayoutVirtualResizeSync]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxMapboxLayoutVirtualResizeSync]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxMapboxLayoutComponent, decorators: [{
+                        type: Host
+                    }] }];
+    } });
+
 const declarations = [
     //
+    DbxMapboxLayoutVirtualResizeSyncComponent,
     DbxMapboxMapDirective,
     DbxMapboxLayoutComponent,
     DbxMapboxLayoutDrawerComponent,
@@ -1305,6 +1398,7 @@ class DbxMapboxModule {
 DbxMapboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxModule, declarations: [
         //
+        DbxMapboxLayoutVirtualResizeSyncComponent,
         DbxMapboxMapDirective,
         DbxMapboxLayoutComponent,
         DbxMapboxLayoutDrawerComponent,
@@ -1325,6 +1419,7 @@ DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         NgxMapboxGLModule
     ], exports: [
         //
+        DbxMapboxLayoutVirtualResizeSyncComponent,
         DbxMapboxMapDirective,
         DbxMapboxLayoutComponent,
         DbxMapboxLayoutDrawerComponent,
@@ -1401,5 +1496,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, DbxMapboxChangeDetectorRefService, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, 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, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeDetectorRefService, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map