@geowiki/map 0.16.9-dev.8 → 0.16.9-dev.9

package/dist/index.d.mts

@@ -615,11 +615,7 @@ declare const WaybackTimelineMap: (props: {
 
 interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
     baseLayers?: {
-        name: string;
-        type: string;
-        layer_type?: "hillshade" | "terrainSource";
-        url?: string;
-        tileSize?: number;
+        layer_type?: "hillshade" | "terrainSource" | "satellite";
     }[];
     customLayers?: {
         id: string;
@@ -634,18 +630,26 @@ interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
     }[];
     mapControls?: {
         type: "zoom" | "projection" | "toggle_layers";
+        get_bounds?: (arg: any) => any;
     }[];
     sourceData?: {
         name: string;
         type: "geojson";
         data: any;
+        custom_cluster?: boolean;
         is_cluster?: boolean;
         show_cluster_count?: boolean;
         style?: {
             cluster_color: string;
             cluster_stroke_color: string;
+            pin_color: string;
         };
     }[];
+    show_popup?: boolean;
+    popup?: {
+        click?: (arg: any) => void;
+        style?: {};
+    };
 }
 declare const MapLibre: React__default.ForwardRefExoticComponent<MapLibreProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -615,11 +615,7 @@ declare const WaybackTimelineMap: (props: {
 
 interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
     baseLayers?: {
-        name: string;
-        type: string;
-        layer_type?: "hillshade" | "terrainSource";
-        url?: string;
-        tileSize?: number;
+        layer_type?: "hillshade" | "terrainSource" | "satellite";
     }[];
     customLayers?: {
         id: string;
@@ -634,18 +630,26 @@ interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
     }[];
     mapControls?: {
         type: "zoom" | "projection" | "toggle_layers";
+        get_bounds?: (arg: any) => any;
     }[];
     sourceData?: {
         name: string;
         type: "geojson";
         data: any;
+        custom_cluster?: boolean;
         is_cluster?: boolean;
         show_cluster_count?: boolean;
         style?: {
             cluster_color: string;
             cluster_stroke_color: string;
+            pin_color: string;
         };
     }[];
+    show_popup?: boolean;
+    popup?: {
+        click?: (arg: any) => void;
+        style?: {};
+    };
 }
 declare const MapLibre: React__default.ForwardRefExoticComponent<MapLibreProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -17037,6 +17037,7 @@ var WaybackTimelineMap = (props) => {
 var import_react66 = require("react");
 var import_react67 = require("react");
 var import_maplibre_gl = __toESM(require("maplibre-gl"));
+var import_maplibre_gl2 = require("maplibre-gl/dist/maplibre-gl.css");
 var import_MapPinIcon4 = __toESM(require("@heroicons/react/24/solid/MapPinIcon"));
 var import_server8 = require("react-dom/server");
 
@@ -20097,44 +20098,50 @@ MapControlToolbar.displayName = "MapControlToolbar";
 // src/Components/Map/MapLibre.tsx
 var import_ui46 = require("@geowiki/ui");
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapControls, sourceData }, ref) => {
+var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapControls, sourceData, show_popup, popup }, ref) => {
   const mapContainer = ref;
   const mapRef = (0, import_react66.useRef)(null);
+  const map = mapRef.current;
   const changeMapProjection = () => {
     var _a;
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
+    const map2 = mapRef.current;
+    const currentProjection = (_a = map2.getProjection()) == null ? void 0 : _a.type;
     const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
-    map.setProjection({
+    map2.setProjection({
       type: newProjection
     });
   };
   const zoomIn = () => {
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    map.zoomIn();
+    const map2 = mapRef.current;
+    map2.zoomIn();
+    return map2.getBounds();
   };
   const zoomOut = () => {
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    map.zoomOut();
+    const map2 = mapRef.current;
+    map2.zoomOut();
+    return map2.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 map2 = mapRef.current;
+    return map2 == null ? void 0 : map2.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
   }
   const handleToggle = (layerId) => {
     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 map2 = mapRef.current;
+    const layers = getLayersByPattern(new RegExp(layerId));
+    layers == null ? void 0 : layers.forEach((id) => {
+      const visibility = map2 == null ? void 0 : map2.getLayoutProperty(id, "visibility");
       const newVisibility = visibility === "none" ? "visible" : "none";
-      map.setLayoutProperty(id, "visibility", newVisibility);
+      map2 == null ? void 0 : map2.setLayoutProperty(id, "visibility", newVisibility);
     });
   };
   const buildControls = (controls) => {
@@ -20157,7 +20164,11 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
             {
               id: "zoomIn",
               icon: import_ui46.PlusIcon,
-              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,
@@ -20167,7 +20178,11 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
             {
               id: "zoomOut",
               icon: import_ui46.MinusIcon,
-              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,
@@ -20196,6 +20211,7 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
               }
             ),
             position: "topleft",
+            title: "OVERLAY MAPS",
             isOpen: false,
             isDisplayOnly: false,
             popoverDirection: "right",
@@ -20206,8 +20222,39 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
       }
     }).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] = (0, import_react66.useState)(() => buildControls(mapControls));
