@premiate/strapi-plugin-maplibre-field 1.1.2 → 1.2.1

package/dist/_chunks/{index-D9yb6SXN.js → index-ysvid6md.js}

@@ -3,13 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const admin = require("@strapi/strapi/admin");
-const MapLibreGeocoder = require("@maplibre/maplibre-gl-geocoder");
-const maplibregl = require("maplibre-gl");
-require("@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css");
-const Map = require("react-map-gl/maplibre");
 const designSystem = require("@strapi/design-system");
-const index = require("./index-DG3FGfzf.js");
+const index = require("./index-CDY4Awnh.js");
+const Map = require("@vis.gl/react-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) {
@@ -30,9 +28,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-const MapLibreGeocoder__default = /* @__PURE__ */ _interopDefault(MapLibreGeocoder);
-const maplibregl__default = /* @__PURE__ */ _interopDefault(maplibregl);
 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++) {
@@ -440,38 +437,6 @@ 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] = 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 USER_AGENT$2 = "strapi-plugin-maplibre-field (Strapi CMS)";
 function createLocationFeature(coordinates, properties = {}) {
   const cleanProperties = Object.fromEntries(
@@ -498,7 +463,6 @@ function calculateDistance(coord1, coord2) {
 }
 async function queryCustomAPI(apiUrl, searchQuery) {
   try {
-    console.log(`[POI Service] Fetching from: ${apiUrl}`);
     const response = await fetch(apiUrl);
     if (!response.ok) {
       console.error(
@@ -511,7 +475,6 @@ async function queryCustomAPI(apiUrl, searchQuery) {
       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();
@@ -529,7 +492,6 @@ async function queryCustomAPI(apiUrl, searchQuery) {
 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
@@ -539,24 +501,18 @@ async function queryNominatim(lat, lng, radius, nominatimUrl) {
       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,
@@ -704,161 +660,265 @@ async function queryPOIsForViewport(bounds, center, maxDisplay, config) {
   }
 }
 const USER_AGENT$1 = "strapi-plugin-maplibre-field/1.0.0 (Strapi CMS)";
-const GeocoderControl = ({
-  mapRef,
-  position = "top-left",
-  onResult
-}) => {
-  const geocoderRef = React.useRef(null);
-  const config = usePluginConfig();
-  React.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) => ({
+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: [parseFloat(result.lon), parseFloat(result.lat)]
+                coordinates: poi.coordinates
               },
-              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: maplibregl__default.default
-    };
-    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";
+              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$1
         }
-        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__default.default(geocoderApi, geocoderOptions);
-    if (onResult) {
-      geocoder.on("result", (evt) => {
-        const feature = evt.result;
-        const geometry = feature.geometry;
-        const coords = geometry && "coordinates" in geometry ? geometry.coordinates : void 0;
-        const result = {
-          result: {
-            center: Array.isArray(coords) && coords.length >= 2 ? [coords[0], coords[1]] : void 0,
-            place_name: feature.place_name || "",
-            geometry: geometry?.type === "Point" && Array.isArray(coords) && coords.length >= 2 ? {
+    );
+    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: [coords[0], coords[1]]
-            } : void 0
-          }
-        };
-        onResult(result);
-      });
+              coordinates: [parseFloat(result.lon), parseFloat(result.lat)]
+            },
+            properties: {
+              name: result.display_name,
+              address: result.display_name,
+              source: "nominatim",
+              inputMethod: "search"
+            }
+          },
+          source: "nominatim"
+        }))
+      );
     }
-    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;
+  } 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);
       }
     };
-  }, [mapRef, position, onResult, config.nominatimUrl]);
-  return null;
+    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 {
   _map;
@@ -1100,88 +1160,38 @@ const LayerControl = ({ mapRef, layers, onLayerToggle }) => {
   }, [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);
+const DEFAULT_CONFIG = {
+  mapStyles: [
+    {
+      id: "default",
+      name: "Default",
+      url: "https://tiles.openfreemap.org/styles/liberty",
+      isDefault: true
     }
-    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 = React.useRef(null);
+  ],
+  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(() => {
-    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;
+    const fetchConfig = async () => {
+      try {
+        const response = await get("/maplibre-field/config");
+        if (response.data) {
+          setConfig({ ...DEFAULT_CONFIG, ...response.data });
+        }
+      } catch {
       }
     };
-  }, [mapRef]);
-  return null;
+    fetchConfig();
+  }, [get]);
+  return config;
 };
