@mapvx/web-js 1.1.0 → 1.1.2-alpha.3

package/dist/es/map/map.js

@@ -1,4 +1,29 @@
 import maplibregl, { LngLatBounds, Map, NavigationControl, setRTLTextPlugin, } from "maplibre-gl";
+import { Semaphore } from "../utils/semaphore";
+/** Shared GeoJSON source holding every circle drawn through the circle API. */
+const CIRCLE_SOURCE_ID = "mapvx-circles";
+/** Fill layer rendering the translucent interior of the circles. */
+const CIRCLE_FILL_LAYER_ID = "mapvx-circles-fill";
+/** Line layer rendering the circle outlines. */
+const CIRCLE_LINE_LAYER_ID = "mapvx-circles-line";
+/**
+ * Layer-id suffix per circle render order. The default placement keeps the
+ * unsuffixed ids so existing consumers referencing them keep working.
+ */
+const CIRCLE_LAYER_SUFFIXES = {
+    aboveBasemap: "",
+    belowLabels: "-below-labels",
+    top: "-top",
+};
+/** Fill/line layer ids for one circle render-order bucket. */
+function circleLayerIdsFor(order) {
+    const suffix = CIRCLE_LAYER_SUFFIXES[order];
+    return { fill: CIRCLE_FILL_LAYER_ID + suffix, line: CIRCLE_LINE_LAYER_ID + suffix };
+}
+/** True for the layer ids owned by the circle API, regardless of bucket. */
+function isCircleLayerId(id) {
+    return id.startsWith(CIRCLE_FILL_LAYER_ID) || id.startsWith(CIRCLE_LINE_LAYER_ID);
+}
 // Flag to track if cached-tile protocol has been registered
 let cachedTileProtocolRegistered = false;
 /**
@@ -19,21 +44,36 @@ function deepClone(obj) {
 /**
  * Register a custom protocol for cached tiles that routes requests through the main thread.
  * This allows the service worker to intercept and cache tile requests.
+ *
+ * Wraps fetches in a {@link Semaphore} so tile CDN / WAFs are not hit with
+ * unbounded parallel requests (same host as the service worker cache). The
+ * semaphore is created once with the limit from the first map's config; later
+ * calls are no-ops because the protocol can only be registered once globally
+ * on MapLibre.
+ *
+ * @param maxConcurrentFetches - Maximum number of in-flight tile fetches.
  */