-  console.log(mapControl);
   const toggleControl = (id) => {
     setMapControl((prevControls) => prevControls.map((control) => {
       if (control.id === id) {
@@ -20216,93 +20263,95 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
       return control;
     }));
   };
-  (0, import_react66.useEffect)(() => {
-    if (typeof mapContainer === "function")
-      return;
-    if (!(mapContainer == null ? void 0 : mapContainer.current))
-      return;
-    if (!sourceData)
+  const loadSvgImage = (color) => __async(void 0, null, function* () {
+    let svgText = (0, import_server8.renderToStaticMarkup)(
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_MapPinIcon4.default, { 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(void 0, null, function* () {
+    const img = yield loadSvgImage(source.style.pin_color);
+    const imgName = `${source.name}-pin`;
+    if (map == null ? void 0 : map.hasImage(imgName))
+      map == null ? void 0 : map.removeImage(imgName);
+    map == null ? void 0 : map.addImage(imgName, img);
+  });
+  const updateClusterColors = (source) => {
+    const layerId = `${source.name}-cluster-circles`;
+    if (!(map == null ? void 0 : map.getLayer(layerId)))
       return;
-    const map = new import_maplibre_gl.default.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: "© OpenStreetMap Contributors",
-            maxzoom: 19
-          }
-        },
-        layers: [
-          {
-            id: "osm",
-            type: "raster",
-            source: "osm"
+    const current = map == null ? void 0 : map.getPaintProperty(layerId, "circle-color");
+    if (current !== source.style.cluster_color) {
+      map == null ? void 0 : map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
+      map == null ? void 0 : map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
+    }
+  };
+  const loadBaseLayers = () => {
+    if (baseLayers && (baseLayers == null ? void 0 : baseLayers.length) > 0) {
+      const base_layers = buildBaseLayers(baseLayers);
+      base_layers == null ? void 0 : base_layers.forEach((layer) => {
+        if (!(map == null ? void 0 : map.getLayer(layer.name))) {
+          if (!(map == null ? void 0 : 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
+              });
+            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" }
+              });
+            if ((layer == null ? void 0 : layer.layer_type) == "satellite")
+              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 });
           }
-        ],
-        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 = (0, import_server8.renderToStaticMarkup)(
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_MapPinIcon4.default, { 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;
+        }
       });
     }
-    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 loadSourceData = () => {
+    sourceData == null ? void 0 : sourceData.forEach((source) => __async(void 0, null, function* () {
+      const existing_data = map == null ? void 0 : map.getSource(source.name);
+      if (!existing_data) {
         if (source.is_cluster) {
-          map.addSource(source.name, {
+          map == null ? void 0 : map.addSource(source.name, {
             type: source.type,
             data: source.data,
             cluster: true,
             clusterMaxZoom: 10,
             clusterRadius: 50
           });
-        }
+        } else
+          map == null ? void 0 : map.addSource(source.name, {
+            type: source.type,
+            data: source.data
+            // cluster: true,
+            // clusterMaxZoom: 10,
+            // clusterRadius: 50,
+          });
         if (source.show_cluster_count) {
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-circles`,
             type: "circle",
             source: source.name,
@@ -20315,7 +20364,7 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
               "circle-stroke-color": source.style.cluster_stroke_color
             }
           });
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-count`,
             type: "symbol",
             source: source.name,
@@ -20329,32 +20378,204 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
               "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"], 1],
+            paint: {
+              "circle-color": source.style.cluster_color,
+              "circle-opacity": 1,
+              "circle-radius": 20,
+              "circle-stroke-width": 4,
+              "circle-stroke-color": source.style.cluster_stroke_color
+              // "circle-radius": [
+              //     "step",
+              //     ["get", "count"],
+              //     20, 100, 30, 750, 40
+              // ]
+            }
+          });
+          map == null ? void 0 : map.addLayer({
+            id: `${source.name}-cluster-count`,
+            type: "symbol",
+            source: source.name,
+            filter: [">", ["get", "count"], 1],
+            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: ["!", ["has", "point_count"]],
+            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);
+      }
     }));
+  };
+  (0, import_react66.useEffect)(() => {
+    if (typeof mapContainer === "function")
+      return;
+    if (!(mapContainer == null ? void 0 : mapContainer.current))
+      return;
+    if (!sourceData)
+      return;
+    const map2 = new import_maplibre_gl.default.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: "© 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 = map2;
+    map2.scrollZoom.disable();
+    mapRef.current.getContainer().addEventListener("mouseenter", () => map2.scrollZoom.enable());
+    mapRef.current.getContainer().addEventListener("mouseleave", () => map2.scrollZoom.disable());
+    map2.on("load", () => __async(void 0, null, function* () {
+      changeMapProjection();
+    }));
+    return () => {
+      map2.remove();
+      mapRef.current = null;
+    };
+  }, []);
+  (0, import_react66.useEffect)(() => {
+    if (!map)
+      return;
+    const init = () => {
+      loadBaseLayers();
+    };
+    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);
+    } else
+      map.once("load", () => {
+        init();
+        map.on("zoomend", zoom);
+      });
+  }, [map]);
+  (0, import_react66.useEffect)(() => {
+    var _a, _b, _c;
+    if (!map || !sourceData)
+      return;
+    if (map.isStyleLoaded()) {
+      loadSourceData();
+      return;
+    }
+    const handler = () => loadSourceData();
+    map.once("load", handler);
+    if (show_popup && customLayers) {
+      map.on("mouseenter", ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins", () => {
+        map.getCanvas().style.cursor = "pointer";
+      });
+      map.on("mouseleave", ((_b = customLayers[0]) == null ? void 0 : _b.layerName) + "-pins", () => {
+        map.getCanvas().style.cursor = "";
+      });
+      map.on("click", ((_c = customLayers[0]) == null ? void 0 : _c.layerName) + "-pins", (e) => {
+        var _a2, _b2, _c2, _d;
+        if (e.features) {
+          const properties = (_a2 = e.features[0]) == null ? void 0 : _a2.properties;
+          const coordinates = (_c2 = (_b2 = e.features[0]) == null ? void 0 : _b2.geometry) == null ? void 0 : _c2.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 import_maplibre_gl.default.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);
+        }
+      });
+    }
     return () => {
-      map.remove();
+      map.off("load", handler);
     };
-  }, [sourceData, mapControls]);
+  }, [sourceData]);
+  (0, import_react66.useEffect)(() => {
+    if (!map || !sourceData)
+      return;
+    sourceData.forEach((source) => {
+      const source_layer = map.getSource(source.name);
+      if (source_layer)
+        source_layer.setData(source.data);
+    });
+  }, [sourceData]);
   if (!sourceData)
     return;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative", style: { width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ref: mapContainer, className: "w-full h-full" }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
   ] });

