@mapvx/web-js 1.3.0-dev.2 → 1.4.0-dev.0

package/dist/es/map/map.js

@@ -1,9 +1,8 @@
 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";
+import { THREE } from "../utils/three";
 /** 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. */
@@ -136,13 +135,15 @@ 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, 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 { hexToRgb, isPlacementVisibleOnFloor, mergeGlbScale, mergeRotation3D, opacityForZoom, resolveModels3DLights, resolveZoomTransparency, } from "../utils/3d";
+import { addScene3DLights, computeGlbBottomAnchor, loadGlbRoot } from "../utils/loadGlb";
 import { extractStepCoordinates } from "../utils/route-utils";
 import { getBoundingBox } from "../utils/utils";
 import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapInteractionOptions";
@@ -161,7 +162,7 @@ export class InternalMapVXMap extends Loggeable {
      * @returns A new instance of MapVXMap.
      */
     constructor(mapConfig, container, token) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super();
         this.potentialParentPlaces = [];
         this.innerFloors = [];
@@ -176,18 +177,17 @@ export class InternalMapVXMap extends Loggeable {
         this.geoLocation = navigator.geolocation;
         // 3d related variables
         this.mode = "2D";
+        this.scene3DConfig = undefined;
         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_up.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.scene3DGlbScene = undefined;
+        /** Loaded GLB roots keyed by URL (deduplicated). */
+        this.scene3DGlbRootByUrl = new globalThis.Map();
+        /** Per-asset template root and bottom anchor for cloning. */
+        this.scene3DGlbTemplateById = new globalThis.Map();
+        /** Number of light objects in `scene3DGlbScene` (kept when clearing meshes). */
+        this.scene3DGlbLightCount = 0;
+        /** Container group holding all placed GLB pivots; rebuilt on each floor change. */
+        this.scene3DModelsGroup = undefined;
         this.spriteIconMapping = {};
         this.spriteAtlasImage = new Image();
         if (rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
@@ -201,15 +201,16 @@ export class InternalMapVXMap extends 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({}, 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);
+        this.mode = (_c = mapConfig.mode) !== null && _c !== void 0 ? _c : "2D";
+        this.scene3DConfig = mapConfig.scene3D;
+        this.initialCenter = mapConfig.center;
+        if (this.is3DSceneActive() && ((_f = (_e = (_d = this.scene3DConfig) === null || _d === void 0 ? void 0 : _d.customLayers) === null || _e === void 0 ? void 0 : _e.iconLayers) === null || _f === void 0 ? void 0 : _f.spriteUrl)) {
+            this.loadSpriteAtlas((_j = (_h = (_g = this.scene3DConfig) === null || _g === void 0 ? void 0 : _g.customLayers) === null || _h === void 0 ? void 0 : _h.iconLayers) === null || _j === void 0 ? void 0 : _j.spriteUrl).catch(console.error);
         }
         if (mapConfig.parentPlaceId != null) {
             this.initialPlaceDetailSetUp(mapConfig.parentPlaceId, mapConfig.authToken);
@@ -337,35 +338,22 @@ export class InternalMapVXMap extends Loggeable {
             showZoom: mapConfig.showZoom !== undefined ? mapConfig.showZoom : true,
         }), (_e = mapConfig.navigationPosition) !== null && _e !== void 0 ? _e : "top-right");
         this.map.on("load", () => {
-            var _a;
-            if (this.mode === "3D") {
+            var _a, _b, _c;
+            if (this.is3DSceneActive()) {
                 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");
-                    }
+                this.hideLayers((_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.hideLayers);
+                const models = (_b = this.scene3DConfig) === null || _b === void 0 ? void 0 : _b.models;
+                const glbModelsActive = models !== undefined && models.enabled !== false && models.assets.length > 0;
+                if (glbModelsActive) {
+                    this.map.addLayer(this.createGlbCustomLayer());
                 }
-                // 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);
-            (_a = mapConfig.onMapReady) === null || _a === void 0 ? void 0 : _a.call(mapConfig);
+            (_c = mapConfig.onMapReady) === null || _c === void 0 ? void 0 : _c.call(mapConfig);
             this.onHover();
             this.subscribeToFailedTiles();
         });
@@ -375,6 +363,11 @@ export class InternalMapVXMap extends Loggeable {
             if (this.circles.length > 0)
                 this.ensureCircleLayers();
         });
+        this.map.on("zoom", () => {
+            if (this.is3DSceneActive()) {
+                this.applyModelZoomOpacity();
+            }
+        });
         this.map.on("zoomend", () => {
             var _a;
             (_a = mapConfig.onZoomEnd) === null || _a === void 0 ? void 0 : _a.call(mapConfig, this.getZoomLevel());
@@ -512,48 +505,43 @@ 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");
-                }
-            }
-        }
+    /**
+     * Whether 3D scene features (deck.gl overlay, declarative GLB custom layer, etc.) are active.
+     * Requires {@link MapConfig.mode} `"3D"` and {@link Scene3DConfig.enabled} not `false`.
+     * When `scene3D` is omitted, 3D features remain available for backward compatibility.
+     */
+    is3DSceneActive() {
+        var _a;
+        return this.mode === "3D" && ((_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.enabled) !== false;
     }
-    createEscalatorLayer() {
+    // Start 3D related methods ------------------------------------------------------------
+    createGlbCustomLayer() {
+        var _a;
         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();
+        this.scene3DGlbScene = new THREE.Scene();
+        const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
+        if (models && models.enabled !== false && models.assets.length > 0) {
+            const lights = resolveModels3DLights(models);
+            this.scene3DGlbLightCount = addScene3DLights(this.scene3DGlbScene, lights);
+        }
+        else {
+            this.scene3DGlbLightCount = 0;
+        }
+        void this.loadScene3DGlbTemplates()
+            .then(() => this.placeScene3DModels())
+            .catch((err) => {
+            console.error("Failed to initialize declarative GLB models", err);
         });
         let renderer = undefined;
         let camera = undefined;
         const tmpMatrix = new THREE.Matrix4();
         return {
-            id: "3d-escalators",
+            id: "3d-glb-models",
             type: "custom",
             renderingMode: "3d",
             onAdd(_map, gl) {
@@ -564,162 +552,206 @@ export class InternalMapVXMap extends Loggeable {
                     antialias: true,
                 });
                 renderer.autoClear = false;
+                // MapLibre owns canvas dimensions; only sync the GL viewport on resize.
+                renderer.setSize = function (width, height) {
+                    this.setViewport(0, 0, width, height);
+                };
             },
-            render: (gl, args) => {
-                var _a, _b;
+            render: (_gl, args) => {
+                var _a;
                 if (!camera ||
                     !renderer ||
-                    !this.escalatorModelTemplate ||
-                    !this.escalatorScene ||
-                    this.escalatorScene.children.length <= this.ESCALATOR_LIGHTS)
+                    !this.scene3DGlbScene ||
+                    !this.scene3DModelsGroup ||
+                    this.scene3DModelsGroup.children.length === 0) {
+                    return;
+                }
+                const canvas = this.map.getCanvas();
+                const width = canvas.width;
+                const height = canvas.height;
+                // Skip while the framebuffer has no drawable area (e.g. devtools opening).
+                if (width === 0 || height === 0) {
+                    return;
+                }
+                const mainMatrix = (_a = args.defaultProjectionData) === null || _a === void 0 ? void 0 : _a.mainMatrix;
+                if (!mainMatrix) {
                     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);
+                }
+                renderer.setSize(width, height);
+                tmpMatrix.fromArray(mainMatrix).multiply(modelTransform);
                 camera.projectionMatrix.copy(tmpMatrix);
                 renderer.resetState();
-                renderer.render(this.escalatorScene, camera);
+                renderer.render(this.scene3DGlbScene, 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)
+    async loadScene3DGlbTemplates() {
+        var _a;
+        const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
+        if (!models || models.enabled === false || models.assets.length === 0) {
             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);
+        }
+        this.scene3DGlbRootByUrl.clear();
+        this.scene3DGlbTemplateById.clear();
+        for (const asset of models.assets) {
+            try {
+                let root = this.scene3DGlbRootByUrl.get(asset.url);
+                if (!root) {
+                    root = await loadGlbRoot(asset.url);
+                    this.scene3DGlbRootByUrl.set(asset.url, root);
+                }
+                const center = computeGlbBottomAnchor(root);
+                this.scene3DGlbTemplateById.set(asset.id, { root, center });
+            }
+            catch (err) {
+                console.error(`Failed to load GLB asset "${asset.id}" from ${asset.url}`, err);
             }
         }
+    }
+    placeScene3DModels() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        if (!this.scene3DGlbScene) {
+            return;
+        }
+        const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
+        if (!models || models.enabled === false) {
+            return;
+        }
+        if (this.scene3DModelsGroup) {
+            this.scene3DGlbScene.remove(this.scene3DModelsGroup);
+            this.scene3DModelsGroup = undefined;
+        }
+        if (this.scene3DGlbTemplateById.size === 0) {
+            return;
+        }
         // Guard against an invalid initial center before it reaches fromLngLat.
         if (!this.initialCenter ||
             !Number.isFinite(this.initialCenter.lng) ||
-            !Number.isFinite(this.initialCenter.lat))
+            !Number.isFinite(this.initialCenter.lat)) {
             return;
+        }
         const refMercator = MercatorCoordinate.fromLngLat(this.initialCenter, 0);
         const meterScale = refMercator.meterInMercatorCoordinateUnits();
-        for (const pos of positions) {
-            // Defense in depth: never feed a non-finite coordinate to fromLngLat.
-            if (!Number.isFinite(pos.lng) || !Number.isFinite(pos.lat))
+        const floorKey = (_b = this.currentFloor) !== null && _b !== void 0 ? _b : "";
+        const modelsGroup = new THREE.Group();
+        modelsGroup.position.set((_d = (_c = models.globalOffset) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0, (_f = (_e = models.globalOffset) === null || _e === void 0 ? void 0 : _e.y) !== null && _f !== void 0 ? _f : 0, (_h = (_g = models.globalOffset) === null || _g === void 0 ? void 0 : _g.z) !== null && _h !== void 0 ? _h : 0);
+        for (const placement of models.placements) {
+            if (!isPlacementVisibleOnFloor(placement, floorKey)) {
                 continue;
-            const target = maplibregl.MercatorCoordinate.fromLngLat([pos.lng, pos.lat], 0);
+            }
+            const template = this.scene3DGlbTemplateById.get(placement.assetId);
+            if (!template) {
+                continue;
+            }
+            const asset = models.assets.find((a) => a.id === placement.assetId);
+            if (!asset) {
+                continue;
+            }
+            // Placement positions come from external consumer config: skip any
+            // non-finite coordinate so a malformed config can never crash
+            // fromLngLat and break the whole floor render.
+            if (!placement.position ||
+                !Number.isFinite(placement.position.lng) ||
+                !Number.isFinite(placement.position.lat)) {
+                this.logWarning(new Error(`Invalid scene3D placement position (assetId=${placement.assetId}, floorKey=${floorKey})`));
+                continue;
+            }
+            const target = maplibregl.MercatorCoordinate.fromLngLat([placement.position.lng, placement.position.lat], (_j = placement.position.altitude) !== null && _j !== void 0 ? _j : 0);
             const sx = (target.x - refMercator.x) / meterScale;
             const sz = (target.y - refMercator.y) / meterScale;
+            const ax = (_l = (_k = asset.defaultModelOffset) === null || _k === void 0 ? void 0 : _k.x) !== null && _l !== void 0 ? _l : 0;
+            const ay = (_o = (_m = asset.defaultModelOffset) === null || _m === void 0 ? void 0 : _m.y) !== null && _o !== void 0 ? _o : 0;
+            const az = (_q = (_p = asset.defaultModelOffset) === null || _p === void 0 ? void 0 : _p.z) !== null && _q !== void 0 ? _q : 0;
+            const px = (_s = (_r = placement.offset) === null || _r === void 0 ? void 0 : _r.x) !== null && _s !== void 0 ? _s : 0;
+            const py = (_u = (_t = placement.offset) === null || _t === void 0 ? void 0 : _t.y) !== null && _u !== void 0 ? _u : 0;
+            const pz = (_w = (_v = placement.offset) === null || _v === void 0 ? void 0 : _v.z) !== null && _w !== void 0 ? _w : 0;
             const pivot = new THREE.Group();
-            pivot.position.set(sx, 0, sz);
-            pivot.rotation.y = -pos.bearing;
-            pivot.scale.set(1, 1, 1);
-            const model = this.escalatorModelTemplate.clone();
-            model.position.set(-this.escalatorCenter.x, -this.escalatorCenter.y + 0.7, -this.escalatorCenter.z);
+            pivot.position.set(sx + ax + px, ay + py, sz + az + pz);
+            const mergedRot = mergeRotation3D(asset.defaultRotation, placement.rotation);
+            pivot.rotation.set(THREE.MathUtils.degToRad(mergedRot.pitch), THREE.MathUtils.degToRad(-mergedRot.yaw), THREE.MathUtils.degToRad(mergedRot.roll), "YXZ");
+            const [sx3, sy3, sz3] = mergeGlbScale(asset.defaultScale, placement.scale);
+            pivot.scale.set(sx3, sy3, sz3);
+            const model = template.root.clone(true);
+            // `clone(true)` shares materials between instances; clone them per placement so each
+            // placement's zoom-based opacity is independent and does not bleed into sibling models.
+            model.traverse((obj) => {
+                const mesh = obj;
+                if (!mesh.isMesh) {
+                    return;
+                }
+                mesh.material = Array.isArray(mesh.material)
+                    ? mesh.material.map((m) => m.clone())
+                    : mesh.material.clone();
+            });
+            model.position.set(-template.center.x, -template.center.y, -template.center.z);
+            // Stash the resolved zoom-transparency config so it can be re-applied on every zoom change.
+            pivot.userData.zoomTransparency = resolveZoomTransparency(models, asset, placement);
             pivot.add(model);
-            this.escalatorScene.add(pivot);
+            modelsGroup.add(pivot);
         }
+        this.scene3DModelsGroup = modelsGroup;
+        this.scene3DGlbScene.add(modelsGroup);
+        this.applyModelZoomOpacity();
         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)
+    /**
+     * Applies zoom-based transparency to placed GLB models, using each placement's resolved
+     * {@link ZoomTransparencyConfig} stored in `pivot.userData.zoomTransparency`. Hard threshold:
+     * fully opaque below the configured zoom, configured opacity at/above it. Only triggers a
+     * repaint when at least one material actually changed.
+     */
+    applyModelZoomOpacity() {
+        if (!this.scene3DModelsGroup) {
             return;
-        // Collect all midpoints first
-        const allMids = [];
-        for (const f of features) {
-            const geom = f.geometry;
-            // queryRenderedFeatures may return a LineString or, when a line is split
-            // across tile boundaries, a MultiLineString. The previous code assumed
-            // LineString and read coords[0]/coords[n-1] as [lng,lat], producing
-            // NaN for MultiLineString (coordinates is number[][][]). Normalize both
-            // shapes to a list of line parts (Position[][]) and flatten them into a
-            // single continuous list of points so we still derive ONE midpoint per
-            // feature (a MultiLineString is just one escalator line split across
-            // tiles, not several escalators).
-            let lineParts;
-            if (geom.type === "LineString") {
-                lineParts = [geom.coordinates];
-            }
-            else if (geom.type === "MultiLineString") {
-                lineParts = geom.coordinates;
-            }
-            else {
-                continue;
-            }
-            const coords = lineParts.flat();
-            if (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]);
-            // Skip any non-finite result so a bad feature can never poison the
-            // cache (and later crash MercatorCoordinate.fromLngLat).
-            if (!Number.isFinite(midLng) || !Number.isFinite(midLat) || !Number.isFinite(bearing))
-                continue;
-            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]);
+        }
+        const zoom = this.getZoomLevel();
+        let changed = false;
+        for (const pivot of this.scene3DModelsGroup.children) {
+            const cfg = pivot.userData.zoomTransparency;
+            const opacity = opacityForZoom(cfg, zoom);
+            pivot.traverse((obj) => {
+                const mesh = obj;
+                if (!mesh.isMesh) {
+                    return;
                 }
-            }
-            // 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 });
+                const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+                for (const material of materials) {
+                    if (material.opacity !== opacity) {
+                        material.transparent = opacity < 1;
+                        material.opacity = opacity;
+                        // Disable depth writes while transparent to avoid draw-order artifacts.
+                        material.depthWrite = opacity >= 1;
+                        changed = true;
+                    }
+                }
+            });
         }
-        if (positions.length && this.currentFloor) {
-            this.escalatorCache[this.currentFloor] = positions;
+        if (changed) {
+            this.map.triggerRepaint();
         }
     }
-    async loadSpriteAtlas() {
+    async loadSpriteAtlas(spriteUrl) {
         const [json, img] = await Promise.all([
-            fetch(`${this.SPRITE_URL}.json`).then((r) => r.json()),
+            fetch(`${spriteUrl}.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`;
+                image.src = `${spriteUrl}.png`;
             }),
         ]);
         this.spriteIconMapping = json;
         this.spriteAtlasImage = img;
     }
-    makeMVTLayer(floorKey) {
+    makeElevatedLinesLayer(floorKey, layerConfig) {
+        var _a;
         return new MVTLayer({
             id: "indoor-lines-elevated",
-            data: "https://tiles.mapvx.com/",
-            binary: false,
+            data: layerConfig.dataUrl,
+            binary: (_a = layerConfig.binaryData) !== null && _a !== void 0 ? _a : false,
             renderSubLayers: (props) => {
-                var _a;
+                var _a, _b, _c, _d, _e;
                 const roomData = (props.data || []);
                 const roomFeatures = roomData.filter((f) => {
                     var _a, _b, _c;
@@ -731,7 +763,9 @@ export class InternalMapVXMap extends Loggeable {
                     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 z = ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.height)
+                        ? Number(f.properties.height)
+                        : ((_b = layerConfig.defaultHeight) !== null && _b !== void 0 ? _b : 5);
                     const geom = f.geometry;
                     const polygons = geom.type === "Polygon"
                         ? [geom.coordinates]
@@ -744,21 +778,23 @@ export class InternalMapVXMap extends Loggeable {
                         }
                     }
                 }
-                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 }));
+                return new PathLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-paths`, data: paths, getPath: (d) => d.path, getColor: hexToRgb((_c = layerConfig.lineColor) !== null && _c !== void 0 ? _c : "#cbcbcb"), getWidth: (_d = layerConfig.lineWidth) !== null && _d !== void 0 ? _d : 1.5, widthUnits: (_e = layerConfig.widthUnits) !== null && _e !== void 0 ? _e : "pixels", pickable: false }));
             },
             updateTriggers: {
                 renderSubLayers: [floorKey],
             },
         });
     }
-    makeLabelLayer(floorKey, useSdf = true) {
+    makeLabelLayer(floorKey, layerConfig, useSdf = true) {
+        var _a, _b, _c;
         return new MVTLayer({
             id: "indoor-labels",
-            data: "https://tiles.mapvx.com/",
-            binary: false,
-            minZoom: 19.5,
-            maxZoom: 24,
+            data: layerConfig.dataUrl,
+            binary: (_a = layerConfig.binaryData) !== null && _a !== void 0 ? _a : false,
+            minZoom: (_b = layerConfig.minZoom) !== null && _b !== void 0 ? _b : 19.5,
+            maxZoom: (_c = layerConfig.maxZoom) !== null && _c !== void 0 ? _c : 24,
             renderSubLayers: (props) => {
+                var _a, _b, _c, _d, _e;
                 // 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 || []);
@@ -780,32 +816,34 @@ export class InternalMapVXMap extends Loggeable {
                 if (!labelFeatures.length)
                     return null;
                 const textData = labelFeatures.map((f) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     return ({
                         position: [
                             ...f.geometry.coordinates.slice(0, 2),
-                            ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.height) ? Number(f.properties.height) : 5,
+                            ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.height) ? Number(f.properties.height) : ((_b = layerConfig.defaultHeight) !== null && _b !== void 0 ? _b : 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) || "",
+                        text: ((_c = f.properties) === null || _c === void 0 ? void 0 : _c["name:latin"]) || ((_d = f.properties) === null || _d === void 0 ? void 0 : _d.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 }));
+                return new TextLayer(Object.assign(Object.assign({}, props), { id: `${props.id}-labels`, data: textData, getPosition: (d) => d.position, getText: (d) => d.text, getSize: (_a = layerConfig.size) !== null && _a !== void 0 ? _a : 16, getColor: hexToRgb((_b = layerConfig.color) !== null && _b !== void 0 ? _b : "#91969b"), outlineColor: useSdf ? [255, 255, 255, 255] : [0, 0, 0, 0], outlineWidth: useSdf ? 4 : 0, fontSettings: { sdf: useSdf }, fontFamily: (_c = layerConfig.fontFamily) !== null && _c !== void 0 ? _c : "Open Sans, sans-serif", fontWeight: (_d = layerConfig.fontWeight) !== null && _d !== void 0 ? _d : 600, billboard: true, pickable: false, characterSet: "auto", wordBreak: "break-word", maxWidth: (_e = layerConfig.maxWidth) !== null && _e !== void 0 ? _e : 150 }));
             },
             updateTriggers: {
                 renderSubLayers: [floorKey],
             },
         });
     }
-    makePoiIconLayer(floorKey) {
+    makePoiIconLayer(floorKey, layerConfig) {
+        var _a, _b, _c;
         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,
+            data: layerConfig.dataUrl,
+            binary: (_a = layerConfig.binaryData) !== null && _a !== void 0 ? _a : false,
+            minZoom: (_b = layerConfig.minZoom) !== null && _b !== void 0 ? _b : 17,
+            maxZoom: (_c = layerConfig.maxZoom) !== null && _c !== void 0 ? _c : 24,
             renderSubLayers: (props) => {
+                var _a, _b, _c, _d;
                 const poiData = (props.data || []);
                 const poiFeatures = poiData.filter((f) => {
                     var _a, _b, _c;
@@ -819,7 +857,7 @@ export class InternalMapVXMap extends Loggeable {
                 if (!poiFeatures.length)
                     return null;
                 const iconData = poiFeatures.map((f) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     const tags = ((_a = f.properties) === null || _a === void 0 ? void 0 : _a.tags) || "";
                     let icon;
                     if (tags.includes("wheelchair"))
@@ -831,28 +869,30 @@ export class InternalMapVXMap extends Loggeable {
                     return {
                         position: [
                             ...f.geometry.coordinates.slice(0, 2),
-                            ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.height) ? Number(f.properties.height) : 5,
+                            ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.height) ? Number(f.properties.height) : ((_d = layerConfig.defaultHeight) !== null && _d !== void 0 ? _d : 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 }));
+                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: (_a = layerConfig.size) !== null && _a !== void 0 ? _a : 2, sizeUnits: (_b = layerConfig.sizeUnits) !== null && _b !== void 0 ? _b : "meters", sizeScale: (_c = layerConfig.sizeScale) !== null && _c !== void 0 ? _c : 1, billboard: (_d = layerConfig.billboard) !== null && _d !== void 0 ? _d : true, pickable: false }));
             },
             updateTriggers: {
                 renderSubLayers: [floorKey],
             },
         });
     }
-    makeStoreLogoLayer(floorKey) {
+    makeStoreLogoLayer(floorKey, layerConfig) {
+        var _a, _b, _c;
         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,
+            data: layerConfig.dataUrl,
+            binary: (_a = layerConfig.binaryData) !== null && _a !== void 0 ? _a : false,
+            minZoom: (_b = layerConfig.minZoom) !== null && _b !== void 0 ? _b : 13,
+            maxZoom: (_c = layerConfig.maxZoom) !== null && _c !== void 0 ? _c : 24,
             renderSubLayers: (props) => {
+                var _a, _b, _c;
                 const propsData = (props.data || []);
                 const logoFeatures = propsData.filter((f) => {
                     var _a, _b, _c;
@@ -868,30 +908,22 @@ export class InternalMapVXMap extends Loggeable {
                 if (!logoFeatures.length)
                     return null;
                 const logoData = logoFeatures.map((f) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     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,
+                            ((_c = f.properties) === null || _c === void 0 ? void 0 : _c.height) ? Number(f.properties.height) : ((_d = layerConfig.defaultHeight) !== null && _d !== void 0 ? _d : 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,
-                        };
+                        var _a;
+                        const LOGO_SCALE = (_a = layerConfig.logoScale) !== null && _a !== void 0 ? _a : {};
                         const m = this.spriteIconMapping[d.icon];
                         if (!m)
                             return 10;
@@ -900,7 +932,7 @@ export class InternalMapVXMap extends Loggeable {
                         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 }));
+                    }, sizeUnits: (_a = layerConfig.sizeUnits) !== null && _a !== void 0 ? _a : "meters", sizeScale: (_b = layerConfig.sizeScale) !== null && _b !== void 0 ? _b : 1, billboard: (_c = layerConfig.billboard) !== null && _c !== void 0 ? _c : false, pickable: false }));
             },
             updateTriggers: {
                 renderSubLayers: [floorKey],
@@ -908,20 +940,40 @@ export class InternalMapVXMap extends Loggeable {
         });
     }
     updateDeckOverlay() {
+        var _a;
         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);
+        if (!((_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.customLayers))
+            return;
+        const { customLayers } = this.scene3DConfig;
+        const layers = [];
+        if (customLayers.elevatedLinesLayer) {
+            layers.push(this.makeElevatedLinesLayer(this.currentFloor, customLayers.elevatedLinesLayer));
+        }
+        if (customLayers.labelsLayer) {
+            layers.push(this.makeLabelLayer(this.currentFloor, customLayers.labelsLayer, false));
+        }
+        if (customLayers.iconLayers) {
+            const { storeLogosLayer, poiIconsLayer } = customLayers.iconLayers;
+            if (storeLogosLayer) {
+                layers.push(this.makeStoreLogoLayer(this.currentFloor, storeLogosLayer));
+            }
+            if (poiIconsLayer) {
+                layers.push(this.makePoiIconLayer(this.currentFloor, poiIconsLayer));
+            }
+        }
         this.deckOverlay.setProps({ layers });
     }
+    hideLayers(layersIds) {
+        if (!layersIds)
+            return;
+        for (const layerId of layersIds) {
+            const layer = this.map.getLayer(layerId);
+            if (!layer)
+                continue;
+            this.map.setLayoutProperty(layer.id, "visibility", "none");
+        }
+    }
     // End 3D related methods ------------------------------------------------------------
     getCurrentFloor() {
         var _a;
@@ -942,9 +994,9 @@ export class InternalMapVXMap extends Loggeable {
         if (place) {
             this.subPlacesLoad(place.mapvxId);
         }
-        if (this.mode === "3D") {
+        if (this.is3DSceneActive()) {
             this.updateDeckOverlay();
-            this.placeEscalators();
+            this.placeScene3DModels();
         }
         if (updateStyle) {
             this.repository
@@ -974,9 +1026,9 @@ 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") {
+        if (this.is3DSceneActive()) {
             this.updateDeckOverlay();
-            this.placeEscalators();
+            this.placeScene3DModels();
         }
     }
     updateParentPlaceAndFloor(parentPlaceId, floorId, options) {
@@ -1030,7 +1082,7 @@ export class InternalMapVXMap extends Loggeable {
         this.routeController.addSourcesAndLayers();
         this.refreshCircles();
         this.filterByFloorKey(this.currentFloor);
-        if (this.mode === "3D") {
+        if (this.is3DSceneActive()) {
             this.updateDeckOverlay();
         }
     }
@@ -1462,9 +1514,10 @@ export class InternalMapVXMap extends Loggeable {
             this.logEvent("invalidFloorKey", { floorKey: floorKeyString });
         }
         // Critical base-map updates run first and must never be blocked by an
-        // optional 3D decoration failing. A throw in placeEscalators used to abort
-        // this method before updateFiltersTo, leaving the base polygons unfiltered
-        // (showing the wrong floor) while the caller's empty catch hid the error.
+        // optional 3D decoration failing. A throw in placeScene3DModels used to
+        // abort this method before updateFiltersTo, leaving the base polygons
+        // unfiltered (showing the wrong floor) while the caller's empty catch hid
+        // the error.
         this.updateFiltersTo(floorKeyString);
         this.updateMarkersTo(floorKeyString);
         this.refreshCircles();
@@ -1472,10 +1525,10 @@ export class InternalMapVXMap extends Loggeable {
         this.routeController.updateRouteMarkerVisibility(floorKeyString);
         // 3D decorations are best-effort: isolate so any failure here can never
         // break base-map rendering.
-        if (this.mode === "3D") {
+        if (this.is3DSceneActive()) {
             try {
                 this.updateDeckOverlay();
-                this.placeEscalators();
+                this.placeScene3DModels();
             }
             catch (error) {
                 this.logError(error, "filterByFloorKey: 3D layer update failed");