@mapvx/web-js 3.5.0-dev.3 → 3.5.0-dev.5

package/dist/es/map/map.js

@@ -34,6 +34,22 @@ const TILE_RETRY_BASE_DELAY_MS = 1000;
  * overlay until the callback arrives, so it must be released no matter what.
  */
 const STYLE_READY_TIMEOUT_MS = 4000;
+/**
+ * Frames a floor change waits before it will believe the indoor tiles are
+ * already rebuilt (see `updateMarkersWhenFloorSettles`). Genuinely a frame
+ * count: the reload is dispatched on the map's next render, so this is how
+ * many renders it gets to be observed in.
+ */
+const FLOOR_SETTLE_MIN_FRAMES = 3;
+/**
+ * Longest a floor change waits for the new floor's tiles before switching the
+ * HTML markers anyway, so a stalled source never hides markers for good.
+ *
+ * A deadline rather than a frame count. The panels this matters on run at
+ * 20-30 fps, where a 60-frame cap is two to three seconds — and the wait also
+ * gates `addMarker`, so overshooting it is not merely a late marker switch.
+ */
+const FLOOR_SETTLE_MAX_MS = 1000;
 /** Fill/line layer ids for one circle render-order bucket. */
 function circleLayerIdsFor(order) {
     const suffix = CIRCLE_LAYER_SUFFIXES[order];
@@ -169,6 +185,14 @@ import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapIntera
  * @hidden
  */
 export class InternalMapVXMap extends Loggeable {
+    /** Whether a floor change is still rebuilding, so markers wait for it. */
+    get floorSettlePending() {
+        return this.floorSettleDeadline != null && this.now() < this.floorSettleDeadline;
+    }
+    /** Wall clock for the settle deadline; `Date.now` where `performance` is absent. */
+    now() {
+        return typeof performance !== "undefined" ? performance.now() : Date.now();
+    }
     /**
      * Creates a new map instance with the parameters specified in mapConfig and assigns it to the provided HTML container.
      * @param mapConfig Configuration parameters for the map.
@@ -232,6 +256,20 @@ export class InternalMapVXMap extends Loggeable {
          */
         this.tileRetryState = new WeakMap();
         this.geoLocation = navigator.geolocation;
+        /** Floor-change settle bookkeeping (see `updateMarkersWhenFloorSettles`). */
+        this.floorSettleToken = 0;
+        /**
+         * When the floor-change settle stops holding markers back, or `null` when no
+         * change is in flight.
+         *
+         * A deadline rather than a flag, because `addMarker` reads it: the poll that
+         * would clear a flag runs on `requestAnimationFrame`, which does not fire in
+         * a backgrounded tab and does not run at all for a map torn down through
+         * MapLibre's own `remove()` rather than `destroyMap`. A flag left set there
+         * makes every later `addMarker` skip the call that attaches the marker, for
+         * good; a deadline expires on its own.
+         */
+        this.floorSettleDeadline = null;
         /** Owns the deck.gl overlay + GLB scene; created on style load only when 3D is active. */
         this.scene3D = undefined;
         if (rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
@@ -253,6 +291,8 @@ export class InternalMapVXMap extends Loggeable {
         this.onFloorChange = mapConfig.onFloorChange;
         this.onParentPlaceChange = mapConfig.onParentPlaceChange;
         this.mode = (_d = mapConfig.mode) !== null && _d !== void 0 ? _d : "2D";
+        this.styleRef = mapConfig.styleRef;
+        this.styleTheme = mapConfig.styleTheme;
         this.scene3DConfig = mapConfig.scene3D;
         this.initialCenter = mapConfig.center;
         this.tileCacheConfig = (() => {
@@ -354,12 +394,18 @@ export class InternalMapVXMap extends Loggeable {
                 .catch(console.error);
             return;
         }
-        this.repository
-            .fetchAndParseMapStyle(mapConfig.parentPlaceId)
+        // Through the same helper as `setStyle` and `changeParentPlaceTo`. This PR
+        // forwards `styleRef`/`styleTheme` to the initial load too, and a ref scoped
+        // to the user's client rather than to the api key resolves only over bearer
+        // — fetched over the api-key path it 4xx'd, and since this is the call that
+        // creates the map, the map was never created at all.
+        this.fetchVenueStyle(mapConfig.parentPlaceId, mapConfig.styleRef, mapConfig.styleTheme)
             .then((style) => {
             return this.onMapStyleLoaded(mapConfig, container, style);
         })
-            .catch(console.error);
+            .catch((error) => {
+            this.logError(error, { functionName: "initialMapStyleSetUp" });
+        });
     }
     onMapStyleLoaded(mapConfig, container, style) {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -377,6 +423,13 @@ export class InternalMapVXMap extends Loggeable {
             mapOptions.maxZoom = mapConfig.maxZoom;
         if (mapConfig.minZoom)
             mapOptions.minZoom = mapConfig.minZoom;
+        // Reduced internal resolution on request (fill-rate relief for low-end GPUs);
+        // MapLibre keeps devicePixelRatio when the option is left out.
+        if (mapConfig.pixelRatio !== undefined)
+            mapOptions.pixelRatio = mapConfig.pixelRatio;
+        // `0` disables the post-gesture fade tail entirely; keep MapLibre's default otherwise.
+        if (mapConfig.fadeDuration !== undefined)
+            mapOptions.fadeDuration = mapConfig.fadeDuration;
         if (mapConfig.maxBounds && mapConfig.maxBounds.length > 1) {
             const boundingBox = getBoundingBox(mapConfig.maxBounds);
             mapOptions.maxBounds = new LngLatBounds([boundingBox[0].lng, boundingBox[0].lat], [boundingBox[1].lng, boundingBox[1].lat]);
@@ -566,6 +619,11 @@ export class InternalMapVXMap extends Loggeable {
             clearTimeout(this.styleReadyTimer);
             this.styleReadyTimer = undefined;
         }
+        // Drop any floor-settle poll in flight: bumping the token makes the next
+        // `requestAnimationFrame` callback return instead of re-queueing itself and
+        // re-attaching markers to a map that has already been removed.
+        this.floorSettleToken++;
+        this.floorSettleDeadline = null;
         // Dispose the 3D scene's GPU resources before the map (and its shared WebGL context) go away —
         // MapLibre's own teardown never calls the custom GLB layer's `onRemove`.
         (_a = this.scene3D) === null || _a === void 0 ? void 0 : _a.dispose();
@@ -634,8 +692,7 @@ export class InternalMapVXMap extends Loggeable {
         }
         (_g = this.scene3D) === null || _g === void 0 ? void 0 : _g.onFloorChange(this.currentFloor);
         if (updateStyle) {
-            this.repository
-                .fetchAndParseMapStyle(place === null || place === void 0 ? void 0 : place.mapvxId)
+            this.fetchVenueStyle(place === null || place === void 0 ? void 0 : place.mapvxId, this.styleRef, this.styleTheme)
                 .then((style) => {
                 const useServiceWorkerCaching = this.tileCacheConfig.enabled && this.tileCacheConfig.persistToServiceWorker;
                 const finalStyle = useServiceWorkerCaching ? this.transformStyleForCaching(style) : style;
@@ -650,9 +707,35 @@ export class InternalMapVXMap extends Loggeable {
                 this.whenStyleUpdates(finalStyle);
                 onStyleReady === null || onStyleReady === void 0 ? void 0 : onStyleReady();
             })
-                .catch(console.error);
+                .catch((error) => {
+                this.logError(error, { functionName: "changeParentPlaceTo" });
+                // Release the caller either way. `onStyleReady` is what a consumer
+                // hides its loading overlay on, so swallowing the failure here left
+                // the overlay up for good rather than merely unstyled.
+                onStyleReady === null || onStyleReady === void 0 ? void 0 : onStyleReady();
+            });
         }
     }
+    /**
+     * Fetch the venue style over whichever endpoint this map is authorized on.
+     *
+     * A bearer token authorizes by the user's client access rather than the api
+     * key's scopes, so a client's branded style resolves without granting that
+     * place to a shared api key; api-key consumers keep the
+     * `/api/sdk/v2/mapStyleJson` path.
+     *
+     * Both callers go through here so they cannot disagree. They used to: once
+     * `setStyle` had stored a `styleRef` it resolved over bearer, the next
+     * parent-place change refetched that same ref over the api-key path, whose
+     * key does not scope it — a non-ok response, a rejected promise, and a style
+     * that was never applied, with `onStyleReady` left unfired under a caller's
+     * loading overlay.
+     */
+    fetchVenueStyle(placeId, styleRef, styleTheme) {
+        return this.authToken
+            ? this.repository.fetchAndParseMapStyleByBearer(placeId, this.authToken, styleRef, styleTheme)
+            : this.repository.fetchAndParseMapStyle(placeId, styleRef, styleTheme);
+    }
     /**
      * Update the parent place and the current floor.
      * Does not update layers, markers, etc.
@@ -746,14 +829,7 @@ export class InternalMapVXMap extends Loggeable {
             reportReady(error);
             return;
         }
-        // When a user bearer token is present, the style is resolved through the
-        // bearer-authenticated endpoint, which authorizes by the user's client access
-        // rather than the api key's scopes — so a client's branded style can be
-        // previewed/applied without granting that place to a shared api key.
-        // Api-key consumers keep the `/api/sdk/v2/mapStyleJson` path.
-        const stylePromise = this.authToken
-            ? this.repository.fetchAndParseMapStyleByBearer(this.parentPlaceId, this.authToken, styleRef, styleTheme)
-            : this.repository.fetchAndParseMapStyle(this.parentPlaceId, styleRef, styleTheme);
+        const stylePromise = this.fetchVenueStyle(this.parentPlaceId, styleRef, styleTheme);
         stylePromise
             .then((style) => {
             // A newer swap started while this style was in flight. Applying this one now
@@ -761,6 +837,13 @@ export class InternalMapVXMap extends Loggeable {
             // own the map and its caller's callback.
             if (!isCurrent())
                 return;
+            // Remember what is actually on screen: `changeParentPlaceTo` refetches the
+            // style with these, so without this an explicitly applied style would be
+            // silently reverted to the constructor's on the next parent-place change.
+            // After the generation check: a superseded swap never reached the map, so it
+            // must not claim to be what is on it.
+            this.styleRef = styleRef;
+            this.styleTheme = styleTheme;
             const useServiceWorkerCaching = this.tileCacheConfig.enabled && this.tileCacheConfig.persistToServiceWorker;
             const finalStyle = useServiceWorkerCaching ? this.transformStyleForCaching(style) : style;
             // Full (non-diff) swap so the previewed style completely replaces the base —
@@ -954,7 +1037,11 @@ export class InternalMapVXMap extends Loggeable {
                 }
             }
             const markerCreated = new MarkerAttribute(Object.assign(Object.assign({}, marker), { maxLabelWidthPx: (_a = marker.maxLabelWidthPx) !== null && _a !== void 0 ? _a : this.markerLayoutConfig.maxLabelWidthPx }));
-            markerCreated.changeFloor(this.currentFloor, this.map, this.isOutdoorFloor(this.currentFloor));
+            // While a floor change is still being rebuilt, the marker is shown by that
+            // change's settle step, together with the new floor.
+            if (!this.floorSettlePending) {
+                markerCreated.changeFloor(this.currentFloor, this.map, this.isOutdoorFloor(this.currentFloor));
+            }
             this.markers.push(markerCreated);
             this.markerLayoutController.scheduleRelayout();
             this.logEvent("addMarker");
@@ -1371,12 +1458,110 @@ export class InternalMapVXMap extends Loggeable {
         if (this.innerFloors.every((floor) => floor.key !== floorKey) && floorKey !== "") {
             this.logEvent("invalidFloorKey", { floorKey: floorKeyString });
         }
-        this.updateFiltersTo(floorKeyString);
-        this.updateMarkersTo(floorKeyString);
+        // One style read for the whole floor change. `getStyle()` serializes every
+        // source and layer of the venue style, and the second read is the expensive
+        // one: `updateFiltersTo` writes filters and layout properties in between,
+        // and each write nulls maplibre's `_serializedLayers` cache, so anything
+        // that reads the style afterwards rebuilds it from scratch.
+        const layers = this.safeStyleLayers();
+        this.updateFiltersTo(floorKeyString, layers);
+        this.updateMarkersWhenFloorSettles(floorKeyString, layers);
         this.refreshCircles();
         this.routeController.updateRouteLayers(floorKeyString);
         this.routeController.updateRouteMarkerVisibility(floorKeyString);
     }
+    /**
+     * Show/hide the HTML markers for `floorId` once the indoor tiles have been
+     * rebuilt with the new floor filters.
+     *
+     * A floor change is a `setFilter` on every indoor layer: MapLibre rebuilds the
+     * tile buckets in its worker, so the new floor appears a few frames later
+     * (hundreds of ms on a low-end panel) while a marker is a DOM element that
+     * would move instantly. Waiting for the source to report loaded makes floor
+     * polygons and markers switch in the same frame. The wait is bounded, is
+     * dropped when a newer floor change arrives, and is skipped outside a
+     * browser (no `requestAnimationFrame`).
+     */
+    updateMarkersWhenFloorSettles(floorId, styleLayers) {
+        const token = ++this.floorSettleToken;
+        // Resolved rather than probed with `hasStyle()`, which is another full
+        // `getStyle()` — and by this point the most expensive kind, because
+        // `updateFiltersTo` has just invalidated the serialized-layer cache.
+        const layers = styleLayers === undefined ? this.safeStyleLayers() : styleLayers;
+        if (typeof requestAnimationFrame !== "function" || layers === null) {
+            // No poll will run for this floor change, so nothing would ever clear the
+            // flag later: leaving it set makes every subsequent `addMarker` skip
+            // `changeFloor` and the marker is never attached to the map.
+            this.floorSettleDeadline = null;
+            this.updateMarkersTo(floorId);
+            return;
+        }
+        const sourceIds = this.floorSettleSourceIds(floorId, layers);
+        const deadline = this.now() + FLOOR_SETTLE_MAX_MS;
+        this.floorSettleDeadline = deadline;
+        let sawReloading = false;
+        let frames = 0;
+        const poll = () => {
+            if (token !== this.floorSettleToken)
+                return;
+            frames++;
+            const loaded = sourceIds.every((id) => this.isSourceSettled(id));
+            if (!loaded)
+                sawReloading = true;
+            // The reload is dispatched on the map's next render, which may run after
+            // this callback within the same frame: give it a couple of frames to be
+            // observed before concluding there was nothing to reload.
+            const settled = loaded && (sawReloading || frames >= FLOOR_SETTLE_MIN_FRAMES);
+            if (settled || this.now() >= deadline) {
+                this.floorSettleDeadline = null;
+                this.updateMarkersTo(floorId);
+                return;
+            }
+            requestAnimationFrame(poll);
+        };
+        requestAnimationFrame(poll);
+    }
+    /**
+     * Sources whose tiles a switch to `floorId` actually reloads, and which the
+     * marker settle therefore has to wait on.
+     *
+     * With a vector basemap that is the source the `indoor-*` layers draw from,
+     * because the floor change is a `setFilter` over those layers. An offline
+     * bundle's raster basemap switches floors by making `raster-floor-<key>`
+     * visible instead, and those tiles only begin loading at that moment — while
+     * its `indoor-*` layers carry labels and hover, are already loaded, and would
+     * report settled at once, letting the markers switch a floor before its image
+     * had painted. That is the configuration this wait exists for, so both are
+     * waited on.
+     */
+    floorSettleSourceIds(floorId, layers) {
+        const ids = new Set();
+        const rasterFloor = layers.find((layer) => layer.id === `raster-floor-${floorId}`);
+        if (rasterFloor && "source" in rasterFloor && typeof rasterFloor.source === "string") {
+            ids.add(rasterFloor.source);
+        }
+        ids.add(this.indoorSourceId(layers));
+        return [...ids];
+    }
+    /** The vector source the `indoor-*` layers draw from (`indoorequal` by default). */
+    indoorSourceId(layers) {
+        for (const layer of layers) {
+            if (layer.id.startsWith("indoor-") && "source" in layer && typeof layer.source === "string") {
+                return layer.source;
+            }
+        }
+        return "indoorequal";
+    }
+    isSourceSettled(sourceId) {
+        try {
+            if (!this.map.getSource(sourceId))
+                return true;
+            return this.map.isSourceLoaded(sourceId) !== false;
+        }
+        catch (_a) {
+            return true;
+        }
+    }
     getContainer() {
         return this.map.getContainer();
     }
@@ -1398,17 +1583,40 @@ export class InternalMapVXMap extends Loggeable {
         });
         this.markerLayoutController.scheduleRelayout();
     }
-    updateFiltersTo(floorId) {
-        var _a, _b, _c, _d;
+    updateFiltersTo(floorId, styleLayers) {
+        var _a, _b, _c;
         if (!this.map)
             return;
-        const layers = (_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : [];
+        // `null` means the caller looked and there was no style; only `undefined`
+        // means it did not look.
+        const layers = (_a = (styleLayers === undefined ? this.safeStyleLayers() : styleLayers)) !== null && _a !== void 0 ? _a : [];
+        // Raster basemap (offline bundles baked with one raster archive per floor):
+        // a floor is switched by showing its `raster-floor-<key>` layer and hiding
+        // the others. The remaining `indoor-*` layers (labels, hover, highlights)
+        // are still vector and keep going through the filter logic below.
+        const rasterFloorPrefix = "raster-floor-";
+        // Only switch the raster basemap when there is a baked layer to switch to.
+        // Hiding every raster floor leaves the basemap blank, and no id can match in
+        // two cases: no floor at all (an outdoor place, or a venue with no floors,
+        // where `currentFloor` is `""`), and a floor the bundle has no raster
+        // archive for — a venue where only some floors are baked, or a floor added
+        // after the bundle was built. Keeping the current one visible is the safe
+        // fallback for both.
+        const rasterFloorLayerIds = layers
+            .filter((l) => l.id.startsWith(rasterFloorPrefix))
+            .map((l) => l.id);
+        const targetRasterFloor = rasterFloorPrefix + floorId;
+        if (floorId && rasterFloorLayerIds.includes(targetRasterFloor)) {
+            rasterFloorLayerIds.forEach((id) => {
+                this.map.setLayoutProperty(id, "visibility", id === targetRasterFloor ? "visible" : "none");
+            });
+        }
         layers
             .filter((l) => l.id.startsWith("base-indoor-"))
             .forEach((l) => {
             this.map.removeLayer(l.id);
         });
-        const baseFloorId = (_c = this.innerFloors.find((floor) => floor.key === floorId)) === null || _c === void 0 ? void 0 : _c.baseFloor;
+        const baseFloorId = (_b = this.innerFloors.find((floor) => floor.key === floorId)) === null || _b === void 0 ? void 0 : _b.baseFloor;
         const indoorLayers = layers.filter((layer) => layer.id.startsWith("indoor-"));
         // Resolve each indoor layer's declared (base) filter before we start folding floor
         // filters into it — and before cloning it into a `base-indoor-*` layer, which copies
@@ -1420,7 +1628,7 @@ export class InternalMapVXMap extends Loggeable {
         // declared one.
         indoorLayers.forEach((layer) => this.captureDeclaredBaseFilter(layer.id));
         if (baseFloorId != undefined) {
-            const firstLayerId = (_d = indoorLayers[0]) === null || _d === void 0 ? void 0 : _d.id;
+            const firstLayerId = (_c = indoorLayers[0]) === null || _c === void 0 ? void 0 : _c.id;
             indoorLayers
                 .filter((layer) => layer.type !== "fill-extrusion")
                 .forEach((layer) => {
@@ -1727,8 +1935,9 @@ export class InternalMapVXMap extends Loggeable {
         var _a;
         try {
             this.updatePlaceAndFloor(placeId, floorId);
-            this.updateFiltersTo(floorId);
-            this.updateMarkersTo(floorId);
+            const layers = this.safeStyleLayers();
+            this.updateFiltersTo(floorId, layers);
+            this.updateMarkersWhenFloorSettles(floorId, layers);
             (_a = this.onFloorChange) === null || _a === void 0 ? void 0 : _a.call(this, floorId);
             this.logEvent("updatePlaceAndFloorForRouting", { floorId });
         }
@@ -2331,6 +2540,23 @@ export class InternalMapVXMap extends Loggeable {
      * ("Cannot read properties of undefined"), so call sites that only need the style to
      * exist should gate on this rather than on `isStyleLoaded()`.
      */
+    /**
+     * This style's layers, or `null` when the map has no style right now.
+     *
+     * The one place the style is read for a floor change, so callers can pass the
+     * result on instead of each probing again — `getStyle()` serializes every
+     * source and layer, and `Style._updateLayer` drops the cache behind it on
+     * every filter or layout write.
+     */
+    safeStyleLayers() {
+        var _a, _b, _c;
+        try {
+            return (_c = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getStyle()) === null || _b === void 0 ? void 0 : _b.layers) !== null && _c !== void 0 ? _c : null;
+        }
+        catch (_d) {
+            return null;
+        }
+    }
     hasStyle() {
         var _a;
         // `map.getStyle()` is the PUBLIC probe: it returns the serialized style, or throws