package/dist/index.mjs

@@ -5716,6 +5716,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";
 
@@ -8788,44 +8789,50 @@ 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 map = mapRef.current;
   const changeMapProjection = () => {
     var _a;
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
+    const map2 = mapRef.current;
+    const currentProjection = (_a = map2.getProjection()) == null ? void 0 : _a.type;
     const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
-    map.setProjection({
+    map2.setProjection({
       type: newProjection
     });
   };
   const zoomIn = () => {
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    map.zoomIn();
+    const map2 = mapRef.current;
+    map2.zoomIn();
+    return map2.getBounds();
   };
   const zoomOut = () => {
     if (!mapRef.current)
       return;
-    const map = mapRef.current;
-    map.zoomOut();
+    const map2 = mapRef.current;
+    map2.zoomOut();
+    return map2.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 map2 = mapRef.current;
+    return map2 == null ? void 0 : map2.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
   }
   const handleToggle = (layerId) => {
     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 map2 = mapRef.current;
+    const layers = getLayersByPattern(new RegExp(layerId));
+    layers == null ? void 0 : layers.forEach((id) => {
+      const visibility = map2 == null ? void 0 : map2.getLayoutProperty(id, "visibility");
       const newVisibility = visibility === "none" ? "visible" : "none";
-      map.setLayoutProperty(id, "visibility", newVisibility);
+      map2 == null ? void 0 : map2.setLayoutProperty(id, "visibility", newVisibility);
     });
   };
   const buildControls = (controls) => {
@@ -8848,7 +8855,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 +8869,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 +8902,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
               }
             ),
             position: "topleft",
+            title: "OVERLAY MAPS",
             isOpen: false,
             isDisplayOnly: false,
             popoverDirection: "right",
@@ -8897,8 +8913,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,93 +8954,95 @@ 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)
+  const loadSvgImage = (color) => __async(void 0, 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(void 0, null, function* () {
+    const img = yield loadSvgImage(source.style.pin_color);
+    const imgName = `${source.name}-pin`;
+    if (map == null ? void 0 : map.hasImage(imgName))
+      map == null ? void 0 : map.removeImage(imgName);
+    map == null ? void 0 : map.addImage(imgName, img);
+  });
+  const updateClusterColors = (source) => {
+    const layerId = `${source.name}-cluster-circles`;
+    if (!(map == null ? void 0 : map.getLayer(layerId)))
       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: "© OpenStreetMap Contributors",
-            maxzoom: 19
-          }
-        },
-        layers: [
-          {
-            id: "osm",
-            type: "raster",
-            source: "osm"
+    const current = map == null ? void 0 : map.getPaintProperty(layerId, "circle-color");
+    if (current !== source.style.cluster_color) {
+      map == null ? void 0 : map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
+      map == null ? void 0 : map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
+    }
+  };
+  const loadBaseLayers = () => {
+    if (baseLayers && (baseLayers == null ? void 0 : baseLayers.length) > 0) {
+      const base_layers = buildBaseLayers(baseLayers);
+      base_layers == null ? void 0 : base_layers.forEach((layer) => {
+        if (!(map == null ? void 0 : map.getLayer(layer.name))) {
+          if (!(map == null ? void 0 : 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
+              });
+            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" }
+              });
+            if ((layer == null ? void 0 : layer.layer_type) == "satellite")
+              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 });
           }
-        ],
-        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;
+        }
       });
     }
