@mapvx/web-js 1.2.0 → 1.2.2

package/dist/es/map/map.js

@@ -1,10 +1,29 @@
 import maplibregl, { LngLatBounds, Map, NavigationControl, setRTLTextPlugin, } from "maplibre-gl";
+import { Semaphore } from "../utils/semaphore";
 /** Shared GeoJSON source holding every circle drawn through the circle API. */
 const CIRCLE_SOURCE_ID = "mapvx-circles";
 /** Fill layer rendering the translucent interior of the circles. */
 const CIRCLE_FILL_LAYER_ID = "mapvx-circles-fill";
 /** Line layer rendering the circle outlines. */
 const CIRCLE_LINE_LAYER_ID = "mapvx-circles-line";
+/**
+ * Layer-id suffix per circle render order. The default placement keeps the
+ * unsuffixed ids so existing consumers referencing them keep working.
+ */
+const CIRCLE_LAYER_SUFFIXES = {
+    aboveBasemap: "",
+    belowLabels: "-below-labels",
+    top: "-top",
+};
+/** Fill/line layer ids for one circle render-order bucket. */
+function circleLayerIdsFor(order) {
+    const suffix = CIRCLE_LAYER_SUFFIXES[order];
+    return { fill: CIRCLE_FILL_LAYER_ID + suffix, line: CIRCLE_LINE_LAYER_ID + suffix };
+}
+/** True for the layer ids owned by the circle API, regardless of bucket. */
+function isCircleLayerId(id) {
+    return id.startsWith(CIRCLE_FILL_LAYER_ID) || id.startsWith(CIRCLE_LINE_LAYER_ID);
+}
 // Flag to track if cached-tile protocol has been registered
 let cachedTileProtocolRegistered = false;
 /**
@@ -25,21 +44,36 @@ function deepClone(obj) {
 /**
  * Register a custom protocol for cached tiles that routes requests through the main thread.
  * This allows the service worker to intercept and cache tile requests.
+ *
+ * Wraps fetches in a {@link Semaphore} so tile CDN / WAFs are not hit with
+ * unbounded parallel requests (same host as the service worker cache). The
+ * semaphore is created once with the limit from the first map's config; later
+ * calls are no-ops because the protocol can only be registered once globally
+ * on MapLibre.
+ *
+ * @param maxConcurrentFetches - Maximum number of in-flight tile fetches.
  */
