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

package/dist/cjs/map/map.js

@@ -24,7 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalMapVXMap = void 0;
+const geo_layers_1 = require("@deck.gl/geo-layers");
+const layers_1 = require("@deck.gl/layers");
 const maplibre_gl_1 = __importStar(require("maplibre-gl"));
+const THREE = __importStar(require("three"));
+const GLTFLoader_js_1 = require("three/examples/jsm/loaders/GLTFLoader.js");
 const semaphore_1 = require("../utils/semaphore");
 /** Shared GeoJSON source holding every circle drawn through the circle API. */
 const CIRCLE_SOURCE_ID = "mapvx-circles";
@@ -153,19 +157,20 @@ function convertPaddingToPixels(padding, containerWidth, containerHeight) {
         right: parsePaddingValue(padding.right, containerWidth),
     };
 }
+const mapbox_1 = require("@deck.gl/mapbox");
 const icons_1 = require("../assets/icons");
 const routeController_1 = require("../controllers/routeController");
 const _rtl_1 = require("../domain/models/_rtl");
 const animation_1 = require("../domain/models/animation");
+const circle_1 = require("../domain/models/circle");
 const loggeable_1 = require("../domain/models/loggeable");
 const mapConfig_1 = require("../domain/models/mapConfig");
-const circle_1 = require("../domain/models/circle");
 const marker_1 = require("../domain/models/marker");
 const route_1 = require("../domain/models/route");
 const routeConfiguration_1 = require("../domain/models/routeConfiguration");
 const repository_1 = require("../repository/repository");
-const utils_1 = require("../utils/utils");
 const route_utils_1 = require("../utils/route-utils");
+const utils_1 = require("../utils/utils");
 const mapInteractionOptions_1 = require("./mapInteractionOptions");
 /**
  * Class to interact with the map.
@@ -182,7 +187,7 @@ class InternalMapVXMap extends loggeable_1.Loggeable {
      * @returns A new instance of MapVXMap.
      */
     constructor(mapConfig, container, token) {
-        var _a, _b;
+        var _a, _b, _c;
         super();
         this.potentialParentPlaces = [];
         this.innerFloors = [];
@@ -195,6 +200,22 @@ class InternalMapVXMap extends loggeable_1.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 (_rtl_1.rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
             this.setRTLSupport();
         }
@@ -206,11 +227,16 @@ class InternalMapVXMap extends loggeable_1.Loggeable {
         this.watchPositionID = undefined;
         this.onFloorChange = mapConfig.onFloorChange;
         this.onParentPlaceChange = mapConfig.onParentPlaceChange;
+        this.mode = (_c = mapConfig.mode) !== null && _c !== void 0 ? _c : "2D";
+        this.initialCenter = mapConfig.center;
         this.tileCacheConfig = (() => {
             const merged = Object.assign(Object.assign({}, mapConfig_1.DEFAULT_TILE_CACHE_CONFIG), mapConfig.tileCache);
             merged.maxTiles = Math.min(merged.maxTiles, mapConfig_1.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);
         }
@@ -338,6 +364,30 @@ class InternalMapVXMap extends loggeable_1.Loggeable {
         }), (_e = mapConfig.navigationPosition) !== null && _e !== void 0 ? _e : "top-right");
         this.map.on("load", () => {
             var _a;
+            if (this.mode === "3D") {
+                this.deckOverlay = new mapbox_1.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);
@@ -360,7 +410,6 @@ class InternalMapVXMap extends loggeable_1.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)
@@ -489,6 +538,386 @@ class InternalMapVXMap extends loggeable_1.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 = maplibre_gl_1.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_js_1.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 = maplibre_gl_1.MercatorCoordinate.fromLngLat(this.initialCenter, 0);
+        const meterScale = refMercator.meterInMercatorCoordinateUnits();
+        for (const pos of positions) {
+            const target = maplibre_gl_1.default.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 geo_layers_1.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 layers_1.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 geo_layers_1.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 layers_1.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 geo_layers_1.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 layers_1.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 geo_layers_1.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 layers_1.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 : "";
@@ -508,6 +937,10 @@ class InternalMapVXMap extends loggeable_1.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)
@@ -536,6 +969,10 @@ class InternalMapVXMap extends loggeable_1.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;
@@ -588,6 +1025,9 @@ class InternalMapVXMap extends loggeable_1.Loggeable {
         this.routeController.addSourcesAndLayers();
         this.refreshCircles();
         this.filterByFloorKey(this.currentFloor);
+        if (this.mode === "3D") {
+            this.updateDeckOverlay();
+        }
     }
     addMarker(marker) {
         var _a, _b;
@@ -1016,6 +1456,10 @@ class InternalMapVXMap extends loggeable_1.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();