-    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 loadSourceData = () => {
+    sourceData == null ? void 0 : sourceData.forEach((source) => __async(void 0, null, function* () {
+      const existing_data = map == null ? void 0 : map.getSource(source.name);
+      if (!existing_data) {
         if (source.is_cluster) {
-          map.addSource(source.name, {
+          map == null ? void 0 : map.addSource(source.name, {
             type: source.type,
             data: source.data,
             cluster: true,
             clusterMaxZoom: 10,
             clusterRadius: 50
           });
-        }
+        } else
+          map == null ? void 0 : map.addSource(source.name, {
+            type: source.type,
+            data: source.data
+            // cluster: true,
+            // clusterMaxZoom: 10,
+            // clusterRadius: 50,
+          });
         if (source.show_cluster_count) {
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-circles`,
             type: "circle",
             source: source.name,
@@ -9006,7 +9055,7 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData
               "circle-stroke-color": source.style.cluster_stroke_color
             }
           });
-          map.addLayer({
+          map == null ? void 0 : map.addLayer({
             id: `${source.name}-cluster-count`,
             type: "symbol",
             source: source.name,
@@ -9020,32 +9069,204 @@ 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"], 1],
+            paint: {
+              "circle-color": source.style.cluster_color,
+              "circle-opacity": 1,
+              "circle-radius": 20,
+              "circle-stroke-width": 4,
+              "circle-stroke-color": source.style.cluster_stroke_color
+              // "circle-radius": [
+              //     "step",
+              //     ["get", "count"],
+              //     20, 100, 30, 750, 40
+              // ]
+            }
+          });
+          map == null ? void 0 : map.addLayer({
+            id: `${source.name}-cluster-count`,
+            type: "symbol",
+            source: source.name,
+            filter: [">", ["get", "count"], 1],
+            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: ["!", ["has", "point_count"]],
+            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;
+    if (!sourceData)
+      return;
+    const map2 = 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: "© 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 = map2;
+    map2.scrollZoom.disable();
+    mapRef.current.getContainer().addEventListener("mouseenter", () => map2.scrollZoom.enable());
+    mapRef.current.getContainer().addEventListener("mouseleave", () => map2.scrollZoom.disable());
+    map2.on("load", () => __async(void 0, null, function* () {
+      changeMapProjection();
     }));
     return () => {
-      map.remove();
+      map2.remove();
+      mapRef.current = null;
+    };
+  }, []);
+  useEffect21(() => {
+    if (!map)
+      return;
+    const init = () => {
+      loadBaseLayers();
     };
-  }, [sourceData, mapControls]);
+    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);
+    } else
+      map.once("load", () => {
+        init();
+        map.on("zoomend", zoom);
+      });
+  }, [map]);
+  useEffect21(() => {
+    var _a, _b, _c;
+    if (!map || !sourceData)
+      return;
+    if (map.isStyleLoaded()) {
+      loadSourceData();
+      return;
+    }
+    const handler = () => loadSourceData();
+    map.once("load", handler);
+    if (show_popup && customLayers) {
+      map.on("mouseenter", ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins", () => {
+        map.getCanvas().style.cursor = "pointer";
+      });
+      map.on("mouseleave", ((_b = customLayers[0]) == null ? void 0 : _b.layerName) + "-pins", () => {
+        map.getCanvas().style.cursor = "";
+      });
+      map.on("click", ((_c = customLayers[0]) == null ? void 0 : _c.layerName) + "-pins", (e) => {
+        var _a2, _b2, _c2, _d;
+        if (e.features) {
+          const properties = (_a2 = e.features[0]) == null ? void 0 : _a2.properties;
+          const coordinates = (_c2 = (_b2 = e.features[0]) == null ? void 0 : _b2.geometry) == null ? void 0 : _c2.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);
+        }
+      });
+    }
+    return () => {
+      map.off("load", handler);
+    };
+  }, [sourceData]);
+  useEffect21(() => {
+    if (!map || !sourceData)
+      return;
+    sourceData.forEach((source) => {
+      const source_layer = map.getSource(source.name);
+      if (source_layer)
+        source_layer.setData(source.data);
+    });
+  }, [sourceData]);
   if (!sourceData)
     return;
-  return /* @__PURE__ */ jsxs35("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+  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) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/map",
-  "version": "0.16.9-dev.8",
+  "version": "0.16.9-dev.9",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -24,11 +24,11 @@
     "react-hotkeys-hook": "^4.5.0",
     "react-leaflet": "^4.2.1",
     "zod": "^3.25.7",
-    "@geowiki/core": "0.16.9-dev.8",
-    "@geowiki/design-system": "0.16.9-dev.8",
-    "@geowiki/cms-proxy": "0.16.9-dev.8",
-    "@geowiki/evoland-api-proxy": "0.16.9-dev.8",
-    "@geowiki/ui": "0.16.9-dev.8"
+    "@geowiki/cms-proxy": "0.16.9-dev.9",
+    "@geowiki/ui": "0.16.9-dev.9",
+    "@geowiki/design-system": "0.16.9-dev.9",
+    "@geowiki/evoland-api-proxy": "0.16.9-dev.9",
+    "@geowiki/core": "0.16.9-dev.9"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -87,9 +87,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.2",
     "typescript": "5.4.2",
-    "tailwind-config": "0.0.0",
     "tsconfig": "0.0.0",
-    "eslint-config-custom": "0.0.0"
+    "eslint-config-custom": "0.0.0",
+    "tailwind-config": "0.0.0"
   },
   "scripts": {
     "build": "tsup && tailwindcss -i styles.css -o dist/styles.css --minify",