-function registerCachedTileProtocol() {
+function registerCachedTileProtocol(maxConcurrentFetches) {
     if (cachedTileProtocolRegistered)
         return;
+    const semaphore = new Semaphore(maxConcurrentFetches);
     maplibregl.addProtocol("cached-tile", (params, abortController) => {
-        // Convert cached-tile:// URL back to https://
         const url = params.url.replace("cached-tile://", "https://");
-        return fetch(url, { signal: abortController.signal })
+        // Pass the abort signal to acquire() so a request cancelled while still
+        // queued (e.g. during rapid zoom) drops out of the FIFO queue instead of
+        // waiting for a slot just to bail. release() runs only inside this chain,
+        // i.e. only after a slot was actually granted.
+        return semaphore.acquire(abortController.signal).then(() => fetch(url, { signal: abortController.signal })
             .then((response) => {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             return response.arrayBuffer();
         })
-            .then((data) => ({ data }));
+            .then((data) => ({ data }))
+            .finally(() => {
+            semaphore.release();
+        }));
     });
     cachedTileProtocolRegistered = true;
 }
@@ -98,14 +132,15 @@ import { RouteController } from "../controllers/routeController";
 import { rtlLanguages } from "../domain/models/_rtl";
 import { InternalAnimationConfig, InternalAnimationDrawingConfig, } from "../domain/models/animation";
 import { Loggeable } from "../domain/models/loggeable";
-import { DEFAULT_TILE_CACHE_CONFIG, } from "../domain/models/mapConfig";
-import { circleRing, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
+import { DEFAULT_TILE_CACHE_CONFIG, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP, } from "../domain/models/mapConfig";
+import { CIRCLE_RENDER_ORDERS, circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
 import { MarkerAttribute } from "../domain/models/marker";
 import { MVXRoute } from "../domain/models/route";
 import { InternalDrawRouteConfiguration, InternalGetRouteConfiguration, } from "../domain/models/routeConfiguration";
 import { Repository } from "../repository/repository";
 import { getBoundingBox } from "../utils/utils";
 import { extractStepCoordinates } from "../utils/route-utils";
+import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapInteractionOptions";
 /**
  * Class to interact with the map.
  * @category Map
@@ -145,8 +180,11 @@ export class InternalMapVXMap extends Loggeable {
         this.watchPositionID = undefined;
         this.onFloorChange = mapConfig.onFloorChange;
         this.onParentPlaceChange = mapConfig.onParentPlaceChange;
-        // Merge tile cache config with defaults
-        this.tileCacheConfig = Object.assign(Object.assign({}, DEFAULT_TILE_CACHE_CONFIG), mapConfig.tileCache);
+        this.tileCacheConfig = (() => {
+            const merged = Object.assign(Object.assign({}, DEFAULT_TILE_CACHE_CONFIG), mapConfig.tileCache);
+            merged.maxTiles = Math.min(merged.maxTiles, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP);
+            return merged;
+        })();
         if (mapConfig.parentPlaceId != null) {
             this.initialPlaceDetailSetUp(mapConfig.parentPlaceId, mapConfig.authToken);
         }
@@ -243,28 +281,17 @@ export class InternalMapVXMap extends Loggeable {
             .catch(console.error);
     }
     onMapStyleLoaded(mapConfig, container, style) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         // Determine if service worker caching should be enabled
         const useServiceWorkerCaching = this.tileCacheConfig.enabled && this.tileCacheConfig.persistToServiceWorker;
-        // Register cached-tile protocol only if service worker caching is enabled
         if (useServiceWorkerCaching) {
-            registerCachedTileProtocol();
+            registerCachedTileProtocol(this.tileCacheConfig.maxConcurrentTileFetches);
         }
         // Transform tile URLs only if service worker caching is enabled
         const finalStyle = useServiceWorkerCaching ? this.transformStyleForCaching(style) : style;
-        const mapOptions = {
-            container,
-            style: finalStyle,
-            center: mapConfig.center,
-            zoom: mapConfig.zoom,
-            pitch: (_a = mapConfig.pitch) !== null && _a !== void 0 ? _a : 0,
-            attributionControl: false,
-            maplibreLogo: false,
-            bearingSnap: (_b = mapConfig.bearingSnap) !== null && _b !== void 0 ? _b : 0,
-            cancelPendingTileRequestsWhileZooming: false,
+        const mapOptions = Object.assign({ container, style: finalStyle, center: mapConfig.center, zoom: mapConfig.zoom, pitch: (_a = mapConfig.pitch) !== null && _a !== void 0 ? _a : 0, attributionControl: false, maplibreLogo: false, bearingSnap: (_b = mapConfig.bearingSnap) !== null && _b !== void 0 ? _b : 0, cancelPendingTileRequestsWhileZooming: true, 
             // Use configured maxTiles for MapLibre's memory cache
-            maxTileCacheSize: this.tileCacheConfig.maxTiles,
-        };
+            maxTileCacheSize: this.tileCacheConfig.maxTiles }, buildInteractionOptions(mapConfig));
         if (mapConfig.maxZoom)
             mapOptions.maxZoom = mapConfig.maxZoom;
         if (mapConfig.minZoom)
@@ -274,10 +301,15 @@ export class InternalMapVXMap extends Loggeable {
             mapOptions.maxBounds = new LngLatBounds([boundingBox[0].lng, boundingBox[0].lat], [boundingBox[1].lng, boundingBox[1].lat]);
         }
         this.map = new Map(mapOptions);
+        // When rotation is disabled we still want pinch-to-zoom to work, so the
+        // two-finger rotation is turned off here instead of via the constructor.
+        if (shouldDisableTouchRotation(mapConfig)) {
+            (_d = (_c = this.map.touchZoomRotate) === null || _c === void 0 ? void 0 : _c.disableRotation) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
         this.map.addControl(new NavigationControl({
             showCompass: mapConfig.showCompass !== undefined ? mapConfig.showCompass : true,
             showZoom: mapConfig.showZoom !== undefined ? mapConfig.showZoom : true,
-        }), (_c = mapConfig.navigationPosition) !== null && _c !== void 0 ? _c : "top-right");
+        }), (_e = mapConfig.navigationPosition) !== null && _e !== void 0 ? _e : "top-right");
         this.map.on("load", () => {
             var _a;
             this.whenStyleUpdates(style);
@@ -495,6 +527,19 @@ export class InternalMapVXMap extends Loggeable {
     }
     setLang(lang) {
         this.repository.setLang(lang);
+        if (rtlLanguages.includes(lang)) {
+            this.setRTLSupport();
+        }
+        // setLayersForLanguage reads this.map.getStyle()?.layers, which is empty
+        // until the style finishes loading. If setLang is called right after
+        // createMap (before the "load" event), apply it once the style is ready
+        // so the language change is not silently dropped.
+        if (this.map.isStyleLoaded()) {
+            this.setLayersForLanguage(lang);
+        }
+        else {
+            this.map.once("load", () => this.setLayersForLanguage(lang));
+        }
     }
     setParentPlace(place, updateStyle, onStyleReady) {
         this.changeParentPlaceTo(place, updateStyle, onStyleReady);
@@ -654,10 +699,11 @@ export class InternalMapVXMap extends Loggeable {
         }
     }
     getCircle(circleId) {
-        return this.circles.find((c) => c.id === circleId);
+        const circle = this.circles.find((c) => c.id === circleId);
+        return circle ? cloneCircleRecord(circle) : undefined;
     }
     getCircles() {
-        return this.circles.slice();
+        return this.circles.map(cloneCircleRecord);
     }
     hasCircle(circleId) {
         return this.circles.some((c) => c.id === circleId);
@@ -683,7 +729,7 @@ export class InternalMapVXMap extends Loggeable {
                     throw new Error(`Invalid radiusMeters: ${radiusMeters}. Must be a positive finite number.`);
                 }
             }
-            circle.coordinate = center;
+            circle.coordinate = { lat: center.lat, lng: center.lng };
             if (radiusMeters !== undefined) {
                 circle.radiusMeters = radiusMeters;
             }
@@ -797,6 +843,7 @@ export class InternalMapVXMap extends Loggeable {
                 strokeColor: circle.strokeColor,
                 strokeWidth: circle.strokeWidth,
                 strokeOpacity: circle.strokeOpacity,
+                renderOrder: circle.renderOrder,
             },
             geometry: {
                 type: "Polygon",
@@ -814,8 +861,43 @@ export class InternalMapVXMap extends Loggeable {
      * time: a style that is still loading simply rejects the calls, and the
      * styledata listener retries once the style is ready.
      */
+    /**
+     * Resolves the layer id to insert circle layers before, for one render
+     * order. `undefined` means "append on top".
+     *
+     * `aboveBasemap` finds the topmost non-symbol layer of the style and
+     * inserts before the first symbol layer that follows it. On indoor styles
+     * the floor-plate and building polygons are ordered after the first symbol
+     * layer, so anchoring on the topmost geometry layer — instead of the first
+     * symbol layer — guarantees circles are never occluded by basemap fills
+     * while still rendering below the labels that follow them.
+     */
+    circleBeforeIdFor(order) {
+        var _a, _b, _c, _d;
+        if (order === "top")
+            return undefined;
+        const layers = ((_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : []).filter((layer) => !isCircleLayerId(layer.id));
+        if (order === "belowLabels") {
+            return (_c = layers.find((layer) => layer.type === "symbol")) === null || _c === void 0 ? void 0 : _c.id;
+        }
+        // aboveBasemap
+        let lastNonSymbolIndex = -1;
+        layers.forEach((layer, index) => {
+            if (layer.type !== "symbol")
+                lastNonSymbolIndex = index;
+        });
+        return (_d = layers.slice(lastNonSymbolIndex + 1).find((layer) => layer.type === "symbol")) === null || _d === void 0 ? void 0 : _d.id;
+    }
+    /**
+     * Idempotently ensures the shared circle source and one fill/line layer
+     * pair per render order in use, at the placement that order requires.
+     * Placement is recomputed and re-asserted (via moveLayer) on every call,
+     * so circles regain their correct z-order after any style reload or
+     * floor/parent-place change. Safe to call at any time: a style that is
+     * still loading simply rejects the calls, and the styledata listener
+     * retries once the style is ready.
+     */
     ensureCircleLayers() {
-        var _a, _b, _c;
         if (!this.map)
             return;
         try {
@@ -825,31 +907,54 @@ export class InternalMapVXMap extends Loggeable {
                     data: this.circleFeatureCollection(),
                 });
             }
-            const beforeId = (_c = (_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) === null || _b === void 0 ? void 0 : _b.find((layer) => layer.type === "symbol")) === null || _c === void 0 ? void 0 : _c.id;
-            if (!this.map.getLayer(CIRCLE_FILL_LAYER_ID)) {
-                const fillLayer = {
-                    id: CIRCLE_FILL_LAYER_ID,
-                    type: "fill",
-                    source: CIRCLE_SOURCE_ID,
-                    paint: {
-                        "fill-color": ["get", "fillColor"],
-                        "fill-opacity": ["get", "fillOpacity"],
-                    },
-                };
-                this.map.addLayer(fillLayer, beforeId);
-            }
-            if (!this.map.getLayer(CIRCLE_LINE_LAYER_ID)) {
-                const lineLayer = {
-                    id: CIRCLE_LINE_LAYER_ID,
-                    type: "line",
-                    source: CIRCLE_SOURCE_ID,
-                    paint: {
-                        "line-color": ["get", "strokeColor"],
-                        "line-width": ["get", "strokeWidth"],
-                        "line-opacity": ["get", "strokeOpacity"],
-                    },
-                };
-                this.map.addLayer(lineLayer, beforeId);
+            const ordersInUse = new Set(this.circles.map((c) => c.renderOrder));
+            // Always keep the default bucket alive so an empty map still renders
+            // newly added circles without a layer rebuild
+            ordersInUse.add("aboveBasemap");
+            // Process buckets lowest-first (CIRCLE_RENDER_ORDERS is canonical):
+            // when two buckets resolve to the same anchor, each addLayer/moveLayer
+            // lands immediately before it, so a bucket processed later paints above
+            // the ones processed earlier. Canonical order keeps
+            // belowLabels < aboveBasemap < top regardless of circle insertion order.
+            for (const order of CIRCLE_RENDER_ORDERS) {
+                if (!ordersInUse.has(order))
+                    continue;
+                const ids = circleLayerIdsFor(order);
+                const beforeId = this.circleBeforeIdFor(order);
+                const orderFilter = ["==", ["get", "renderOrder"], order];
+                if (!this.map.getLayer(ids.fill)) {
+                    const fillLayer = {
+                        id: ids.fill,
+                        type: "fill",
+                        source: CIRCLE_SOURCE_ID,
+                        filter: orderFilter,
+                        paint: {
+                            "fill-color": ["get", "fillColor"],
+                            "fill-opacity": ["get", "fillOpacity"],
+                        },
+                    };
+                    this.map.addLayer(fillLayer, beforeId);
+                }
+                else {
+                    this.map.moveLayer(ids.fill, beforeId);
+                }
+                if (!this.map.getLayer(ids.line)) {
+                    const lineLayer = {
+                        id: ids.line,
+                        type: "line",
+                        source: CIRCLE_SOURCE_ID,
+                        filter: orderFilter,
+                        paint: {
+                            "line-color": ["get", "strokeColor"],
+                            "line-width": ["get", "strokeWidth"],
+                            "line-opacity": ["get", "strokeOpacity"],
+                        },
+                    };
+                    this.map.addLayer(lineLayer, beforeId);
+                }
+                else {
+                    this.map.moveLayer(ids.line, beforeId);
+                }
             }
         }
         catch (error) {
@@ -993,6 +1098,49 @@ export class InternalMapVXMap extends Loggeable {
         this.map.setMinZoom(zoomLvl);
         (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
     }
+    setBearing(degrees, options) {
+        var _a;
+        if (!Number.isFinite(degrees))
+            return;
+        if (options === null || options === void 0 ? void 0 : options.animate) {
+            if (options.onComplete)
+                void this.map.once("moveend", options.onComplete);
+            this.map.rotateTo(degrees, { duration: 600 });
+            return;
+        }
+        this.map.setBearing(degrees);
+        (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    setRotationEnabled(enabled) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (enabled) {
+            (_b = (_a = this.map.dragRotate) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_d = (_c = this.map.touchZoomRotate) === null || _c === void 0 ? void 0 : _c.enableRotation) === null || _d === void 0 ? void 0 : _d.call(_c);
+            (_f = (_e = this.map.keyboard) === null || _e === void 0 ? void 0 : _e.enable) === null || _f === void 0 ? void 0 : _f.call(_e);
+        }
+        else {
+            (_h = (_g = this.map.dragRotate) === null || _g === void 0 ? void 0 : _g.disable) === null || _h === void 0 ? void 0 : _h.call(_g);
+            (_k = (_j = this.map.touchZoomRotate) === null || _j === void 0 ? void 0 : _j.disableRotation) === null || _k === void 0 ? void 0 : _k.call(_j);
+        }
+    }
+    setPanEnabled(enabled) {
+        var _a, _b, _c, _d;
+        if (enabled) {
+            (_b = (_a = this.map.dragPan) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else {
+            (_d = (_c = this.map.dragPan) === null || _c === void 0 ? void 0 : _c.disable) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+    setScrollZoomEnabled(enabled) {
+        var _a, _b, _c, _d;
+        if (enabled) {
+            (_b = (_a = this.map.scrollZoom) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else {
+            (_d = (_c = this.map.scrollZoom) === null || _c === void 0 ? void 0 : _c.disable) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
     isInsideBounds(point) {
         const mapBounds = this.map.getMaxBounds();
         if (mapBounds != null) {
@@ -1161,7 +1309,7 @@ export class InternalMapVXMap extends Loggeable {
             if (pointedPlace !== undefined) {
                 new maplibregl.Popup()
                     .setLngLat(pointedPlace.position)
-                    .setHTML(pointedPlace.title)
+                    .setText(pointedPlace.title)
                     .addTo(this.map);
             }
         }