@mapvx/web-js 1.2.1 → 1.3.0-dev.0

package/dist/es/map/map.js

@@ -1,4 +1,9 @@
-import maplibregl, { LngLatBounds, Map, NavigationControl, setRTLTextPlugin, } from "maplibre-gl";
+import { MVTLayer } from "@deck.gl/geo-layers";
+import { IconLayer, PathLayer, TextLayer } from "@deck.gl/layers";
+import maplibregl, { LngLatBounds, Map, MercatorCoordinate, NavigationControl, setRTLTextPlugin, } from "maplibre-gl";
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+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. */
@@ -43,21 +48,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;
 }
@@ -111,19 +131,21 @@ function convertPaddingToPixels(padding, containerWidth, containerHeight) {
         right: parsePaddingValue(padding.right, containerWidth),
     };
 }
+import { MapboxOverlay } from "@deck.gl/mapbox";
 import { userLocationDataUrl } from "../assets/icons";
 import { RouteController } from "../controllers/routeController";
 import { rtlLanguages } from "../domain/models/_rtl";
 import { InternalAnimationConfig, InternalAnimationDrawingConfig, } from "../domain/models/animation";
+import { CIRCLE_RENDER_ORDERS, circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
 import { Loggeable } from "../domain/models/loggeable";
-import { DEFAULT_TILE_CACHE_CONFIG, } from "../domain/models/mapConfig";
-import { circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
+import { DEFAULT_TILE_CACHE_CONFIG, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP, } from "../domain/models/mapConfig";
 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 { getBoundingBox } from "../utils/utils";
+import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapInteractionOptions";
 /**
  * Class to interact with the map.
  * @category Map
@@ -139,7 +161,7 @@ export class InternalMapVXMap extends Loggeable {
      * @returns A new instance of MapVXMap.
      */
     constructor(mapConfig, container, token) {
-        var _a, _b;
+        var _a, _b, _c;
         super();
         this.potentialParentPlaces = [];
         this.innerFloors = [];
@@ -152,6 +174,22 @@ export class InternalMapVXMap extends Loggeable {
         this.hoveredId = "unselected";
         this.failedTiles = new Set();
         this.geoLocation = navigator.geolocation;
+        // 3d related variables
+        this.mode = "2D";
+        this.deckOverlay = undefined;
+        this.escalatorScene = undefined;
+        this.escalatorModelTemplate = undefined;
+        this.escalatorCenter = undefined;
+        this.escalatorCache = {};
+        this.ESCALATOR_MODEL_URL = "https://mapvx-glb-assets.s3.us-east-1.amazonaws.com/shared/escalator.glb";
+        /**
+         * Number of lights to use for the escalators
+         *
+         */
+        this.ESCALATOR_LIGHTS = 3;
+        this.SPRITE_URL = "https://lazarillo.app/internal/maps/vector-style/cenco-cl-pe-co-ar-3D/sprites_cencosud";
+        this.spriteIconMapping = {};
+        this.spriteAtlasImage = new Image();
         if (rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
             this.setRTLSupport();
         }
@@ -163,8 +201,16 @@ 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.mode = (_c = mapConfig.mode) !== null && _c !== void 0 ? _c : "2D";
+        this.initialCenter = mapConfig.center;
+        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 (this.mode === "3D") {
+            this.loadSpriteAtlas().catch(console.error);
+        }
         if (mapConfig.parentPlaceId != null) {
             this.initialPlaceDetailSetUp(mapConfig.parentPlaceId, mapConfig.authToken);
         }
@@ -261,28 +307,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)
@@ -292,12 +327,41 @@ 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;
+            if (this.mode === "3D") {
+                this.deckOverlay = new MapboxOverlay({ layers: [] });
+                this.map.addControl(this.deckOverlay);
+                this.hideIndoorSymbolLayers();
+                // Hide MapLibre icon layers — replaced by deck.gl IconLayer
+                this.map.setLayoutProperty("indoor-poi-logo", "visibility", "none");
+                const style = this.map.getStyle();
+                for (const layer of style.layers) {
+                    if (layer.id.startsWith("indoor-logo-tiendas-ancla")) {
+                        this.map.setLayoutProperty(layer.id, "visibility", "none");
+                    }
+                }
+                // Add 3D escalator layer and hide 2D transportation line
+                this.map.addLayer(this.createEscalatorLayer());
+                this.map.setPaintProperty("indoor-transportation", "line-opacity", 0);
+                // Capture escalator positions when new tiles arrive (stops once cached)
+                this.map.on("sourcedata", (e) => {
+                    if (e.sourceId === "indoorequal" &&
+                        this.currentFloor &&
+                        !this.escalatorCache[this.currentFloor]) {
+                        this.placeEscalators();
+                    }
+                });
+            }
             this.whenStyleUpdates(style);
             if (mapConfig.lang)
                 this.setLayersForLanguage(mapConfig.lang);
@@ -320,7 +384,6 @@ export class InternalMapVXMap extends Loggeable {
             (_a = mapConfig.onRotate) === null || _a === void 0 ? void 0 : _a.call(mapConfig, this.map.getBearing());
         });
         this.defaultClickListener();
-        return this.map;
     }
     setBaseFilters(style) {
         if (!style)
@@ -449,6 +512,386 @@ export class InternalMapVXMap extends Loggeable {
             // Tile cache clear may fail if cache doesn't exist
         }
     }
+    // Start 3D related methods ------------------------------------------------------------
+    hideIndoorSymbolLayers() {
+        var _a, _b;
+        const style = this.map.getStyle();
+        for (const layer of style.layers) {
+            if (layer.type === "symbol" && layer.id.startsWith("indoor-")) {
+                const hasText = !!((_a = layer.layout) === null || _a === void 0 ? void 0 : _a["text-field"]);
+                const hasIcon = !!((_b = layer.layout) === null || _b === void 0 ? void 0 : _b["icon-image"]);
+                // Hide text-only layers (replaced by deck.gl)
+                if (hasText && !hasIcon) {
+                    this.map.setLayoutProperty(layer.id, "visibility", "none");
+                }
+            }
+        }
+    }
+    createEscalatorLayer() {
+        const refMercator = MercatorCoordinate.fromLngLat(this.initialCenter, 0);
+        const meterScale = refMercator.meterInMercatorCoordinateUnits();
+        const modelTransform = new THREE.Matrix4()
+            .makeTranslation(refMercator.x, refMercator.y, refMercator.z)
+            .scale(new THREE.Vector3(meterScale, -meterScale, meterScale))
+            .multiply(new THREE.Matrix4().makeRotationX(Math.PI / 2));
+        this.escalatorScene = new THREE.Scene();
+        const dirLight = new THREE.DirectionalLight(0xffffff, 2.0);
+        dirLight.position.set(50, 100, 80);
+        this.escalatorScene.add(dirLight);
+        const dirLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
+        dirLight2.position.set(-50, 80, -60);
+        this.escalatorScene.add(dirLight2);
+        this.escalatorScene.add(new THREE.AmbientLight(0xffffff, 1.5));
+        new GLTFLoader().load(this.ESCALATOR_MODEL_URL, (gltf) => {
+            this.escalatorModelTemplate = gltf.scene;
+            const box = new THREE.Box3().setFromObject(this.escalatorModelTemplate);
+            this.escalatorCenter = box.getCenter(new THREE.Vector3());
+            this.escalatorCenter.y = box.min.y; // align bottom to ground
+            this.placeEscalators();
+        });
+        let renderer = undefined;
+        let camera = undefined;
+        const tmpMatrix = new THREE.Matrix4();
+        return {
+            id: "3d-escalators",
+            type: "custom",
+            renderingMode: "3d",
+            onAdd(_map, gl) {
+                camera = new THREE.Camera();
+                renderer = new THREE.WebGLRenderer({
+                    canvas: _map.getCanvas(),
+                    context: gl,
+                    antialias: true,
+                });
+                renderer.autoClear = false;
+            },
+            render: (gl, args) => {
+                var _a, _b;
+                if (!camera ||
+                    !renderer ||
+                    !this.escalatorModelTemplate ||
+                    !this.escalatorScene ||
+                    this.escalatorScene.children.length <= this.ESCALATOR_LIGHTS)
+                    return;
+                const matrixData = (_b = (_a = args === null || args === void 0 ? void 0 : args.defaultProjectionData) === null || _a === void 0 ? void 0 : _a.mainMatrix) !== null && _b !== void 0 ? _b : args;
+                tmpMatrix.fromArray(matrixData).multiply(modelTransform);
+                camera.projectionMatrix.copy(tmpMatrix);
+                renderer.resetState();
+                renderer.render(this.escalatorScene, camera);
+            },
+        };
+    }
+    placeEscalators() {
+        if (!this.escalatorModelTemplate ||
+            !this.escalatorScene ||
+            !this.currentFloor ||
+            !this.escalatorCenter)
+            return;
+        // Try to capture positions if not cached yet
+        this.captureEscalatorPositions();
+        const positions = this.escalatorCache[this.currentFloor];
+        if (!positions)
+            return;
+        // Clear scene models (keep lights)
+        while (this.escalatorScene.children.length > this.ESCALATOR_LIGHTS) {
+            const lastChild = this.escalatorScene.children.at(-1);
+            if (lastChild) {
+                this.escalatorScene.remove(lastChild);
+            }
+        }
+        const refMercator = MercatorCoordinate.fromLngLat(this.initialCenter, 0);
+        const meterScale = refMercator.meterInMercatorCoordinateUnits();
+        for (const pos of positions) {
+            const target = maplibregl.MercatorCoordinate.fromLngLat([pos.lng, pos.lat], 0);
+            const sx = (target.x - refMercator.x) / meterScale;
+            const sz = (target.y - refMercator.y) / meterScale;
+            const pivot = new THREE.Group();
+            pivot.position.set(sx, 0, sz);
+            pivot.rotation.y = Math.PI / 2 - pos.bearing;
+            pivot.scale.set(0.3, 0.3, 0.3);
+            const model = this.escalatorModelTemplate.clone();
+            model.position.set(-this.escalatorCenter.x, -this.escalatorCenter.y - 3, -this.escalatorCenter.z);
+            pivot.add(model);
+            this.escalatorScene.add(pivot);
+        }
+        this.map.triggerRepaint();
+    }
+    captureEscalatorPositions() {
+        if (this.currentFloor && this.escalatorCache[this.currentFloor])
+            return;
+        // queryRenderedFeatures uses exact rendered coordinates (not tile-approximated)
+        const features = this.map
+            .queryRenderedFeatures(undefined, {
+            layers: ["indoor-transportation"],
+        })
+            .filter((f) => { var _a; return ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.floor_key) === this.currentFloor; });
+        if (!features.length)
+            return;
+        // Collect all midpoints first
+        const allMids = [];
+        for (const f of features) {
+            const coords = f.geometry.coordinates;
+            if (!coords || coords.length < 2)
+                continue;
+            const start = coords[0];
+            const end = coords[coords.length - 1];
+            const midLng = (start[0] + end[0]) / 2;
+            const midLat = (start[1] + end[1]) / 2;
+            const bearing = Math.atan2(end[0] - start[0], end[1] - start[1]);
+            allMids.push({ lng: midLng, lat: midLat, bearing });
+        }
+        // Merge points within ~15m of each other into one
+        const MERGE_DEG = 0.00015; // ~15m
+        const positions = [];
+        const used = new Set();
+        for (let i = 0; i < allMids.length; i++) {
+            if (used.has(i))
+                continue;
+            used.add(i);
+            const group = [allMids[i]];
+            for (let j = i + 1; j < allMids.length; j++) {
+                if (used.has(j))
+                    continue;
+                const dLng = allMids[i].lng - allMids[j].lng;
+                const dLat = allMids[i].lat - allMids[j].lat;
+                if (Math.abs(dLng) < MERGE_DEG && Math.abs(dLat) < MERGE_DEG) {
+                    used.add(j);
+                    group.push(allMids[j]);
+                }
+            }
+            // Use average position and first bearing
+            const avgLng = group.reduce((s, p) => s + p.lng, 0) / group.length;
+            const avgLat = group.reduce((s, p) => s + p.lat, 0) / group.length;
+            positions.push({ lng: avgLng, lat: avgLat, bearing: group[0].bearing });
+        }
+        if (positions.length && this.currentFloor) {
+            this.escalatorCache[this.currentFloor] = positions;
+        }
+    }
+    async loadSpriteAtlas() {
+        const [json, img] = await Promise.all([
+            fetch(`${this.SPRITE_URL}.json`).then((r) => r.json()),
+            new Promise((resolve, reject) => {
+                const image = new Image();
+                image.crossOrigin = "anonymous";
+                image.onload = () => resolve(image);
+                image.onerror = reject;
+                image.src = `${this.SPRITE_URL}.png`;
+            }),
+        ]);
+        this.spriteIconMapping = json;
+        this.spriteAtlasImage = img;
+    }
+    makeMVTLayer(floorKey) {
+        return new MVTLayer({
+            id: "indoor-lines-elevated",
+            data: "https://tiles.mapvx.com/",
+            binary: false,
+            renderSubLayers: (props) => {
+                var _a;
+                const roomData = (props.data || []);
+                const roomFeatures = roomData.filter((f) => {
+                    var _a, _b, _c;
+                    return ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.class) === "room" &&
+                        ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.subclass) !== "empty" &&
+                        ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.floor_key) === floorKey;
+                });
+                if (!roomFeatures.length)
+                    return null;
+                const paths = [];
+                for (const f of roomFeatures) {
+                    const z = ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.height) ? Number(f.properties.height) : 5;
+                    const geom = f.geometry;
+                    const polygons = geom.type === "Polygon"
+                        ? [geom.coordinates]
+                        : geom.type === "MultiPolygon"
+                            ? geom.coordinates
+                            : [];
+                    for (const rings of polygons) {
+                        for (const ring of rings) {
+                            paths.push({ path: ring.map(([lon, lat]) => [lon, lat, z]) });
+                        }
+                    }
+                }
+                return new PathLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-paths`, data: paths, getPath: (d) => d.path, getColor: [203, 203, 203], getWidth: 1.5, widthUnits: "pixels", pickable: false }));
+            },
+            updateTriggers: {
+                renderSubLayers: [floorKey],
+            },
+        });
+    }
+    makeLabelLayer(floorKey, useSdf = true) {
+        return new MVTLayer({
+            id: "indoor-labels",
+            data: "https://tiles.mapvx.com/",
+            binary: false,
+            minZoom: 19.5,
+            maxZoom: 24,
+            renderSubLayers: (props) => {
+                // Use area_name and poi Point features — unique per tile, no duplicates
+                // If logo-{name} image exists in sprite, icon has priority over text label
+                const labelData = (props.data || []);
+                const labelFeatures = labelData.filter((f) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (((_a = f.properties) === null || _a === void 0 ? void 0 : _a.layerName) !== "area_name" && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.layerName) !== "poi")
+                        return false;
+                    if (((_c = f.geometry) === null || _c === void 0 ? void 0 : _c.type) !== "Point")
+                        return false;
+                    const name = ((_d = f.properties) === null || _d === void 0 ? void 0 : _d["name:latin"]) || ((_e = f.properties) === null || _e === void 0 ? void 0 : _e.name);
+                    if (!name)
+                        return false;
+                    if (((_f = f.properties) === null || _f === void 0 ? void 0 : _f.floor_key) && f.properties.floor_key !== floorKey)
+                        return false;
+                    if (this.map.hasImage("logo-" + name))
+                        return false; // icon has priority
+                    return true;
+                });
+                if (!labelFeatures.length)
+                    return null;
+                const textData = labelFeatures.map((f) => {
+                    var _a, _b, _c;
+                    return ({
+                        position: [
+                            ...f.geometry.coordinates.slice(0, 2),
+                            ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.height) ? Number(f.properties.height) : 5,
+                        ],
+                        text: ((_b = f.properties) === null || _b === void 0 ? void 0 : _b["name:latin"]) || ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.name) || "",
+                    });
+                });
+                return new TextLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-labels`, data: textData, getPosition: (d) => d.position, getText: (d) => d.text, getSize: 16, getColor: [145, 150, 155, 255], outlineColor: useSdf ? [255, 255, 255, 255] : [0, 0, 0, 0], outlineWidth: useSdf ? 4 : 0, fontSettings: { sdf: useSdf }, fontFamily: "Open Sans, sans-serif", fontWeight: 600, billboard: true, pickable: false, characterSet: "auto", wordBreak: "break-word", maxWidth: 150 }));
+            },
+            updateTriggers: {
+                renderSubLayers: [floorKey],
+            },
+        });
+    }
+    makePoiIconLayer(floorKey) {
+        if (!this.spriteIconMapping || !this.spriteAtlasImage)
+            return null;
+        return new MVTLayer({
+            id: "indoor-poi-icons",
+            data: "https://tiles.mapvx.com/",
+            binary: false,
+            minZoom: 17,
+            maxZoom: 24,
+            renderSubLayers: (props) => {
+                const poiData = (props.data || []);
+                const poiFeatures = poiData.filter((f) => {
+                    var _a, _b, _c;
+                    if (((_a = f.geometry) === null || _a === void 0 ? void 0 : _a.type) !== "Point")
+                        return false;
+                    if (((_b = f.properties) === null || _b === void 0 ? void 0 : _b.floor_key) && f.properties.floor_key !== floorKey)
+                        return false;
+                    const sub = (_c = f.properties) === null || _c === void 0 ? void 0 : _c.subclass;
+                    return sub === "elevator" || sub === "toilets";
+                });
+                if (!poiFeatures.length)
+                    return null;
+                const iconData = poiFeatures.map((f) => {
+                    var _a, _b, _c;
+                    const tags = ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.tags) || "";
+                    let icon;
+                    if (tags.includes("wheelchair"))
+                        icon = "accessible_toilets";
+                    else if (tags.includes("changing_table"))
+                        icon = "changing_table";
+                    else
+                        icon = ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.subclass) || "";
+                    return {
+                        position: [
+                            ...f.geometry.coordinates.slice(0, 2),
+                            ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.height) ? Number(f.properties.height) : 5,
+                        ],
+                        icon,
+                    };
+                });
+                return new IconLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-poi-icons`, data: iconData, iconAtlas: this.spriteAtlasImage, iconMapping: this.spriteIconMapping, getIcon: (d) => d.icon, getPosition: (d) => d.position, getSize: 2, sizeUnits: "meters", sizeScale: 1, billboard: true, pickable: false }));
+            },
+            updateTriggers: {
+                renderSubLayers: [floorKey],
+            },
+        });
+    }
+    makeStoreLogoLayer(floorKey) {
+        if (!this.spriteIconMapping || !this.spriteAtlasImage)
+            return null;
+        return new MVTLayer({
+            id: "indoor-store-logos",
+            data: "https://tiles.mapvx.com/",
+            binary: false,
+            minZoom: 13,
+            maxZoom: 24,
+            renderSubLayers: (props) => {
+                const propsData = (props.data || []);
+                const logoFeatures = propsData.filter((f) => {
+                    var _a, _b, _c;
+                    if (((_a = f.geometry) === null || _a === void 0 ? void 0 : _a.type) !== "Point")
+                        return false;
+                    if (((_b = f.properties) === null || _b === void 0 ? void 0 : _b.floor_key) && f.properties.floor_key !== floorKey)
+                        return false;
+                    const name = (_c = f.properties) === null || _c === void 0 ? void 0 : _c.name;
+                    if (!name)
+                        return false;
+                    return !!this.spriteIconMapping["logo-" + name];
+                });
+                if (!logoFeatures.length)
+                    return null;
+                const logoData = logoFeatures.map((f) => {
+                    var _a, _b, _c;
+                    const name = (_a = f.properties) === null || _a === void 0 ? void 0 : _a.name;
+                    const icon = "logo-" + name;
+                    const rotation = ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.rotation_icon) ? Number(f.properties.rotation_icon) : 0;
+                    return {
+                        position: [
+                            ...f.geometry.coordinates.slice(0, 2),
+                            ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.height) ? Number(f.properties.height) : 5,
+                        ],
+                        icon,
+                        rotation,
+                    };
+                });
+                return new IconLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-store-logos`, data: logoData, iconAtlas: this.spriteAtlasImage, iconMapping: this.spriteIconMapping, getIcon: (d) => d.icon, getPosition: (d) => d.position, getAngle: (d) => -d.rotation, getSize: (d) => {
+                        const LOGO_SCALE = {
+                            "logo-Maxi-K": 0.4,
+                            "logo-Ripley": 2,
+                            "logo-Falabella": 2,
+                            "logo-CasaIdeas": 2,
+                            "logo-Sky Costanera": 0.6,
+                            "logo-Easy": 1.4,
+                            "logo-Jumbo": 2,
+                            "logo-Decathlon": 1.4,
+                        };
+                        const m = this.spriteIconMapping[d.icon];
+                        if (!m)
+                            return 10;
+                        const pr = m.pixelRatio;
+                        const w = m.width / pr;
+                        const h = m.height / pr;
+                        const base = 10 * (h / Math.max(w, h));
+                        return base * (LOGO_SCALE[d.icon] || 1);
+                    }, sizeUnits: "meters", sizeScale: 1, billboard: false, pickable: false }));
+            },
+            updateTriggers: {
+                renderSubLayers: [floorKey],
+            },
+        });
+    }
+    updateDeckOverlay() {
+        if (!this.deckOverlay || !this.currentFloor)
+            return;
+        const layers = [
+            this.makeMVTLayer(this.currentFloor),
+            this.makeLabelLayer(this.currentFloor, false),
+        ];
+        const poiLayer = this.makePoiIconLayer(this.currentFloor);
+        if (poiLayer)
+            layers.push(poiLayer);
+        const storeLayer = this.makeStoreLogoLayer(this.currentFloor);
+        if (storeLayer)
+            layers.push(storeLayer);
+        this.deckOverlay.setProps({ layers });
+    }
+    // End 3D related methods ------------------------------------------------------------
     getCurrentFloor() {
         var _a;
         return (_a = this.currentFloor) !== null && _a !== void 0 ? _a : "";
@@ -468,6 +911,10 @@ export class InternalMapVXMap extends Loggeable {
         if (place) {
             this.subPlacesLoad(place.mapvxId);
         }
+        if (this.mode === "3D") {
+            this.updateDeckOverlay();
+            this.placeEscalators();
+        }
         if (updateStyle) {
             this.repository
                 .fetchAndParseMapStyle(place === null || place === void 0 ? void 0 : place.mapvxId)
@@ -496,6 +943,10 @@ export class InternalMapVXMap extends Loggeable {
         this.innerFloors = (_a = place === null || place === void 0 ? void 0 : place.innerFloors.sort((a, b) => a.index - b.index)) !== null && _a !== void 0 ? _a : [];
         this.currentFloor =
             (_e = (_c = floorId !== null && floorId !== void 0 ? floorId : (_b = this.innerFloors.find((floor) => floor.defaultFloor)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : (_d = this.innerFloors[0]) === null || _d === void 0 ? void 0 : _d.key) !== null && _e !== void 0 ? _e : "";
+        if (this.mode === "3D") {
+            this.updateDeckOverlay();
+            this.placeEscalators();
+        }
     }
     updateParentPlaceAndFloor(parentPlaceId, floorId, options) {
         var _a, _b, _c, _d;
@@ -513,6 +964,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);
@@ -535,6 +999,9 @@ export class InternalMapVXMap extends Loggeable {
         this.routeController.addSourcesAndLayers();
         this.refreshCircles();
         this.filterByFloorKey(this.currentFloor);
+        if (this.mode === "3D") {
+            this.updateDeckOverlay();
+        }
     }
     addMarker(marker) {
         var _a, _b;
@@ -884,7 +1351,14 @@ export class InternalMapVXMap extends Loggeable {
             // Always keep the default bucket alive so an empty map still renders
             // newly added circles without a layer rebuild
             ordersInUse.add("aboveBasemap");
-            for (const order of ordersInUse) {
+            // 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];
@@ -956,6 +1430,10 @@ export class InternalMapVXMap extends Loggeable {
         if (this.innerFloors.every((floor) => floor.key !== floorKey) && floorKey !== "") {
             this.logEvent("invalidFloorKey", { floorKey: floorKeyString });
         }
+        if (this.mode === "3D") {
+            this.updateDeckOverlay();
+            this.placeEscalators();
+        }
         this.updateFiltersTo(floorKeyString);
         this.updateMarkersTo(floorKeyString);
         this.refreshCircles();
@@ -1064,6 +1542,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) {
@@ -1232,7 +1753,7 @@ export class InternalMapVXMap extends Loggeable {
             if (pointedPlace !== undefined) {
                 new maplibregl.Popup()
                     .setLngLat(pointedPlace.position)
-                    .setHTML(pointedPlace.title)
+                    .setText(pointedPlace.title)
                     .addTo(this.map);
             }
         }