@mapvx/web-js 1.1.1 → 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,7 @@ __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),
@@ -5739,12 +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)
 });
@@ -6790,7 +6794,7 @@ var rollbar_umd_min_default = /*#__PURE__*/__webpack_require__.n(rollbar_umd_min
 // 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.1.1" : 0;
+var SDK_VERSION =  true ? "1.2.0" : 0;
 var _rollbarConfig = {
   accessToken: "28279d52df43411ebd138c2bee0ab1df",
   // Only report what the SDK logs explicitly via logError. Capturing every
@@ -6838,7 +6842,7 @@ var logger_countly = {
 // 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.1.1" : 0;
+var logger_SDK_VERSION =  true ? "1.2.0" : 0;
 var Logger = /*#__PURE__*/function () {
   function Logger() {
     logger_classCallCheck(this, Logger);
@@ -9624,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
@@ -13213,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;
@@ -13327,6 +13561,7 @@ function convertPaddingToPixels(padding, containerWidth, containerHeight) {
 
 
 
+
 /**
  * @group Map
  */
@@ -13356,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());
@@ -13522,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());
@@ -13619,6 +13860,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
   }, {
     key: "destroyMap",
     value: function destroyMap() {
+      this.circles = [];
       this.map.remove();
       this.unsubscribeFromFailedTiles();
     }
@@ -13756,6 +13998,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
         this.setBaseFilters(newStyle);
       }
       this.routeController.addSourcesAndLayers();
+      this.refreshCircles();
       this.filterByFloorKey(this.currentFloor);
     }
   }, {
@@ -13884,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
@@ -13903,6 +14435,7 @@ var InternalMapVXMap = /*#__PURE__*/function (_Loggeable) {
       }
       this.updateFiltersTo(floorKeyString);
       this.updateMarkersTo(floorKeyString);
+      this.refreshCircles();
       this.routeController.updateRouteLayers(floorKeyString);
       this.routeController.updateRouteMarkerVisibility(floorKeyString);
     }
@@ -13914,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);
       });
@@ -13928,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-");
       });
@@ -14457,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
           }
         };
@@ -14470,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);
@@ -14479,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;
@@ -14864,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
         }
       };
@@ -17248,6 +17781,8 @@ function normalizeOrigin(raw) {
 
 // ─── Domain Models: Categories ───────────────────────────────────────────────
 
+// ─── Domain Models: Circle ───────────────────────────────────────────────────
+
 
 // ─── Domain Models: City Filter ──────────────────────────────────────────────