-function registerCachedTileProtocol() {
+function registerCachedTileProtocol(maxConcurrentFetches) {
     if (cachedTileProtocolRegistered)
         return;
+    const semaphore = new Semaphore(maxConcurrentFetches);
     maplibregl.addProtocol("cached-tile", (params, abortController) => {
-        // Convert cached-tile:// URL back to https://
         const url = params.url.replace("cached-tile://", "https://");
-        return fetch(url, { signal: abortController.signal })
+        // Pass the abort signal to acquire() so a request cancelled while still
+        // queued (e.g. during rapid zoom) drops out of the FIFO queue instead of
+        // waiting for a slot just to bail. release() runs only inside this chain,
+        // i.e. only after a slot was actually granted.
+        return semaphore.acquire(abortController.signal).then(() => fetch(url, { signal: abortController.signal })
             .then((response) => {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             return response.arrayBuffer();
         })
-            .then((data) => ({ data }));
+            .then((data) => ({ data }))
+            .finally(() => {
+            semaphore.release();
+        }));
     });
     cachedTileProtocolRegistered = true;
 }
@@ -92,13 +132,15 @@ import { RouteController } from "../controllers/routeController";
 import { rtlLanguages } from "../domain/models/_rtl";
 import { InternalAnimationConfig, InternalAnimationDrawingConfig, } from "../domain/models/animation";
 import { Loggeable } from "../domain/models/loggeable";
-import { DEFAULT_TILE_CACHE_CONFIG, } from "../domain/models/mapConfig";
+import { DEFAULT_TILE_CACHE_CONFIG, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP, } from "../domain/models/mapConfig";
+import { CIRCLE_RENDER_ORDERS, circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
 import { MarkerAttribute } from "../domain/models/marker";
 import { MVXRoute } from "../domain/models/route";
 import { InternalDrawRouteConfiguration, InternalGetRouteConfiguration, } from "../domain/models/routeConfiguration";
 import { Repository } from "../repository/repository";
 import { getBoundingBox } from "../utils/utils";
 import { extractStepCoordinates } from "../utils/route-utils";
+import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapInteractionOptions";
 /**
  * Class to interact with the map.
  * @category Map
@@ -122,6 +164,7 @@ export class InternalMapVXMap extends Loggeable {
         this.currentFloor = "";
         this.baseFilters = {};
         this.markers = [];
+        this.circles = [];
         this.enableHover = false;
         this.hoveredId = "unselected";
         this.failedTiles = new Set();
@@ -137,8 +180,11 @@ export class InternalMapVXMap extends Loggeable {
         this.watchPositionID = undefined;
         this.onFloorChange = mapConfig.onFloorChange;
         this.onParentPlaceChange = mapConfig.onParentPlaceChange;
-        // Merge tile cache config with defaults
-        this.tileCacheConfig = Object.assign(Object.assign({}, DEFAULT_TILE_CACHE_CONFIG), mapConfig.tileCache);
+        this.tileCacheConfig = (() => {
+            const merged = Object.assign(Object.assign({}, DEFAULT_TILE_CACHE_CONFIG), mapConfig.tileCache);
+            merged.maxTiles = Math.min(merged.maxTiles, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP);
+            return merged;
+        })();
         if (mapConfig.parentPlaceId != null) {
             this.initialPlaceDetailSetUp(mapConfig.parentPlaceId, mapConfig.authToken);
         }
@@ -235,28 +281,17 @@ export class InternalMapVXMap extends Loggeable {
             .catch(console.error);
     }
     onMapStyleLoaded(mapConfig, container, style) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         // Determine if service worker caching should be enabled
         const useServiceWorkerCaching = this.tileCacheConfig.enabled && this.tileCacheConfig.persistToServiceWorker;
-        // Register cached-tile protocol only if service worker caching is enabled
         if (useServiceWorkerCaching) {
-            registerCachedTileProtocol();
+            registerCachedTileProtocol(this.tileCacheConfig.maxConcurrentTileFetches);
         }
         // Transform tile URLs only if service worker caching is enabled
         const finalStyle = useServiceWorkerCaching ? this.transformStyleForCaching(style) : style;
-        const mapOptions = {
-            container,
-            style: finalStyle,
-            center: mapConfig.center,
-            zoom: mapConfig.zoom,
-            pitch: (_a = mapConfig.pitch) !== null && _a !== void 0 ? _a : 0,
-            attributionControl: false,
-            maplibreLogo: false,
-            bearingSnap: (_b = mapConfig.bearingSnap) !== null && _b !== void 0 ? _b : 0,
-            cancelPendingTileRequestsWhileZooming: false,
+        const mapOptions = Object.assign({ container, style: finalStyle, center: mapConfig.center, zoom: mapConfig.zoom, pitch: (_a = mapConfig.pitch) !== null && _a !== void 0 ? _a : 0, attributionControl: false, maplibreLogo: false, bearingSnap: (_b = mapConfig.bearingSnap) !== null && _b !== void 0 ? _b : 0, cancelPendingTileRequestsWhileZooming: true, 
             // Use configured maxTiles for MapLibre's memory cache
-            maxTileCacheSize: this.tileCacheConfig.maxTiles,
-        };
+            maxTileCacheSize: this.tileCacheConfig.maxTiles }, buildInteractionOptions(mapConfig));
         if (mapConfig.maxZoom)
             mapOptions.maxZoom = mapConfig.maxZoom;
         if (mapConfig.minZoom)
@@ -266,10 +301,15 @@ export class InternalMapVXMap extends Loggeable {
             mapOptions.maxBounds = new LngLatBounds([boundingBox[0].lng, boundingBox[0].lat], [boundingBox[1].lng, boundingBox[1].lat]);
         }
         this.map = new Map(mapOptions);
+        // When rotation is disabled we still want pinch-to-zoom to work, so the
+        // two-finger rotation is turned off here instead of via the constructor.
+        if (shouldDisableTouchRotation(mapConfig)) {
+            (_d = (_c = this.map.touchZoomRotate) === null || _c === void 0 ? void 0 : _c.disableRotation) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
         this.map.addControl(new NavigationControl({
             showCompass: mapConfig.showCompass !== undefined ? mapConfig.showCompass : true,
             showZoom: mapConfig.showZoom !== undefined ? mapConfig.showZoom : true,
-        }), (_c = mapConfig.navigationPosition) !== null && _c !== void 0 ? _c : "top-right");
+        }), (_e = mapConfig.navigationPosition) !== null && _e !== void 0 ? _e : "top-right");
         this.map.on("load", () => {
             var _a;
             this.whenStyleUpdates(style);
@@ -279,6 +319,12 @@ export class InternalMapVXMap extends Loggeable {
             this.onHover();
             this.subscribeToFailedTiles();
         });
+        // Self-healing for circles: a full style reload wipes custom sources and
+        // layers, and not every restyle path goes through whenStyleUpdates.
+        this.map.on("styledata", () => {
+            if (this.circles.length > 0)
+                this.ensureCircleLayers();
+        });
         this.map.on("zoomend", () => {
             var _a;
             (_a = mapConfig.onZoomEnd) === null || _a === void 0 ? void 0 : _a.call(mapConfig, this.getZoomLevel());
@@ -397,6 +443,7 @@ export class InternalMapVXMap extends Loggeable {
         return Object.assign(Object.assign({}, segmentation), { token: this.token, parentPlaceId: (_a = this.parentPlaceId) !== null && _a !== void 0 ? _a : "None" });
     }
     destroyMap() {
+        this.circles = [];
         this.map.remove();
         this.unsubscribeFromFailedTiles();
     }
@@ -480,6 +527,19 @@ export class InternalMapVXMap extends Loggeable {
     }
     setLang(lang) {
         this.repository.setLang(lang);
+        if (rtlLanguages.includes(lang)) {
+            this.setRTLSupport();
+        }
+        // setLayersForLanguage reads this.map.getStyle()?.layers, which is empty
+        // until the style finishes loading. If setLang is called right after
+        // createMap (before the "load" event), apply it once the style is ready
+        // so the language change is not silently dropped.
+        if (this.map.isStyleLoaded()) {
+            this.setLayersForLanguage(lang);
+        }
+        else {
+            this.map.once("load", () => this.setLayersForLanguage(lang));
+        }
     }
     setParentPlace(place, updateStyle, onStyleReady) {
         this.changeParentPlaceTo(place, updateStyle, onStyleReady);
@@ -500,6 +560,7 @@ export class InternalMapVXMap extends Loggeable {
             this.setBaseFilters(newStyle);
         }
         this.routeController.addSourcesAndLayers();
+        this.refreshCircles();
         this.filterByFloorKey(this.currentFloor);
     }
     addMarker(marker) {
@@ -605,6 +666,320 @@ export class InternalMapVXMap extends Loggeable {
             throw new Error("Failed to remove all markers");
         }
     }
+    addCircle(circle) {
+        try {
+            // Check if a circle with the same ID already exists and replace it
+            if (circle.id) {
+                this.circles = this.circles.filter((c) => c.id !== circle.id);
+            }
+            // resolveCircleConfig validates radiusMeters and coordinates
+            const record = resolveCircleConfig(circle);
+            this.circles.push(record);
+            this.refreshCircles();
+            this.logEvent("addCircle");
+            return record.id;
+        }
+        catch (error) {
+            throw new Error(`Failed to add circle: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    updateCircle(circleConfig) {
+        try {
+            const index = this.circles.findIndex((c) => c.id === circleConfig.id);
+            if (index === -1)
+                return null;
+            // resolveCircleConfig validates radiusMeters and coordinates
+            this.circles[index] = resolveCircleConfig(circleConfig, this.circles[index].hidden);
+            this.refreshCircles();
+            this.logEvent("updateCircle");
+            return this.circles[index].id;
+        }
+        catch (error) {
+            throw new Error(`Failed to update circle: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    getCircle(circleId) {
+        const circle = this.circles.find((c) => c.id === circleId);
+        return circle ? cloneCircleRecord(circle) : undefined;
+    }
+    getCircles() {
+        return this.circles.map(cloneCircleRecord);
+    }
+    hasCircle(circleId) {
+        return this.circles.some((c) => c.id === circleId);
+    }
+    updateCirclePosition(circleId, center, radiusMeters) {
+        try {
+            const circle = this.circles.find((c) => c.id === circleId);
+            if (circle === undefined)
+                return false;
+            // Validate inputs before modifying
+            if (!center) {
+                throw new Error("Circle center is required");
+            }
+            const { lat, lng } = center;
+            if (!Number.isFinite(lat) || lat < -90 || lat > 90) {
+                throw new Error(`Invalid latitude: ${lat}. Must be between -90 and 90.`);
+            }
+            if (!Number.isFinite(lng) || lng < -180 || lng > 180) {
+                throw new Error(`Invalid longitude: ${lng}. Must be between -180 and 180.`);
+            }
+            if (radiusMeters !== undefined) {
+                if (!Number.isFinite(radiusMeters) || radiusMeters <= 0) {
+                    throw new Error(`Invalid radiusMeters: ${radiusMeters}. Must be a positive finite number.`);
+                }
+            }
+            circle.coordinate = { lat: center.lat, lng: center.lng };
+            if (radiusMeters !== undefined) {
+                circle.radiusMeters = radiusMeters;
+            }
+            this.refreshCircles();
+            this.logEvent("updateCirclePosition");
+            return true;
+        }
+        catch (error) {
+            throw new Error(`Failed to update circle position: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    updateCircleStyle(circleId, style) {
+        try {
+            const circle = this.circles.find((c) => c.id === circleId);
+            if (circle === undefined)
+                return false;
+            // Update only style properties, clamp opacities
+            if (style.fillColor !== undefined)
+                circle.fillColor = style.fillColor;
+            if (style.fillOpacity !== undefined)
+                circle.fillOpacity = Math.max(0, Math.min(1, style.fillOpacity));
+            if (style.strokeColor !== undefined)
+                circle.strokeColor = style.strokeColor;
+            if (style.strokeWidth !== undefined)
+                circle.strokeWidth = style.strokeWidth;
+            if (style.strokeOpacity !== undefined)
+                circle.strokeOpacity = Math.max(0, Math.min(1, style.strokeOpacity));
+            this.refreshCircles();
+            this.logEvent("updateCircleStyle");
+            return true;
+        }
+        catch (error) {
+            throw new Error(`Failed to update circle style: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    removeCircle(circleId) {
+        try {
+            this.circles = this.circles.filter((c) => c.id !== circleId);
+            this.refreshCircles();
+            this.logEvent("removeCircle");
+        }
+        catch (error) {
+            throw new Error("Failed to remove circle");
+        }
+    }
+    removeAllCircles() {
+        try {
+            this.circles = [];
+            this.refreshCircles();
+            this.logEvent("removeAllCircles");
+        }
+        catch (error) {
+            throw new Error("Failed to remove all circles");
+        }
+    }
+    showCircle(circleId) {
+        try {
+            const circle = this.circles.find((c) => c.id === circleId);
+            if (circle === undefined) {
+                return false;
+            }
+            circle.hidden = false;
+            this.refreshCircles();
+            this.logEvent("showCircle");
+            return true;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    hideCircle(circleId) {
+        try {
+            const circle = this.circles.find((c) => c.id === circleId);
+            if (circle === undefined) {
+                return false;
+            }
+            circle.hidden = true;
+            this.refreshCircles();
+            this.logEvent("hideCircle");
+            return true;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    /**
+     * Builds the GeoJSON FeatureCollection for every currently visible circle.
+     * Visibility mirrors marker semantics: a circle with a floor is shown only
+     * while that floor is displayed, and a circle without a floor is shown only
+     * in outdoor contexts. Hidden circles are always omitted.
+     */
+    circleFeatureCollection() {
+        var _a, _b, _c;
+        const floorId = (_a = this.currentFloor) !== null && _a !== void 0 ? _a : "";
+        const isOutdoor = !this.parentPlace ||
+            ((_c = (_b = this.innerFloors.find((floor) => floor.key === floorId)) === null || _b === void 0 ? void 0 : _b.reachableFromGPS) !== null && _c !== void 0 ? _c : false);
+        const features = this.circles
+            .filter((circle) => {
+            var _a;
+            if (circle.hidden)
+                return false;
+            const circleFloor = (_a = circle.floorId) !== null && _a !== void 0 ? _a : "";
+            return circleFloor === floorId || (isOutdoor && circleFloor === "");
+        })
+            .map((circle) => ({
+            type: "Feature",
+            properties: {
+                id: circle.id,
+                fillColor: circle.fillColor,
+                fillOpacity: circle.fillOpacity,
+                strokeColor: circle.strokeColor,
+                strokeWidth: circle.strokeWidth,
+                strokeOpacity: circle.strokeOpacity,
+                renderOrder: circle.renderOrder,
+            },
+            geometry: {
+                type: "Polygon",
+                coordinates: [
+                    circleRing(circle.coordinate.lng, circle.coordinate.lat, circle.radiusMeters),
+                ],
+            },
+        }));
+        return { type: "FeatureCollection", features };
+    }
+    /**
+     * Idempotently adds the shared circle source and its fill/line layers.
+     * Layers are inserted below the first symbol layer so place labels and
+     * markers stay readable above the translucent fill. Safe to call at any
+     * time: a style that is still loading simply rejects the calls, and the
+     * styledata listener retries once the style is ready.
+     */
+    /**
+     * Resolves the layer id to insert circle layers before, for one render
+     * order. `undefined` means "append on top".
+     *
+     * `aboveBasemap` finds the topmost non-symbol layer of the style and
+     * inserts before the first symbol layer that follows it. On indoor styles
+     * the floor-plate and building polygons are ordered after the first symbol
+     * layer, so anchoring on the topmost geometry layer — instead of the first
+     * symbol layer — guarantees circles are never occluded by basemap fills
+     * while still rendering below the labels that follow them.
+     */
+    circleBeforeIdFor(order) {
+        var _a, _b, _c, _d;
+        if (order === "top")
+            return undefined;
+        const layers = ((_b = (_a = this.map.getStyle()) === null || _a === void 0 ? void 0 : _a.layers) !== null && _b !== void 0 ? _b : []).filter((layer) => !isCircleLayerId(layer.id));
+        if (order === "belowLabels") {
+            return (_c = layers.find((layer) => layer.type === "symbol")) === null || _c === void 0 ? void 0 : _c.id;
+        }
+        // aboveBasemap
+        let lastNonSymbolIndex = -1;
+        layers.forEach((layer, index) => {
+            if (layer.type !== "symbol")
+                lastNonSymbolIndex = index;
+        });
+        return (_d = layers.slice(lastNonSymbolIndex + 1).find((layer) => layer.type === "symbol")) === null || _d === void 0 ? void 0 : _d.id;
+    }
+    /**
+     * Idempotently ensures the shared circle source and one fill/line layer
+     * pair per render order in use, at the placement that order requires.
+     * Placement is recomputed and re-asserted (via moveLayer) on every call,
+     * so circles regain their correct z-order after any style reload or
+     * floor/parent-place change. Safe to call at any time: a style that is
+     * still loading simply rejects the calls, and the styledata listener
+     * retries once the style is ready.
+     */
+    ensureCircleLayers() {
+        if (!this.map)
+            return;
+        try {
+            if (!this.map.getSource(CIRCLE_SOURCE_ID)) {
+                this.map.addSource(CIRCLE_SOURCE_ID, {
+                    type: "geojson",
+                    data: this.circleFeatureCollection(),
+                });
+            }
+            const ordersInUse = new Set(this.circles.map((c) => c.renderOrder));
+            // Always keep the default bucket alive so an empty map still renders
+            // newly added circles without a layer rebuild
+            ordersInUse.add("aboveBasemap");
+            // Process buckets lowest-first (CIRCLE_RENDER_ORDERS is canonical):
+            // when two buckets resolve to the same anchor, each addLayer/moveLayer
+            // lands immediately before it, so a bucket processed later paints above
+            // the ones processed earlier. Canonical order keeps
+            // belowLabels < aboveBasemap < top regardless of circle insertion order.
+            for (const order of CIRCLE_RENDER_ORDERS) {
+                if (!ordersInUse.has(order))
+                    continue;
+                const ids = circleLayerIdsFor(order);
+                const beforeId = this.circleBeforeIdFor(order);
+                const orderFilter = ["==", ["get", "renderOrder"], order];
+                if (!this.map.getLayer(ids.fill)) {
+                    const fillLayer = {
+                        id: ids.fill,
+                        type: "fill",
+                        source: CIRCLE_SOURCE_ID,
+                        filter: orderFilter,
+                        paint: {
+                            "fill-color": ["get", "fillColor"],
+                            "fill-opacity": ["get", "fillOpacity"],
+                        },
+                    };
+                    this.map.addLayer(fillLayer, beforeId);
+                }
+                else {
+                    this.map.moveLayer(ids.fill, beforeId);
+                }
+                if (!this.map.getLayer(ids.line)) {
+                    const lineLayer = {
+                        id: ids.line,
+                        type: "line",
+                        source: CIRCLE_SOURCE_ID,
+                        filter: orderFilter,
+                        paint: {
+                            "line-color": ["get", "strokeColor"],
+                            "line-width": ["get", "strokeWidth"],
+                            "line-opacity": ["get", "strokeOpacity"],
+                        },
+                    };
+                    this.map.addLayer(lineLayer, beforeId);
+                }
+                else {
+                    this.map.moveLayer(ids.line, beforeId);
+                }
+            }
+        }
+        catch (error) {
+            // Style may not be loaded yet; the styledata listener re-adds the layers
+        }
+    }
+    /**
+     * Re-renders all circles: ensures the source and layers exist, then pushes
+     * the current FeatureCollection. Called after every mutation of the circle
+     * list, on floor changes, and when the map style reloads.
+     */
+    refreshCircles() {
+        if (!this.map)
+            return;
+        if (this.circles.length === 0 && !this.map.getSource(CIRCLE_SOURCE_ID))
+            return;
+        this.ensureCircleLayers();
+        try {
+            const source = this.map.getSource(CIRCLE_SOURCE_ID);
+            source === null || source === void 0 ? void 0 : source.setData(this.circleFeatureCollection());
+        }
+        catch (error) {
+            // Source may not exist while a new style is loading
+        }
+    }
     /**
      * Use it to change the current layer
      * @param floorKey floor id
@@ -617,6 +992,7 @@ export class InternalMapVXMap extends Loggeable {
         }
         this.updateFiltersTo(floorKeyString);
         this.updateMarkersTo(floorKeyString);
+        this.refreshCircles();
         this.routeController.updateRouteLayers(floorKeyString);
         this.routeController.updateRouteMarkerVisibility(floorKeyString);
     }
@@ -722,6 +1098,49 @@ export class InternalMapVXMap extends Loggeable {
         this.map.setMinZoom(zoomLvl);
         (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
     }
+    setBearing(degrees, options) {
+        var _a;
+        if (!Number.isFinite(degrees))
+            return;
+        if (options === null || options === void 0 ? void 0 : options.animate) {
+            if (options.onComplete)
+                void this.map.once("moveend", options.onComplete);
+            this.map.rotateTo(degrees, { duration: 600 });
+            return;
+        }
+        this.map.setBearing(degrees);
+        (_a = options === null || options === void 0 ? void 0 : options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    setRotationEnabled(enabled) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (enabled) {
+            (_b = (_a = this.map.dragRotate) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_d = (_c = this.map.touchZoomRotate) === null || _c === void 0 ? void 0 : _c.enableRotation) === null || _d === void 0 ? void 0 : _d.call(_c);
+            (_f = (_e = this.map.keyboard) === null || _e === void 0 ? void 0 : _e.enable) === null || _f === void 0 ? void 0 : _f.call(_e);
+        }
+        else {
+            (_h = (_g = this.map.dragRotate) === null || _g === void 0 ? void 0 : _g.disable) === null || _h === void 0 ? void 0 : _h.call(_g);
+            (_k = (_j = this.map.touchZoomRotate) === null || _j === void 0 ? void 0 : _j.disableRotation) === null || _k === void 0 ? void 0 : _k.call(_j);
+        }
+    }
+    setPanEnabled(enabled) {
+        var _a, _b, _c, _d;
+        if (enabled) {
+            (_b = (_a = this.map.dragPan) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else {
+            (_d = (_c = this.map.dragPan) === null || _c === void 0 ? void 0 : _c.disable) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+    setScrollZoomEnabled(enabled) {
+        var _a, _b, _c, _d;
+        if (enabled) {
+            (_b = (_a = this.map.scrollZoom) === null || _a === void 0 ? void 0 : _a.enable) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else {
+            (_d = (_c = this.map.scrollZoom) === null || _c === void 0 ? void 0 : _c.disable) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
     isInsideBounds(point) {
         const mapBounds = this.map.getMaxBounds();
         if (mapBounds != null) {
@@ -840,7 +1259,7 @@ export class InternalMapVXMap extends Loggeable {
             throw new Error("Error: Failed to add route");
         }
     }
-    updateRouteProgress(routeId, position, behindStyle = { type: "Solid", color: "#757575" }) {
+    updateRouteProgress(routeId, position, behindStyle = { type: "Solid", color: "#276EF1" }) {
         try {
             const behindConfig = new InternalDrawRouteConfiguration({
                 routeStyle: behindStyle,
@@ -890,13 +1309,12 @@ export class InternalMapVXMap extends Loggeable {
             if (pointedPlace !== undefined) {
                 new maplibregl.Popup()
                     .setLngLat(pointedPlace.position)
-                    .setHTML(pointedPlace.title)
+                    .setText(pointedPlace.title)
                     .addTo(this.map);
             }
         }
         return "";
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     removePopOver(id) {
         throw Error("Not implemented");
     }
@@ -1019,7 +1437,7 @@ export class InternalMapVXMap extends Loggeable {
                 filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
                 paint: {
                     "fill-extrusion-height": 2.5,
-                    "fill-extrusion-color": "#276EF1",
+                    "fill-extrusion-color": MAPVX_BRAND_COLOR,
                     "fill-extrusion-opacity": 0.8,
                 },
             };
@@ -1033,7 +1451,7 @@ export class InternalMapVXMap extends Loggeable {
                 "source-layer": "area",
                 filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
                 paint: {
-                    "fill-color": "#276EF1",
+                    "fill-color": MAPVX_BRAND_COLOR,
                 },
             };
             this.map.addLayer(layer);
@@ -1291,7 +1709,7 @@ export class InternalMapVXMap extends Loggeable {
             "source-layer": "area",
             filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
             paint: {
-                "line-color": "#276EF1",
+                "line-color": MAPVX_BRAND_COLOR,
                 "line-width": 4,
             },
         };