@geowiki/map 0.16.9-dev.8 → 0.16.9

package/dist/index.mjs

@@ -38,7 +38,7 @@ import {
   useEvolandStore,
   useMapLayerStore,
   useMapStore
-} from "./chunk-3LCQXIYM.mjs";
+} from "./chunk-ALCD7VXT.mjs";
 
 // src/Components/CanvasImage.tsx
 var CanvasImage = () => {
@@ -224,10 +224,8 @@ var BingLayer = class extends L3.TileLayer {
     for (let i = z4; i > 0; i--) {
       let digit = 0;
       const mask = 1 << i - 1;
-      if ((x & mask) !== 0)
-        digit += 1;
-      if ((y & mask) !== 0)
-        digit += 2;
+      if ((x & mask) !== 0) digit += 1;
+      if ((y & mask) !== 0) digit += 2;
       quad = quad + digit;
     }
     return quad;
@@ -241,8 +239,7 @@ var BingLayer = class extends L3.TileLayer {
   }
   loadMetadata() {
     var _a;
-    if (this.metaRequested)
-      return;
+    if (this.metaRequested) return;
     this.metaRequested = true;
     const _this = this;
     const cbid = "_bing_metadata_" + L3.Util.stamp(this);
@@ -250,8 +247,7 @@ var BingLayer = class extends L3.TileLayer {
       var _a2;
       window[cbid] = void 0;
       const e = document.getElementById(cbid);
-      if (e)
-        (_a2 = e.parentNode) == null ? void 0 : _a2.removeChild(e);
+      if (e) (_a2 = e.parentNode) == null ? void 0 : _a2.removeChild(e);
       if (meta.errorDetails) {
         console.log(meta.errorDetails);
         return;
@@ -295,8 +291,7 @@ var BingLayer = class extends L3.TileLayer {
     this._update();
   }
   _update() {
-    if (this._url === null || !this._map)
-      return;
+    if (this._url === null || !this._map) return;
     this._update_attribution();
     super._update();
   }
@@ -458,8 +453,7 @@ var useMapControlStore = create2((set) => ({
   })),
   toggleControlOpen: (id) => set((state) => {
     const targetControl = state.controls.find((c) => c.id === id);
-    if (!targetControl)
-      return state;
+    if (!targetControl) return state;
     const targetPosition = targetControl.position;
     const shouldOpenTarget = !targetControl.isOpen;
     const updatedControls = state.controls.map((control) => {
@@ -645,7 +639,7 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 var constructLegendUrl = (baseUrl, layer, format, style) => {
   return `${baseUrl}?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=${format}&LAYER=${layer}&STYLE=${style}&legend_options=dpi:150`;
 };
-var fetchLegendData = (baseUrl, layerName, format, style) => __async(void 0, null, function* () {
+var fetchLegendData = (baseUrl, layerName, format, style) => __async(null, null, function* () {
   const legendGraphicUrl = constructLegendUrl(
     baseUrl,
     layerName,
@@ -1462,10 +1456,8 @@ var LayerSwitcher = memo2(() => {
     },
     [openHoverCardId]
   );
-  if (error)
-    return /* @__PURE__ */ jsx14("div", { children: "Error loading map layers" });
-  if (isLoading)
-    return /* @__PURE__ */ jsx14("div", { children: "Loading layers..." });
+  if (error) return /* @__PURE__ */ jsx14("div", { children: "Error loading map layers" });
+  if (isLoading) return /* @__PURE__ */ jsx14("div", { children: "Loading layers..." });
   const mapMenus = parseMapMenuItems(mapMenuItems);
   const hasRegularLayers = (mapMenus == null ? void 0 : mapMenus.length) > 0;
   const hasCustomLayers = customLayers.length > 0;
@@ -1479,6 +1471,7 @@ var LayerSwitcher = memo2(() => {
         /* @__PURE__ */ jsx14(
           Disclosure,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenus.length === 1,
             children: ({ open }) => {
@@ -1947,8 +1940,7 @@ var MapControlContainer = memo3(() => {
   }, [controls]);
   return /* @__PURE__ */ jsx18(TooltipProvider, { children: /* @__PURE__ */ jsx18(Fragment6, { children: Object.entries(POSITION_CLASSES).map(([position, className]) => {
     const positionControls = controlsByPosition[position] || [];
-    if (positionControls.length === 0)
-      return null;
+    if (positionControls.length === 0) return null;
     return /* @__PURE__ */ jsx18(
       PositionGroup,
       {
@@ -1975,8 +1967,7 @@ var BasicMap = () => {
     ((_f = (_e = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _e.Longitude) == null ? void 0 : _f.Text) || 16.3738
   ];
   useRenderInfo("BasicMap");
-  if (isSettingsLoading)
-    return /* @__PURE__ */ jsx19(LoaderFull, {});
+  if (isSettingsLoading) return /* @__PURE__ */ jsx19(LoaderFull, {});
   return /* @__PURE__ */ jsx19(Fragment7, { children: /* @__PURE__ */ jsxs12(
     MapContainer2,
     {
@@ -2048,8 +2039,7 @@ var useSelectedPixelStore = create3((set) => ({
     set((state) => {
       var _a;
       const feat = (_a = geoJson.features[0]) == null ? void 0 : _a.id;
-      if (!feat)
-        return state;
+      if (!feat) return state;
       const existing = state.data.some(
         (item) => item.features[0].id === geoJson.features[0].id
       );
@@ -2722,7 +2712,7 @@ var BasfSelect = () => {
     [selectedItems]
   );
   const onSubmit = useCallback4(
-    (data) => __async(void 0, null, function* () {
+    (data) => __async(null, null, function* () {
       setIsSubmitting(true);
       try {
         if (checkIfItemExists(data)) {
@@ -2832,8 +2822,7 @@ function PolylineMeasureControl() {
   const controlRef = useRef4(null);
   const [active, setActive] = useState6(false);
   useEffect8(() => {
-    if (!map)
-      return;
+    if (!map) return;
     controlRef.current = L5.control.polylineMeasure({
       position: "topright",
       unit: "metres",
@@ -2854,8 +2843,7 @@ function PolylineMeasureControl() {
     };
   }, [map]);
   const togglePolylineMeasure = () => {
-    if (!controlRef.current)
-      return;
+    if (!controlRef.current) return;
     if (!controlRef.current._measureControl) {
       console.warn("Measurement control not properly initialized");
       return;
@@ -2871,8 +2859,7 @@ function PolylineMeasureControl() {
     }
   };
   const clearMeasurements = () => {
-    if (!controlRef.current)
-      return;
+    if (!controlRef.current) return;
     controlRef.current._clearAllMeasurements();
     trackMapEvent2.measurementTool("clear");
   };
@@ -2981,8 +2968,7 @@ var BasfMapComponent = (_a) => {
     Number((_i = (_h = (_g = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _g.Longitude) == null ? void 0 : _h.Text) != null ? _i : 16.3738)
   ];
   const steps = (_k = (_j = mapSettings == null ? void 0 : mapSettings.MapSettings) == null ? void 0 : _j.TourSteps) == null ? void 0 : _k.Text;
-  if (isSettingsLoading)
-    return /* @__PURE__ */ jsx30(LoaderFull2, {});
+  if (isSettingsLoading) return /* @__PURE__ */ jsx30(LoaderFull2, {});
   return /* @__PURE__ */ jsx30(Fragment10, { children: /* @__PURE__ */ jsxs19(
     MapContainer3,
     __spreadProps(__spreadValues({
@@ -3052,7 +3038,7 @@ var GeoTreesDownloadContent = () => {
     }
   }, [session, setValue]);
   useEffect10(() => {
-    const fetchCountries = () => __async(void 0, null, function* () {
+    const fetchCountries = () => __async(null, null, function* () {
       try {
         const response = yield fetch(
           `${baseUrl}/api/plots/get-available-countries`,
@@ -3068,7 +3054,7 @@ var GeoTreesDownloadContent = () => {
         console.error("Error fetching countries:", error);
       }
     });
-    const fetchVersions = () => __async(void 0, null, function* () {
+    const fetchVersions = () => __async(null, null, function* () {
       try {
         const response = yield fetch(
           `${baseUrl}/api/plots/available-versions`,
@@ -3322,8 +3308,7 @@ var ScaleControl3 = ({
   const [scale, setScale] = useState8("");
   useEffect11(() => {
     const updateScale = () => {
-      if (!map)
-        return;
+      if (!map) return;
       const center = map.getCenter();
       const zoom = map.getZoom();
       const metersPerPixel = 156543.03392 * Math.cos(center.lat * Math.PI / 180) / Math.pow(2, zoom);
@@ -3339,8 +3324,7 @@ var ScaleControl3 = ({
       map.off("moveend", updateScale);
     };
   }, [map]);
-  if (!scale)
-    return null;
+  if (!scale) return null;
   return /* @__PURE__ */ jsx32(
     "div",
     {
@@ -3943,7 +3927,7 @@ var GeoTreesExternalLayer = forwardRef3(
     const externalUrl = `${API_URL}/api/external/google-sheet-geojson`;
     const { isLoading, error, data } = useQuery2({
       queryKey: ["geoTreesExternal", externalUrl],
-      queryFn: () => __async(void 0, null, function* () {
+      queryFn: () => __async(null, null, function* () {
         if (!API_URL) {
           throw new Error("NEXT_PUBLIC_GEO_TREE_API_URL is not configured");
         }
@@ -3975,8 +3959,7 @@ var GeoTreesExternalLayer = forwardRef3(
     );
     const addGeoTreesLayer = useCallback5(() => {
       var _a2;
-      if (!data)
-        return;
+      if (!data) return;
       const layerId = "geotrees-external-layer";
       if (hasLayerBeenAdded(layerId) || existingLayer || hasAddedLayer.current) {
         console.warn("GEO-TREES BRM layer already exists, skipping addition", {
@@ -3989,8 +3972,7 @@ var GeoTreesExternalLayer = forwardRef3(
       const filteredFeatures = ((_a2 = data.features) == null ? void 0 : _a2.filter((feature) => {
         var _a3;
         const status = (_a3 = feature.properties) == null ? void 0 : _a3.Status;
-        if (!status)
-          return true;
+        if (!status) return true;
         const statusKey = getStatusFromRaw(status);
         return statusKey ? statusFilter[statusKey] : true;
       })) || [];
@@ -4058,12 +4040,9 @@ var GeoTreesExternalLayer = forwardRef3(
         addGeoTreesLayer();
       }
     }, [data, autoAdd, existingLayer, addGeoTreesLayer, hasLayerBeenAdded]);
-    if (error)
-      return /* @__PURE__ */ jsx36(ErrorDisplay, { error });
-    if (isLoading)
-      return /* @__PURE__ */ jsx36(LoadingDisplay, {});
-    if (!((_a = data == null ? void 0 : data.features) == null ? void 0 : _a.length))
-      return /* @__PURE__ */ jsx36(EmptyStateDisplay, {});
+    if (error) return /* @__PURE__ */ jsx36(ErrorDisplay, { error });
+    if (isLoading) return /* @__PURE__ */ jsx36(LoadingDisplay, {});
+    if (!((_a = data == null ? void 0 : data.features) == null ? void 0 : _a.length)) return /* @__PURE__ */ jsx36(EmptyStateDisplay, {});
     return null;
   }
 );
@@ -4114,8 +4093,7 @@ var GeoTreesMap = () => {
       "Error loading map settings: ",
       error.message
     ] }) });
-  if (isSettingsLoading)
-    return /* @__PURE__ */ jsx37(LoaderFull3, { showInCenter: false });
+  if (isSettingsLoading) return /* @__PURE__ */ jsx37(LoaderFull3, { showInCenter: false });
   const zoom = (_c = (_b = (_a = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _a.Zoom) == null ? void 0 : _b.Value) != null ? _c : 12;
   const center = [
     (_f = (_e = (_d = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _d.Latitude) == null ? void 0 : _e.Text) != null ? _f : 48.2082,
@@ -4182,8 +4160,7 @@ var useAreaSelect = ({
   const rectangleRef = useRef7(null);
   useEffect15(() => {
     var _a;
-    if (!map.selectArea)
-      return;
+    if (!map.selectArea) return;
     (_a = map.selectArea) == null ? void 0 : _a.setControlKey(false);
     if (!rectangleRef.current) {
       rectangleRef.current = new Rectangle(
@@ -4196,8 +4173,7 @@ var useAreaSelect = ({
     }
     const handleAreaSelected = (e) => {
       var _a2, _b, _c;
-      if (!e.bounds)
-        return;
+      if (!e.bounds) return;
       const boundsString = e.bounds.toBBoxString();
       if (onAreaSelected) {
         onAreaSelected(boundsString);
@@ -4270,9 +4246,8 @@ import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 var CanopyAtlasDownload = () => {
   const [format, setFormat] = useState10("shape-zip");
   const { bbox } = useAreaSelectStore();
-  const handleDownload = () => __async(void 0, null, function* () {
-    if (!bbox)
-      return;
+  const handleDownload = () => __async(null, null, function* () {
+    if (!bbox) return;
     const params = {
       request: "GetFeature",
       service: "WFS",
@@ -4287,8 +4262,7 @@ var CanopyAtlasDownload = () => {
     const wfsUrl = baseUrl + L7.Util.getParamString(params, baseUrl, true);
     try {
       const response = yield fetch(wfsUrl);
-      if (!response.ok)
-        throw new Error("Download failed");
+      if (!response.ok) throw new Error("Download failed");
       const blob = yield response.blob();
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement("a");
@@ -4470,20 +4444,15 @@ var CanopyFilter = memo11(({ onFilterChange }) => {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedFilters));
     onFilterChange(updatedFilters);
   };
-  const handleDownload = () => __async(void 0, null, function* () {
+  const handleDownload = () => __async(null, null, function* () {
     const cqlFilters = [];
-    if (filters.biome)
-      cqlFilters.push(`biome='${filters.biome}'`);
-    if (filters.realm)
-      cqlFilters.push(`realm='${filters.realm}'`);
-    if (filters.access)
-      cqlFilters.push(`access='${filters.access}'`);
+    if (filters.biome) cqlFilters.push(`biome='${filters.biome}'`);
+    if (filters.realm) cqlFilters.push(`realm='${filters.realm}'`);
+    if (filters.access) cqlFilters.push(`access='${filters.access}'`);
     if (filters.idunique)
       cqlFilters.push(`IDunique LIKE '%${filters.idunique}%'`);
-    if (filters.minyear)
-      cqlFilters.push(`minyear>=${filters.minyear}`);
-    if (filters.maxyear)
-      cqlFilters.push(`minyear<=${filters.maxyear}`);
+    if (filters.minyear) cqlFilters.push(`minyear>=${filters.minyear}`);
+    if (filters.maxyear) cqlFilters.push(`minyear<=${filters.maxyear}`);
     const params = __spreadValues({
       request: "GetFeature",
       service: "WFS",
@@ -4497,8 +4466,7 @@ var CanopyFilter = memo11(({ onFilterChange }) => {
     const wfsUrl = baseUrl + L8.Util.getParamString(params, baseUrl, true);
     try {
       const response = yield fetch(wfsUrl);
-      if (!response.ok)
-        throw new Error("Download failed");
+      if (!response.ok) throw new Error("Download failed");
       const blob = yield response.blob();
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement("a");
@@ -4732,10 +4700,8 @@ var constructCqlFilter = (filterParams) => {
     return "";
   }
   let _a = filterParams || {}, { minyear, maxyear } = _a, rest = __objRest(_a, ["minyear", "maxyear"]);
-  if (Array.isArray(minyear))
-    minyear = minyear[0];
-  if (Array.isArray(maxyear))
-    maxyear = maxyear[0];
+  if (Array.isArray(minyear)) minyear = minyear[0];
+  if (Array.isArray(maxyear)) maxyear = maxyear[0];
   const cqlExpressions = [];
   if (minyear && maxyear) {
     cqlExpressions.push(
@@ -4842,16 +4808,14 @@ var formatPropertyValue = (value, propertyName) => {
   return value.toString();
 };
 var createDefaultPopupContent = (feature, propertyNames) => {
-  if (!feature.properties)
-    return "";
+  if (!feature.properties) return "";
   const propertiesToShow = (propertyNames == null ? void 0 : propertyNames.length) ? propertyNames : DEFAULT_POPUP_PROPERTIES;
   const properties = Object.entries(feature.properties).filter(([key]) => propertiesToShow.includes(key)).sort((a, b) => {
     const indexA = propertiesToShow.indexOf(a[0]);
     const indexB = propertiesToShow.indexOf(b[0]);
     return indexA - indexB;
   });
-  if (properties.length === 0)
-    return "";
+  if (properties.length === 0) return "";
   return `
     <div class="leaflet-popup-content-wrapper" style="background-color: #fff; padding: 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
       <div style="width: 100%; overflow-y: auto;">
@@ -4922,7 +4886,7 @@ var openDatabase = () => {
     };
   });
 };
-var storeInIndexedDB = (key, data) => __async(void 0, null, function* () {
+var storeInIndexedDB = (key, data) => __async(null, null, function* () {
   try {
     const db = yield openDatabase();
     const transaction = db.transaction(STORE_NAME, "readwrite");
@@ -4941,7 +4905,7 @@ var storeInIndexedDB = (key, data) => __async(void 0, null, function* () {
     console.warn("Failed to store data in IndexedDB:", e);
   }
 });
-var getFromIndexedDB = (key) => __async(void 0, null, function* () {
+var getFromIndexedDB = (key) => __async(null, null, function* () {
   try {
     const db = yield openDatabase();
     const transaction = db.transaction(STORE_NAME, "readonly");
@@ -4963,7 +4927,7 @@ var getFromIndexedDB = (key) => __async(void 0, null, function* () {
     return null;
   }
 });
-var cleanupIndexedDB = () => __async(void 0, null, function* () {
+var cleanupIndexedDB = () => __async(null, null, function* () {
   try {
     const db = yield openDatabase();
     const transaction = db.transaction(STORE_NAME, "readwrite");
@@ -5013,8 +4977,7 @@ var WfsLayer = ({
     }
   });
   const stableFilterParams = useMemo4(() => {
-    if (!filterParams)
-      return null;
+    if (!filterParams) return null;
     return JSON.stringify(filterParams);
   }, [filterParams]);
   const queryKey = useMemo4(() => {
@@ -5036,7 +4999,7 @@ var WfsLayer = ({
   }, [url, layerName, filterParams, useServerFiltering]);
   const { data: geoJsonData, error } = useQuery3({
     queryKey,
-    queryFn: () => __async(void 0, null, function* () {
+    queryFn: () => __async(null, null, function* () {
       mapStore.setIsLoading(true);
       const wfsUrl = constructWfsUrl();
       const storageKey = `wfs-data-${queryKey.join("-")}`;
@@ -5101,8 +5064,7 @@ var WfsLayer = ({
   const getFeatureStyle = useCallback6(
     (feature) => {
       var _a2;
-      if (!feature)
-        return defaultStyle;
+      if (!feature) return defaultStyle;
       const featureId = ((_a2 = feature.id) == null ? void 0 : _a2.toString()) || JSON.stringify(feature.properties);
       return featureId === selectedFeatureId ? highlightStyle : defaultStyle;
     },
@@ -5113,8 +5075,7 @@ var WfsLayer = ({
       var _a2;
       const featureId = ((_a2 = feature.id) == null ? void 0 : _a2.toString()) || JSON.stringify(feature.properties);
       layerRef.current[featureId] = layer;
-      if (!popupOptions || !feature.properties)
-        return;
+      if (!popupOptions || !feature.properties) return;
       let popupContent;
       if (popupOptions.renderContent) {
         popupContent = popupOptions.renderContent(feature);
@@ -5159,8 +5120,7 @@ var WfsLayer = ({
     []
   );
   const filteredGeoJson = useMemo4(() => {
-    if (!geoJsonData)
-      return null;
+    if (!geoJsonData) return null;
     if (useServerFiltering || !filterParams || Object.keys(filterParams).length === 0) {
       return geoJsonData;
     }
@@ -5397,15 +5357,14 @@ import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs29 } from "react/jsx-
 var CanopyMap = () => {
   var _a, _b, _c, _d, _e, _f;
   const { data: mapSettings, isLoading: isSettingsLoading } = useMapSettings4();
-  const mapRef = useRef10();
+  const mapRef = useRef10(void 0);
   const zoom = ((_b = (_a = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _a.Zoom) == null ? void 0 : _b.Value) || 5;
   const center = [
     ((_d = (_c = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _c.Latitude) == null ? void 0 : _d.Text) || 48.2082,
     ((_f = (_e = mapSettings == null ? void 0 : mapSettings.LocationPart) == null ? void 0 : _e.Longitude) == null ? void 0 : _f.Text) || 16.3738
   ];
   useRenderInfo2("BasicMap");
-  if (isSettingsLoading)
-    return /* @__PURE__ */ jsx42(LoaderFull4, { showInCenter: false });
+  if (isSettingsLoading) return /* @__PURE__ */ jsx42(LoaderFull4, { showInCenter: false });
   return /* @__PURE__ */ jsx42(Fragment16, { children: /* @__PURE__ */ jsxs29(
     MapContainer5,
     {
@@ -5529,7 +5488,7 @@ var BasfLeftPanel = () => {
     [selectedItems]
   );
   const onSubmit = useCallback8(
-    (data) => __async(void 0, null, function* () {
+    (data) => __async(null, null, function* () {
       setIsSubmitting(true);
       try {
         if (checkIfItemExists(data)) {
@@ -5632,8 +5591,7 @@ var WaybackTimelineMap = (props) => {
     return null;
   }
   useEffect19(() => {
-    if (props.mapping)
-      setWAYBACK_SNAPSHOTS(props.mapping);
+    if (props.mapping) setWAYBACK_SNAPSHOTS(props.mapping);
   }, [props.mapping]);
   const west = parseFloat(searchParams.get("xmin"));
   const south = parseFloat(searchParams.get("ymin"));
@@ -5716,6 +5674,7 @@ var WaybackTimelineMap = (props) => {
 import { useEffect as useEffect21, useRef as useRef12, useState as useState17 } from "react";
 import { forwardRef as forwardRef5 } from "react";
 import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
 import MapPinIcon3 from "@heroicons/react/24/solid/MapPinIcon";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -6038,7 +5997,7 @@ var LayerItem2 = memo13(
   }
 );
 LayerItem2.displayName = "LayerItem";
-var LayerSwitcher2 = memo13(({ mapMenuItems, customLayers }) => {
+var LayerSwitcher2 = memo13((({ mapMenuItems, customLayers }) => {
   const store = useMapLayerStore2();
   const [openHoverCardId, setOpenHoverCardId] = useState16(null);
   useEffect20(() => {
@@ -6069,6 +6028,7 @@ var LayerSwitcher2 = memo13(({ mapMenuItems, customLayers }) => {
         /* @__PURE__ */ jsx46(
           Disclosure2,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenuItems.length === 1,
             children: ({ open }) => {
@@ -6094,8 +6054,7 @@ var LayerSwitcher2 = memo13(({ mapMenuItems, customLayers }) => {
                       ) !== -1,
                       onToggle: () => {
                         handleToggle(layer);
-                        if (layer.ontoggle)
-                          layer.ontoggle();
+                        if (layer.ontoggle) layer.ontoggle();
                       },
                       openHoverCardId,
                       onInfoClick: handleInfoClick
@@ -6151,7 +6110,7 @@ var LayerSwitcher2 = memo13(({ mapMenuItems, customLayers }) => {
       ] })
     ] }, menu.id);
   }) });
-});
+}));
 LayerSwitcher2.displayName = "LayerSwitcher";
 
 // src/Components/Generic/Map/MapControlToolbar.tsx
@@ -6163,23 +6122,18 @@ import {
   TooltipTrigger as TooltipTrigger2
 } from "@geowiki/ui";
 
-// ../../node_modules/clsx/dist/clsx.m.js
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e)
-    n += e;
-  else if ("object" == typeof e)
-    if (Array.isArray(e))
-      for (t = 0; t < e.length; t++)
-        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-    else
-      for (t in e)
-        e[t] && (n && (n += " "), n += t);
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
   return n;
 }
 function clsx() {
-  for (var e, t, f = 0, n = ""; f < arguments.length; )
-    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
 
@@ -6560,7 +6514,7 @@ var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
 var fractionRegex = /^\d+\/\d+$/;
 var stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
 var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
-var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))/;
+var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
 var shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 function isLength(value) {
   return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value) || isArbitraryLength(value);
@@ -6660,8 +6614,11 @@ function getDefaultConfig() {
   var getOverflow = function getOverflow2() {
     return ["auto", "hidden", "clip", "visible", "scroll"];
   };
-  var getSpacingWithAuto = function getSpacingWithAuto2() {
-    return ["auto", spacing];
+  var getSpacingWithAutoAndArbitrary = function getSpacingWithAutoAndArbitrary2() {
+    return ["auto", isArbitraryValue, spacing];
+  };
+  var getSpacingWithArbitrary = function getSpacingWithArbitrary2() {
+    return [isArbitraryValue, spacing];
   };
   var getLengthWithEmpty = function getLengthWithEmpty2() {
     return ["", isLength];
@@ -6698,29 +6655,29 @@ function getDefaultConfig() {
     theme: {
       colors: [isAny],
       spacing: [isLength],
-      blur: ["none", "", isTshirtSize, isArbitraryLength],
+      blur: ["none", "", isTshirtSize, isArbitraryValue],
       brightness: getNumber(),
       borderColor: [colors],
-      borderRadius: ["none", "", "full", isTshirtSize, isArbitraryLength],
-      borderSpacing: [spacing],
+      borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
+      borderSpacing: getSpacingWithArbitrary(),
       borderWidth: getLengthWithEmpty(),
       contrast: getNumber(),
       grayscale: getZeroAndEmpty(),
       hueRotate: getNumberAndArbitrary(),
       invert: getZeroAndEmpty(),
-      gap: [spacing],
+      gap: getSpacingWithArbitrary(),
       gradientColorStops: [colors],
       gradientColorStopPositions: [isPercent, isArbitraryLength],
-      inset: getSpacingWithAuto(),
-      margin: getSpacingWithAuto(),
+      inset: getSpacingWithAutoAndArbitrary(),
+      margin: getSpacingWithAutoAndArbitrary(),
       opacity: getNumber(),
-      padding: [spacing],
+      padding: getSpacingWithArbitrary(),
       saturate: getNumber(),
       scale: getNumber(),
       sepia: getZeroAndEmpty(),
       skew: getNumberAndArbitrary(),
-      space: [spacing],
-      translate: [spacing]
+      space: getSpacingWithArbitrary(),
+      translate: getSpacingWithArbitrary()
     },
     classGroups: {
       // Layout
@@ -6944,7 +6901,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: [spacing]
+        basis: getSpacingWithAutoAndArbitrary()
       }],
       /**
        * Flex Direction
@@ -7001,7 +6958,7 @@ function getDefaultConfig() {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: [isInteger]
+          span: ["full", isInteger]
         }, isArbitraryValue]
       }],
       /**
@@ -7310,14 +7267,14 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/width
        */
       w: [{
-        w: ["auto", "min", "max", "fit", spacing]
+        w: ["auto", "min", "max", "fit", isArbitraryValue, spacing]
       }],
       /**
        * Min-Width
        * @see https://tailwindcss.com/docs/min-width
        */
       "min-w": [{
-        "min-w": ["min", "max", "fit", isLength]
+        "min-w": ["min", "max", "fit", isArbitraryValue, isLength]
       }],
       /**
        * Max-Width
@@ -7326,28 +7283,28 @@ function getDefaultConfig() {
       "max-w": [{
         "max-w": ["0", "none", "full", "min", "max", "fit", "prose", {
           screen: [isTshirtSize]
-        }, isTshirtSize, isArbitraryLength]
+        }, isTshirtSize, isArbitraryValue]
       }],
       /**
        * Height
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: [spacing, "auto", "min", "max", "fit"]
+        h: [isArbitraryValue, spacing, "auto", "min", "max", "fit"]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       "min-h": [{
-        "min-h": ["min", "max", "fit", isLength]
+        "min-h": ["min", "max", "fit", isArbitraryValue, isLength]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       "max-h": [{
-        "max-h": [spacing, "min", "max", "fit"]
+        "max-h": [isArbitraryValue, spacing, "min", "max", "fit"]
       }],
       // Typography
       /**
@@ -7416,7 +7373,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/letter-spacing
        */
       tracking: [{
-        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryLength]
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryValue]
       }],
       /**
        * Line Clamp
@@ -7430,7 +7387,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength]
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isArbitraryValue, isLength]
       }],
       /**
        * List Style Image
@@ -7513,7 +7470,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": ["auto", isLength]
+        "underline-offset": ["auto", isArbitraryValue, isLength]
       }],
       /**
        * Text Decoration Color
@@ -7537,14 +7494,14 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/text-indent
        */
       indent: [{
-        indent: [spacing]
+        indent: getSpacingWithArbitrary()
       }],
       /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
        */
       "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryLength]
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryValue]
       }],
       /**
        * Whitespace
@@ -7974,7 +7931,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [isLength]
+        "outline-offset": [isArbitraryValue, isLength]
       }],
       /**
        * Outline Width
@@ -8053,7 +8010,7 @@ function getDefaultConfig() {
         opacity: [opacity]
       }],
       /**
-       * Mix Beldn Mode
+       * Mix Blend Mode
        * @see https://tailwindcss.com/docs/mix-blend-mode
        */
       "mix-blend": [{
@@ -8412,126 +8369,126 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-m": [{
-        "scroll-m": [spacing]
+        "scroll-m": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin X
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
-        "scroll-mx": [spacing]
+        "scroll-mx": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Y
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
-        "scroll-my": [spacing]
+        "scroll-my": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
-        "scroll-ms": [spacing]
+        "scroll-ms": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
-        "scroll-me": [spacing]
+        "scroll-me": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mt": [{
-        "scroll-mt": [spacing]
+        "scroll-mt": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Right
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mr": [{
-        "scroll-mr": [spacing]
+        "scroll-mr": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Bottom
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mb": [{
-        "scroll-mb": [spacing]
+        "scroll-mb": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Margin Left
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ml": [{
-        "scroll-ml": [spacing]
+        "scroll-ml": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-p": [{
-        "scroll-p": [spacing]
+        "scroll-p": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding X
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
-        "scroll-px": [spacing]
+        "scroll-px": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Y
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
-        "scroll-py": [spacing]
+        "scroll-py": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
-        "scroll-ps": [spacing]
+        "scroll-ps": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
-        "scroll-pe": [spacing]
+        "scroll-pe": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pt": [{
-        "scroll-pt": [spacing]
+        "scroll-pt": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Right
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pr": [{
-        "scroll-pr": [spacing]
+        "scroll-pr": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Bottom
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pb": [{
-        "scroll-pb": [spacing]
+        "scroll-pb": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Padding Left
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pl": [{
-        "scroll-pl": [spacing]
+        "scroll-pl": getSpacingWithArbitrary()
       }],
       /**
        * Scroll Snap Align
@@ -8788,13 +8745,14 @@ MapControlToolbar.displayName = "MapControlToolbar";
 // src/Components/Map/MapLibre.tsx
 import { GlobeIcon as GlobeIcon2, PlusIcon as PlusIcon3, MinusIcon as MinusIcon3, LayerGroupIcon as LayerGroupIcon5 } from "@geowiki/ui";
 import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
-var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData }, ref) => {
+var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData, show_popup, popup }, ref) => {
   const mapContainer = ref;
   const mapRef = useRef12(null);
+  const [isMapReady, setIsMapReady] = useState17(false);
+  const hasSatelliteLayer = baseLayers == null ? void 0 : baseLayers.find((layer) => layer.layer_type == "satellite");
   const changeMapProjection = () => {
     var _a;
-    if (!mapRef.current)
-      return;
+    if (!mapRef.current) return;
     const map = mapRef.current;
     const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
     const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
@@ -8803,29 +8761,30 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
     });
   };
   const zoomIn = () => {
-    if (!mapRef.current)
-      return;
+    if (!mapRef.current) return;
     const map = mapRef.current;
     map.zoomIn();
+    return map.getBounds();
   };
   const zoomOut = () => {
-    if (!mapRef.current)
-      return;
+    if (!mapRef.current) return;
     const map = mapRef.current;
     map.zoomOut();
+    return map.getBounds();
   };
-  function getLayersByPattern(map, pattern) {
-    return map.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
+  function getLayersByPattern(pattern) {
+    if (!mapRef.current) return;
+    const map = mapRef.current;
+    return map == null ? void 0 : map.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
   }
   const handleToggle = (layerId) => {
-    if (!mapRef.current)
-      return;
+    if (!mapRef.current) return;
     const map = mapRef.current;
-    const layers = getLayersByPattern(map, new RegExp(layerId));
-    layers.forEach((id) => {
-      const visibility = map.getLayoutProperty(id, "visibility");
+    const layers = getLayersByPattern(new RegExp(layerId));
+    layers == null ? void 0 : layers.forEach((id) => {
+      const visibility = map == null ? void 0 : map.getLayoutProperty(id, "visibility");
       const newVisibility = visibility === "none" ? "visible" : "none";
-      map.setLayoutProperty(id, "visibility", newVisibility);
+      map == null ? void 0 : map.setLayoutProperty(id, "visibility", newVisibility);
     });
   };
   const buildControls = (controls) => {
@@ -8848,7 +8807,11 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
             {
               id: "zoomIn",
               icon: PlusIcon3,
-              onClick: zoomIn,
+              onClick: () => {
+                var _a;
+                const bounds = zoomIn();
+                (_a = c.get_bounds) == null ? void 0 : _a.call(c, bounds);
+              },
               position: "topright",
               isOpen: true,
               isDisplayOnly: false,
@@ -8858,7 +8821,11 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
             {
               id: "zoomOut",
               icon: MinusIcon3,
-              onClick: zoomOut,
+              onClick: () => {
+                var _a;
+                const bounds = zoomOut();
+                (_a = c.get_bounds) == null ? void 0 : _a.call(c, bounds);
+              },
               position: "topright",
               isOpen: true,
               isDisplayOnly: false,
@@ -8887,6 +8854,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
               }
             ),
             position: "topleft",
+            title: "OVERLAY MAPS",
             isOpen: false,
             isDisplayOnly: false,
             popoverDirection: "right",
@@ -8897,8 +8865,39 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
       }
     }).flat();
   };
+  const buildBaseLayers = (baselayers) => {
+    return baselayers.map((c) => {
+      switch (c.layer_type) {
+        case "satellite":
+          return {
+            name: "satellite",
+            type: "raster",
+            url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg",
+            tileSize: 256,
+            layer_type: "satellite"
+          };
+        case "terrainSource":
+          return {
+            name: "terrainSource",
+            type: "raster-dem",
+            url: "https://tiles.mapterhorn.com/tilejson.json",
+            tileSize: 256,
+            layer_type: "terrainSource"
+          };
+        case "hillshade":
+          return {
+            name: "hillshadeSource",
+            type: "raster-dem",
+            url: "https://tiles.mapterhorn.com/tilejson.json",
+            tileSize: 256,
+            layer_type: "hillshade"
+          };
+        default:
+          return null;
+      }
+    }).flat();
+  };
   const [mapControl, setMapControl] = useState17(() => buildControls(mapControls));
-  console.log(mapControl);
   const toggleControl = (id) => {
     setMapControl((prevControls) => prevControls.map((control) => {
       if (control.id === id) {
@@ -8907,82 +8906,81 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
       return control;
     }));
   };
-  useEffect21(() => {
-    if (typeof mapContainer === "function")
-      return;
-    if (!(mapContainer == null ? void 0 : mapContainer.current))
-      return;
-    if (!sourceData)
-      return;
-    const map = new maplibregl.Map({
-      container: mapContainer == null ? void 0 : mapContainer.current,
-      style: {
-        version: 8,
-        sources: {
-          osm: {
-            type: "raster",
-            tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
-            tileSize: 256,
-            attribution: "&copy; OpenStreetMap Contributors",
-            maxzoom: 19
-          }
-        },
-        layers: [
-          {
-            id: "osm",
-            type: "raster",
-            source: "osm"
-          }
-        ],
-        sky: {}
-      },
-      center: [16.3713, 48.2081],
-      zoom: 3,
-      minZoom: 1.5,
-      renderWorldCopies: false,
-      canvasContextAttributes: { antialias: true }
-    });
-    mapRef.current = map;
-    map.scrollZoom.disable();
-    mapRef.current.getContainer().addEventListener("mouseenter", () => map.scrollZoom.enable());
-    mapRef.current.getContainer().addEventListener("mouseleave", () => map.scrollZoom.disable());
-    function loadSvgImage() {
-      return __async(this, null, function* () {
-        let svgText = renderToStaticMarkup(
-          /* @__PURE__ */ jsx48(MapPinIcon3, { className: "w-6 h-6" })
-        );
-        svgText = svgText.replace('fill="currentColor"', 'fill="#06b6d4"');
-        const img = new Image();
-        img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgText);
-        img.width = 35;
-        img.height = 35;
-        yield img.decode();
-        return img;
-      });
+  const loadSvgImage = (color) => __async(null, null, function* () {
+    let svgText = renderToStaticMarkup(
+      /* @__PURE__ */ jsx48(MapPinIcon3, { className: "w-6 h-6" })
+    );
+    svgText = svgText.replace('fill="currentColor"', `fill="${color}"`);
+    const img = new Image();
+    img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgText);
+    img.width = 35;
+    img.height = 35;
+    yield img.decode();
+    return img;
+  });
+  const updatePinImage = (source) => __async(null, null, function* () {
+    const map = mapRef.current;
+    if (!map) return;
+    const img = yield loadSvgImage(source.style.pin_color);
+    const imgName = `${source.name}-pin`;
+    if (map.hasImage(imgName)) map.removeImage(imgName);
+    map.addImage(imgName, img);
+  });
+  const updateClusterColors = (source) => {
+    const map = mapRef.current;
+    if (!map) return;
+    const layerId = `${source.name}-cluster-circles`;
+    if (!map.getLayer(layerId)) return;
+    const current = map.getPaintProperty(layerId, "circle-color");
+    if (current !== source.style.cluster_color) {
+      map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
+      map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
     }
-    map.on("load", () => __async(void 0, null, function* () {
-      changeMapProjection();
-      baseLayers == null ? void 0 : baseLayers.forEach((layer) => {
-        map.addSource(layer.name, {
-          type: layer.type,
-          url: layer.url,
-          tileSize: layer.tileSize
-        });
-        if (layer.layer_type == "terrainSource")
-          map.setTerrain({
-            source: "terrainSource",
-            exaggeration: 1
-          });
-        if (layer.layer_type == "hillshade")
-          map.addLayer({
-            id: layer.name,
-            type: layer.layer_type,
-            source: layer.name,
-            paint: { "hillshade-shadow-color": "#473B24" },
-            layout: { visibility: "visible" }
-          });
-      });
-      sourceData == null ? void 0 : sourceData.forEach((source) => __async(void 0, null, function* () {
+  };
+  const loadBaseLayers = () => {
+    const map = mapRef.current;
+    if (!map || !baseLayers || baseLayers.length === 0) return;
+    const base_layers = buildBaseLayers(baseLayers);
+    base_layers == null ? void 0 : base_layers.forEach((layer) => {
+      if (!map.getLayer(layer.name)) {
+        if (!map.getSource(layer == null ? void 0 : layer.name)) {
+          if ((layer == null ? void 0 : layer.layer_type) == "satellite") {
+            map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
+              type: layer == null ? void 0 : layer.type,
+              tiles: [layer == null ? void 0 : layer.url],
+              tileSize: layer == null ? void 0 : layer.tileSize
+            });
+            map == null ? void 0 : map.addLayer({ id: layer == null ? void 0 : layer.name, type: layer == null ? void 0 : layer.type, source: layer == null ? void 0 : layer.name });
+          } else
+            map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
+              type: layer == null ? void 0 : layer.type,
+              url: layer == null ? void 0 : layer.url,
+              tileSize: layer == null ? void 0 : layer.tileSize
+            });
+          if ((layer == null ? void 0 : layer.layer_type) == "terrainSource")
+            map == null ? void 0 : map.setTerrain({
+              source: "terrainSource",
+              exaggeration: 1
+            });
+          if ((layer == null ? void 0 : layer.layer_type) == "hillshade")
+            map == null ? void 0 : map.addLayer({
+              id: layer == null ? void 0 : layer.name,
+              type: layer == null ? void 0 : layer.layer_type,
+              source: layer == null ? void 0 : layer.name,
+              paint: { "hillshade-shadow-color": "#473B24" },
+              layout: { visibility: "visible" }
+            });
+        }
+      }
+    });
+  };
+  const loadSourceData = () => __async(null, null, function* () {
+    var _a, _b, _c, _d;
+    const map = mapRef.current;
+    if (!map || (sourceData == null ? void 0 : sourceData.length) == 0) return;
+    for (const source of sourceData) {
+      const existing_data = map.getSource(source.name);
+      if (!existing_data) {
         if (source.is_cluster) {
           map.addSource(source.name, {
             type: source.type,
@@ -8991,22 +8989,26 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
             clusterMaxZoom: 10,
             clusterRadius: 50
           });
-        }
+        } else
+          map.addSource(source.name, {
+            type: source.type,
+            data: source.data
+          });
         if (source.show_cluster_count) {
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-circles`,
             type: "circle",
             source: source.name,
             filter: ["has", "point_count"],
             paint: {
-              "circle-color": source.style.cluster_color,
+              "circle-color": (_a = source.style) == null ? void 0 : _a.cluster_color,
               "circle-opacity": 1,
               "circle-radius": 20,
               "circle-stroke-width": 4,
-              "circle-stroke-color": source.style.cluster_stroke_color
+              "circle-stroke-color": (_b = source.style) == null ? void 0 : _b.cluster_stroke_color
             }
           });
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-count`,
             type: "symbol",
             source: source.name,
@@ -9020,42 +9022,226 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
               "text-color": "#f7f2f2"
             }
           });
-          if (!map.hasImage("pin")) {
-            const img = yield loadSvgImage();
-            map.addImage("pin", img);
+          if (!(map == null ? void 0 : map.hasImage(`${source.name}-pin`))) {
+            const img = yield loadSvgImage(source.style.pin_color);
+            map == null ? void 0 : map.addImage(`${source.name}-pin`, img);
           }
-          map.addLayer({
-            id: source.name + "-count",
+          map == null ? void 0 : map.addLayer({
+            id: `${source.name}-pins`,
             type: "symbol",
             source: source.name,
             filter: ["!", ["has", "point_count"]],
             layout: {
-              "icon-image": "pin",
+              "icon-image": `${source.name}-pin`,
+              "icon-size": 1,
+              "icon-allow-overlap": true,
+              "icon-anchor": "bottom"
+            }
+          });
+        } else if (source.custom_cluster) {
+          map == null ? void 0 : map.addLayer({
+            id: `${source.name}-cluster-circles`,
+            type: "circle",
+            source: source.name,
+            filter: ["!=", ["get", "count"], null],
+            paint: {
+              "circle-color": (_c = source.style) == null ? void 0 : _c.cluster_color,
+              "circle-opacity": 1,
+              "circle-radius": 20,
+              "circle-stroke-width": 4,
+              "circle-stroke-color": (_d = source.style) == null ? void 0 : _d.cluster_stroke_color
+            }
+          });
+          map == null ? void 0 : map.addLayer({
+            id: `${source.name}-cluster-count`,
+            type: "symbol",
+            source: source.name,
+            filter: ["!=", ["get", "count"], null],
+            layout: {
+              "text-field": "{count}",
+              "text-font": ["Open Sans Bold"],
+              "text-size": 14
+            },
+            paint: {
+              "text-color": "#f7f2f2"
+            }
+          });
+          if (!(map == null ? void 0 : map.hasImage(`${source.name}-pin`))) {
+            const img = yield loadSvgImage(source.style.pin_color);
+            map == null ? void 0 : map.addImage(`${source.name}-pin`, img);
+          }
+          map == null ? void 0 : map.addLayer({
+            id: source.name + "-pins",
+            type: "symbol",
+            source: source.name,
+            filter: ["==", ["get", "count"], null],
+            layout: {
+              "icon-image": `${source.name}-pin`,
               "icon-size": 1,
               "icon-allow-overlap": true,
               "icon-anchor": "bottom"
             }
           });
         }
-      }));
+      } else {
+        existing_data.setData(source.data);
+        updateClusterColors(source);
+        updatePinImage(source);
+      }
+    }
+  });
+  useEffect21(() => {
+    if (typeof mapContainer === "function") return;
+    if (!(mapContainer == null ? void 0 : mapContainer.current)) return;
+    const map = new maplibregl.Map({
+      container: mapContainer == null ? void 0 : mapContainer.current,
+      style: {
+        version: 8,
+        sources: {
+          osm: {
+            type: "raster",
+            tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+            tileSize: 256,
+            attribution: "&copy; OpenStreetMap Contributors",
+            maxzoom: 19
+          }
+        },
+        layers: [
+          {
+            id: "osm",
+            type: "raster",
+            source: "osm"
+          }
+        ],
+        sky: {}
+      },
+      center: [16.3713, 48.2081],
+      zoom: 3,
+      minZoom: 1.5,
+      renderWorldCopies: false,
+      canvasContextAttributes: { antialias: true }
+    });
+    mapRef.current = map;
+    map.scrollZoom.disable();
+    mapRef.current.getContainer().addEventListener("mouseenter", () => map.scrollZoom.enable());
+    mapRef.current.getContainer().addEventListener("mouseleave", () => map.scrollZoom.disable());
+    map.on("load", () => __async(null, null, function* () {
+      changeMapProjection();
+      setIsMapReady(true);
     }));
     return () => {
       map.remove();
+      mapRef.current = null;
+    };
+  }, []);
+  useEffect21(() => {
+    const map = mapRef.current;
+    if (!map || !isMapReady) return;
+    const init = () => {
+      loadBaseLayers();
     };
-  }, [sourceData, mapControls]);
-  if (!sourceData)
-    return;
-  return /* @__PURE__ */ jsxs35("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+    const zoom = () => {
+      const bounds = map.getBounds();
+      mapControls == null ? void 0 : mapControls.forEach((control) => {
+        var _a;
+        if (control.get_bounds)
+          (_a = control.get_bounds) == null ? void 0 : _a.call(control, bounds);
+      });
+    };
+    if (map.isStyleLoaded()) {
+      init();
+      map.on("zoomend", zoom);
+      map.on("moveend", zoom);
+    } else map.once("load", () => {
+      init();
+      map.on("zoomend", zoom);
+      map.on("moveend", zoom);
+    });
+    return () => {
+      map.off("zoomend", zoom);
+      map.off("moveend", zoom);
+    };
+  }, [mapControls, baseLayers, isMapReady]);
+  useEffect21(() => {
+    var _a;
+    const map = mapRef.current;
+    if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
+    const satelliteLayerLoaded = hasSatelliteLayer !== void 0 ? map.getLayer("satellite") !== void 0 ? true : false : true;
+    map.on("sourcedata", function onData(e) {
+      if (e.sourceId === "satellite" && e.isSourceLoaded) {
+        map.off("sourcedata", onData);
+        loadSourceData();
+      }
+    });
+    if (map.isStyleLoaded() && satelliteLayerLoaded) {
+      loadSourceData();
+    } else {
+      const handler = () => {
+        if (satelliteLayerLoaded) loadSourceData();
+      };
+      map.once("load", handler);
+      return () => {
+        map.off("load", handler);
+      };
+    }
+    if (show_popup && customLayers) {
+      const layerId = ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins";
+      const onMouseEnter = () => {
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const onMouseLeave = () => {
+        map.getCanvas().style.cursor = "";
+      };
+      const onLayerClick = (e) => {
+        var _a2, _b, _c, _d;
+        if (e.features) {
+          const properties = (_a2 = e.features[0]) == null ? void 0 : _a2.properties;
+          const coordinates = (_c = (_b = e.features[0]) == null ? void 0 : _b.geometry) == null ? void 0 : _c.coordinates.slice();
+          const description = `
+                <a class="popup-link text-primary text-xs hover:cursor-pointer">${(_d = e.features[0]) == null ? void 0 : _d.properties.description}</a>
+                `;
+          const popup_element = new maplibregl.Popup().setLngLat([coordinates[0], coordinates[1]]).setHTML(description).addTo(map);
+          setTimeout(() => {
+            const link = popup_element.getElement().querySelector(".popup-link");
+            if (link && popup && popup.click) {
+              link.onclick = (ev) => {
+                ev.preventDefault();
+                popup.click(properties);
+              };
+            }
+          }, 0);
+        }
+      };
+      map.on("mouseenter", layerId, onMouseEnter);
+      map.on("mouseleave", layerId, onMouseLeave);
+      map.on("click", layerId, onLayerClick);
+      return () => {
+        map.off("mouseenter", layerId, onMouseEnter);
+        map.off("mouseleave", layerId, onMouseLeave);
+        map.off("click", layerId, onLayerClick);
+      };
+    }
+  }, [sourceData, customLayers, show_popup, popup, isMapReady]);
+  useEffect21(() => {
+    const map = mapRef.current;
+    if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
+    sourceData.forEach((source) => {
+      const source_layer = map.getSource(source.name);
+      if (source_layer) source_layer.setData(source.data);
+    });
+  }, [sourceData]);
+  return /* @__PURE__ */ jsxs35("div", { className: "relative", style: { width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ jsx48("div", { ref: mapContainer, className: "w-full h-full" }),
     /* @__PURE__ */ jsx48(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
   ] });
 });
+MapLibre.displayName = "MapLibre";
 
 // src/features/components/GeoWikiMapContainer.tsx
 import { Suspense, lazy, useEffect as useEffect22, useState as useState18 } from "react";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var MapComponent = lazy(
-  () => import("./GeoWikiMap-G2JPQNTZ.mjs").then((m) => ({ default: m.GeoWikiMap }))
+  () => import("./GeoWikiMap-OMS4RQ6H.mjs").then((m) => ({ default: m.GeoWikiMap }))
 );
 var ClientOnlyMap = ({ children }) => {
   const [isClient, setIsClient] = useState18(false);