@mapvx/web-js 1.1.0 → 1.2.0

package/dist/umd/index.js

@@ -5721,6 +5721,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   AnnounceFormat: () => (/* reexport */ AnnounceFormat),
   Banner: () => (/* reexport */ Banner),
+  CIRCLE_DEFAULTS: () => (/* reexport */ CIRCLE_DEFAULTS),
   CacheManager: () => (/* reexport */ CacheManager),
   CountlyLogger: () => (/* reexport */ CountlyLogger),
   DEFAULT_CACHE_CONFIGS: () => (/* reexport */ DEFAULT_CACHE_CONFIGS),
@@ -5728,6 +5729,8 @@ __webpack_require__.d(__webpack_exports__, {
   FetchHttpClient: () => (/* reexport */ FetchHttpClient),
   Institution: () => (/* reexport */ Institution),
   LRUCache: () => (/* reexport */ LRUCache),
+  MAPVX_BRAND_COLOR: () => (/* reexport */ MAPVX_BRAND_COLOR),
+  MAPVX_DEFAULT_PRECONNECT_HOSTS: () => (/* reexport */ MAPVX_DEFAULT_PRECONNECT_HOSTS),
   MVXPlace: () => (/* reexport */ place_MVXPlace),
   MVXRoute: () => (/* reexport */ MVXRoute),
   MVXRouteLeg: () => (/* reexport */ MVXRouteLeg),
@@ -5738,11 +5741,14 @@ __webpack_require__.d(__webpack_exports__, {
   TextPosition: () => (/* reexport */ TextPosition),
   TransportationMode: () => (/* reexport */ TransportationMode),
   UnitSystem: () => (/* reexport */ UnitSystem),
+  circleRing: () => (/* reexport */ circleRing),
   createRouteAnimationIconDataUrl: () => (/* reexport */ createRouteAnimationIconDataUrl),
   initializeSDK: () => (/* reexport */ initializeSDK),
+  injectPreconnects: () => (/* reexport */ injectPreconnects),
   isBasicWithIcon: () => (/* reexport */ isBasicWithIcon),
   isBasicWithLogo: () => (/* reexport */ isBasicWithLogo),
   isMapVxRequestHostname: () => (/* reexport */ isMapVxRequestHostname),
+  isValidCircleConfig: () => (/* reexport */ isValidCircleConfig),
   loadCustomization: () => (/* reexport */ loadCustomization),
   loadStyles: () => (/* binding */ loadStyles)
 });
@@ -6784,18 +6790,26 @@ var countly_default = /*#__PURE__*/__webpack_require__.n(countly);
 var rollbar_umd_min = __webpack_require__(916);
 var rollbar_umd_min_default = /*#__PURE__*/__webpack_require__.n(rollbar_umd_min);
 ;// ./src/logger/rollbar.ts
+// VERSION is a webpack DefinePlugin constant, substituted only in the UMD
+// bundle. The tsc-built ES/CJS outputs keep it as a bare global, so the
+// typeof guard makes the lookup safe everywhere; the version placeholder is
+// replaced with the package version by scripts/inject-build-defines.js.
+var SDK_VERSION =  true ? "1.2.0" : 0;
 var _rollbarConfig = {
-  accessToken: "1e7e62a3edc14868b4098d653d0f33b9",
-  captureUncaught: true,
-  captureUnhandledRejections: true,
+  accessToken: "28279d52df43411ebd138c2bee0ab1df",
+  // Only report what the SDK logs explicitly via logError. Capturing every
+  // uncaught error / unhandled rejection on the host page floods Rollbar
+  // with items from third-party code (e.g. Countly, the host app itself)
+  // that the SDK does not own.
+  captureUncaught: false,
+  captureUnhandledRejections: false,
+  // Drop anything below error level (debug/info/warning).
+  reportLevel: "error",
   payload: {
-    environment: "testenv",
-    // context: 'rollbar/test'
+    environment: "production",
     client: {
       javascript: {
-        code_version: "1.0"
-        // source_map_enabled: true,
-        // guess_uncaught_frames: true
+        code_version: SDK_VERSION
       }
     }
   }
@@ -6822,19 +6836,30 @@ var logger_countly = {
   apiKey: "f0c8d3b96d336e857a8628f49dd1baf7d7add0e9",
   url: "https://countly.lazarillo.app"
 };
+// DEBUG and VERSION are webpack DefinePlugin constants, substituted only in
+// the UMD bundle. The tsc-built ES/CJS outputs keep them as bare globals, so
+// reading them directly throws ReferenceError in consumers of those builds.
+// The typeof guards make the lookup safe everywhere; the version placeholder
+// is replaced with the package version by scripts/inject-build-defines.js.
+var IS_DEBUG =  true ? false : 0;
+var logger_SDK_VERSION =  true ? "1.2.0" : 0;
 var Logger = /*#__PURE__*/function () {
   function Logger() {
     logger_classCallCheck(this, Logger);
-    if (false) // removed by dead control flow
-{} else {
+    if (IS_DEBUG) {
+      console.log("Initializing Countly");
+      this.countly = {
+        q: []
+      };
+    } else {
       var _Countly$q;
       this.rollbar = new (rollbar_umd_min_default())(_rollbarConfig);
       countly_default().init({
         app_key: logger_countly.apiKey,
         url: logger_countly.url,
-        app_version: "1.1.0",
+        app_version: logger_SDK_VERSION,
         session_update: 10,
-        debug: false,
+        debug: IS_DEBUG,
         require_consent: false,
         namespace: "SDK JS"
       });
@@ -6846,8 +6871,9 @@ var Logger = /*#__PURE__*/function () {
   return logger_createClass(Logger, [{
     key: "logEvent",
     value: function logEvent(eventName, eventSegmentation) {
-      if (false) // removed by dead control flow
-{} else {
+      if (IS_DEBUG) {
+        console.log(eventName, eventSegmentation);
+      } else {
         this.countly.q.push(["add_event", {
           key: eventName,
           segmentation: eventSegmentation
@@ -6857,14 +6883,18 @@ var Logger = /*#__PURE__*/function () {
   }, {
     key: "logDebug",
     value: function logDebug() {
-      if (false) // removed by dead control flow
-{ var _console; }
+      if (IS_DEBUG) {
+        var _console;
+        (_console = console).log.apply(_console, arguments);
+      }
     }
   }, {
     key: "logWarning",
     value: function logWarning() {
-      if (false) // removed by dead control flow
-{ var _console2; }
+      if (IS_DEBUG) {
+        var _console2;
+        (_console2 = console).warn.apply(_console2, arguments);
+      }
     }
   }, {
     key: "logError",
@@ -6872,8 +6902,10 @@ var Logger = /*#__PURE__*/function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      if (false) // removed by dead control flow
-{ var _console3; } else {
+      if (IS_DEBUG) {
+        var _console3;
+        (_console3 = console).error.apply(_console3, args);
+      } else {
         var _this$rollbar;
         (_this$rollbar = this.rollbar) === null || _this$rollbar === void 0 || _this$rollbar.error.apply(_this$rollbar, args);
       }
@@ -6882,8 +6914,7 @@ var Logger = /*#__PURE__*/function () {
     key: "debugLog",
     value: function debugLog() {
       var _console4;
-      if (false) // removed by dead control flow
-{}
+      if (IS_DEBUG) (_console4 = console).log.apply(_console4, arguments);
     }
   }], [{
     key: "getInstance",
@@ -7569,6 +7600,9 @@ var MarkerAttribute = /*#__PURE__*/function (_Marker) {
     _this.setLngLat([markerConfig.coordinate.lng, markerConfig.coordinate.lat]);
     _this.setRotationAlignment((_markerConfig$rotatio = markerConfig.rotationAlignment) !== null && _markerConfig$rotatio !== void 0 ? _markerConfig$rotatio : "viewport");
     _this.setPitchAlignment("viewport");
+    if (typeof markerConfig.rotation === "number") {
+      _this.setRotation(markerConfig.rotation);
+    }
     _this.id = (_markerConfig$id = markerConfig.id) !== null && _markerConfig$id !== void 0 ? _markerConfig$id : generateHexadecimalKey();
     _this.coordinate = markerConfig.coordinate;
     _this.floorId = (_markerConfig$floorId = markerConfig.floorId) !== null && _markerConfig$floorId !== void 0 ? _markerConfig$floorId : "";
@@ -7625,6 +7659,9 @@ var MarkerAttribute = /*#__PURE__*/function (_Marker) {
       }
       this.setRotationAlignment((_marker$rotationAlign = marker.rotationAlignment) !== null && _marker$rotationAlign !== void 0 ? _marker$rotationAlign : "viewport");
       this.setPitchAlignment("viewport");
+      if (typeof marker.rotation === "number") {
+        this.setRotation(marker.rotation);
+      }
     }
 
     /**
@@ -9591,6 +9628,230 @@ var DEFAULT_TILE_CACHE_CONFIG = {
  * @property apiUrl - (Optional) Injected by SDK when creating map; base API URL for map requests.
  * @property mapvxRequestContext - (Optional) Injected by SDK when creating map; context sent as headers to public-api.mapvx.com.
  */
+;// ./src/domain/models/circle.ts
+function circle_typeof(o) { "@babel/helpers - typeof"; return circle_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, circle_typeof(o); }
+
+/**
+ * MapVX brand color used as the default for circle styling and other
+ * SDK-drawn overlays (colored places, borders).
+ *
+ * @group Circles
+ */
+var MAPVX_BRAND_COLOR = "#276EF1";
+
+/**
+ * Default styling values applied to a circle when the corresponding
+ * {@link CircleConfig} fields are omitted.
+ *
+ * @group Circles
+ */
+var CIRCLE_DEFAULTS = {
+  fillColor: MAPVX_BRAND_COLOR,
+  fillOpacity: 0.14,
+  strokeColor: MAPVX_BRAND_COLOR,
+  strokeWidth: 2,
+  strokeOpacity: 0.65
+};
+
+/**
+ * Represents the configuration for the creation of a metric radius circle on a map.
+ * The radius is expressed in meters (geographic), so the drawn circle stays
+ * metrically accurate at every zoom level.
+ *
+ * @example
+ * ```typescript
+ * const circleConfig: CircleConfig = {
+ *   id: "geofence-1",
+ *   coordinate: { lat: 40.7128, lng: -74.0060 },
+ *   radiusMeters: 150,
+ *   fillOpacity: 0.2,
+ * };
+ * ```
+ *
+ * @group Circles
+ */
+
+/**
+ * Internal resolved representation of a circle kept by the map.
+ * Holds the full configuration with defaults applied, plus visibility state.
+ *
+ * Unlike markers, the hidden flag persists across floor changes and map
+ * restyles: a circle hidden via `hideCircle` stays hidden until `showCircle`.
+ */
+
+/**
+ * Validates that a radius in meters is positive and finite.
+ * @param radius The radius value to validate.
+ * @throws {Error} If radius is ≤ 0 or not finite (NaN/Infinity).
+ * @internal
+ */
+function validateRadiusMeters(radius) {
+  if (!Number.isFinite(radius) || radius <= 0) {
+    throw new Error("Invalid radiusMeters: ".concat(radius, ". Must be a positive finite number."));
+  }
+}
+
+/**
+ * Validates that a coordinate is within valid geographic bounds.
+ * @param coord The coordinate to validate.
+ * @throws {Error} If latitude is outside [-90, 90] or longitude outside [-180, 180], or not finite.
+ * @internal
+ */
+function validateCoordinate(coord) {
+  if (coord == null || circle_typeof(coord) !== "object") {
+    throw new Error("Invalid coordinate: expected an object with lat and lng properties.");
+  }
+  if (!Number.isFinite(coord.lat) || !Number.isFinite(coord.lng) || coord.lat < -90 || coord.lat > 90 || coord.lng < -180 || coord.lng > 180) {
+    throw new Error("Invalid coordinate: lat=".concat(coord.lat, ", lng=").concat(coord.lng, ". ") + "latitude must be in [-90, 90], longitude in [-180, 180], and both finite.");
+  }
+}
+
+/**
+ * Clamps an opacity value to the valid range [0, 1].
+ * @param opacity The opacity value to clamp.
+ * @param defaultValue Value to use if opacity is not a finite number.
+ * @returns The clamped opacity value.
+ * @internal
+ */
+function clampOpacity(opacity, defaultValue) {
+  if (!Number.isFinite(opacity)) return defaultValue;
+  return Math.max(0, Math.min(1, opacity));
+}
+
+/**
+ * Type guard for validating circle configurations without throwing.
+ * Returns true if the configuration is valid and can be added to the map.
+ *
+ * @param config Configuration to validate.
+ * @returns True if config is a valid CircleConfig, false otherwise.
+ *
+ * @example
+ * ```typescript
+ * if (isValidCircleConfig(userInput)) {
+ *   map.addCircle(userInput);
+ * } else {
+ *   console.error('Invalid circle configuration');
+ * }
+ * ```
+ *
+ * @group Circles
+ */
+function isValidCircleConfig(config) {
+  if (config === null || config === undefined || circle_typeof(config) !== "object") {
+    return false;
+  }
+  var c = config;
+  if (circle_typeof(c.coordinate) !== "object" || c.coordinate === null) return false;
+  var coord = c.coordinate;
+  if (typeof coord.lat !== "number" || typeof coord.lng !== "number" || !Number.isFinite(coord.lat) || !Number.isFinite(coord.lng) || coord.lat < -90 || coord.lat > 90 || coord.lng < -180 || coord.lng > 180) {
+    return false;
+  }
+  if (typeof c.radiusMeters !== "number" || !Number.isFinite(c.radiusMeters) || c.radiusMeters <= 0) {
+    return false;
+  }
+  if (c.id !== undefined && typeof c.id !== "string") return false;
+  if (c.fillColor !== undefined && typeof c.fillColor !== "string") return false;
+  if (c.fillOpacity !== undefined) {
+    if (typeof c.fillOpacity !== "number" || !Number.isFinite(c.fillOpacity)) return false;
+  }
+  if (c.strokeColor !== undefined && typeof c.strokeColor !== "string") return false;
+  if (c.strokeWidth !== undefined) {
+    if (typeof c.strokeWidth !== "number" || !Number.isFinite(c.strokeWidth)) return false;
+  }
+  if (c.strokeOpacity !== undefined) {
+    if (typeof c.strokeOpacity !== "number" || !Number.isFinite(c.strokeOpacity)) return false;
+  }
+  if (c.floorId !== undefined && typeof c.floorId !== "string") return false;
+  return true;
+}
+
+/**
+ * Resolves a {@link CircleConfig} into a {@link CircleRecord}, applying
+ * default styling, generating an id when one is not provided, and validating inputs.
+ *
+ * @param config Circle configuration provided by the SDK consumer.
+ * @param hidden Initial hidden state, defaults to visible.
+ * @returns The resolved circle record ready to be stored and rendered.
+ * @throws {Error} If radiusMeters is ≤ 0, not finite, or coordinates are invalid.
+ *
+ * @group Circles
+ */
+function resolveCircleConfig(config) {
+  var _config$id, _config$fillColor, _config$strokeColor, _config$strokeWidth;
+  var hidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  validateRadiusMeters(config.radiusMeters);
+  validateCoordinate(config.coordinate);
+  return {
+    id: (_config$id = config.id) !== null && _config$id !== void 0 ? _config$id : generateHexadecimalKey(),
+    coordinate: config.coordinate,
+    radiusMeters: config.radiusMeters,
+    fillColor: (_config$fillColor = config.fillColor) !== null && _config$fillColor !== void 0 ? _config$fillColor : CIRCLE_DEFAULTS.fillColor,
+    fillOpacity: clampOpacity(config.fillOpacity, CIRCLE_DEFAULTS.fillOpacity),
+    strokeColor: (_config$strokeColor = config.strokeColor) !== null && _config$strokeColor !== void 0 ? _config$strokeColor : CIRCLE_DEFAULTS.strokeColor,
+    strokeWidth: (_config$strokeWidth = config.strokeWidth) !== null && _config$strokeWidth !== void 0 ? _config$strokeWidth : CIRCLE_DEFAULTS.strokeWidth,
+    strokeOpacity: clampOpacity(config.strokeOpacity, CIRCLE_DEFAULTS.strokeOpacity),
+    floorId: config.floorId,
+    hidden: hidden
+  };
+}
+
+/**
+ * Builds a closed GeoJSON polygon ring approximating a geographic circle.
+ *
+ * The ring is computed with an equirectangular approximation: meters are
+ * converted to degrees independently per axis, with the longitude scale
+ * corrected by the cosine of the latitude. For the radii the SDK works with
+ * (tens to hundreds of meters) the metric error is negligible (≤1%) at any latitude
+ * where the projection is defined. At extreme polar latitudes, the approximation
+ * breaks down, so circles near poles (|lat| > 85°) should be used with caution.
+ *
+ * @param lng Longitude of the circle center in degrees.
+ * @param lat Latitude of the circle center in degrees.
+ * @param radiusMeters Radius of the circle in meters. Must be positive and finite.
+ * @param points Number of segments in the ring. Defaults to 64. Non-integer
+ *               values are floored and the count is clamped to a minimum of 3,
+ *               the smallest valid GeoJSON linear ring; non-finite values fall
+ *               back to the default.
+ * @returns A closed ring of `[lng, lat]` positions (first equals last).
+ *
+ * @example
+ * ```typescript
+ * import { circleRing } from '@mapvx/web-js';
+ *
+ * // Create a 150-meter radius circle ring
+ * const ring = circleRing(-74.0060, 40.7128, 150);
+ * const polygon = { type: "Polygon", coordinates: [ring] };
+ *
+ * // Custom segments (32 instead of 64) for lower resolution
+ * const coarseRing = circleRing(-74.0060, 40.7128, 150, 32);
+ * ```
+ *
+ * @note Equirectangular approximation is accurate for radii up to ~500 km and
+ *       latitudes between approximately ±80°. Beyond these limits, visual
+ *       distortion may occur near the poles.
+ * @note Generated rings do not account for geographic obstacles, walls, or
+ *       buildings. For complex geofencing, consider server-side validation.
+ *
+ * @group Circles
+ */
+function circleRing(lng, lat, radiusMeters) {
+  var points = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 64;
+  // A linear ring needs at least 3 distinct positions to be valid GeoJSON
+  var segments = Number.isFinite(points) ? Math.max(3, Math.floor(points)) : 64;
+  var ring = [];
+  var latRad = lat * Math.PI / 180;
+  var metersPerDegLat = 110574;
+  var metersPerDegLng = 111320 * Math.cos(latRad || 0.000001);
+  var latR = radiusMeters / metersPerDegLat;
+  var lngR = radiusMeters / (metersPerDegLng || 1);
+  for (var i = 0; i < segments; i += 1) {
+    var a = i / segments * Math.PI * 2;
+    ring.push([lng + lngR * Math.cos(a), lat + latR * Math.sin(a)]);
+  }
+  // Close the ring with an exact copy of the first position, as GeoJSON requires
+  ring.push([ring[0][0], ring[0][1]]);
+  return ring;
+}
 ;// ./node_modules/.pnpm/@googlemaps+polyline-codec@1.0.28/node_modules/@googlemaps/polyline-codec/dist/index.esm.js
 /**
  * Copyright 2020 Google LLC
@@ -13180,6 +13441,12 @@ function map_defineProperty(e, r, t) { return (r = map_toPropertyKey(r)) in e ?
 function map_toPropertyKey(t) { var i = map_toPrimitive(t, "string"); return "symbol" == map_typeof(i) ? i : i + ""; }
 function map_toPrimitive(t, r) { if ("object" != map_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != map_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
+/** Shared GeoJSON source holding every circle drawn through the circle API. */
+var CIRCLE_SOURCE_ID = "mapvx-circles";
+/** Fill layer rendering the translucent interior of the circles. */
+var CIRCLE_FILL_LAYER_ID = "mapvx-circles-fill";
+/** Line layer rendering the circle outlines. */
+var CIRCLE_LINE_LAYER_ID = "mapvx-circles-line";
 
 // Flag to track if cached-tile protocol has been registered
 var cachedTileProtocolRegistered = false;
@@ -13294,6 +13561,7 @@ function convertPaddingToPixels(padding, containerWidth, containerHeight) {
 
 
 
+
 /**
  * @group Map
  */
@@ -13323,6 +13591,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
     map_defineProperty(_this, "currentFloor", "");
     map_defineProperty(_this, "baseFilters", {});
     map_defineProperty(_this, "markers", []);
+    map_defineProperty(_this, "circles", []);
     map_defineProperty(_this, "enableHover", false);
     map_defineProperty(_this, "hoveredId", "unselected");
     map_defineProperty(_this, "failedTiles", new Set());
@@ -13489,6 +13758,11 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
         _this6.onHover();
         _this6.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", function () {
+        if (_this6.circles.length > 0) _this6.ensureCircleLayers();
+      });
       this.map.on("zoomend", function () {
         var _mapConfig$onZoomEnd;
         (_mapConfig$onZoomEnd = mapConfig.onZoomEnd) === null || _mapConfig$onZoomEnd === void 0 || _mapConfig$onZoomEnd.call(mapConfig, _this6.getZoomLevel());
@@ -13586,6 +13860,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
   }, {
     key: "destroyMap",
     value: function destroyMap() {
+      this.circles = [];
       this.map.remove();
       this.unsubscribeFromFailedTiles();
     }
@@ -13723,6 +13998,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
         this.setBaseFilters(newStyle);
       }
       this.routeController.addSourcesAndLayers();
+      this.refreshCircles();
       this.filterByFloorKey(this.currentFloor);
     }
   }, {
@@ -13851,6 +14127,295 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
         throw new Error("Failed to remove all markers");
       }
     }
+  }, {
+    key: "addCircle",
+    value: function addCircle(circle) {
+      try {
+        // Check if a circle with the same ID already exists and replace it
+        if (circle.id) {
+          this.circles = this.circles.filter(function (c) {
+            return c.id !== circle.id;
+          });
+        }
+        // resolveCircleConfig validates radiusMeters and coordinates
+        var record = resolveCircleConfig(circle);
+        this.circles.push(record);
+        this.refreshCircles();
+        this.logEvent("addCircle");
+        return record.id;
+      } catch (error) {
+        throw new Error("Failed to add circle: ".concat(error instanceof Error ? error.message : String(error)));
+      }
+    }
+  }, {
+    key: "updateCircle",
+    value: function updateCircle(circleConfig) {
+      try {
+        var index = this.circles.findIndex(function (c) {
+          return 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: ".concat(error instanceof Error ? error.message : String(error)));
+      }
+    }
+  }, {
+    key: "getCircle",
+    value: function getCircle(circleId) {
+      return this.circles.find(function (c) {
+        return c.id === circleId;
+      });
+    }
+  }, {
+    key: "getCircles",
+    value: function getCircles() {
+      return this.circles.slice();
+    }
+  }, {
+    key: "hasCircle",
+    value: function hasCircle(circleId) {
+      return this.circles.some(function (c) {
+        return c.id === circleId;
+      });
+    }
+  }, {
+    key: "updateCirclePosition",
+    value: function updateCirclePosition(circleId, center, radiusMeters) {
+      try {
+        var _circle = this.circles.find(function (c) {
+          return c.id === circleId;
+        });
+        if (_circle === undefined) return false;
+
+        // Validate inputs before modifying
+        if (!center) {
+          throw new Error("Circle center is required");
+        }
+        var lat = center.lat,
+          lng = center.lng;
+        if (!Number.isFinite(lat) || lat < -90 || lat > 90) {
+          throw new Error("Invalid latitude: ".concat(lat, ". Must be between -90 and 90."));
+        }
+        if (!Number.isFinite(lng) || lng < -180 || lng > 180) {
+          throw new Error("Invalid longitude: ".concat(lng, ". Must be between -180 and 180."));
+        }
+        if (radiusMeters !== undefined) {
+          if (!Number.isFinite(radiusMeters) || radiusMeters <= 0) {
+            throw new Error("Invalid radiusMeters: ".concat(radiusMeters, ". Must be a positive finite number."));
+          }
+        }
+        _circle.coordinate = center;
+        if (radiusMeters !== undefined) {
+          _circle.radiusMeters = radiusMeters;
+        }
+        this.refreshCircles();
+        this.logEvent("updateCirclePosition");
+        return true;
+      } catch (error) {
+        throw new Error("Failed to update circle position: ".concat(error instanceof Error ? error.message : String(error)));
+      }
+    }
+  }, {
+    key: "updateCircleStyle",
+    value: function updateCircleStyle(circleId, style) {
+      try {
+        var _circle2 = this.circles.find(function (c) {
+          return c.id === circleId;
+        });
+        if (_circle2 === undefined) return false;
+
+        // Update only style properties, clamp opacities
+        if (style.fillColor !== undefined) _circle2.fillColor = style.fillColor;
+        if (style.fillOpacity !== undefined) _circle2.fillOpacity = Math.max(0, Math.min(1, style.fillOpacity));
+        if (style.strokeColor !== undefined) _circle2.strokeColor = style.strokeColor;
+        if (style.strokeWidth !== undefined) _circle2.strokeWidth = style.strokeWidth;
+        if (style.strokeOpacity !== undefined) _circle2.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: ".concat(error instanceof Error ? error.message : String(error)));
+      }
+    }
+  }, {
+    key: "removeCircle",
+    value: function removeCircle(circleId) {
+      try {
+        this.circles = this.circles.filter(function (c) {
+          return c.id !== circleId;
+        });
+        this.refreshCircles();
+        this.logEvent("removeCircle");
+      } catch (error) {
+        throw new Error("Failed to remove circle");
+      }
+    }
+  }, {
+    key: "removeAllCircles",
+    value: function removeAllCircles() {
+      try {
+        this.circles = [];
+        this.refreshCircles();
+        this.logEvent("removeAllCircles");
+      } catch (error) {
+        throw new Error("Failed to remove all circles");
+      }
+    }
+  }, {
+    key: "showCircle",
+    value: function showCircle(circleId) {
+      try {
+        var _circle3 = this.circles.find(function (c) {
+          return c.id === circleId;
+        });
+        if (_circle3 === undefined) {
+          return false;
+        }
+        _circle3.hidden = false;
+        this.refreshCircles();
+        this.logEvent("showCircle");
+        return true;
+      } catch (error) {
+        return false;
+      }
+    }
+  }, {
+    key: "hideCircle",
+    value: function hideCircle(circleId) {
+      try {
+        var _circle4 = this.circles.find(function (c) {
+          return c.id === circleId;
+        });
+        if (_circle4 === undefined) {
+          return false;
+        }
+        _circle4.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.
+     */
+  }, {
+    key: "circleFeatureCollection",
+    value: function circleFeatureCollection() {
+      var _this$currentFloor3, _this$innerFloors$fin6, _this$innerFloors$fin7;
+      var floorId = (_this$currentFloor3 = this.currentFloor) !== null && _this$currentFloor3 !== void 0 ? _this$currentFloor3 : "";
+      var isOutdoor = !this.parentPlace || ((_this$innerFloors$fin6 = (_this$innerFloors$fin7 = this.innerFloors.find(function (floor) {
+        return floor.key === floorId;
+      })) === null || _this$innerFloors$fin7 === void 0 ? void 0 : _this$innerFloors$fin7.reachableFromGPS) !== null && _this$innerFloors$fin6 !== void 0 ? _this$innerFloors$fin6 : false);
+      var features = this.circles.filter(function (circle) {
+        var _circle$floorId;
+        if (circle.hidden) return false;
+        var circleFloor = (_circle$floorId = circle.floorId) !== null && _circle$floorId !== void 0 ? _circle$floorId : "";
+        return circleFloor === floorId || isOutdoor && circleFloor === "";
+      }).map(function (circle) {
+        return {
+          type: "Feature",
+          properties: {
+            id: circle.id,
+            fillColor: circle.fillColor,
+            fillOpacity: circle.fillOpacity,
+            strokeColor: circle.strokeColor,
+            strokeWidth: circle.strokeWidth,
+            strokeOpacity: circle.strokeOpacity
+          },
+          geometry: {
+            type: "Polygon",
+            coordinates: [circleRing(circle.coordinate.lng, circle.coordinate.lat, circle.radiusMeters)]
+          }
+        };
+      });
+      return {
+        type: "FeatureCollection",
+        features: 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.
+     */
+  }, {
+    key: "ensureCircleLayers",
+    value: function ensureCircleLayers() {
+      if (!this.map) return;
+      try {
+        var _this$map$getStyle2;
+        if (!this.map.getSource(CIRCLE_SOURCE_ID)) {
+          this.map.addSource(CIRCLE_SOURCE_ID, {
+            type: "geojson",
+            data: this.circleFeatureCollection()
+          });
+        }
+        var beforeId = (_this$map$getStyle2 = this.map.getStyle()) === null || _this$map$getStyle2 === void 0 || (_this$map$getStyle2 = _this$map$getStyle2.layers) === null || _this$map$getStyle2 === void 0 || (_this$map$getStyle2 = _this$map$getStyle2.find(function (layer) {
+          return layer.type === "symbol";
+        })) === null || _this$map$getStyle2 === void 0 ? void 0 : _this$map$getStyle2.id;
+        if (!this.map.getLayer(CIRCLE_FILL_LAYER_ID)) {
+          var fillLayer = {
+            id: CIRCLE_FILL_LAYER_ID,
+            type: "fill",
+            source: CIRCLE_SOURCE_ID,
+            paint: {
+              "fill-color": ["get", "fillColor"],
+              "fill-opacity": ["get", "fillOpacity"]
+            }
+          };
+          this.map.addLayer(fillLayer, beforeId);
+        }
+        if (!this.map.getLayer(CIRCLE_LINE_LAYER_ID)) {
+          var lineLayer = {
+            id: CIRCLE_LINE_LAYER_ID,
+            type: "line",
+            source: CIRCLE_SOURCE_ID,
+            paint: {
+              "line-color": ["get", "strokeColor"],
+              "line-width": ["get", "strokeWidth"],
+              "line-opacity": ["get", "strokeOpacity"]
+            }
+          };
+          this.map.addLayer(lineLayer, 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.
+     */
+  }, {
+    key: "refreshCircles",
+    value: function refreshCircles() {
+      if (!this.map) return;
+      if (this.circles.length === 0 && !this.map.getSource(CIRCLE_SOURCE_ID)) return;
+      this.ensureCircleLayers();
+      try {
+        var source = this.map.getSource(CIRCLE_SOURCE_ID);
+        source === null || source === 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
@@ -13870,6 +14435,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
       }
       this.updateFiltersTo(floorKeyString);
       this.updateMarkersTo(floorKeyString);
+      this.refreshCircles();
       this.routeController.updateRouteLayers(floorKeyString);
       this.routeController.updateRouteMarkerVisibility(floorKeyString);
     }
@@ -13881,12 +14447,12 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
   }, {
     key: "updateMarkersTo",
     value: function updateMarkersTo(floorId) {
-      var _this$innerFloors$fin6,
-        _this$innerFloors$fin7,
+      var _this$innerFloors$fin8,
+        _this$innerFloors$fin9,
         _this1 = this;
-      var isOutdoor = !this.parentPlace || ((_this$innerFloors$fin6 = (_this$innerFloors$fin7 = this.innerFloors.find(function (floor) {
+      var isOutdoor = !this.parentPlace || ((_this$innerFloors$fin8 = (_this$innerFloors$fin9 = this.innerFloors.find(function (floor) {
         return floor.key === floorId;
-      })) === null || _this$innerFloors$fin7 === void 0 ? void 0 : _this$innerFloors$fin7.reachableFromGPS) !== null && _this$innerFloors$fin6 !== void 0 ? _this$innerFloors$fin6 : false);
+      })) === null || _this$innerFloors$fin9 === void 0 ? void 0 : _this$innerFloors$fin9.reachableFromGPS) !== null && _this$innerFloors$fin8 !== void 0 ? _this$innerFloors$fin8 : false);
       this.markers.forEach(function (e) {
         e.changeFloor(floorId, _this1.map, isOutdoor);
       });
@@ -13895,19 +14461,19 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
     key: "updateFiltersTo",
     value: function updateFiltersTo(floorId) {
       var _this$map$getStyle$la2,
-        _this$map$getStyle2,
+        _this$map$getStyle3,
         _this10 = this,
-        _this$innerFloors$fin8;
+        _this$innerFloors$fin0;
       if (!this.map) return;
-      var layers = (_this$map$getStyle$la2 = (_this$map$getStyle2 = this.map.getStyle()) === null || _this$map$getStyle2 === void 0 ? void 0 : _this$map$getStyle2.layers) !== null && _this$map$getStyle$la2 !== void 0 ? _this$map$getStyle$la2 : [];
+      var layers = (_this$map$getStyle$la2 = (_this$map$getStyle3 = this.map.getStyle()) === null || _this$map$getStyle3 === void 0 ? void 0 : _this$map$getStyle3.layers) !== null && _this$map$getStyle$la2 !== void 0 ? _this$map$getStyle$la2 : [];
       layers.filter(function (l) {
         return l.id.startsWith("base-indoor-");
       }).forEach(function (l) {
         _this10.map.removeLayer(l.id);
       });
-      var baseFloorId = (_this$innerFloors$fin8 = this.innerFloors.find(function (floor) {
+      var baseFloorId = (_this$innerFloors$fin0 = this.innerFloors.find(function (floor) {
         return floor.key === floorId;
-      })) === null || _this$innerFloors$fin8 === void 0 ? void 0 : _this$innerFloors$fin8.baseFloor;
+      })) === null || _this$innerFloors$fin0 === void 0 ? void 0 : _this$innerFloors$fin0.baseFloor;
       var indoorLayers = layers.filter(function (layer) {
         return layer.id.startsWith("indoor-");
       });
@@ -14424,7 +14990,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_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
           }
         };
@@ -14437,7 +15003,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
           "source-layer": "area",
           filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
           paint: {
-            "fill-color": "#276EF1"
+            "fill-color": MAPVX_BRAND_COLOR
           }
         };
         this.map.addLayer(_layer);
@@ -14446,10 +15012,10 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
   }, {
     key: "createBasicFilters",
     value: function createBasicFilters() {
-      var _this$parentPlaceId3, _this$currentFloor3;
+      var _this$parentPlaceId3, _this$currentFloor4;
       var publicPlaceFilter = ["==", ["get", "public_place"], true];
       var subPlaceFilter = ["!", ["in", (_this$parentPlaceId3 = this.parentPlaceId) !== null && _this$parentPlaceId3 !== void 0 ? _this$parentPlaceId3 : "noRef", ["get", "is_subplace"]]];
-      var floorId = (_this$currentFloor3 = this.currentFloor) !== null && _this$currentFloor3 !== void 0 ? _this$currentFloor3 : "noRef";
+      var floorId = (_this$currentFloor4 = this.currentFloor) !== null && _this$currentFloor4 !== void 0 ? _this$currentFloor4 : "noRef";
       var floorFilter = ["in", floorId, ["get", "floor_key"]];
       var showInFloorFilter = ["in", floorId, ["get", "show_in_floor"]];
       var basicFilters = publicPlaceFilter;
@@ -14831,7 +15397,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
         "source-layer": "area",
         filter: ["all", ["has", "ref"], ["==", ["get", "ref"], "unselected"]],
         paint: {
-          "line-color": "#276EF1",
+          "line-color": MAPVX_BRAND_COLOR,
           "line-width": 4
         }
       };
@@ -17054,6 +17620,136 @@ function is24Hours(openingTime) {
   // Check if open is "00:00" and close is "24:00" or "00:00"
   return open === "00:00" && close === "24:00" || open === "00:00" && close === "00:00";
 }
+;// ./src/utils/preconnect.ts
+function preconnect_createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = preconnect_unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function preconnect_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return preconnect_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? preconnect_arrayLikeToArray(r, a) : void 0; } }
+function preconnect_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Hostnames that MapVX maps typically need to talk to during the first
+ * paint: vector tiles, sprite, glyphs and indoor tile sources. Exposed so
+ * that consumer apps can call `injectPreconnects(MAPVX_DEFAULT_PRECONNECT_HOSTS)`
+ * without having to maintain the list themselves.
+ *
+ * @group Utils
+ */
+var MAPVX_DEFAULT_PRECONNECT_HOSTS = ["https://tiles.mapvx.com", "https://api.maptiler.com", "https://indoorequals.mapvx.com"];
+
+/**
+ * Injects `<link rel="preconnect">` (and a `<link rel="dns-prefetch">` fallback)
+ * tags into `document.head` for the given origins, so the browser starts the
+ * DNS + TLS handshake before MapLibre actually requests sprite/glyph/tile
+ * resources.
+ *
+ * Call this as early as possible — ideally before {@link initializeSDK} — to
+ * maximize the savings. In real captures this shaves ~150-300 ms off the
+ * first-paint cascade.
+ *
+ * Idempotent: hosts that already have a `<link rel="preconnect" crossorigin>`
+ * are skipped. If an existing `preconnect` link is missing `crossorigin`, it
+ * is upgraded in place (added `crossorigin="anonymous"`) — without that
+ * attribute the warmed socket can't be reused for the CORS tile/font/sprite
+ * fetches MapLibre performs, so leaving the existing link untouched would
+ * silently defeat the optimization. Existing `crossorigin="use-credentials"`
+ * is respected and never overwritten.
+ *
+ * @param hosts - Origin URLs (`"https://tiles.mapvx.com"`) or bare hostnames
+ *   (`"tiles.mapvx.com"`, normalized to `https://`). Invalid entries are
+ *   silently ignored.
+ * @returns The origins where the helper made a change — either a new link was
+ *   appended, or an existing one was upgraded with `crossorigin="anonymous"`.
+ *
+ * @example
+ * ```ts
+ * import { initializeSDK, injectPreconnects, MAPVX_DEFAULT_PRECONNECT_HOSTS } from "@mapvx/web-js"
+ *
+ * injectPreconnects(MAPVX_DEFAULT_PRECONNECT_HOSTS)
+ * const sdk = initializeSDK(apiKey)
+ * ```
+ *
+ * @group Utils
+ */
+function injectPreconnects(hosts) {
+  if (typeof document === "undefined" || !document.head) return [];
+  if (!Array.isArray(hosts) || hosts.length === 0) return [];
+  var injected = [];
+  var _iterator = preconnect_createForOfIteratorHelper(hosts),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var raw = _step.value;
+      if (typeof raw !== "string" || raw.length === 0) continue;
+      var origin = normalizeOrigin(raw);
+      if (origin === null) continue;
+
+      // Check what's already in <head>. We may need to UPGRADE an existing
+      // preconnect — server-rendered or hand-authored hints frequently omit
+      // `crossorigin`, and a warmed socket without it cannot be reused for
+      // the CORS tile/font/sprite fetches that MapLibre performs. Without
+      // this branch the optimization would silently no-op when the page
+      // already had a partial hint.
+      var existingPreconnect = findLinkForOrigin("preconnect", origin);
+      var preconnectChanged = false;
+      if (existingPreconnect) {
+        if (!existingPreconnect.hasAttribute("crossorigin")) {
+          existingPreconnect.crossOrigin = "anonymous";
+          preconnectChanged = true;
+        }
+        // If the existing link already has any `crossorigin` value
+        // (including `use-credentials`), respect the author's intent and
+        // leave it alone.
+      } else {
+        var preconnect = document.createElement("link");
+        preconnect.rel = "preconnect";
+        preconnect.href = origin;
+        preconnect.crossOrigin = "anonymous";
+        document.head.appendChild(preconnect);
+        preconnectChanged = true;
+      }
+
+      // dns-prefetch is a fallback for older browsers that ignore preconnect.
+      if (!findLinkForOrigin("dns-prefetch", origin)) {
+        var dnsPrefetch = document.createElement("link");
+        dnsPrefetch.rel = "dns-prefetch";
+        dnsPrefetch.href = origin;
+        document.head.appendChild(dnsPrefetch);
+      }
+      if (preconnectChanged) injected.push(origin);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return injected;
+}
+
+/**
+ * Returns the first `<link rel="${rel}">` in `<head>` whose resolved origin
+ * matches `origin`, or null. We compare canonical URL origins instead of
+ * the raw `href` attribute text — the same origin can be written as
+ * `https://tiles.mapvx.com` or `https://tiles.mapvx.com/`, and a strict
+ * attribute selector would miss the second form and inject a duplicate.
+ */
+function findLinkForOrigin(rel, origin) {
+  var links = document.head.querySelectorAll("link[rel=\"".concat(rel, "\"]"));
+  for (var i = 0; i < links.length; i++) {
+    var link = links[i];
+    try {
+      if (new URL(link.href).origin === origin) return link;
+    } catch (_unused) {
+      // Malformed href — skip and keep scanning.
+    }
+  }
+  return null;
+}
+function normalizeOrigin(raw) {
+  try {
+    var candidate = /^https?:\/\//i.test(raw) ? raw : "https://".concat(raw);
+    return new URL(candidate).origin;
+  } catch (_unused2) {
+    return null;
+  }
+}
 ;// ./src/index.ts
 // ─── Domain Ports (interfaces) ───────────────────────────────────────────────
 
@@ -17085,6 +17781,8 @@ function is24Hours(openingTime) {
 
 // ─── Domain Models: Categories ───────────────────────────────────────────────
 
+// ─── Domain Models: Circle ───────────────────────────────────────────────────
+
 
 // ─── Domain Models: City Filter ──────────────────────────────────────────────
 
@@ -17135,6 +17833,7 @@ function is24Hours(openingTime) {
 
 
 
+
 /**
  * Function to load default styles
  * @group Utils