@premiate/strapi-plugin-maplibre-field 1.0.6

package/dist/_chunks/index-BNnkn7JG.mjs

@@ -0,0 +1,1778 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useEffect, useRef } from "react";
+import { useFetchClient, useNotification } from "@strapi/strapi/admin";
+import MapLibreGeocoder from "@maplibre/maplibre-gl-geocoder";
+import maplibregl from "maplibre-gl";
+import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
+import Map, { useControl, FullscreenControl, NavigationControl, GeolocateControl, Source, Layer, Marker } from "react-map-gl/maplibre";
+import { Flex, Typography, Grid, Field } from "@strapi/design-system";
+import { p as pluginId } from "./index-BF5T-kqa.mjs";
+import { Protocol } from "pmtiles";
+import "maplibre-gl/dist/maplibre-gl.css";
+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$1 = { 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;
+}
+if (process.env.NODE_ENV === "production") {
+  reactIs$1.exports = requireReactIs_production_min();
+} else {
+  reactIs$1.exports = requireReactIs_development();
+}
+var reactIsExports = reactIs$1.exports;
+var reactIs = reactIsExports;
+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[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+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.Fragment });
+var IntlContext = typeof window !== "undefined" && !window.__REACT_INTL_BYPASS_GLOBAL_CONTEXT__ ? window.__REACT_INTL_CONTEXT__ || (window.__REACT_INTL_CONTEXT__ = React.createContext(null)) : React.createContext(null);
+IntlContext.Consumer;
+IntlContext.Provider;
+var Context = IntlContext;
+function useIntl() {
+  var intl = React.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.Fragment;
+    return React.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 DEFAULT_CONFIG = {
+  mapStyles: [
+    {
+      id: "default",
+      name: "Default",
+      url: "https://demotiles.maplibre.org/style.json",
+      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] = useState(DEFAULT_CONFIG);
+  const [loading, setLoading] = useState(true);
+  const { get } = useFetchClient();
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = await get("/maplibre-field/config");
+        console.log("[MapLibre Hook] Fetched config from API:", response.data);
+        if (response.data) {
+          setConfig({ ...DEFAULT_CONFIG, ...response.data });
+        }
+      } catch (error) {
+        console.error("[MapLibre Hook] Failed to fetch config:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchConfig();
+  }, [get]);
+  if (loading) {
+    console.log("[MapLibre Hook] Loading config...");
+  }
+  return config;
+};
+const USER_AGENT$2 = "strapi-plugin-maplibre-field/1.0.0 (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 {
+    console.log(`[POI Service] Fetching from: ${apiUrl}`);
+    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");
+    }
+    console.log(`[POI Service] Loaded ${data.features.length} features from ${apiUrl}`);
+    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`;
+    console.log("[Nominatim] Querying:", url);
+    const response = await fetch(url, {
+      headers: {
+        "User-Agent": USER_AGENT$2
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log("[Nominatim] Response:", data);
+    if (!data) {
+      console.log("[Nominatim] No data returned");
+      return [];
+    }
+    const coordinates = [parseFloat(data.lon), parseFloat(data.lat)];
+    const distance = calculateDistance([lng, lat], coordinates);
+    console.log("[Nominatim] Distance calculated:", distance, "meters (radius:", radius, "m)");
+    console.log("[Nominatim] Click coords:", [lng, lat], "Result coords:", coordinates);
+    if (distance > radius) {
+      console.log("[Nominatim] POI outside radius, rejecting");
+      return [];
+    }
+    let poiName = data.name || data.display_name || "Unknown Location";
+    if (data.namedetails) {
+      poiName = data.namedetails.name || poiName;
+    }
+    console.log("[Nominatim] POI found:", poiName, "type:", data.type || data.class);
+    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 name = properties.name || "Unnamed Location";
+  const poi = {
+    id: feature.id?.toString() || `custom-${Date.now()}-${Math.random()}`,
+    name,
+    type: properties.type || properties.sport || properties.leisure || "poi",
+    coordinates,
+    address: 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$1 = "strapi-plugin-maplibre-field/1.0.0 (Strapi CMS)";
+const GeocoderControl = ({
+  mapRef,
+  position = "top-left",
+  onResult
+}) => {
+  const geocoderRef = useRef(null);
+  const config = usePluginConfig();
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const map = mapRef.current.getMap();
+    if (!map || geocoderRef.current) return;
+    const geocoderApi = {
+      forwardGeocode: async (geocoderConfig) => {
+        const query = geocoderConfig.query;
+        if (typeof query !== "string" || !query.trim()) {
+          return { type: "FeatureCollection", features: [] };
+        }
+        try {
+          const results = [];
+          if (config.poiSources && config.poiSearchEnabled) {
+            const enabledSources = config.poiSources.filter((source) => source.enabled !== false);
+            for (const source of enabledSources) {
+              try {
+                const customPOIs = await searchPOIsForGeocoder(
+                  query,
+                  {
+                    nominatimUrl: config.nominatimUrl || "https://nominatim.openstreetmap.org",
+                    customApiUrl: source.apiUrl,
+                    mapName: source.name,
+                    radius: 100,
+                    categories: []
+                  }
+                );
+                const customFeatures = customPOIs.filter((poi) => poi.source === "custom").slice(0, 5).map((poi) => ({
+                  type: "Feature",
+                  geometry: {
+                    type: "Point",
+                    coordinates: poi.coordinates
+                  },
+                  place_name: poi.name,
+                  properties: {
+                    ...poi,
+                    source: "custom",
+                    poi_source_id: source.id
+                    // For color lookup in render function
+                  },
+                  text: poi.name,
+                  place_type: ["poi"],
+                  center: poi.coordinates
+                }));
+                results.push(...customFeatures);
+              } catch (error) {
+                console.warn(`Custom API search failed for ${source.name}, continuing:`, error);
+              }
+            }
+          }
+          const nominatimResponse = await fetch(
+            `${config.nominatimUrl}/search?q=${encodeURIComponent(query)}&format=json&addressdetails=1&limit=5`,
+            {
+              headers: {
+                "User-Agent": USER_AGENT$1
+              }
+            }
+          );
+          if (nominatimResponse.ok) {
+            const nominatimData = await nominatimResponse.json();
+            const nominatimFeatures = nominatimData.map((result) => ({
+              type: "Feature",
+              geometry: {
+                type: "Point",
+                coordinates: [parseFloat(result.lon), parseFloat(result.lat)]
+              },
+              place_name: result.display_name,
+              properties: { ...result, source: "nominatim" },
+              text: result.display_name,
+              place_type: ["place"],
+              center: [parseFloat(result.lon), parseFloat(result.lat)]
+            }));
+            results.push(...nominatimFeatures);
+          }
+          return {
+            type: "FeatureCollection",
+            features: results
+          };
+        } catch (error) {
+          console.error("Geocoding error:", error);
+          return { type: "FeatureCollection", features: [] };
+        }
+      },
+      maplibregl
+    };
+    const geocoderOptions = {
+      marker: false,
+      showResultsWhileTyping: false,
+      // Require Enter key for Nominatim policy compliance
+      render: (item) => {
+        const properties = "properties" in item ? item.properties : void 0;
+        const source = properties?.source;
+        let dotColor = "#6c757d";
+        if (source === "custom") {
+          const poiSourceId = properties?.poi_source_id;
+          const poiSource = config.poiSources?.find((s) => s.id === poiSourceId);
+          dotColor = poiSource?.color || "#cc0000";
+        }
+        const escapeHtml = (str) => {
+          return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+        };
+        const placeName = "place_name" in item ? item.place_name : void 0;
+        const displayText = escapeHtml(item.text || placeName || "");
+        return `
+          <div class="maplibregl-ctrl-geocoder--suggestion">
+            <div class="maplibregl-ctrl-geocoder--suggestion-icon">
+              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${dotColor};border:2px solid #ffffff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);"></span>
+            </div>
+            <div class="maplibregl-ctrl-geocoder--suggestion-info">
+              <div class="maplibregl-ctrl-geocoder--suggestion-title">
+                ${displayText}
+              </div>
+            </div>
+          </div>
+        `;
+      }
+    };
+    const geocoder = new MapLibreGeocoder(geocoderApi, geocoderOptions);
+    if (onResult) {
+      geocoder.on("result", (evt) => {
+        onResult(evt);
+      });
+    }
+    map.addControl(geocoder, position);
+    geocoderRef.current = geocoder;
+    return () => {
+      if (geocoderRef.current && map) {
+        try {
+          map.removeControl(geocoderRef.current);
+        } catch (error) {
+          console.warn("Error removing geocoder control:", error);
+        }
+        geocoderRef.current = null;
+      }
+    };
+  }, [mapRef, position, onResult, config.nominatimUrl]);
+  return null;
+};
+class BasemapControl {
+  _map;
+  _container;
+  _styles;
+  _currentStyleUrl;
+  _onStyleChange;
+  constructor(styles, currentStyleUrl, onStyleChange) {
+    this._styles = styles;
+    this._currentStyleUrl = currentStyleUrl;
+    this._onStyleChange = onStyleChange;
+  }
+  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, index) => {
+      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 (index < 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 === index) {
+            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, index) => {
+      const btn = button;
+      if (this._styles[index].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 = useControl(
+    () => new BasemapControl(mapStyles, currentStyleUrl, onStyleChange),
+    {
+      position: "bottom-left"
+    }
+  );
+  useEffect(() => {
+    if (controlRef && "updateCurrentStyle" in controlRef) {
+      controlRef.updateCurrentStyle(currentStyleUrl);
+    }
+  }, [currentStyleUrl, controlRef]);
+  return null;
+}
+class LayerControlImpl {
+  _map;
+  _container;
+  _layers;
+  _onToggle;
+  constructor(layers, onToggle) {
+    this._layers = layers;
+    this._onToggle = onToggle;
+  }
+  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 = useRef(null);
+  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]);
+  useEffect(() => {
+    if (controlRef.current) {
+      controlRef.current.updateLayers(layers);
+    }
+  }, [layers]);
+  return null;
+};
+class CreditsControlImpl {
+  _map;
+  _container;
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-attrib maplibregl-compact";
+    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-attrib-button";
+    button.title = "Toggle attribution";
+    button.setAttribute("aria-label", "Toggle attribution");
+    button.setAttribute("type", "button");
+    button.setAttribute("aria-pressed", "false");
+    const panel = document.createElement("div");
+    panel.className = "maplibregl-ctrl-attrib maplibregl-compact";
+    panel.style.display = "none";
+    panel.style.background = "rgba(255, 255, 255, 0.5)";
+    panel.style.fontSize = "11px";
+    panel.style.padding = "0 5px";
+    panel.style.margin = "0";
+    panel.style.lineHeight = "20px";
+    panel.style.color = "rgba(0, 0, 0, 0.75)";
+    const content = document.createElement("div");
+    content.innerHTML = `
+      <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">© OpenStreetMap</a> |
+      <a href="https://maplibre.org/" target="_blank" rel="noopener noreferrer">MapLibre</a>
+    `;
+    content.querySelectorAll("a").forEach((link) => {
+      link.style.color = "rgba(0, 0, 0, 0.75)";
+      link.style.textDecoration = "none";
+    });
+    panel.appendChild(content);
+    let isPanelOpen = false;
+    const togglePanel = (open) => {
+      isPanelOpen = open;
+      panel.style.display = isPanelOpen ? "block" : "none";
+      button.setAttribute("aria-pressed", isPanelOpen ? "true" : "false");
+    };
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      togglePanel(!isPanelOpen);
+    });
+    document.addEventListener("click", (e) => {
+      if (isPanelOpen && this._container && !this._container.contains(e.target)) {
+        togglePanel(false);
+      }
+    });
+    this._container.appendChild(button);
+    this._container.appendChild(panel);
+  }
+}
+const CreditsControl = ({ mapRef }) => {
+  const controlRef = useRef(null);
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const map = mapRef.current.getMap();
+    const control = new CreditsControlImpl();
+    controlRef.current = control;
+    map.addControl(control, "bottom-right");
+    return () => {
+      if (controlRef.current) {
+        map.removeControl(controlRef.current);
+        controlRef.current = null;
+      }
+    };
+  }, [mapRef]);
+  return null;
+};
+const getTrad = (id) => `${pluginId}.${id}`;
+const USER_AGENT = "strapi-plugin-maplibre-field/1.0.0 (Strapi CMS)";
+let protocol = new Protocol();
+maplibregl.addProtocol("pmtiles", protocol.tile);
+const MapField = ({ intlLabel, name, onChange, value }) => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const config = usePluginConfig();
+  const mapRef = useRef(null);
+  console.log("[MapLibre MapField] Using config:", config);
+  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] = useState(initialCoordinates[0]);
+  const [latitude, setLatitude] = useState(initialCoordinates[1]);
+  const [address, setAddress] = useState(initialAddress);
+  const [viewState, setViewState] = useState({
+    longitude: initialCoordinates[0],
+    latitude: initialCoordinates[1],
+    zoom: isDefaultViewState ? config.defaultZoom || 4.5 : 15
+    // Use zoom 15 when coordinates are saved
+  });
+  const [currentStyleUrl, setCurrentStyleUrl] = 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] = useState([]);
+  const [selectedPOI, setSelectedPOI] = useState(null);
+  const [isUpdatingPOIs, setIsUpdatingPOIs] = useState(false);
+  const updatePOITimerRef = useRef(null);
+  const poiLayersRef = useRef([]);
+  const [poiLayers, setPoiLayers] = 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 [];
+  });
+  useEffect(() => {
+    poiLayersRef.current = poiLayers;
+  }, [poiLayers]);
+  useEffect(() => {
+    if (config.defaultZoom && isDefaultViewState) {
+      setViewState((prev) => ({
+        ...prev,
+        zoom: config.defaultZoom ?? prev.zoom
+      }));
+    }
+  }, [config.defaultZoom, isDefaultViewState]);
+  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]);
+  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]);
+  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 handlePOIClick = async (poi) => {
+    setSelectedPOI(poi);
+    let address2 = poi.address;
+    if (!address2 || address2.trim() === "") {
+      try {
+        const [lng, lat] = poi.coordinates;
+        const nominatimUrl = config.nominatimUrl || "https://nominatim.openstreetmap.org";
+        const response = await fetch(
+          `${nominatimUrl}/reverse?format=jsonv2&lat=${lat}&lon=${lng}`,
+          {
+            headers: {
+              "User-Agent": USER_AGENT
+            }
+          }
+        );
+        if (response.ok) {
+          const data = await response.json();
+          address2 = data.display_name || "";
+        }
+      } catch (error) {
+        console.warn("Reverse geocoding failed:", error);
+      }
+    }
+    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 : config.poiSnapRadius?.default ?? 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: getTrad("coordinates-saved"),
+            defaultMessage: "Coordinates saved"
+          })
+        });
+      }
+    } catch (error) {
+      console.error("Failed to search nearby POIs:", error);
+      updateValues(createLocationFeature(clickCoords, {
+        inputMethod: "map_click"
+      }));
+      toggleNotification({
+        type: "info",
+        message: formatMessage({
+          id: getTrad("coordinates-saved"),
+          defaultMessage: "Coordinates saved"
+        })
+      });
+    }
+  };
+  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 handleGeocoderResult = (evt) => {
+    const { result: result2 } = evt;
+    if (result2?.center) {
+      const properties = result2.properties || {};
+      const isCustomSource = properties.source === "custom";
+      let name2 = result2.place_name || "";
+      if (!isCustomSource && properties.display_name) {
+        name2 = properties.name || properties.display_name.split(",")[0].trim();
+      }
+      updateValues(createLocationFeature(result2.center, {
+        name: isCustomSource ? result2.place_name : name2,
+        address: isCustomSource ? void 0 : result2.place_name,
+        // Full address for Nominatim
+        source: isCustomSource ? properties.poi_source_id : "nominatim",
+        sourceId: isCustomSource ? properties.id : `nominatim-${properties.place_id}`,
+        sourceLayer: isCustomSource ? properties.mapName : void 0,
+        category: properties.type || properties.class,
+        inputMethod: "search",
+        metadata: isCustomSource ? properties.metadata : {
+          osm_id: properties.osm_id,
+          osm_type: properties.osm_type,
+          place_id: properties.place_id,
+          addresstype: properties.addresstype
+        }
+      }));
+    }
+  };
+  useEffect(() => {
+    if (!isDefaultViewState && mapRef.current) {
+      const map = mapRef.current.getMap();
+      map?.flyTo({ center: [longitude, latitude], zoom: 15 });
+    }
+  }, [longitude, latitude, isDefaultViewState]);
+  useEffect(() => {
+    let protocol2 = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol2.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+  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]);
+  useEffect(() => {
+    if (!mapRef.current || !config.poiDisplayEnabled) return;
+    updatePOIMarkers();
+  }, [JSON.stringify(poiLayers.map((l) => ({ id: l.id, enabled: l.enabled })))]);
+  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__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", variant: "pi", fontWeight: "bold", children: formatMessage(label) }),
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        direction: "column",
+        alignItems: "stretch",
+        style: {
+          height: "500px",
+          width: "100%",
+          borderRadius: "4px",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs(
+          Map,
+          {
+            ref: mapRef,
+            ...viewState,
+            onMove: (evt) => setViewState(evt.viewState),
+            onClick: handleMapClick,
+            onDblClick: handleMapDoubleClick,
+            mapStyle: currentStyleUrl,
+            attributionControl: false,
+            children: [
+              /* @__PURE__ */ jsx(FullscreenControl, {}),
+              /* @__PURE__ */ jsx(NavigationControl, {}),
+              /* @__PURE__ */ jsx(GeolocateControl, {}),
+              /* @__PURE__ */ jsx(
+                GeocoderControl,
+                {
+                  mapRef,
+                  position: "top-left",
+                  onResult: handleGeocoderResult
+                }
+              ),
+              config.mapStyles && config.mapStyles.length > 1 && /* @__PURE__ */ jsx(
+                BasemapControlComponent,
+                {
+                  mapStyles: config.mapStyles,
+                  currentStyleUrl,
+                  onStyleChange: handleStyleChange
+                }
+              ),
+              poiLayers.length > 0 && /* @__PURE__ */ jsx(
+                LayerControl,
+                {
+                  mapRef,
+                  layers: poiLayers,
+                  onLayerToggle: handleLayerToggle
+                }
+              ),
+              /* @__PURE__ */ jsx(CreditsControl, { mapRef }),
+              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__ */ jsxs(
+                  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__ */ jsx(
+                        Layer,
+                        {
+                          id: "poi-circles",
+                          type: "circle",
+                          paint: {
+                            "circle-radius": [
+                              "case",
+                              ["get", "isSelected"],
+                              12,
+                              // Larger radius for selected
+                              10
+                              // Regular radius
+                            ],
+                            "circle-color": colorMatchExpression,
+                            // Use dynamic color mapping based on layerId for all POIs
+                            "circle-stroke-width": 2,
+                            "circle-stroke-color": "#ffffff",
+                            "circle-opacity": [
+                              "case",
+                              ["get", "isSelected"],
+                              0.8,
+                              // Selected POI opacity
+                              1
+                              // Regular POI opacity
+                            ]
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        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__ */ jsx(Marker, { longitude, latitude, color: "#1da1f2" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid.Root, { children: [
+      /* @__PURE__ */ jsx(Grid.Item, { padding: 1, col: 8, xs: 12, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: result?.properties?.sourceId ? getTrad("fields.poi-name") : getTrad("fields.address"),
+          defaultMessage: result?.properties?.sourceId ? "POI Name" : "Address"
+        }) }),
+        /* @__PURE__ */ jsx(Field.Input, { name: "place_name", value: address, disabled: true })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { padding: 1, col: 2, xs: 12, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTrad("fields.longitude"),
+          defaultMessage: "Longitude"
+        }) }),
+        /* @__PURE__ */ jsx(Field.Input, { name: "longitude", value: longitude, disabled: true })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { padding: 1, col: 2, xs: 12, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTrad("fields.latitude"),
+          defaultMessage: "Latitude"
+        }) }),
+        /* @__PURE__ */ jsx(Field.Input, { name: "latitude", value: latitude, disabled: true })
+      ] }) }),
+      result?.properties?.sourceId && result?.properties?.address && /* @__PURE__ */ jsx(Grid.Item, { padding: 1, col: 12, xs: 12, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTrad("fields.poi-address"),
+          defaultMessage: "Full Address"
+        }) }),
+        /* @__PURE__ */ jsx(Field.Input, { name: "poi_address", value: result.properties.address, disabled: true })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  MapField as default
+};