-const getTrad = (id) => `${index.pluginId}.${id}`;
 const USER_AGENT = "strapi-plugin-maplibre-field/1.0.0 (Strapi CMS)";
 const protocol = new pmtiles.Protocol();
 maplibregl__default.default.addProtocol("pmtiles", protocol.tile);
@@ -1426,7 +1436,7 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
     );
     toggleNotification({
       type: "success",
-      message: poi.mapName ? `${poi.mapName} → ${poi.name}` : `Selected ${poi.name}`
+      message: poi.mapName ? `${poi.mapName} ➙ ${poi.name}` : `Selected ${poi.name}`
     });
   };
   const handleMapClick = (evt) => {
@@ -1507,8 +1517,8 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
         toggleNotification({
           type: "info",
           message: formatMessage({
-            id: getTrad("coordinates-saved"),
-            defaultMessage: "Coordinates saved"
+            id: index.getTrad("coordinates-saved"),
+            defaultMessage: "Coordinates set"
           })
         });
       }
@@ -1522,8 +1532,8 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
       toggleNotification({
         type: "info",
         message: formatMessage({
-          id: getTrad("coordinates-saved"),
-          defaultMessage: "Coordinates saved"
+          id: index.getTrad("coordinates-saved"),
+          defaultMessage: "Coordinates set"
         })
       });
     }
@@ -1536,36 +1546,20 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
     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";
-      const getString = (val) => typeof val === "string" ? val : void 0;
-      let name2 = result2.place_name || "";
-      const displayName = getString(properties.display_name);
-      if (!isCustomSource && displayName) {
-        name2 = getString(properties.name) || displayName.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: getString(isCustomSource ? properties.poi_source_id : "nominatim"),
-          sourceId: getString(isCustomSource ? properties.id : `nominatim-${properties.place_id}`),
-          sourceLayer: getString(isCustomSource ? properties.mapName : void 0),
-          category: getString(properties.type) || getString(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
-          }
-        })
-      );
+  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) {
@@ -1621,6 +1615,15 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
   }, [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,
       {
@@ -1641,12 +1644,10 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
             onClick: handleMapClick,
             onDblClick: handleMapDoubleClick,
             mapStyle: currentStyleUrl,
-            attributionControl: false,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Map.FullscreenControl, {}),
               /* @__PURE__ */ jsxRuntime.jsx(Map.NavigationControl, {}),
               /* @__PURE__ */ jsxRuntime.jsx(Map.GeolocateControl, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(GeocoderControl, { mapRef, position: "top-left", onResult: handleGeocoderResult }),
               config.mapStyles && config.mapStyles.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
                 BasemapControlComponent,
                 {
@@ -1656,7 +1657,6 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
                 }
               ),
               poiLayers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(LayerControl, { mapRef, layers: poiLayers, onLayerToggle: handleLayerToggle }),
-              /* @__PURE__ */ jsxRuntime.jsx(CreditsControl, { mapRef }),
               config.poiDisplayEnabled && displayedPOIs.length > 0 && (() => {
                 const layerColorMap = {};
                 poiLayers.forEach((layer) => {
@@ -1752,7 +1752,7 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
                   `poi-source-${displayedPOIs.length}-${selectedPOI?.id || "none"}`
                 );
               })(),
-              /* @__PURE__ */ jsxRuntime.jsx(Map.Marker, { longitude, latitude, color: "#1da1f2" })
+              /* @__PURE__ */ jsxRuntime.jsx(Map.Marker, { longitude, latitude, color: "#4945ff" })
             ]
           }
         )
@@ -1761,28 +1761,28 @@ const MapField = ({ intlLabel, name, onChange, value }) => {
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { padding: 1, col: 8, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
-          id: result?.properties?.sourceId ? getTrad("fields.poi-name") : getTrad("fields.address"),
+          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: 2, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
-          id: getTrad("fields.longitude"),
+          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: 2, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
-          id: getTrad("fields.latitude"),
+          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: getTrad("fields.poi-address"),
+          id: index.getTrad("fields.poi-address"),
           defaultMessage: "Full Address"
         }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { name: "poi_address", value: result.properties.address, disabled: true })