@premiate/strapi-plugin-maplibre-field 1.2.0 → 1.2.2

package/dist/admin/index-BaGweGhM.js

@@ -0,0 +1,1856 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const admin = require("@strapi/strapi/admin");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-B0LVK-NK.js");
+const Map = require("react-map-gl/maplibre");
+const pmtiles = require("pmtiles");
+const maplibregl = require("maplibre-gl");
+require("maplibre-gl/dist/maplibre-gl.css");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const Map__default = /* @__PURE__ */ _interopDefault(Map);
+const maplibregl__default = /* @__PURE__ */ _interopDefault(maplibregl);
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+var reactIs = { exports: {} };
+var reactIs_production_min = {};
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
+  var b = "function" === typeof Symbol && Symbol.for, c = b ? Symbol.for("react.element") : 60103, d = b ? Symbol.for("react.portal") : 60106, e = b ? Symbol.for("react.fragment") : 60107, f = b ? Symbol.for("react.strict_mode") : 60108, g = b ? Symbol.for("react.profiler") : 60114, h = b ? Symbol.for("react.provider") : 60109, k = b ? Symbol.for("react.context") : 60110, l = b ? Symbol.for("react.async_mode") : 60111, m = b ? Symbol.for("react.concurrent_mode") : 60111, n = b ? Symbol.for("react.forward_ref") : 60112, p = b ? Symbol.for("react.suspense") : 60113, q = b ? Symbol.for("react.suspense_list") : 60120, r = b ? Symbol.for("react.memo") : 60115, t = b ? Symbol.for("react.lazy") : 60116, v = b ? Symbol.for("react.block") : 60121, w = b ? Symbol.for("react.fundamental") : 60117, x = b ? Symbol.for("react.responder") : 60118, y = b ? Symbol.for("react.scope") : 60119;
+  function z(a) {
+    if ("object" === typeof a && null !== a) {
+      var u = a.$$typeof;
+      switch (u) {
+        case c:
+          switch (a = a.type, a) {
+            case l:
+            case m:
+            case e:
+            case g:
+            case f:
+            case p:
+              return a;
+            default:
+              switch (a = a && a.$$typeof, a) {
+                case k:
+                case n:
+                case t:
+                case r:
+                case h:
+                  return a;
+                default:
+                  return u;
+              }
+          }
+        case d:
+          return u;
+      }
+    }
+  }
+  function A(a) {
+    return z(a) === m;
+  }
+  reactIs_production_min.AsyncMode = l;
+  reactIs_production_min.ConcurrentMode = m;
+  reactIs_production_min.ContextConsumer = k;
+  reactIs_production_min.ContextProvider = h;
+  reactIs_production_min.Element = c;
+  reactIs_production_min.ForwardRef = n;
+  reactIs_production_min.Fragment = e;
+  reactIs_production_min.Lazy = t;
+  reactIs_production_min.Memo = r;
+  reactIs_production_min.Portal = d;
+  reactIs_production_min.Profiler = g;
+  reactIs_production_min.StrictMode = f;
+  reactIs_production_min.Suspense = p;
+  reactIs_production_min.isAsyncMode = function(a) {
+    return A(a) || z(a) === l;
+  };
+  reactIs_production_min.isConcurrentMode = A;
+  reactIs_production_min.isContextConsumer = function(a) {
+    return z(a) === k;
+  };
+  reactIs_production_min.isContextProvider = function(a) {
+    return z(a) === h;
+  };
+  reactIs_production_min.isElement = function(a) {
+    return "object" === typeof a && null !== a && a.$$typeof === c;
+  };
+  reactIs_production_min.isForwardRef = function(a) {
+    return z(a) === n;
+  };
+  reactIs_production_min.isFragment = function(a) {
+    return z(a) === e;
+  };
+  reactIs_production_min.isLazy = function(a) {
+    return z(a) === t;
+  };
+  reactIs_production_min.isMemo = function(a) {
+    return z(a) === r;
+  };
+  reactIs_production_min.isPortal = function(a) {
+    return z(a) === d;
+  };
+  reactIs_production_min.isProfiler = function(a) {
+    return z(a) === g;
+  };
+  reactIs_production_min.isStrictMode = function(a) {
+    return z(a) === f;
+  };
+  reactIs_production_min.isSuspense = function(a) {
+    return z(a) === p;
+  };
+  reactIs_production_min.isValidElementType = function(a) {
+    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+  };
+  reactIs_production_min.typeOf = z;
+  return reactIs_production_min;
+}
+var reactIs_development = {};
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function() {
+      var hasSymbol = typeof Symbol === "function" && Symbol.for;
+      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
+      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
+      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107;
+      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108;
+      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114;
+      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109;
+      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110;
+      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111;
+      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111;
+      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112;
+      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113;
+      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 60120;
+      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115;
+      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116;
+      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 60121;
+      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117;
+      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118;
+      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119;
+      function isValidElementType(type) {
+        return typeof type === "string" || typeof type === "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === "object" && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+      }
+      function typeOf(object) {
+        if (typeof object === "object" && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_ASYNC_MODE_TYPE:
+                case REACT_CONCURRENT_MODE_TYPE:
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return void 0;
+      }
+      var AsyncMode = REACT_ASYNC_MODE_TYPE;
+      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true;
+            console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.");
+          }
+        }
+        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+      }
+      function isConcurrentMode(object) {
+        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      reactIs_development.AsyncMode = AsyncMode;
+      reactIs_development.ConcurrentMode = ConcurrentMode;
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development;
+}
+var hasRequiredReactIs;
+function requireReactIs() {
+  if (hasRequiredReactIs) return reactIs.exports;
+  hasRequiredReactIs = 1;
+  if (process.env.NODE_ENV === "production") {
+    reactIs.exports = requireReactIs_production_min();
+  } else {
+    reactIs.exports = requireReactIs_development();
+  }
+  return reactIs.exports;
+}
+var hoistNonReactStatics_cjs;
+var hasRequiredHoistNonReactStatics_cjs;
+function requireHoistNonReactStatics_cjs() {
+  if (hasRequiredHoistNonReactStatics_cjs) return hoistNonReactStatics_cjs;
+  hasRequiredHoistNonReactStatics_cjs = 1;
+  var reactIs2 = requireReactIs();
+  var REACT_STATICS = {
+    childContextTypes: true,
+    contextType: true,
+    contextTypes: true,
+    defaultProps: true,
+    displayName: true,
+    getDefaultProps: true,
+    getDerivedStateFromError: true,
+    getDerivedStateFromProps: true,
+    mixins: true,
+    propTypes: true,
+    type: true
+  };
+  var KNOWN_STATICS = {
+    name: true,
+    length: true,
+    prototype: true,
+    caller: true,
+    callee: true,
+    arguments: true,
+    arity: true
+  };
+  var FORWARD_REF_STATICS = {
+    "$$typeof": true,
+    render: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true
+  };
+  var MEMO_STATICS = {
+    "$$typeof": true,
+    compare: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true,
+    type: true
+  };
+  var TYPE_STATICS = {};
+  TYPE_STATICS[reactIs2.ForwardRef] = FORWARD_REF_STATICS;
+  TYPE_STATICS[reactIs2.Memo] = MEMO_STATICS;
+  function getStatics(component) {
+    if (reactIs2.isMemo(component)) {
+      return MEMO_STATICS;
+    }
+    return TYPE_STATICS[component["$$typeof"]] || REACT_STATICS;
+  }
+  var defineProperty = Object.defineProperty;
+  var getOwnPropertyNames = Object.getOwnPropertyNames;
+  var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+  var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+  var getPrototypeOf = Object.getPrototypeOf;
+  var objectPrototype = Object.prototype;
+  function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+    if (typeof sourceComponent !== "string") {
+      if (objectPrototype) {
+        var inheritedComponent = getPrototypeOf(sourceComponent);
+        if (inheritedComponent && inheritedComponent !== objectPrototype) {
+          hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+        }
+      }
+      var keys = getOwnPropertyNames(sourceComponent);
+      if (getOwnPropertySymbols) {
+        keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+      }
+      var targetStatics = getStatics(targetComponent);
+      var sourceStatics = getStatics(sourceComponent);
+      for (var i = 0; i < keys.length; ++i) {
+        var key = keys[i];
+        if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
+          var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+          try {
+            defineProperty(targetComponent, key, descriptor);
+          } catch (e) {
+          }
+        }
+      }
+    }
+    return targetComponent;
+  }
+  hoistNonReactStatics_cjs = hoistNonReactStatics;
+  return hoistNonReactStatics_cjs;
+}
+requireHoistNonReactStatics_cjs();
+function invariant(condition, message, Err) {
+  if (Err === void 0) {
+    Err = Error;
+  }
+  if (!condition) {
+    throw new Err(message);
+  }
+}
+var defaultErrorHandler = function(error) {
+  if (process.env.NODE_ENV !== "production") {
+    console.error(error);
+  }
+};
+var defaultWarnHandler = function(warning) {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(warning);
+  }
+};
+var DEFAULT_INTL_CONFIG = {
+  formats: {},
+  messages: {},
+  timeZone: void 0,
+  defaultLocale: "en",
+  defaultFormats: {},
+  fallbackOnEmptyString: true,
+  onError: defaultErrorHandler,
+  onWarn: defaultWarnHandler
+};
+function invariantIntlContext(intl) {
+  invariant(intl, "[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.");
+}
+__assign(__assign({}, DEFAULT_INTL_CONFIG), { textComponent: React__namespace.Fragment });
+var IntlContext = typeof window !== "undefined" && !window.__REACT_INTL_BYPASS_GLOBAL_CONTEXT__ ? window.__REACT_INTL_CONTEXT__ || (window.__REACT_INTL_CONTEXT__ = React__namespace.createContext(null)) : React__namespace.createContext(null);
+IntlContext.Consumer;
+IntlContext.Provider;
+var Context = IntlContext;
+function useIntl() {
+  var intl = React__namespace.useContext(Context);
+  invariantIntlContext(intl);
+  return intl;
+}
+var DisplayName;
+(function(DisplayName2) {
+  DisplayName2["formatDate"] = "FormattedDate";
+  DisplayName2["formatTime"] = "FormattedTime";
+  DisplayName2["formatNumber"] = "FormattedNumber";
+  DisplayName2["formatList"] = "FormattedList";
+  DisplayName2["formatDisplayName"] = "FormattedDisplayName";
+})(DisplayName || (DisplayName = {}));
+var DisplayNameParts;
+(function(DisplayNameParts2) {
+  DisplayNameParts2["formatDate"] = "FormattedDateParts";
+  DisplayNameParts2["formatTime"] = "FormattedTimeParts";
+  DisplayNameParts2["formatNumber"] = "FormattedNumberParts";
+  DisplayNameParts2["formatList"] = "FormattedListParts";
+})(DisplayNameParts || (DisplayNameParts = {}));
+function createFormattedDateTimePartsComponent(name) {
+  var ComponentParts = function(props) {
+    var intl = useIntl();
+    var value = props.value, children = props.children, formatProps = __rest(props, ["value", "children"]);
+    var date = typeof value === "string" ? new Date(value || 0) : value;
+    var formattedParts = name === "formatDate" ? intl.formatDateToParts(date, formatProps) : intl.formatTimeToParts(date, formatProps);
+    return children(formattedParts);
+  };
+  ComponentParts.displayName = DisplayNameParts[name];
+  return ComponentParts;
+}
+function createFormattedComponent(name) {
+  var Component = function(props) {
+    var intl = useIntl();
+    var value = props.value, children = props.children, formatProps = __rest(
+      props,
+      ["value", "children"]
+    );
+    var formattedValue = intl[name](value, formatProps);
+    if (typeof children === "function") {
+      return children(formattedValue);
+    }
+    var Text = intl.textComponent || React__namespace.Fragment;
+    return React__namespace.createElement(Text, null, formattedValue);
+  };
+  Component.displayName = DisplayName[name];
+  return Component;
+}
+createFormattedComponent("formatDate");
+createFormattedComponent("formatTime");
+createFormattedComponent("formatNumber");
+createFormattedComponent("formatList");
+createFormattedComponent("formatDisplayName");
+createFormattedDateTimePartsComponent("formatDate");
+createFormattedDateTimePartsComponent("formatTime");
+const USER_AGENT$1 = "strapi-plugin-maplibre-field (Strapi CMS)";
+function createLocationFeature(coordinates, properties = {}) {
+  const cleanProperties = Object.fromEntries(
+    Object.entries(properties).filter(([, v]) => v != null && v !== "")
+  );
+  return {
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates
+    },
+    properties: cleanProperties
+  };
+}
+function calculateDistance(coord1, coord2) {
+  const R = 6371e3;
+  const φ1 = coord1[1] * Math.PI / 180;
+  const φ2 = coord2[1] * Math.PI / 180;
+  const Δφ = (coord2[1] - coord1[1]) * Math.PI / 180;
+  const Δλ = (coord2[0] - coord1[0]) * Math.PI / 180;
+  const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+async function queryCustomAPI(apiUrl, searchQuery) {
+  try {
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      console.error(
+        `[POI Service] HTTP error for ${apiUrl}: ${response.status} ${response.statusText}`
+      );
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data || data.type !== "FeatureCollection" || !Array.isArray(data.features)) {
+      console.error(`[POI Service] Invalid GeoJSON from ${apiUrl}`);
+      throw new Error("Invalid GeoJSON response format");
+    }
+    let features = data.features;
+    if (searchQuery && searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      features = features.filter((feature) => {
+        const name = feature.properties?.name;
+        return name && name.toLowerCase().includes(query);
+      });
+    }
+    return features;
+  } catch (error) {
+    console.error(`[POI Service] Failed to load from ${apiUrl}:`, error);
+    return [];
+  }
+}
+async function queryNominatim(lat, lng, radius, nominatimUrl) {
+  try {
+    const url = `${nominatimUrl}/reverse?format=jsonv2&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`;
+    const response = await fetch(url, {
+      headers: {
+        "User-Agent": USER_AGENT$1
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data) {
+      return [];
+    }
+    const coordinates = [parseFloat(data.lon), parseFloat(data.lat)];
+    const distance = calculateDistance([lng, lat], coordinates);
+    if (distance > radius) {
+      return [];
+    }
+    let poiName = data.name || data.display_name || "Unknown Location";
+    if (data.namedetails) {
+      poiName = data.namedetails.name || poiName;
+    }
+    const poi = {
+      id: `nominatim-${data.place_id || Date.now()}`,
+      name: poiName,
+      type: data.type || data.class || "address",
+      coordinates,
+      address: data.display_name || "",
+      distance,
+      metadata: {
+        osm_id: data.osm_id,
+        osm_type: data.osm_type,
+        place_id: data.place_id,
+        addresstype: data.addresstype,
+        class: data.class,
+        category: data.category
+      },
+      source: "nominatim"
+    };
+    return [poi];
+  } catch (error) {
+    console.error("Nominatim query error:", error);
+    return [];
+  }
+}
+function geoJSONFeatureToPOI(feature, clickCoords, mapName, layerId) {
+  if (!feature.geometry || feature.geometry.type !== "Point") {
+    return null;
+  }
+  const coordinates = feature.geometry.coordinates;
+  const properties = feature.properties || {};
+  const getString = (val) => typeof val === "string" ? val : void 0;
+  const name = getString(properties.name) || "Unnamed Location";
+  const poi = {
+    id: feature.id?.toString() || `custom-${Date.now()}-${Math.random()}`,
+    name,
+    type: getString(properties.type) || getString(properties.sport) || getString(properties.leisure) || "poi",
+    coordinates,
+    address: getString(properties.address) || "",
+    // Leave empty if not provided
+    metadata: properties,
+    source: "custom",
+    mapName,
+    // Include the custom map name
+    layerId
+    // Include the layer ID
+  };
+  if (clickCoords) {
+    poi.distance = calculateDistance(clickCoords, coordinates);
+  }
+  return poi;
+}
+function filterByDistance(features, clickCoords, radius) {
+  return features.filter((feature) => {
+    if (!feature.geometry || feature.geometry.type !== "Point") {
+      return false;
+    }
+    const featureCoords = feature.geometry.coordinates;
+    const distance = calculateDistance(clickCoords, featureCoords);
+    return distance <= radius;
+  });
+}
+function findNearestPOI(clickCoordinates, pois) {
+  if (!pois || pois.length === 0) {
+    return null;
+  }
+  let nearest = null;
+  let minDistance = Infinity;
+  for (const poi of pois) {
+    const distance = poi.distance ?? calculateDistance(clickCoordinates, poi.coordinates);
+    if (distance < minDistance) {
+      minDistance = distance;
+      nearest = { ...poi, distance };
+    }
+  }
+  return nearest;
+}
+async function searchPOIsForGeocoder(query, config) {
+  const results = [];
+  try {
+    if (config.customApiUrl) {
+      try {
+        const customFeatures = await queryCustomAPI(config.customApiUrl, query);
+        const customPOIs = customFeatures.map((feature) => geoJSONFeatureToPOI(feature, void 0, config.mapName, config.layerId)).filter((poi) => poi !== null).slice(0, 5);
+        results.push(...customPOIs);
+      } catch (error) {
+        console.warn("Custom API search failed:", error);
+      }
+    }
+    return results;
+  } catch (error) {
+    console.error("Search POIs error:", error);
+    return results;
+  }
+}
+async function searchNearbyPOIsForSnap(lat, lng, config) {
+  const results = [];
+  try {
+    const nominatimPOIs = await queryNominatim(lat, lng, config.radius, config.nominatimUrl);
+    results.push(...nominatimPOIs);
+    if (config.customApiUrl) {
+      try {
+        const customFeatures = await queryCustomAPI(config.customApiUrl);
+        const nearbyFeatures = filterByDistance(customFeatures, [lng, lat], config.radius);
+        const customPOIs = nearbyFeatures.map(
+          (feature) => geoJSONFeatureToPOI(feature, [lng, lat], config.mapName, config.layerId)
+        ).filter((poi) => poi !== null);
+        results.push(...customPOIs);
+      } catch (error) {
+        console.warn("Custom API query failed, continuing with Nominatim only:", error);
+      }
+    }
+    return results;
+  } catch (error) {
+    console.error("Search nearby POIs error:", error);
+    return results;
+  }
+}
+async function queryPOIsForViewport(bounds, center, maxDisplay, config) {
+  const results = [];
+  try {
+    if (config.customApiUrl) {
+      try {
+        const customFeatures = await queryCustomAPI(config.customApiUrl);
+        const viewportFeatures = customFeatures.filter((feature) => {
+          if (!feature.geometry || feature.geometry.type !== "Point") {
+            return false;
+          }
+          const [lng, lat] = feature.geometry.coordinates;
+          return lat >= bounds.south && lat <= bounds.north && lng >= bounds.west && lng <= bounds.east;
+        });
+        const customPOIs = viewportFeatures.map((feature) => geoJSONFeatureToPOI(feature, center, config.mapName, config.layerId)).filter((poi) => poi !== null);
+        results.push(...customPOIs);
+      } catch (error) {
+        console.warn("Custom API viewport query failed:", error);
+      }
+    }
+    results.sort((a, b) => {
+      const distA = a.distance ?? calculateDistance(center, a.coordinates);
+      const distB = b.distance ?? calculateDistance(center, b.coordinates);
+      return distA - distB;
+    });
+    return results.slice(0, maxDisplay);
+  } catch (error) {
+    console.error("Query POIs for viewport error:", error);
+    return results;
+  }
+}
+const USER_AGENT = "strapi-plugin-maplibre-field/1.0.0 (Strapi CMS)";
+async function performSearch(query, config) {
+  const results = [];
+  if (config.poiSearchEnabled && config.poiSources) {
+    const enabledSources = config.poiSources.filter((source) => source.enabled !== false);
+    for (const source of enabledSources) {
+      try {
+        const poiResults = await searchPOIsForGeocoder(query, {
+          nominatimUrl: config.nominatimUrl,
+          customApiUrl: source.apiUrl,
+          mapName: source.name,
+          radius: 100,
+          categories: []
+        });
+        results.push(
+          ...poiResults.map((poi, idx) => ({
+            id: `poi-${source.id}-${idx}`,
+            place_name: poi.name,
+            feature: {
+              type: "Feature",
+              geometry: {
+                type: "Point",
+                coordinates: poi.coordinates
+              },
+              properties: {
+                name: poi.name,
+                address: poi.address,
+                source: "custom",
+                sourceId: source.id,
+                sourceLayer: source.name,
+                category: poi.type,
+                // POI.type is the category
+                inputMethod: "search"
+              }
+            },
+            source: "custom"
+          }))
+        );
+      } catch (error) {
+        console.warn(`POI search failed for ${source.name}:`, error);
+      }
+    }
+  }
+  try {
+    const response = await fetch(
+      `${config.nominatimUrl}/search?q=${encodeURIComponent(query)}&format=json&addressdetails=1&limit=5`,
+      {
+        headers: {
+          "User-Agent": USER_AGENT
+        }
+      }
+    );
+    if (response.ok) {
+      const data = await response.json();
+      results.push(
+        ...data.map((result, idx) => ({
+          id: `nominatim-${idx}`,
+          place_name: result.display_name,
+          feature: {
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: [parseFloat(result.lon), parseFloat(result.lat)]
+            },
+            properties: {
+              name: result.display_name,
+              address: result.display_name,
+              source: "nominatim",
+              inputMethod: "search"
+            }
+          },
+          source: "nominatim"
+        }))
+      );
+    }
+  } catch (error) {
+    console.error("Nominatim search error:", error);
+  }
+  return results;
+}
+const SearchBox = ({
+  onSelectResult,
+  nominatimUrl,
+  poiSearchEnabled,
+  poiSources
+}) => {
+  const { formatMessage } = useIntl();
+  const [query, setQuery] = React.useState("");
+  const [results, setResults] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [hoveredId, setHoveredId] = React.useState(null);
+  const dropdownRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+  const handleSearch = async () => {
+    if (!query.trim()) {
+      setResults([]);
+      setIsOpen(false);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const searchResults = await performSearch(query, {
+        nominatimUrl,
+        poiSearchEnabled,
+        poiSources
+      });
+      setResults(searchResults);
+      setIsOpen(searchResults.length > 0);
+    } catch (error) {
+      console.error("Search error:", error);
+      setResults([]);
+      setIsOpen(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSearch();
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+      setQuery("");
+    }
+  };
+  const handleSelectResult = (result) => {
+    onSelectResult(result.feature);
+    setIsOpen(false);
+    setQuery("");
+    setResults([]);
+  };
+  const getResultColor = (result) => {
+    if (result.source === "nominatim") {
+      return "#6c757d";
+    }
+    const sourceId = result.feature.properties?.sourceId;
+    if (sourceId && poiSources) {
+      const source = poiSources.find((s) => s.id === sourceId);
+      if (source?.color) {
+        return source.color;
+      }
+    }
+    return "#cc0000";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { ref: containerRef, style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.TextInput,
+      {
+        placeholder: formatMessage({ id: index.getTrad("search.placeholder") }),
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        "aria-label": "Location search"
+      }
+    ),
+    isOpen && results.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        ref: dropdownRef,
+        background: "neutral0",
+        shadow: "filterShadow",
+        borderColor: "neutral150",
+        hasRadius: true,
+        padding: 2,
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          right: 0,
+          zIndex: 1e3,
+          maxHeight: "300px",
+          overflowY: "auto"
+        },
+        children: results.map((result) => {
+          const dotColor = getResultColor(result);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Box,
+            {
+              paddingTop: 2,
+              paddingBottom: 2,
+              paddingLeft: 3,
+              paddingRight: 3,
+              hasRadius: true,
+              background: hoveredId === result.id ? "primary100" : "neutral0",
+              onMouseEnter: () => setHoveredId(result.id),
+              onMouseLeave: () => setHoveredId(null),
+              onClick: () => handleSelectResult(result),
+              style: {
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "10px",
+                      height: "10px",
+                      borderRadius: "50%",
+                      backgroundColor: dotColor,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Typography,
+                  {
+                    variant: "omega",
+                    textColor: "neutral800",
+                    style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: result.place_name
+                  }
+                )
+              ] })
+            },
+            result.id
+          );
+        })
+      }
+    ),
+    isOpen && results.length === 0 && !isLoading && query.trim() && /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        shadow: "filterShadow",
+        borderColor: "neutral150",
+        hasRadius: true,
+        padding: 4,
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          right: 0,
+          zIndex: 1e3
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
+          'No results found for "',
+          query,
+          '"'
+        ] })
+      }
+    )
+  ] });
+};
+class BasemapControl {
+  constructor(_styles, _currentStyleUrl, _onStyleChange, _map, _container) {
+    this._styles = _styles;
+    this._currentStyleUrl = _currentStyleUrl;
+    this._onStyleChange = _onStyleChange;
+    this._map = _map;
+    this._container = _container;
+  }
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+    this._container.style.display = "flex";
+    this._container.style.flexDirection = "row";
+    this._styles.forEach((style, index2) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.title = style.name;
+      button.setAttribute("aria-label", style.name);
+      const span = document.createElement("span");
+      span.textContent = style.name;
+      span.style.padding = "0 8px";
+      button.appendChild(span);
+      button.className = "maplibregl-ctrl-icon";
+      button.style.width = "auto";
+      button.style.height = "29px";
+      button.style.display = "flex";
+      button.style.alignItems = "center";
+      button.style.justifyContent = "center";
+      if (style.url === this._currentStyleUrl) {
+        button.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+        button.style.fontWeight = "bold";
+      }
+      if (index2 < this._styles.length - 1) {
+        button.style.borderRight = "1px solid rgba(0, 0, 0, 0.1)";
+      }
+      button.onclick = () => {
+        const buttons = this._container?.querySelectorAll("button");
+        buttons?.forEach((btn, btnIndex) => {
+          if (btnIndex === index2) {
+            btn.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+            btn.style.fontWeight = "bold";
+          } else {
+            btn.style.backgroundColor = "";
+            btn.style.fontWeight = "";
+          }
+        });
+        this._onStyleChange(style.url);
+      };
+      this._container.appendChild(button);
+    });
+    return this._container;
+  }
+  onRemove() {
+    this._container?.parentNode?.removeChild(this._container);
+    this._map = void 0;
+  }
+  updateCurrentStyle(styleUrl) {
+    this._currentStyleUrl = styleUrl;
+    const buttons = this._container?.querySelectorAll("button");
+    buttons?.forEach((button, index2) => {
+      const btn = button;
+      if (this._styles[index2].url === styleUrl) {
+        btn.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+        btn.style.fontWeight = "bold";
+      } else {
+        btn.style.backgroundColor = "";
+        btn.style.fontWeight = "";
+      }
+    });
+  }
+}
+function BasemapControlComponent({
+  mapStyles,
+  currentStyleUrl,
+  onStyleChange
+}) {
+  const controlRef = Map.useControl(
+    () => new BasemapControl(mapStyles, currentStyleUrl, onStyleChange),
+    {
+      position: "bottom-left"
+    }
+  );
+  React.useEffect(() => {
+    if (controlRef && "updateCurrentStyle" in controlRef) {
+      controlRef.updateCurrentStyle(currentStyleUrl);
+    }
+  }, [currentStyleUrl, controlRef]);
+  return null;
+}
+class LayerControlImpl {
+  constructor(_layers, _onToggle, _map, _container) {
+    this._layers = _layers;
+    this._onToggle = _onToggle;
+    this._map = _map;
+    this._container = _container;
+  }
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+    this._container.style.padding = "0";
+    this._render();
+    return this._container;
+  }
+  onRemove() {
+    if (this._container && this._container.parentNode) {
+      this._container.parentNode.removeChild(this._container);
+    }
+    this._map = void 0;
+  }
+  _render() {
+    if (!this._container) return;
+    this._container.innerHTML = "";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "maplibregl-ctrl-icon";
+    button.title = "Toggle Layers";
+    button.setAttribute("aria-label", "Toggle Layers");
+    button.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+        <path d="M2 17l10 5 10-5"/>
+        <path d="M2 12l10 5 10-5"/>
+      </svg>
+    `;
+    button.style.width = "29px";
+    button.style.height = "29px";
+    button.style.cursor = "pointer";
+    button.style.border = "none";
+    button.style.padding = "0";
+    button.style.display = "flex";
+    button.style.alignItems = "center";
+    button.style.justifyContent = "center";
+    const panel = document.createElement("div");
+    panel.className = "maplibregl-ctrl-layers-panel";
+    panel.style.display = "none";
+    panel.style.position = "absolute";
+    panel.style.top = "0";
+    panel.style.right = "40px";
+    panel.style.background = "white";
+    panel.style.borderRadius = "4px";
+    panel.style.boxShadow = "0 0 0 2px rgba(0, 0, 0, 0.1)";
+    panel.style.padding = "8px";
+    panel.style.minWidth = "180px";
+    panel.style.maxHeight = "300px";
+    panel.style.overflowY = "auto";
+    const title = document.createElement("div");
+    title.textContent = "POI Layers";
+    title.style.fontSize = "12px";
+    title.style.fontWeight = "bold";
+    title.style.marginBottom = "8px";
+    title.style.color = "#333";
+    title.style.fontFamily = "system-ui, -apple-system, sans-serif";
+    panel.appendChild(title);
+    this._layers.forEach((layer) => {
+      const layerItem = document.createElement("div");
+      layerItem.style.display = "flex";
+      layerItem.style.alignItems = "center";
+      layerItem.style.padding = "4px 0";
+      layerItem.style.cursor = "pointer";
+      layerItem.style.fontSize = "12px";
+      layerItem.style.color = "#333";
+      layerItem.style.fontFamily = "system-ui, -apple-system, sans-serif";
+      const circle = document.createElement("div");
+      circle.style.width = "12px";
+      circle.style.height = "12px";
+      circle.style.borderRadius = "50%";
+      circle.style.marginRight = "8px";
+      circle.style.cursor = "pointer";
+      circle.style.flexShrink = "0";
+      circle.style.transition = "all 0.2s ease";
+      if (layer.enabled && layer.color) {
+        circle.style.backgroundColor = layer.color;
+        circle.style.border = "none";
+      } else {
+        circle.style.backgroundColor = "transparent";
+        circle.style.border = "2px solid #999";
+      }
+      layerItem.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._onToggle(layer.id, !layer.enabled);
+      });
+      const labelText = document.createElement("span");
+      labelText.textContent = layer.name;
+      labelText.style.userSelect = "none";
+      layerItem.appendChild(circle);
+      layerItem.appendChild(labelText);
+      panel.appendChild(layerItem);
+    });
+    let isPanelOpen = false;
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      isPanelOpen = !isPanelOpen;
+      panel.style.display = isPanelOpen ? "block" : "none";
+    });
+    document.addEventListener("click", (e) => {
+      if (isPanelOpen && this._container && !this._container.contains(e.target)) {
+        isPanelOpen = false;
+        panel.style.display = "none";
+      }
+    });
+    this._container.appendChild(button);
+    this._container.appendChild(panel);
+  }
+  /**
+   * Update layers (e.g., when toggled externally)
+   */
+  updateLayers(layers) {
+    this._layers = layers;
+    this._render();
+  }
+}
+const LayerControl = ({ mapRef, layers, onLayerToggle }) => {
+  const controlRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!mapRef.current || layers.length === 0) return;
+    const map = mapRef.current.getMap();
+    const control = new LayerControlImpl(layers, onLayerToggle);
+    controlRef.current = control;
+    map.addControl(control, "top-right");
+    return () => {
+      if (controlRef.current) {
+        map.removeControl(controlRef.current);
+        controlRef.current = null;
+      }
+    };
+  }, [mapRef, onLayerToggle]);
+  React.useEffect(() => {
+    if (controlRef.current) {
+      controlRef.current.updateLayers(layers);
+    }
+  }, [layers]);
+  return null;
+};
+const DEFAULT_CONFIG = {
+  mapStyles: [
+    {
+      id: "default",
+      name: "Default",
+      url: "https://tiles.openfreemap.org/styles/liberty",
+      isDefault: true
+    }
+  ],
+  defaultZoom: 4.5,
+  defaultCenter: [0, 0],
+  // Null Island - fallback if not configured
+  geocodingProvider: "nominatim",
+  nominatimUrl: "https://nominatim.openstreetmap.org"
+};
+const usePluginConfig = () => {
+  const [config, setConfig] = React.useState(DEFAULT_CONFIG);
+  const { get } = admin.useFetchClient();
+  React.useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = await get("/maplibre-field/config");
+        if (response.data) {
+          setConfig({ ...DEFAULT_CONFIG, ...response.data });
+        }
+      } catch {
+      }
+    };
+    fetchConfig();
+  }, [get]);
+  return config;
+};
+const protocol = new pmtiles.Protocol();
+maplibregl__default.default.addProtocol("pmtiles", protocol.tile);
+const MapField = ({ intlLabel, name, onChange, value }) => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = admin.useNotification();
+  const config = usePluginConfig();
+  const mapRef = React.useRef(null);
+  const label = intlLabel || { id: "maplibre-field.label", defaultMessage: "Map" };
+  let result = null;
+  if (value) {
+    try {
+      const parsed = typeof value === "string" ? JSON.parse(value) : value;
+      if (parsed && typeof parsed === "object" && parsed.geometry?.coordinates) {
+        result = parsed;
+      }
+    } catch (error) {
+      console.error("MapField: Invalid JSON value", error);
+    }
+  }
+  const isDefaultViewState = result == null;
+  let initialCoordinates = config.defaultCenter || [0, 0];
+  if (result?.geometry?.coordinates && Array.isArray(result.geometry.coordinates)) {
+    const [lng, lat] = result.geometry.coordinates;
+    if (typeof lng === "number" && typeof lat === "number" && !isNaN(lng) && !isNaN(lat)) {
+      initialCoordinates = [lng, lat];
+    }
+  }
+  const isNullIsland = initialCoordinates[0] === 0 && initialCoordinates[1] === 0;
+  const initialAddress = result?.properties?.name || result?.properties?.address || (isNullIsland ? "Null Island" : "");
+  const [longitude, setLongitude] = React.useState(initialCoordinates[0]);
+  const [latitude, setLatitude] = React.useState(initialCoordinates[1]);
+  const [address, setAddress] = React.useState(initialAddress);
+  const [viewState, setViewState] = React.useState({
+    longitude: initialCoordinates[0],
+    latitude: initialCoordinates[1],
+    zoom: isDefaultViewState ? config.defaultZoom || 4.5 : 15
+    // Use zoom 15 when coordinates are saved
+  });
+  const [currentStyleUrl, setCurrentStyleUrl] = React.useState(() => {
+    if (config.mapStyles && config.mapStyles.length > 0) {
+      const defaultStyle = config.mapStyles.find((s) => s.isDefault);
+      return defaultStyle?.url || config.mapStyles[0].url;
+    }
+    return "";
+  });
+  const [displayedPOIs, setDisplayedPOIs] = React.useState([]);
+  const [selectedPOI, setSelectedPOI] = React.useState(null);
+  const [isUpdatingPOIs, setIsUpdatingPOIs] = React.useState(false);
+  const updatePOITimerRef = React.useRef(null);
+  const poiLayersRef = React.useRef([]);
+  const [poiLayers, setPoiLayers] = React.useState(() => {
+    if (!config.poiDisplayEnabled) return [];
+    if (config.poiSources && config.poiSources.length > 0) {
+      return config.poiSources.map((source) => ({
+        id: source.id,
+        name: source.name,
+        enabled: source.enabled !== false,
+        // Default to enabled if not specified
+        color: source.color
+        // Pass the color from config
+      }));
+    }
+    return [];
+  });
+  React.useEffect(() => {
+    poiLayersRef.current = poiLayers;
+  }, [poiLayers]);
+  React.useEffect(() => {
+    if (config.defaultZoom && isDefaultViewState) {
+      setViewState((prev) => ({
+        ...prev,
+        zoom: config.defaultZoom ?? prev.zoom
+      }));
+    }
+  }, [config.defaultZoom, isDefaultViewState]);
+  React.useEffect(() => {
+    if (config.defaultCenter && isDefaultViewState) {
+      const [lng, lat] = config.defaultCenter;
+      const isNullIsland2 = lng === 0 && lat === 0;
+      setLongitude(lng);
+      setLatitude(lat);
+      setAddress(isNullIsland2 ? "Null Island" : "");
+      setViewState((prev) => ({
+        ...prev,
+        longitude: lng,
+        latitude: lat
+      }));
+    }
+  }, [config.defaultCenter, isDefaultViewState]);
+  React.useEffect(() => {
+    if (config.mapStyles && config.mapStyles.length > 0) {
+      const defaultStyle = config.mapStyles.find((s) => s.isDefault);
+      const newStyleUrl = defaultStyle?.url || config.mapStyles[0].url;
+      if (newStyleUrl && newStyleUrl !== currentStyleUrl) {
+        setCurrentStyleUrl(newStyleUrl);
+      }
+    }
+  }, [config.mapStyles]);
+  React.useEffect(() => {
+    if (!config.poiDisplayEnabled) {
+      setPoiLayers([]);
+      return;
+    }
+    if (config.poiSources && config.poiSources.length > 0) {
+      setPoiLayers(
+        config.poiSources.map((source) => ({
+          id: source.id,
+          name: source.name,
+          enabled: source.enabled !== false,
+          color: source.color
+          // Pass the color from config
+        }))
+      );
+      return;
+    }
+    setPoiLayers([]);
+  }, [config.poiDisplayEnabled, config.poiSources]);
+  const handleStyleChange = (newStyleUrl) => {
+    if (!mapRef.current) return;
+    const map = mapRef.current.getMap();
+    const currentCenter = map.getCenter();
+    const currentZoom = map.getZoom();
+    map.setStyle(newStyleUrl);
+    map.once("styledata", () => {
+      map.setCenter(currentCenter);
+      map.setZoom(currentZoom);
+    });
+    setCurrentStyleUrl(newStyleUrl);
+  };
+  const handleLayerToggle = (layerId, enabled) => {
+    setPoiLayers(
+      (prevLayers) => prevLayers.map((layer) => layer.id === layerId ? { ...layer, enabled } : layer)
+    );
+  };
+  const updatePOIMarkers = async () => {
+    if (updatePOITimerRef.current) {
+      clearTimeout(updatePOITimerRef.current);
+    }
+    updatePOITimerRef.current = setTimeout(async () => {
+      const currentPoiLayers = poiLayersRef.current;
+      const hasEnabledLayers = currentPoiLayers.some((layer) => layer.enabled);
+      if (!mapRef.current || !config.poiDisplayEnabled) {
+        return;
+      }
+      if (!hasEnabledLayers) {
+        setDisplayedPOIs([]);
+        return;
+      }
+      if (isUpdatingPOIs) {
+        return;
+      }
+      const map = mapRef.current.getMap();
+      const zoom = map.getZoom();
+      if (zoom < (config.poiMinZoom || 10)) {
+        setDisplayedPOIs([]);
+        return;
+      }
+      const bounds = map.getBounds();
+      const center = map.getCenter();
+      try {
+        setIsUpdatingPOIs(true);
+        const enabledLayers = currentPoiLayers.filter((layer) => layer.enabled);
+        const allPOIs = [];
+        for (const layer of enabledLayers) {
+          let apiUrl = null;
+          let mapName = layer.name;
+          if (config.poiSources) {
+            const source = config.poiSources.find((s) => s.id === layer.id);
+            if (source) {
+              apiUrl = source.apiUrl;
+              mapName = source.name;
+            }
+          }
+          if (apiUrl) {
+            const pois = await queryPOIsForViewport(
+              {
+                north: bounds.getNorth(),
+                south: bounds.getSouth(),
+                east: bounds.getEast(),
+                west: bounds.getWest()
+              },
+              [center.lng, center.lat],
+              config.poiMaxDisplay || 100,
+              {
+                nominatimUrl: config.nominatimUrl || "https://nominatim.openstreetmap.org",
+                customApiUrl: apiUrl,
+                mapName,
+                layerId: layer.id,
+                // Pass the layer ID
+                radius: 100,
+                categories: []
+              }
+            );
+            allPOIs.push(...pois);
+          }
+        }
+        requestAnimationFrame(() => {
+          setDisplayedPOIs(allPOIs);
+          setIsUpdatingPOIs(false);
+        });
+      } catch (error) {
+        console.error("Failed to load POIs:", error);
+        setIsUpdatingPOIs(false);
+      }
+    }, 300);
+  };
+  const handleMainMarkerClick = () => {
+    toggleNotification({
+      type: "info",
+      message: `Marker: [${longitude.toFixed(4)}, ${latitude.toFixed(4)}]`
+    });
+  };
+  const handlePOIClick = async (poi) => {
+    setSelectedPOI(poi);
+    const address2 = poi.address || "";
+    updateValues(
+      createLocationFeature(poi.coordinates, {
+        name: poi.name,
+        address: address2,
+        source: poi.source === "custom" ? poi.layerId : "nominatim",
+        sourceId: poi.id,
+        sourceLayer: poi.mapName,
+        category: poi.type,
+        inputMethod: "poi_click",
+        metadata: poi.metadata
+      })
+    );
+    toggleNotification({
+      type: "success",
+      message: poi.mapName ? `${poi.mapName} ➙ ${poi.name}` : `Selected ${poi.name}`
+    });
+  };
+  const handleMapClick = (evt) => {
+    if (!mapRef.current) return;
+    const map = mapRef.current.getMap();
+    const poiLayer = map.getLayer("poi-circles");
+    if (!poiLayer) {
+      return;
+    }
+    const features = map.queryRenderedFeatures(evt.point, {
+      layers: ["poi-circles"]
+    });
+    if (features && features.length > 0) {
+      const feature = features[0];
+      const featureName = feature.properties?.name;
+      let clickedPOI = displayedPOIs.find((p) => p.name === featureName);
+      if (!clickedPOI) {
+        clickedPOI = displayedPOIs.find((p) => p.id === feature.id);
+      }
+      if (!clickedPOI && feature.id !== void 0) {
+        clickedPOI = displayedPOIs.find((p) => p.id === String(feature.id));
+      }
+      if (clickedPOI) {
+        handlePOIClick(clickedPOI);
+        return;
+      }
+    }
+  };
+  const handleMapDoubleClick = async (evt) => {
+    evt.preventDefault();
+    const clickCoords = [evt.lngLat.lng, evt.lngLat.lat];
+    const snapRadius = typeof config.poiSnapRadius === "number" ? config.poiSnapRadius : 5;
+    try {
+      const enabledLayers = poiLayers.filter((layer) => layer.enabled);
+      const allNearbyPOIs = [];
+      for (const layer of enabledLayers) {
+        let apiUrl = null;
+        let mapName = layer.name;
+        if (config.poiSources) {
+          const source = config.poiSources.find((s) => s.id === layer.id);
+          if (source) {
+            apiUrl = source.apiUrl;
+            mapName = source.name;
+          }
+        }
+        if (apiUrl) {
+          const pois = await searchNearbyPOIsForSnap(
+            clickCoords[1],
+            // lat
+            clickCoords[0],
+            // lng
+            {
+              nominatimUrl: config.nominatimUrl || "https://nominatim.openstreetmap.org",
+              customApiUrl: apiUrl,
+              mapName,
+              layerId: layer.id,
+              // Pass the layer ID
+              radius: snapRadius,
+              categories: []
+            }
+          );
+          allNearbyPOIs.push(...pois);
+        }
+      }
+      const nearestPOI = findNearestPOI(clickCoords, allNearbyPOIs);
+      if (nearestPOI && nearestPOI.distance !== void 0 && nearestPOI.distance <= snapRadius) {
+        await handlePOIClick(nearestPOI);
+        toggleNotification({
+          type: "success",
+          message: `${nearestPOI.name} (${Math.round(nearestPOI.distance)}m)`
+        });
+      } else {
+        updateValues(
+          createLocationFeature(clickCoords, {
+            inputMethod: "map_click"
+          })
+        );
+        toggleNotification({
+          type: "info",
+          message: formatMessage({
+            id: index.getTrad("coordinates-saved"),
+            defaultMessage: "Coordinates set"
+          })
+        });
+      }
+    } catch (error) {
+      console.error("Failed to search nearby POIs:", error);
+      updateValues(
+        createLocationFeature(clickCoords, {
+          inputMethod: "map_click"
+        })
+      );
+      toggleNotification({
+        type: "info",
+        message: formatMessage({
+          id: index.getTrad("coordinates-saved"),
+          defaultMessage: "Coordinates set"
+        })
+      });
+    }
+  };
+  const updateValues = (feature) => {
+    if (!feature) return;
+    const value2 = JSON.stringify(feature);
+    setAddress(feature.properties.name || feature.properties.address || "");
+    setLongitude(feature.geometry.coordinates[0]);
+    setLatitude(feature.geometry.coordinates[1]);
+    onChange({ target: { name, value: value2, type: "json" } });
+  };
+  const handleSearchResult = (feature) => {
+    if (feature.geometry?.coordinates) {
+      const [lng, lat] = feature.geometry.coordinates;
+      mapRef.current?.flyTo({
+        center: [lng, lat],
+        zoom: 16,
+        essential: true
+      });
+    }
+    updateValues(feature);
+    toggleNotification({
+      type: "success",
+      message: `Location set to: ${feature.properties.name || feature.properties.address}`
+    });
+  };
+  React.useEffect(() => {
+    if (!isDefaultViewState && mapRef.current) {
+      const map = mapRef.current.getMap();
+      map?.flyTo({ center: [longitude, latitude], zoom: 15 });
+    }
+  }, [longitude, latitude, isDefaultViewState]);
+  React.useEffect(() => {
+    const protocol2 = new pmtiles.Protocol();
+    maplibregl__default.default.addProtocol("pmtiles", protocol2.tile);
+    return () => {
+      maplibregl__default.default.removeProtocol("pmtiles");
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!mapRef.current || !config.poiDisplayEnabled) return;
+    const map = mapRef.current.getMap();
+    const handleMapUpdate = () => {
+      updatePOIMarkers();
+    };
+    map.once("load", handleMapUpdate);
+    map.on("moveend", handleMapUpdate);
+    map.on("zoomend", handleMapUpdate);
+    return () => {
+      map.off("moveend", handleMapUpdate);
+      map.off("zoomend", handleMapUpdate);
+      if (updatePOITimerRef.current) {
+        clearTimeout(updatePOITimerRef.current);
+      }
+    };
+  }, [config.poiDisplayEnabled, config.poiMinZoom, config.poiMaxDisplay, config.poiSources]);
+  React.useEffect(() => {
+    if (!mapRef.current || !config.poiDisplayEnabled) return;
+    updatePOIMarkers();
+  }, [JSON.stringify(poiLayers.map((l) => ({ id: l.id, enabled: l.enabled })))]);
+  React.useEffect(() => {
+    if (!mapRef.current || !config.poiDisplayEnabled) return;
+    const map = mapRef.current.getMap();
+    const handleMouseEnter = () => {
+      map.getCanvas().style.cursor = "pointer";
+    };
+    const handleMouseLeave = () => {
+      map.getCanvas().style.cursor = "";
+    };
+    map.on("load", () => {
+      map.on("mouseenter", "poi-circles", handleMouseEnter);
+      map.on("mouseleave", "poi-circles", handleMouseLeave);
+    });
+    return () => {
+      map.off("mouseenter", "poi-circles", handleMouseEnter);
+      map.off("mouseleave", "poi-circles", handleMouseLeave);
+    };
+  }, [config.poiDisplayEnabled]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", variant: "pi", fontWeight: "bold", children: formatMessage(label) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchBox,
+      {
+        onSelectResult: handleSearchResult,
+        nominatimUrl: config.nominatimUrl || "https://nominatim.openstreetmap.org",
+        poiSearchEnabled: config.poiSearchEnabled,
+        poiSources: config.poiSources
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
+      {
+        direction: "column",
+        alignItems: "stretch",
+        style: {
+          height: "500px",
+          width: "100%",
+          borderRadius: "4px",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Map__default.default,
+          {
+            ref: mapRef,
+            ...viewState,
+            onMove: (evt) => setViewState(evt.viewState),
+            onClick: handleMapClick,
+            onDblClick: handleMapDoubleClick,
+            mapStyle: currentStyleUrl,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Map.FullscreenControl, { pseudo: config.useFullscreenPseudo ?? true }),
+              /* @__PURE__ */ jsxRuntime.jsx(Map.NavigationControl, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(Map.GeolocateControl, {}),
+              config.mapStyles && config.mapStyles.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                BasemapControlComponent,
+                {
+                  mapStyles: config.mapStyles,
+                  currentStyleUrl,
+                  onStyleChange: handleStyleChange
+                }
+              ),
+              poiLayers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(LayerControl, { mapRef, layers: poiLayers, onLayerToggle: handleLayerToggle }),
+              config.poiDisplayEnabled && displayedPOIs.length > 0 && (() => {
+                const layerColorMap = {};
+                poiLayers.forEach((layer) => {
+                  if (layer.color) {
+                    layerColorMap[layer.id] = layer.color;
+                  }
+                });
+                const colorMatchExpression = ["match", ["get", "layerId"]];
+                Object.entries(layerColorMap).forEach(([layerId, color]) => {
+                  colorMatchExpression.push(layerId, color);
+                });
+                colorMatchExpression.push("#999999");
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  Map.Source,
+                  {
+                    id: "poi-markers",
+                    type: "geojson",
+                    data: {
+                      type: "FeatureCollection",
+                      features: displayedPOIs.slice(0, 100).map((poi) => ({
+                        type: "Feature",
+                        id: poi.id,
+                        geometry: {
+                          type: "Point",
+                          coordinates: poi.coordinates
+                        },
+                        properties: {
+                          name: poi.name || "Unknown",
+                          type: poi.type || "poi",
+                          source: poi.source,
+                          layerId: poi.layerId || "",
+                          // Include layerId for color mapping
+                          isSelected: selectedPOI?.id === poi.id
+                        }
+                      }))
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Map.Layer,
+                        {
+                          id: "poi-circles",
+                          type: "circle",
+                          paint: {
+                            "circle-radius": [
+                              "case",
+                              ["get", "isSelected"],
+                              12,
+                              // Larger radius for selected
+                              10
+                              // Regular radius
+                            ],
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            "circle-color": colorMatchExpression,
+                            // Use dynamic color mapping based on layerId per POI
+                            "circle-stroke-width": 2,
+                            "circle-stroke-color": "#ffffff",
+                            "circle-opacity": [
+                              "case",
+                              ["get", "isSelected"],
+                              0.8,
+                              // Selected POI opacity
+                              1
+                              // Regular POI opacity
+                            ]
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Map.Layer,
+                        {
+                          id: "poi-labels",
+                          type: "symbol",
+                          minzoom: 12,
+                          layout: {
+                            "text-field": ["get", "name"],
+                            "text-size": 12,
+                            "text-offset": [0, 1.5],
+                            "text-anchor": "top",
+                            "text-optional": true,
+                            "symbol-placement": "point",
+                            "text-allow-overlap": false,
+                            "text-ignore-placement": false
+                          },
+                          paint: {
+                            "text-color": "#333333",
+                            "text-halo-color": "#ffffff",
+                            "text-halo-width": 2
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  `poi-source-${displayedPOIs.length}-${selectedPOI?.id || "none"}`
+                );
+              })(),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Map.Marker,
+                {
+                  longitude,
+                  latitude,
+                  color: "#4945ff",
+                  onClick: handleMainMarkerClick
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { padding: 1, col: 6, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+          id: result?.properties?.sourceId ? index.getTrad("fields.poi-name") : index.getTrad("fields.address"),
+          defaultMessage: result?.properties?.sourceId ? "POI Name" : "Address"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { name: "place_name", value: address, disabled: true })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { padding: 1, col: 3, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+          id: index.getTrad("fields.longitude"),
+          defaultMessage: "Longitude"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { name: "longitude", value: longitude, disabled: true })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { padding: 1, col: 3, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+          id: index.getTrad("fields.latitude"),
+          defaultMessage: "Latitude"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { name: "latitude", value: latitude, disabled: true })
+      ] }) }),
+      result?.properties?.sourceId && result?.properties?.address && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { padding: 1, col: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+          id: index.getTrad("fields.poi-address"),
+          defaultMessage: "Full Address"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { name: "poi_address", value: result.properties.address, disabled: true })
+      ] }) })
+    ] })
+  ] });
+};
+exports.default = MapField;