@mapvx/web-js 1.0.0

package/dist/es/map/map.js

@@ -0,0 +1,1430 @@
+import maplibregl, { LngLatBounds, Map, NavigationControl, setRTLTextPlugin, } from "maplibre-gl";
+// Flag to track if cached-tile protocol has been registered
+let cachedTileProtocolRegistered = false;
+/**
+ * Deep clone helper that works in all environments.
+ * Uses structuredClone if available, otherwise falls back to JSON serialization.
+ * @param obj The object to clone
+ * @returns A deep clone of the object
+ */
+function deepClone(obj) {
+    if (obj === undefined || obj === null) {
+        return obj;
+    }
+    if (typeof structuredClone === "function") {
+        return structuredClone(obj);
+    }
+    return JSON.parse(JSON.stringify(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.
+ */
+function registerCachedTileProtocol() {
+    if (cachedTileProtocolRegistered)
+        return;
+    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 })
+            .then((response) => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.arrayBuffer();
+        })
+            .then((data) => ({ data }));
+    });
+    cachedTileProtocolRegistered = true;
+}
+/**
+ * Converts a PaddingValue to pixels based on the container and viewport dimensions.
+ * @param value The padding value (number or string with unit)
+ * @param dimension The reference dimension in pixels (container width/height)
+ * @returns The padding value in pixels
+ */
+function parsePaddingValue(value, dimension) {
+    if (value === undefined) {
+        return 0;
+    }
+    if (typeof value === "number") {
+        return value;
+    }
+    const match = value.match(/^(-?\d*\.?\d+)(px|%|vh|vw)?$/);
+    if (!match) {
+        return 0;
+    }
+    const numericValue = parseFloat(match[1]);
+    const unit = match[2] || "px";
+    switch (unit) {
+        case "px":
+            return numericValue;
+        case "%":
+            return (numericValue / 100) * dimension;
+        case "vh":
+            return (numericValue / 100) * window.innerHeight;
+        case "vw":
+            return (numericValue / 100) * window.innerWidth;
+        default:
+            return numericValue;
+    }
+}
+/**
+ * Converts PaddingOptions with mixed units to MapLibre's pixel-based padding format.
+ * @param padding The padding options with optional fields and mixed units
+ * @param containerWidth The map container width in pixels
+ * @param containerHeight The map container height in pixels
+ * @returns Padding object with all values in pixels
+ */
+function convertPaddingToPixels(padding, containerWidth, containerHeight) {
+    if (!padding) {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    return {
+        top: parsePaddingValue(padding.top, containerHeight),
+        bottom: parsePaddingValue(padding.bottom, containerHeight),
+        left: parsePaddingValue(padding.left, containerWidth),
+        right: parsePaddingValue(padding.right, containerWidth),
+    };
+}
+import { userLocationDataUrl } from "../assets/icons";
+import { RouteController } from "../controllers/routeController";
+import { rtlLanguages } from "../domain/models/_rtl";
+import { InternalAnimationConfig, InternalAnimationDrawingConfig, } from "../domain/models/animation";
+import { Loggeable } from "../domain/models/loggeable";
+import { DEFAULT_TILE_CACHE_CONFIG, } from "../domain/models/mapConfig";
+import { 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";
+/**
+ * Class to interact with the map.
+ * @category Map
+ * @hidden
+ */
+export class InternalMapVXMap extends Loggeable {
+    /**
+     * Creates a new map instance with the parameters specified in mapConfig and assigns it to the provided HTML container.
+     * @param mapConfig Configuration parameters for the map.
+     * @param container Container where the assignment of the created map is required.
+     * @param parentPlace Parent place required for map floor mapping, along with the display of subplaces.
+     * @param token The token provided for the creation and fetching of map information.
+     * @returns A new instance of MapVXMap.
+     */
+    constructor(mapConfig, container, token) {
+        var _a, _b;
+        super();
+        this.potentialParentPlaces = [];
+        this.innerFloors = [];
+        this.subPlaces = [];
+        this.currentFloor = "";
+        this.baseFilters = {};
+        this.markers = [];
+        this.enableHover = false;
+        this.hoveredId = "unselected";
+        this.failedTiles = new Set();
+        this.geoLocation = navigator.geolocation;
+        if (rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
+            this.setRTLSupport();
+        }
+        this.repository = new Repository(token, (_b = mapConfig.lang) !== null && _b !== void 0 ? _b : "en", mapConfig.apiUrl, undefined, mapConfig.mapvxRequestContext);
+        this.token = token;
+        this.parentPlaceId = mapConfig.parentPlaceId;
+        this.routeController = new RouteController(this);
+        this.userLocationMarker = undefined;
+        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);
+        if (mapConfig.parentPlaceId != null) {
+            this.initialPlaceDetailSetUp(mapConfig.parentPlaceId, mapConfig.authToken);
+        }
+        if (mapConfig.otherPotentialParentPlacesIds &&
+            mapConfig.otherPotentialParentPlacesIds.length > 0) {
+            this.loadOtherPotentialParentPlaces(mapConfig.otherPotentialParentPlacesIds);
+        }
+        this.enableHover = mapConfig.enableHover || false;
+        this.initialMapStyleSetUp(mapConfig, container);
+    }
+    setRTLSupport() {
+        setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js", false).catch(() => {
+            // RTL support may fail in some browsers - this is expected
+        });
+    }
+    /**
+     * Transform style sources to use cached-tile:// protocol for tile URLs.
+     * This enables the service worker to intercept and cache tile requests.
+     * @param style The original style specification
+     * @returns A new style with transformed tile URLs
+     */
+    transformStyleForCaching(style) {
+        if (!style) {
+            return style;
+        }
+        const transformedStyle = deepClone(style);
+        if (transformedStyle === null || transformedStyle === void 0 ? void 0 : transformedStyle.sources) {
+            for (const sourceKey of Object.keys(transformedStyle.sources)) {
+                const source = transformedStyle.sources[sourceKey];
+                // Transform vector and raster tile sources
+                // Only transform source.tiles (actual tile URLs), NOT source.url (TileJSON metadata URL)
+                // source.url points to a TileJSON file that returns JSON, not binary tile data
+                if (source.tiles && Array.isArray(source.tiles)) {
+                    source.tiles = source.tiles.map((tileUrl) => {
+                        if (tileUrl.startsWith("https://")) {
+                            return tileUrl.replace("https://", "cached-tile://");
+                        }
+                        return tileUrl;
+                    });
+                }
+            }
+        }
+        return transformedStyle;
+    }
+    initialPlaceDetailSetUp(parentPlaceId, withBearerToken) {
+        if (withBearerToken) {
+            this.repository
+                .fetchAndParseAnyPlaceDetail(parentPlaceId, withBearerToken)
+                .then((place) => {
+                this.changeParentPlaceTo(place);
+                this.potentialParentPlaces.push(place);
+            })
+                .catch(console.error);
+            return;
+        }
+        this.repository
+            .fetchAndParsePlaceDetail(parentPlaceId)
+            .then((place) => {
+            this.changeParentPlaceTo(place);
+            this.potentialParentPlaces.push(place);
+        })
+            .catch(console.error);
+    }
+    loadOtherPotentialParentPlaces(ids) {
+        Promise.all(ids.map((id) => this.repository.fetchAndParsePlaceDetail(id)))
+            .then((places) => {
+            this.potentialParentPlaces.push(...places);
+        })
+            .catch(console.error);
+    }
+    subPlacesLoad(parentPlaceId) {
+        this.repository
+            .fetchAndParseSubPlaces(parentPlaceId)
+            .then((subPlaces) => {
+            this.subPlaces = subPlaces;
+        })
+            .catch(console.error);
+    }
+    initialMapStyleSetUp(mapConfig, container) {
+        if (mapConfig.institutionId && mapConfig.authToken) {
+            this.repository
+                .fetchAndParseAnyMapStyle(mapConfig.institutionId, mapConfig.authToken)
+                .then((style) => {
+                return this.onMapStyleLoaded(mapConfig, container, style);
+            })
+                .catch(console.error);
+            return;
+        }
+        this.repository
+            .fetchAndParseMapStyle(mapConfig.parentPlaceId)
+            .then((style) => {
+            return this.onMapStyleLoaded(mapConfig, container, style);
+        })
+            .catch(console.error);
+    }
+    onMapStyleLoaded(mapConfig, container, style) {
+        var _a, _b, _c;
+        // 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();
+        }
+        // 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,
+            // Use configured maxTiles for MapLibre's memory cache
+            maxTileCacheSize: this.tileCacheConfig.maxTiles,
+        };
+        if (mapConfig.maxZoom)
+            mapOptions.maxZoom = mapConfig.maxZoom;
+        if (mapConfig.minZoom)
+            mapOptions.minZoom = mapConfig.minZoom;
+        if (mapConfig.maxBounds && mapConfig.maxBounds.length > 1) {
+            const boundingBox = getBoundingBox(mapConfig.maxBounds);
+            mapOptions.maxBounds = new LngLatBounds([boundingBox[0].lng, boundingBox[0].lat], [boundingBox[1].lng, boundingBox[1].lat]);
+        }
+        this.map = new Map(mapOptions);
+        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");
+        this.map.on("load", () => {
+            var _a;
+            this.whenStyleUpdates(style);
+            if (mapConfig.lang)
+                this.setLayersForLanguage(mapConfig.lang);
+            (_a = mapConfig.onMapReady) === null || _a === void 0 ? void 0 : _a.call(mapConfig);
+            this.onHover();
+            this.subscribeToFailedTiles();
+        });
+        this.map.on("zoomend", () => {
+            var _a;
+            (_a = mapConfig.onZoomEnd) === null || _a === void 0 ? void 0 : _a.call(mapConfig, this.getZoomLevel());
+        });
+        this.map.on("rotate", () => {
+            var _a;
+            (_a = mapConfig.onRotate) === null || _a === void 0 ? void 0 : _a.call(mapConfig, this.map.getBearing());
+        });
+        this.defaultClickListener();
+        return this.map;
+    }
+    setBaseFilters(style) {
+        if (!style)
+            return;
+        const publicPlaceFilter = ["==", ["get", "public_place"], true];
+        style.layers
+            .filter((layer) => layer.id.startsWith("indoor-"))
+            .forEach((layer) => {
+            const baseFilter = this.baseFilters[layer.id];
+            if (baseFilter != null) {
+                const finalFilter = ["all", baseFilter, publicPlaceFilter];
+                this.map.setFilter(layer.id, finalFilter);
+            }
+            else {
+                this.map.setFilter(layer.id, publicPlaceFilter);
+            }
+            switch (layer.type) {
+                case "line":
+                case "symbol":
+                case "fill-extrusion":
+                case "fill":
+                    if (layer.filter != null) {
+                        this.baseFilters[layer.id] = layer.filter;
+                    }
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    setLayersForLanguage(lang) {
+        var _a, _b;
+        // outdoor layers
+        const layersName = [
+            "aerodrome_label",
+            "mountain_peak",
+            "park",
+            "place",
+            "poi",
+            "transportation_name",
+            "water_name",
+            "waterway",
+        ];
+        const layers = (_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : [];
+        const layersIds = layers
+            .filter((layer) => {
+            var _a;
+            return layer.type === "symbol" &&
+                layer.source === "openmaptiles" &&
+                layersName.includes((_a = layer["source-layer"]) !== null && _a !== void 0 ? _a : "");
+        })
+            .map((layer) => {
+            return layer.id;
+        });
+        layersIds.forEach((id) => {
+            try {
+                const property = this.map.getLayoutProperty(id, "symbol-placement");
+                this.map.setLayoutProperty(id, "text-field", [
+                    "case",
+                    ["has", `name:${lang}`],
+                    ["get", `name:${lang}`],
+                    [
+                        "format",
+                        ["get", "name:latin"],
+                        property === "line" ? " " : "\n",
+                        ["get", "name:nonlatin"],
+                    ],
+                ]);
+            }
+            catch (error) {
+                // Layer language update may fail if layer doesn't exist
+            }
+        });
+        // indoor layers
+        const indoorLayerIds = layers
+            .filter((layer) => {
+            var _a;
+            return layer.type === "symbol" &&
+                layer.source === "indoorequal" &&
+                ((_a = layer.layout) === null || _a === void 0 ? void 0 : _a["text-field"]) !== undefined;
+        })
+            .map((layer) => {
+            return layer.id;
+        });
+        indoorLayerIds.forEach((id) => {
+            try {
+                this.map.setLayoutProperty(id, "text-field", [
+                    "case",
+                    ["has", `name:${lang}`],
+                    ["get", `name:${lang}`],
+                    ["get", "name"],
+                ]);
+            }
+            catch (error) {
+                // Layer language update may fail if layer doesn't exist
+            }
+        });
+    }
+    /**
+     * Add values to identify the client.
+     * @param segmentation The pair values to use as segmentation.
+     * @returns The segmentation with the added values.
+     */
+    prepareSegmentation(segmentation) {
+        var _a;
+        return Object.assign(Object.assign({}, segmentation), { token: this.token, parentPlaceId: (_a = this.parentPlaceId) !== null && _a !== void 0 ? _a : "None" });
+    }
+    destroyMap() {
+        this.map.remove();
+        this.unsubscribeFromFailedTiles();
+    }
+    clearTileCache() {
+        try {
+            // Clear the failed tiles tracking set
+            this.failedTiles.clear();
+            // Force MapLibre to reload all visible tiles by triggering a repaint
+            // Note: MapLibre doesn't expose a direct cache clear method, so we
+            // trigger a style refresh which causes tiles to be re-requested
+            if (this.map) {
+                this.map.triggerRepaint();
+            }
+            this.logEvent("clearTileCache");
+        }
+        catch (error) {
+            // Tile cache clear may fail if cache doesn't exist
+        }
+    }
+    getCurrentFloor() {
+        var _a;
+        return (_a = this.currentFloor) !== null && _a !== void 0 ? _a : "";
+    }
+    /**
+     * Performs changes when parent place is updated
+     * @param place new parent place
+     * @param updateStyle defines if new parent place style must be set
+     */
+    changeParentPlaceTo(place, updateStyle = false, onStyleReady) {
+        var _a, _b, _c, _d, _e, _f;
+        this.parentPlace = place;
+        this.parentPlaceId = place === null || place === void 0 ? void 0 : place.mapvxId;
+        this.innerFloors = (_b = (_a = place === null || place === void 0 ? void 0 : place.innerFloors) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.index - b.index)) !== null && _b !== void 0 ? _b : [];
+        this.currentFloor =
+            (_f = (_d = (_c = this.innerFloors.find((floor) => floor.defaultFloor)) === null || _c === void 0 ? void 0 : _c.key) !== null && _d !== void 0 ? _d : (_e = this.innerFloors[0]) === null || _e === void 0 ? void 0 : _e.key) !== null && _f !== void 0 ? _f : "";
+        if (place) {
+            this.subPlacesLoad(place.mapvxId);
+        }
+        if (updateStyle) {
+            this.repository
+                .fetchAndParseMapStyle(place === null || place === void 0 ? void 0 : place.mapvxId)
+                .then((style) => {
+                const useServiceWorkerCaching = this.tileCacheConfig.enabled && this.tileCacheConfig.persistToServiceWorker;
+                const finalStyle = useServiceWorkerCaching ? this.transformStyleForCaching(style) : style;
+                this.map.setStyle(finalStyle);
+                this.whenStyleUpdates(finalStyle);
+                onStyleReady === null || onStyleReady === void 0 ? void 0 : onStyleReady();
+            })
+                .catch(console.error);
+        }
+    }
+    /**
+     * Update the parent place and the current floor.
+     * Does not update layers, markers, etc.
+     * @param parentPlaceId
+     * @param floorId
+     * @throws A error if the parent place is not one of the allowed places to show.
+     */
+    updatePlaceAndFloor(parentPlaceId, floorId) {
+        var _a, _b, _c, _d, _e;
+        const place = this.potentialParentPlaces.find((place) => place.mapvxId === parentPlaceId);
+        this.parentPlace = place;
+        this.parentPlaceId = place === null || place === void 0 ? void 0 : place.mapvxId;
+        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 : "";
+    }
+    updateParentPlaceAndFloor(parentPlaceId, floorId, options) {
+        var _a, _b, _c, _d;
+        try {
+            this.updatePlaceAndFloor(parentPlaceId, floorId);
+            this.filterByFloorKey(this.currentFloor);
+            (_a = this.onParentPlaceChange) === null || _a === void 0 ? void 0 : _a.call(this, parentPlaceId);
+            (_b = this.onFloorChange) === null || _b === void 0 ? void 0 : _b.call(this, (_c = this.currentFloor) !== null && _c !== void 0 ? _c : "");
+            this.logEvent("updateParentPlaceAndFloor");
+            (_d = options === null || options === void 0 ? void 0 : options.onComplete) === null || _d === void 0 ? void 0 : _d.call(options);
+        }
+        catch (error) {
+            // Parent place/floor update may fail
+        }
+    }
+    setLang(lang) {
+        this.repository.setLang(lang);
+    }
+    setParentPlace(place, updateStyle, onStyleReady) {
+        this.changeParentPlaceTo(place, updateStyle, onStyleReady);
+    }
+    /**
+     * Removes current parent place and updates style to default
+     */
+    removeParentPlace() {
+        this.changeParentPlaceTo(undefined, true);
+    }
+    /**
+     * Applies filters and changes to layers according to given style.
+     * Expected to be called every time a new style is loaded
+     * @param newStyle
+     */
+    whenStyleUpdates(newStyle) {
+        if (newStyle) {
+            this.setBaseFilters(newStyle);
+        }
+        this.routeController.addSourcesAndLayers();
+        this.filterByFloorKey(this.currentFloor);
+    }
+    addMarker(marker) {
+        var _a, _b;
+        try {
+            // Check if a marker with the same ID already exists and remove it
+            if (marker.id) {
+                const existingMarkerIndex = this.markers.findIndex((m) => m.id === marker.id);
+                if (existingMarkerIndex !== -1) {
+                    const existingMarker = this.markers[existingMarkerIndex];
+                    existingMarker.remove();
+                    this.markers.splice(existingMarkerIndex, 1);
+                    this.logEvent("removeMarker", {
+                        markerId: marker.id,
+                        reason: "duplicate",
+                    });
+                }
+            }
+            const markerCreated = new MarkerAttribute(marker);
+            const isOutdoor = !this.parentPlace ||
+                ((_b = (_a = this.innerFloors.find((floor) => floor.key === this.currentFloor)) === null || _a === void 0 ? void 0 : _a.reachableFromGPS) !== null && _b !== void 0 ? _b : false);
+            markerCreated.changeFloor(this.currentFloor, this.map, isOutdoor);
+            this.markers.push(markerCreated);
+            this.logEvent("addMarker");
+            return markerCreated.id;
+        }
+        catch (error) {
+            throw new Error("Failed to add marker");
+        }
+    }
+    updateMarker(markerConfig) {
+        var _a;
+        try {
+            const marker = this.markers.find((e) => e.id === markerConfig.id);
+            if (marker !== undefined) {
+                marker.updateIcon(markerConfig);
+            }
+            this.logEvent("updateMarker");
+            return (_a = marker === null || marker === void 0 ? void 0 : marker.id) !== null && _a !== void 0 ? _a : "";
+        }
+        catch (error) {
+            throw new Error("Failed to update marker");
+        }
+    }
+    updateMarkerPosition(markerId, newPosition) {
+        try {
+            const marker = this.markers.find((e) => e.id === markerId);
+            if (marker !== undefined) {
+                marker.setLngLat(newPosition);
+            }
+            this.logEvent("updateMarkerPosition");
+        }
+        catch (error) {
+            throw new Error("Failed to update marker position");
+        }
+    }
+    showMarker(markerId) {
+        try {
+            const marker = this.markers.find((e) => e.id === markerId);
+            if (marker !== null && this.map) {
+                marker === null || marker === void 0 ? void 0 : marker.show(this.map);
+            }
+            this.logEvent("showMarker");
+        }
+        catch (error) {
+            // Show marker may fail if marker doesn't exist
+        }
+    }
+    hideMarker(markerId) {
+        try {
+            const marker = this.markers.find((e) => e.id === markerId);
+            if (marker !== null) {
+                marker === null || marker === void 0 ? void 0 : marker.hide();
+            }
+            this.logEvent("hideMarker");
+        }
+        catch (error) {
+            // Hide marker may fail if marker doesn't exist
+        }
+    }
+    removeMarker(markerId) {
+        try {
+            const marker = this.markers.find((e) => e.id === markerId);
+            if (marker !== null) {
+                marker === null || marker === void 0 ? void 0 : marker.remove();
+                this.markers = this.markers.filter((e) => e.id !== markerId);
+            }
+            this.logEvent("removeMarker");
+        }
+        catch (error) {
+            throw new Error("Failed to remove marker");
+        }
+    }
+    removeAllMarkers() {
+        try {
+            this.markers.forEach((marker) => {
+                marker.remove();
+            });
+            this.markers = [];
+            this.logEvent("removeAllMarkers");
+        }
+        catch (error) {
+            throw new Error("Failed to remove all markers");
+        }
+    }
+    /**
+     * Use it to change the current layer
+     * @param floorKey floor id
+     */
+    filterByFloorKey(floorKey) {
+        this.currentFloor = floorKey;
+        const floorKeyString = floorKey !== null && floorKey !== void 0 ? floorKey : "";
+        if (this.innerFloors.every((floor) => floor.key !== floorKey) && floorKey !== "") {
+            this.logEvent("invalidFloorKey", { floorKey: floorKeyString });
+        }
+        this.updateFiltersTo(floorKeyString);
+        this.updateMarkersTo(floorKeyString);
+        this.routeController.updateRouteLayers(floorKeyString);
+        this.routeController.updateRouteMarkerVisibility(floorKeyString);
+    }
+    getContainer() {
+        return this.map.getContainer();
+    }
+    updateMarkersTo(floorId) {
+        var _a, _b;
+        const isOutdoor = !this.parentPlace ||
+            ((_b = (_a = this.innerFloors.find((floor) => floor.key === floorId)) === null || _a === void 0 ? void 0 : _a.reachableFromGPS) !== null && _b !== void 0 ? _b : false);
+        this.markers.forEach((e) => {
+            e.changeFloor(floorId, this.map, isOutdoor);
+        });
+    }
+    updateFiltersTo(floorId) {
+        var _a, _b, _c, _d;
+        if (!this.map)
+            return;
+        const layers = (_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : [];
+        layers
+            .filter((l) => l.id.startsWith("base-indoor-"))
+            .forEach((l) => {
+            this.map.removeLayer(l.id);
+        });
+        const baseFloorId = (_c = this.innerFloors.find((floor) => floor.key === floorId)) === null || _c === void 0 ? void 0 : _c.baseFloor;
+        const indoorLayers = layers.filter((layer) => layer.id.startsWith("indoor-"));
+        if (baseFloorId != undefined) {
+            const firstLayerId = (_d = indoorLayers[0]) === null || _d === void 0 ? void 0 : _d.id;
+            indoorLayers
+                .filter((layer) => layer.type !== "fill-extrusion")
+                .forEach((layer) => {
+                const baseLayer = deepClone(layer);
+                baseLayer.id = "base-" + layer.id;
+                this.baseFilters[baseLayer.id] = this.baseFilters[layer.id];
+                this.map.addLayer(baseLayer, firstLayerId);
+                this.applyLayerFilters(baseLayer, baseFloorId);
+            });
+        }
+        indoorLayers.forEach((layer) => {
+            this.applyLayerFilters(layer, floorId);
+        });
+    }
+    applyLayerFilters(layer, floorId) {
+        var _a;
+        let baseFilter = this.baseFilters[layer.id];
+        const floorIdString = floorId !== null && floorId !== void 0 ? floorId : "";
+        const floorFilter = [
+            "any",
+            ["in", floorIdString, ["get", "floor_key"]],
+        ];
+        const publicPlaceFilter = ["==", ["get", "public_place"], true];
+        const subPlaceFilter = [
+            "!",
+            ["in", (_a = this.parentPlaceId) !== null && _a !== void 0 ? _a : "noRef", ["get", "is_subplace"]],
+        ];
+        const showInFloorFilter = [
+            "in",
+            floorIdString,
+            ["get", "show_in_floor"],
+        ];
+        let basicFilters = publicPlaceFilter;
+        if (this.parentPlaceId != null) {
+            basicFilters = ["any", floorFilter, publicPlaceFilter];
+        }
+        const customFilters = [
+            "all",
+            basicFilters,
+            ["any", subPlaceFilter, showInFloorFilter],
+        ];
+        if (layer.id.includes("hover")) {
+            baseFilter = ["in", this.hoveredId, ["get", "ref"]];
+        }
+        else if (!layer.id.includes("colored") &&
+            (layer.type == "fill" || layer.type === "fill-extrusion")) {
+            customFilters.push(["!", ["in", this.hoveredId, ["get", "ref"]]]);
+        }
+        if (baseFilter != null) {
+            const finalFilter = ["all", baseFilter, customFilters];
+            this.map.setFilter(layer.id, finalFilter);
+        }
+        else {
+            this.map.setFilter(layer.id, customFilters);
+        }
+    }
+    /**
+     * Floors of the parent place
+     * @returns Inner floors of the parent place
+     */
+    getInnerFloors() {
+        return this.innerFloors;
+    }
+    updateCamera(newCamera, callback) {
+        void this.map.once("moveend", callback);
+        this.map.easeTo(Object.assign({}, newCamera));
+    }
+    setMaxZoom(zoomLvl, options) {
+        var _a;
+        this.map.setMaxZoom(zoomLvl);
+        (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    setMinZoom(zoomLvl, options) {
+        var _a;
+        this.map.setMinZoom(zoomLvl);
+        (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    isInsideBounds(point) {
+        const mapBounds = this.map.getMaxBounds();
+        if (mapBounds != null) {
+            return mapBounds.contains(point);
+        }
+        return true;
+    }
+    setMaxBounds(coordinates, options) {
+        var _a;
+        if (coordinates.length > 1) {
+            const boundingBox = getBoundingBox(coordinates);
+            this.map.setMaxBounds(new LngLatBounds([boundingBox[0].lng, boundingBox[0].lat], [boundingBox[1].lng, boundingBox[1].lat]));
+        }
+        (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    fitCoordinates(coordinates, options) {
+        if (coordinates.length === 0) {
+            return;
+        }
+        const onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
+        if (coordinates.length === 1) {
+            const [coord] = coordinates;
+            if (onComplete) {
+                void this.map.once("moveend", onComplete);
+            }
+            this.map.setCenter({
+                lat: coord.lat,
+                lng: coord.lng,
+            });
+        }
+        else {
+            let minLat;
+            let minLng;
+            let maxLat;
+            let maxLng;
+            for (const coord of coordinates) {
+                const { lat, lng } = coord;
+                minLat = minLat === undefined ? lat : Math.min(minLat, lat);
+                minLng = minLng === undefined ? lng : Math.min(minLng, lng);
+                maxLat = maxLat === undefined ? lat : Math.max(maxLat, lat);
+                maxLng = maxLng === undefined ? lng : Math.max(maxLng, lng);
+            }
+            const bounds = [
+                minLng !== null && minLng !== void 0 ? minLng : 0,
+                minLat !== null && minLat !== void 0 ? minLat : 0,
+                maxLng !== null && maxLng !== void 0 ? maxLng : 0,
+                maxLat !== null && maxLat !== void 0 ? maxLat : 0,
+            ];
+            // Get container dimensions for percentage-based padding calculations
+            const container = this.map.getContainer();
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            // Convert padding values with units to pixels
+            const padding = convertPaddingToPixels(options === null || options === void 0 ? void 0 : options.padding, containerWidth, containerHeight);
+            const fitOptions = Object.assign(Object.assign({}, options), { padding });
+            const bearing = this.map.getBearing();
+            const pitch = this.map.getPitch();
+            fitOptions.bearing = fitOptions.bearing !== undefined ? fitOptions.bearing : bearing;
+            fitOptions.pitch = fitOptions.pitch !== undefined ? fitOptions.pitch : pitch;
+            if (onComplete) {
+                void this.map.once("moveend", onComplete);
+            }
+            this.map.fitBounds(bounds, fitOptions);
+        }
+    }
+    fitRouteByPlace(route, placeId, options) {
+        // Filter steps that belong to the specified place
+        const stepsInPlace = route.steps.filter((step) => step.startInsidePlace === placeId || step.endInsidePlace === placeId);
+        if (stepsInPlace.length === 0) {
+            return;
+        }
+        // Extract all coordinates from the filtered steps
+        const coords = stepsInPlace.flatMap((step) => extractStepCoordinates(step));
+        if (coords.length > 0) {
+            this.fitCoordinates(coords, options);
+        }
+    }
+    getZoomLevel() {
+        return this.map.getZoom();
+    }
+    updateFloor(floorId, options) {
+        var _a, _b;
+        try {
+            this.filterByFloorKey(floorId);
+            (_a = this.onFloorChange) === null || _a === void 0 ? void 0 : _a.call(this, floorId);
+            this.logEvent("updateFloor", { floorId });
+            (_b = options === null || options === void 0 ? void 0 : options.onComplete) === null || _b === void 0 ? void 0 : _b.call(options);
+        }
+        catch (error) {
+            // Floor update may fail
+        }
+    }
+    updatePlaceAndFloorForRouting(placeId, floorId) {
+        var _a;
+        try {
+            this.updatePlaceAndFloor(placeId, floorId);
+            this.updateFiltersTo(floorId);
+            this.updateMarkersTo(floorId);
+            (_a = this.onFloorChange) === null || _a === void 0 ? void 0 : _a.call(this, floorId);
+            this.logEvent("updatePlaceAndFloorForRouting", { floorId });
+        }
+        catch (error) {
+            // Place/floor update for routing may fail
+        }
+    }
+    async addRoute(config, drawConfig = {}) {
+        try {
+            this.logEvent("addRoute");
+            const fetchRouteConfig = new InternalGetRouteConfiguration(config);
+            const drawRouteConfig = new InternalDrawRouteConfiguration(drawConfig);
+            const route = await this.repository.fetchAndParseRoute(fetchRouteConfig);
+            this.routeController.addRoute(route, drawRouteConfig);
+            return route;
+        }
+        catch (error) {
+            throw new Error("Error: Failed to add route");
+        }
+    }
+    updateRouteProgress(routeId, position, behindStyle = { type: "Solid", color: "#757575" }) {
+        try {
+            const behindConfig = new InternalDrawRouteConfiguration({
+                routeStyle: behindStyle,
+            });
+            this.routeController.updateRouteProgress(routeId, position, behindConfig);
+        }
+        catch (error) {
+            // Update may fail if route doesn't exist
+        }
+    }
+    removeRoute(routeId) {
+        try {
+            this.logEvent("removeRoute");
+            this.routeController.removeRoute(routeId);
+        }
+        catch (error) {
+            // Remove route may fail if no route exists
+        }
+    }
+    removeRouteById(routeId) {
+        try {
+            this.logEvent("removeRouteById");
+            this.routeController.removeRoute(routeId);
+        }
+        catch (error) {
+            // Remove route may fail if route doesn't exist
+        }
+    }
+    removeAllRoutes() {
+        try {
+            this.logEvent("removeAllRoutes");
+            this.routeController.removeAllRoutes();
+        }
+        catch (error) {
+            // Remove all routes may fail
+        }
+    }
+    getActiveRouteIds() {
+        return this.routeController.getRouteIds();
+    }
+    addPopOver(popOverConfig) {
+        const placeId = popOverConfig.placeId;
+        if (placeId !== undefined) {
+            const pointedPlace = this.subPlaces.find((subplace) => {
+                return subplace.clientId === placeId || subplace.mapvxId === placeId;
+            });
+            if (pointedPlace !== undefined) {
+                new maplibregl.Popup()
+                    .setLngLat(pointedPlace.position)
+                    .setHTML(pointedPlace.title)
+                    .addTo(this.map);
+            }
+        }
+        return "";
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    removePopOver(id) {
+        throw Error("Not implemented");
+    }
+    startClickListener(callback) {
+        this.clickCallback = callback;
+    }
+    stopClickListener() {
+        this.clickCallback = undefined;
+    }
+    defaultClickListener() {
+        this.map.on("click", async (e) => {
+            var _a, _b;
+            const features = this.map.queryRenderedFeatures(e.point);
+            // Filter room features by current floor
+            const roomFeatures = features.filter((feature) => { var _a; return feature.properties.class === "room" && ((_a = feature.properties) === null || _a === void 0 ? void 0 : _a.floor_key) === this.currentFloor; });
+            const touchedFeature = roomFeatures[0];
+            const ref = touchedFeature === null || touchedFeature === void 0 ? void 0 : touchedFeature.properties.ref;
+            if (ref != null && typeof ref === "string" && ref.length > 0) {
+                console.log("touchedFeature", ref);
+                // First, search in current subPlaces
+                let clickedPlace = this.subPlaces.find((subPlace) => subPlace.mapvxId === ref);
+                // If not found, search in subplaces of potential parent places
+                if (clickedPlace === undefined) {
+                    for (const potentialParentPlace of this.potentialParentPlaces) {
+                        const cachedSubPlaces = this.repository.getCachedSubPlaces(potentialParentPlace.mapvxId);
+                        if (cachedSubPlaces) {
+                            clickedPlace = cachedSubPlaces.find((subPlace) => subPlace.mapvxId === ref);
+                            if (clickedPlace !== undefined) {
+                                break;
+                            }
+                        }
+                    }
+                }
+                // As last resort, search in general cache
+                if (clickedPlace === undefined) {
+                    const cachedPlaces = this.repository.getCachedPlaces([ref]);
+                    if (cachedPlaces.length === 0) {
+                        console.log("fetching place detail from server", ref);
+                        clickedPlace = await this.repository.fetchAndParsePlaceDetail(ref);
+                    }
+                    else {
+                        console.log("using cached place detail", ref);
+                        clickedPlace = cachedPlaces === null || cachedPlaces === void 0 ? void 0 : cachedPlaces[0];
+                    }
+                }
+                console.log("clickedPlace", clickedPlace === null || clickedPlace === void 0 ? void 0 : clickedPlace.title);
+                const clickedPlaceId = (_b = (_a = clickedPlace === null || clickedPlace === void 0 ? void 0 : clickedPlace.mapvxId) !== null && _a !== void 0 ? _a : clickedPlace === null || clickedPlace === void 0 ? void 0 : clickedPlace.clientId) !== null && _b !== void 0 ? _b : "";
+                if (clickedPlace !== undefined && this.clickCallback) {
+                    this.clickCallback(clickedPlaceId);
+                }
+            }
+        });
+    }
+    onHover() {
+        if (!this.enableHover)
+            return;
+        this.map.on("mousemove", "hoverable", (e) => {
+            var _a;
+            const feature = (_a = e.features) === null || _a === void 0 ? void 0 : _a.find((feature) => { var _a, _b; return ((_a = feature.properties.ref) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = feature.properties) === null || _b === void 0 ? void 0 : _b.floor_key) === this.currentFloor; });
+            const ref = feature === null || feature === void 0 ? void 0 : feature.properties.ref;
+            if (ref != null && typeof ref === "string" && ref.length > 0) {
+                this.hoveredId = ref;
+                this.updateFiltersTo(this.currentFloor);
+            }
+            else if (ref === undefined && this.hoveredId !== "unselected") {
+                this.hoveredId = "unselected";
+                this.updateFiltersTo(this.currentFloor);
+            }
+        });
+        // When the mouse leaves the state-fill layer, update the feature state of the
+        // previously hovered feature.
+        this.map.on("mouseleave", "hoverable", () => {
+            this.hoveredId = "unselected";
+            this.updateFiltersTo(this.currentFloor);
+        });
+    }
+    setPlacesAsSelected(placeIds, color) {
+        try {
+            if (!this.hasLayer("indoor-colored-places")) {
+                this.createColoredPlacesLayer();
+            }
+            const basicFilter = this.createBasicFilters();
+            const coloredPlacesFilters = placeIds.map((id) => {
+                const filter = ["==", ["get", "ref"], id];
+                return filter;
+            });
+            const placeFilter = ["any", ...coloredPlacesFilters];
+            const condition = ["all", placeFilter, basicFilter];
+            this.map.setFilter("indoor-colored-places", condition);
+            this.baseFilters["indoor-colored-places"] = placeFilter;
+            if (color !== undefined) {
+                const layer = this.map.getLayer("indoor-colored-places");
+                switch (layer === null || layer === void 0 ? void 0 : layer.type) {
+                    case "fill":
+                        this.map.setPaintProperty("indoor-colored-places", "fill-color", color);
+                        break;
+                    case "fill-extrusion":
+                        this.map.setPaintProperty("indoor-colored-places", "fill-extrusion-color", color);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        catch (error) {
+            // Place selection may fail if layer doesn't exist
+        }
+    }
+    is3DStyle() {
+        const layers = this.map.getStyle().layers;
+        return layers.some((layer) => layer.type === "fill-extrusion");
+    }
+    createColoredPlacesLayer() {
+        if (this.is3DStyle()) {
+            const layer = {
+                id: "indoor-colored-places",
+                type: "fill-extrusion",
+                source: "indoorequal",
+                "source-layer": "area",
+                filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
+                paint: {
+                    "fill-extrusion-height": 2.5,
+                    "fill-extrusion-color": "#276EF1",
+                    "fill-extrusion-opacity": 0.8,
+                },
+            };
+            this.map.addLayer(layer);
+        }
+        else {
+            const layer = {
+                id: "indoor-colored-places",
+                type: "fill",
+                source: "indoorequal",
+                "source-layer": "area",
+                filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
+                paint: {
+                    "fill-color": "#276EF1",
+                },
+            };
+            this.map.addLayer(layer);
+        }
+    }
+    createBasicFilters() {
+        var _a, _b;
+        const publicPlaceFilter = ["==", ["get", "public_place"], true];
+        const subPlaceFilter = [
+            "!",
+            ["in", (_a = this.parentPlaceId) !== null && _a !== void 0 ? _a : "noRef", ["get", "is_subplace"]],
+        ];
+        const floorId = (_b = this.currentFloor) !== null && _b !== void 0 ? _b : "noRef";
+        const floorFilter = ["in", floorId, ["get", "floor_key"]];
+        const showInFloorFilter = [
+            "in",
+            floorId,
+            ["get", "show_in_floor"],
+        ];
+        let basicFilters = publicPlaceFilter;
+        if (this.parentPlaceId != null) {
+            basicFilters = ["any", floorFilter, publicPlaceFilter];
+        }
+        const customFilters = [
+            "all",
+            basicFilters,
+            ["any", subPlaceFilter, showInFloorFilter],
+        ];
+        return customFilters;
+    }
+    hasLayer(layerId) {
+        const layer = this.map.getLayer(layerId);
+        return layer !== undefined;
+    }
+    clearColoredPlaces() {
+        if (this.hasLayer("indoor-colored-places")) {
+            const condition = ["==", ["get", "ref"], "unselected"];
+            this.baseFilters["indoor-colored-places"] = condition;
+            this.map.setFilter("indoor-colored-places", condition);
+        }
+    }
+    async startAnimateRoute(routeConfig, drawConfig = {}, animationConfig = {}) {
+        try {
+            let route;
+            if (routeConfig instanceof MVXRoute) {
+                route = routeConfig;
+            }
+            else {
+                const fetchRouteConfig = new InternalGetRouteConfiguration(routeConfig);
+                route = await this.repository.fetchAndParseRoute(fetchRouteConfig);
+            }
+            const drawRouteConfig = new InternalAnimationDrawingConfig(drawConfig);
+            const animationRouteConfig = new InternalAnimationConfig(animationConfig);
+            this.routeController.startAnimating(route, drawRouteConfig, animationRouteConfig);
+            return route;
+        }
+        catch (error) {
+            throw new Error("Error: Failed to start animating route");
+        }
+    }
+    async startAnimateRouteV2(routeConfig, drawConfig = {}, animationConfig = {}) {
+        try {
+            let route;
+            if (routeConfig instanceof MVXRoute) {
+                route = routeConfig;
+            }
+            else {
+                const fetchRouteConfig = new InternalGetRouteConfiguration(routeConfig);
+                route = await this.repository.fetchAndParseRouteV2(fetchRouteConfig);
+            }
+            const drawRouteConfig = new InternalAnimationDrawingConfig(drawConfig);
+            const animationRouteConfig = new InternalAnimationConfig(animationConfig);
+            this.routeController.startAnimating(route, drawRouteConfig, animationRouteConfig);
+            return route;
+        }
+        catch (error) {
+            throw new Error("Error: Failed to start animating route");
+        }
+    }
+    pauseAnimateRoute(routeId) {
+        try {
+            this.routeController.pauseAnimation(routeId);
+            this.logEvent("pauseAnimateRoute");
+        }
+        catch (error) {
+            // Pause animation may fail if no animation is running
+        }
+    }
+    resumeAnimateRoute(routeId) {
+        try {
+            this.routeController.resumeAnimation(routeId);
+            this.logEvent("resumeAnimateRoute");
+        }
+        catch (error) {
+            // Resume animation may fail if no animation is paused
+        }
+    }
+    restartAnimateRoute(routeId) {
+        try {
+            this.routeController.restartAnimation(routeId);
+            this.logEvent("restartAnimateRoute");
+        }
+        catch (error) {
+            // Restart animation may fail if no animation exists
+        }
+    }
+    stopAnimateRoute() {
+        this.logWarning(new Error("Not implemented"), {
+            functionName: "stopAnimateRoute",
+        });
+    }
+    async addStepAnimation(routeConfig, drawConfig = {}, animationConfig = {}) {
+        try {
+            let route;
+            if (routeConfig instanceof MVXRoute) {
+                route = routeConfig;
+            }
+            else {
+                const fetchRouteConfig = new InternalGetRouteConfiguration(routeConfig);
+                route = await this.repository.fetchAndParseRoute(fetchRouteConfig);
+            }
+            const drawRouteConfig = new InternalAnimationDrawingConfig(drawConfig);
+            const animationRouteConfig = new InternalAnimationConfig(animationConfig);
+            this.routeController.addStepAnimation(route, drawRouteConfig, animationRouteConfig);
+            this.logEvent("addStepAnimation");
+            return route;
+        }
+        catch (error) {
+            throw new Error("Error: Failed to add step animation");
+        }
+    }
+    async addStepAnimationV2(routeConfig, drawConfig = {}, animationConfig = {}) {
+        try {
+            let route;
+            if (routeConfig instanceof MVXRoute) {
+                route = routeConfig;
+            }
+            else {
+                const fetchRouteConfig = new InternalGetRouteConfiguration(routeConfig);
+                route = await this.repository.fetchAndParseRouteV2(fetchRouteConfig);
+            }
+            const drawRouteConfig = new InternalAnimationDrawingConfig(drawConfig);
+            const animationRouteConfig = new InternalAnimationConfig(animationConfig);
+            this.routeController.addStepAnimation(route, drawRouteConfig, animationRouteConfig);
+            this.logEvent("addStepAnimationV2");
+            return route;
+        }
+        catch (error) {
+            throw new Error("Error: Failed to add step animation");
+        }
+    }
+    nextStepAnimation(routeId) {
+        try {
+            this.routeController.nextStepAnimation(routeId);
+            this.logEvent("nextStepAnimation");
+        }
+        catch (error) {
+            throw new Error("Error: Failed to animate step");
+        }
+    }
+    previousStepAnimation(routeId) {
+        try {
+            this.routeController.previousStepAnimation(routeId);
+            this.logEvent("previousStepAnimation");
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error("Error: Failed to prepare to animate previous step, " + errorMessage);
+        }
+    }
+    centerOnCurrentStepAnimation(routeId) {
+        try {
+            this.routeController.centerOnCurrentStep(routeId);
+            this.logEvent("centerOnCurrentStepAnimation");
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error("Error: Failed to center on current step animation, " + errorMessage);
+        }
+    }
+    addUserLocationTracking(enableHighAccuracy, geoLocation, icon) {
+        const initialCoordinate = {
+            lat: 0.0,
+            lng: 0.0,
+        };
+        let markerIcon;
+        if (icon != null) {
+            markerIcon = icon;
+        }
+        else {
+            const image = new Image(40, 40);
+            image.src = userLocationDataUrl;
+            markerIcon = image;
+        }
+        const markerConfig = {
+            coordinate: initialCoordinate,
+            icon: markerIcon,
+            text: "",
+        };
+        const marker = new MarkerAttribute(markerConfig);
+        marker.addToMap(this.map);
+        this.userLocationMarker = marker;
+        const updateMarker = (position) => {
+            marker.setLngLat([position.coords.longitude, position.coords.latitude]);
+        };
+        this.geoLocation = geoLocation !== null && geoLocation !== void 0 ? geoLocation : navigator.geolocation;
+        this.watchPositionID = this.geoLocation.watchPosition(updateMarker, (error) => {
+            console.error("Error getting user location:", error);
+        }, {
+            enableHighAccuracy: enableHighAccuracy,
+        });
+    }
+    removeUserLocationTracking() {
+        if (this.userLocationMarker !== undefined) {
+            this.userLocationMarker.remove();
+            this.userLocationMarker = undefined;
+            // Check if watchPosition ID is valid and stop tracking
+            if (this.watchPositionID) {
+                this.geoLocation.clearWatch(this.watchPositionID);
+                this.watchPositionID = undefined;
+            }
+        }
+    }
+    getBearing() {
+        return this.map.getBearing();
+    }
+    addBorderToPlaces(placeIds, color, width) {
+        try {
+            if (!this.hasLayer("indoor-bordered-places")) {
+                this.createBorderedPlacesLayer();
+            }
+            const basicFilter = this.createBasicFilters();
+            const coloredPlacesFilters = placeIds.map((id) => {
+                const filter = ["==", ["get", "ref"], id];
+                return filter;
+            });
+            const placeFilter = ["any", ...coloredPlacesFilters];
+            const condition = ["all", placeFilter, basicFilter];
+            this.map.setFilter("indoor-bordered-places", condition);
+            this.baseFilters["indoor-bordered-places"] = placeFilter;
+            if (color !== undefined && width !== undefined) {
+                this.map.setPaintProperty("indoor-bordered-places", "line-color", color);
+                this.map.setPaintProperty("indoor-bordered-places", "line-width", width);
+            }
+        }
+        catch (error) {
+            throw new Error("Failed to add border to places");
+        }
+    }
+    createBorderedPlacesLayer() {
+        const layer = {
+            id: "indoor-bordered-places",
+            type: "line",
+            source: "indoorequal",
+            "source-layer": "area",
+            filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
+            paint: {
+                "line-color": "#276EF1",
+                "line-width": 4,
+            },
+        };
+        this.map.addLayer(layer);
+    }
+    clearBorderedPlaces() {
+        if (this.hasLayer("indoor-bordered-places")) {
+            const condition = ["==", ["get", "ref"], "unselected"];
+            this.baseFilters["indoor-bordered-places"] = condition;
+            this.map.setFilter("indoor-bordered-places", condition);
+        }
+    }
+    onWebGLContextLost(e) {
+        var _a, _b;
+        e.originalEvent.preventDefault();
+        console.warn("Contexto WebGL perdido 😢");
+        // Intentar restaurar el contexto automáticamente
+        const canvas = (_a = this === null || this === void 0 ? void 0 : this.map) === null || _a === void 0 ? void 0 : _a.getCanvas();
+        const gl = (canvas === null || canvas === void 0 ? void 0 : canvas.getContext("webgl")) || (canvas === null || canvas === void 0 ? void 0 : canvas.getContext("webgl2"));
+        if (gl && gl.isContextLost()) {
+            canvas.addEventListener("webglcontextrestored", () => {
+                console.debug("Contexto WebGL restaurado, forzando re-render");
+                this.map.triggerRepaint(); // forzar repaint
+                this.failedTiles.clear();
+            }, { once: true });
+            const ext = gl.getExtension("WEBGL_lose_context");
+            (_b = ext === null || ext === void 0 ? void 0 : ext.restoreContext) === null || _b === void 0 ? void 0 : _b.call(ext); // si aplica
+        }
+    }
+    onWebGLContextRestored() {
+        console.debug("Evento webglcontextrestored recibido, haciendo map.redraw()");
+        this.map.redraw(); // fuerza un redraw síncrono  [oai_citation:0‡maplibre.org](https://www.maplibre.org/maplibre-gl-js/docs/API/classes/Map/?utm_source=chatgpt.com)
+        this.failedTiles.clear();
+    }
+    onSourceData(e) {
+        var _a;
+        // Only track tiles that actually failed to load (not aborted or never loaded)
+        if (e.source.type === "vector" && e.sourceId === "indoorequal" && e.tile && !e.isSourceLoaded) {
+            // Check if tile has an error state before adding to retry queue
+            // Access state property safely as it may not always be available
+            const tileState = (_a = e.tile) === null || _a === void 0 ? void 0 : _a.state;
+            if (tileState === "errored" || tileState === "expired") {
+                this.failedTiles.add(e.tile);
+            }
+        }
+    }
+    onSourceDataAbort(e) {
+        // Remove aborted tiles from retry queue as they shouldn't be retried
+        if (e.source.type === "vector" && e.sourceId === "indoorequal" && e.tile) {
+            this.failedTiles.delete(e.tile);
+        }
+    }
+    subscribeToFailedTiles() {
+        if (this.retryTimer)
+            return;
+        // Store bound functions for proper cleanup
+        this.boundOnSourceData = this.onSourceData.bind(this);
+        this.boundOnSourceDataAbort = this.onSourceDataAbort.bind(this);
+        this.boundOnWebGLContextLost = this.onWebGLContextLost.bind(this);
+        this.boundOnWebGLContextRestored = this.onWebGLContextRestored.bind(this);
+        this.retryTimer = setInterval(() => {
+            if (!this.map.getSource("indoorequal")) {
+                this.failedTiles.clear();
+                return;
+            }
+            const source = this.map.getSource("indoorequal");
+            if (!source || source.type !== "vector") {
+                this.failedTiles.clear();
+                return;
+            }
+            // Process tiles and remove invalid ones
+            const tilesToRetry = [];
+            const tilesToRemove = [];
+            this.failedTiles.forEach((tile) => {
+                // Check if tile is still valid before attempting reload
+                if (!tile || tile.state === "unloaded" || tile.state === "loading") {
+                    tilesToRemove.push(tile);
+                    return;
+                }
+                // Only retry tiles that are in an error state
+                if (tile.state === "errored" || tile.state === "expired") {
+                    tilesToRetry.push(tile);
+                }
+                else {
+                    // Tile is in a valid state, remove from retry queue
+                    tilesToRemove.push(tile);
+                }
+            });
+            // Remove invalid tiles from the set
+            tilesToRemove.forEach((tile) => this.failedTiles.delete(tile));
+            // Attempt to reload valid failed tiles
+            tilesToRetry.forEach((tile) => {
+                try {
+                    // Verify tile still exists and is in a retryable state
+                    if (tile && (tile.state === "errored" || tile.state === "expired")) {
+                        source.loadTile(tile);
+                    }
+                }
+                catch (error) {
+                    // If reload fails, remove tile from retry queue - this is expected
+                    this.failedTiles.delete(tile);
+                }
+            });
+        }, 1000);
+        this.map.on("sourcedata", this.boundOnSourceData);
+        this.map.on("sourcedataabort", this.boundOnSourceDataAbort);
+        // Escucha el evento de contexto perdido
+        this.map.on("webglcontextlost", this.boundOnWebGLContextLost);
+        // Adicional: escucha evento restauración
+        this.map.on("webglcontextrestored", this.boundOnWebGLContextRestored);
+    }
+    unsubscribeFromFailedTiles() {
+        if (this.retryTimer) {
+            clearInterval(this.retryTimer);
+            this.retryTimer = undefined;
+        }
+        if (this.boundOnSourceData) {
+            this.map.off("sourcedata", this.boundOnSourceData);
+            this.boundOnSourceData = undefined;
+        }
+        if (this.boundOnSourceDataAbort) {
+            this.map.off("sourcedataabort", this.boundOnSourceDataAbort);
+            this.boundOnSourceDataAbort = undefined;
+        }
+        if (this.boundOnWebGLContextLost) {
+            this.map.off("webglcontextlost", this.boundOnWebGLContextLost);
+            this.boundOnWebGLContextLost = undefined;
+        }
+        if (this.boundOnWebGLContextRestored) {
+            this.map.off("webglcontextrestored", this.boundOnWebGLContextRestored);
+            this.boundOnWebGLContextRestored = undefined;
+        }
+        this.failedTiles.clear();
+    }
+}
+//# sourceMappingURL=map.js.map