@geowiki/map 0.16.8-dev.1 → 0.16.9-dev.1

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default, { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
 import * as L from 'leaflet';
 import L__default, { LatLngBoundsExpression, WMSOptions, WMSParams, Map, LatLng } from 'leaflet';
 import { TypedArray } from 'geotiff';
@@ -23,7 +23,7 @@ declare const POSITION_CLASSES: {
     middleRight: string;
 };
 interface GenericControlProps {
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     position?: keyof typeof POSITION_CLASSES;
     cssclass?: string;
     cssStyle?: CSSProperties;
@@ -590,7 +590,7 @@ declare const BasicMap: () => react_jsx_runtime.JSX.Element;
 interface BasfMapProps extends Partial<MapContainerProps> {
     className?: string;
 }
-declare const BasfMap: react.NamedExoticComponent<BasfMapProps>;
+declare const BasfMap: React$1.NamedExoticComponent<BasfMapProps>;
 
 declare const GeoTreesMap: () => react_jsx_runtime.JSX.Element;
 
@@ -601,7 +601,7 @@ interface Props {
     mapSettings: MapSettingsItemDto;
     session: any;
 }
-declare const GeoWikiMap: react__default.MemoExoticComponent<({ mapSettings, session }: Props) => react_jsx_runtime.JSX.Element>;
+declare const GeoWikiMap: React__default.MemoExoticComponent<({ mapSettings, session }: Props) => react_jsx_runtime.JSX.Element>;
 
 type BaseLayerType = "Esri World imagery" | "OpenStreetMap" | "Google Hybrid" | "Google Satellite";
 
@@ -613,6 +613,42 @@ declare const WaybackTimelineMap: (props: {
     mapZoom: number;
 }) => react_jsx_runtime.JSX.Element;
 
+interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    baseLayers?: {
+        name: string;
+        type: string;
+        layer_type?: "hillshade" | "terrainSource";
+        url?: string;
+        tileSize?: number;
+    }[];
+    customLayers?: {
+        id: string;
+        index: number;
+        isCustom: boolean;
+        type: "GeoJson";
+        url: string;
+        layerName: string;
+        color: string;
+        opacity: number;
+        title: string;
+    }[];
+    mapControls?: {
+        type: "zoom" | "projection" | "toggle_layers";
+    }[];
+    sourceData?: {
+        name: string;
+        type: "geojson";
+        data: any;
+        is_cluster?: boolean;
+        show_cluster_count?: boolean;
+        style?: {
+            cluster_color: string;
+            cluster_stroke_color: string;
+        };
+    }[];
+}
+declare const MapLibre: React__default.ForwardRefExoticComponent<MapLibreProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface BingLayerOptions extends L.TileLayerOptions {
     culture?: string | undefined;
     style?: string;
@@ -637,4 +673,4 @@ declare class BingLayer extends L.TileLayer {
 
 declare const BingLeafletLayer: ForwardRefExoticComponent<BingLayerOptions & RefAttributes<BingLayer>>;
 
-export { Annotation, type AnnotationUndoRedo, type Asset, BasfMap, BasicMap, BingLeafletLayer, CDSE_Layer, CanopyMap, CanvasImage, CustomWMSTileLayer, type CustomWMSTileLayerProps, EvoLandGeometry, type EvoLandRasterType, EvolandContainer, EvolandLeftSideBar, GenericControl, GeoJsonLayer, GeoTreesMap, GeoWikiMap, type ICanvasImageProps, type IMapSidebarProps, type IReadOnlyTiffImageProps, type ITiffImageProps, type ITiffWithD3Props, LabelButton, type LabelButtonProps, LabelButtonView, type LabelButtonViewProps, LayerStoreList, type LocationWithGeometry, MapEvents, MapSidebar, OverlayLayer, PointSelection, Questions, type RasterAssetItem, type RasterItem, type RasterItemBase64, RasterType, ReadOnlyTiffImage, SegmentationType, SelectedPoint, TiffImage, TiffImageContainer, TimeSeries, ViewAssets, WaybackTimelineMap, useEvolandStore, useMapLayerStore, useMapStore };
+export { Annotation, type AnnotationUndoRedo, type Asset, BasfMap, BasicMap, BingLeafletLayer, CDSE_Layer, CanopyMap, CanvasImage, CustomWMSTileLayer, type CustomWMSTileLayerProps, EvoLandGeometry, type EvoLandRasterType, EvolandContainer, EvolandLeftSideBar, GenericControl, GeoJsonLayer, GeoTreesMap, GeoWikiMap, type ICanvasImageProps, type IMapSidebarProps, type IReadOnlyTiffImageProps, type ITiffImageProps, type ITiffWithD3Props, LabelButton, type LabelButtonProps, LabelButtonView, type LabelButtonViewProps, LayerStoreList, type LocationWithGeometry, MapEvents, MapLibre, MapSidebar, OverlayLayer, PointSelection, Questions, type RasterAssetItem, type RasterItem, type RasterItemBase64, RasterType, ReadOnlyTiffImage, SegmentationType, SelectedPoint, TiffImage, TiffImageContainer, TimeSeries, ViewAssets, WaybackTimelineMap, useEvolandStore, useMapLayerStore, useMapStore };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default, { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
 import * as L from 'leaflet';
 import L__default, { LatLngBoundsExpression, WMSOptions, WMSParams, Map, LatLng } from 'leaflet';
 import { TypedArray } from 'geotiff';
@@ -23,7 +23,7 @@ declare const POSITION_CLASSES: {
     middleRight: string;
 };
 interface GenericControlProps {
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     position?: keyof typeof POSITION_CLASSES;
     cssclass?: string;
     cssStyle?: CSSProperties;
@@ -590,7 +590,7 @@ declare const BasicMap: () => react_jsx_runtime.JSX.Element;
 interface BasfMapProps extends Partial<MapContainerProps> {
     className?: string;
 }
-declare const BasfMap: react.NamedExoticComponent<BasfMapProps>;
+declare const BasfMap: React$1.NamedExoticComponent<BasfMapProps>;
 
 declare const GeoTreesMap: () => react_jsx_runtime.JSX.Element;
 
@@ -601,7 +601,7 @@ interface Props {
     mapSettings: MapSettingsItemDto;
     session: any;
 }
-declare const GeoWikiMap: react__default.MemoExoticComponent<({ mapSettings, session }: Props) => react_jsx_runtime.JSX.Element>;
+declare const GeoWikiMap: React__default.MemoExoticComponent<({ mapSettings, session }: Props) => react_jsx_runtime.JSX.Element>;
 
 type BaseLayerType = "Esri World imagery" | "OpenStreetMap" | "Google Hybrid" | "Google Satellite";
 
@@ -613,6 +613,42 @@ declare const WaybackTimelineMap: (props: {
     mapZoom: number;
 }) => react_jsx_runtime.JSX.Element;
 
+interface MapLibreProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    baseLayers?: {
+        name: string;
+        type: string;
+        layer_type?: "hillshade" | "terrainSource";
+        url?: string;
+        tileSize?: number;
+    }[];
+    customLayers?: {
+        id: string;
+        index: number;
+        isCustom: boolean;
+        type: "GeoJson";
+        url: string;
+        layerName: string;
+        color: string;
+        opacity: number;
+        title: string;
+    }[];
+    mapControls?: {
+        type: "zoom" | "projection" | "toggle_layers";
+    }[];
+    sourceData?: {
+        name: string;
+        type: "geojson";
+        data: any;
+        is_cluster?: boolean;
+        show_cluster_count?: boolean;
+        style?: {
+            cluster_color: string;
+            cluster_stroke_color: string;
+        };
+    }[];
+}
+declare const MapLibre: React__default.ForwardRefExoticComponent<MapLibreProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface BingLayerOptions extends L.TileLayerOptions {
     culture?: string | undefined;
     style?: string;
@@ -637,4 +673,4 @@ declare class BingLayer extends L.TileLayer {
 
 declare const BingLeafletLayer: ForwardRefExoticComponent<BingLayerOptions & RefAttributes<BingLayer>>;
 
-export { Annotation, type AnnotationUndoRedo, type Asset, BasfMap, BasicMap, BingLeafletLayer, CDSE_Layer, CanopyMap, CanvasImage, CustomWMSTileLayer, type CustomWMSTileLayerProps, EvoLandGeometry, type EvoLandRasterType, EvolandContainer, EvolandLeftSideBar, GenericControl, GeoJsonLayer, GeoTreesMap, GeoWikiMap, type ICanvasImageProps, type IMapSidebarProps, type IReadOnlyTiffImageProps, type ITiffImageProps, type ITiffWithD3Props, LabelButton, type LabelButtonProps, LabelButtonView, type LabelButtonViewProps, LayerStoreList, type LocationWithGeometry, MapEvents, MapSidebar, OverlayLayer, PointSelection, Questions, type RasterAssetItem, type RasterItem, type RasterItemBase64, RasterType, ReadOnlyTiffImage, SegmentationType, SelectedPoint, TiffImage, TiffImageContainer, TimeSeries, ViewAssets, WaybackTimelineMap, useEvolandStore, useMapLayerStore, useMapStore };
+export { Annotation, type AnnotationUndoRedo, type Asset, BasfMap, BasicMap, BingLeafletLayer, CDSE_Layer, CanopyMap, CanvasImage, CustomWMSTileLayer, type CustomWMSTileLayerProps, EvoLandGeometry, type EvoLandRasterType, EvolandContainer, EvolandLeftSideBar, GenericControl, GeoJsonLayer, GeoTreesMap, GeoWikiMap, type ICanvasImageProps, type IMapSidebarProps, type IReadOnlyTiffImageProps, type ITiffImageProps, type ITiffWithD3Props, LabelButton, type LabelButtonProps, LabelButtonView, type LabelButtonViewProps, LayerStoreList, type LocationWithGeometry, MapEvents, MapLibre, MapSidebar, OverlayLayer, PointSelection, Questions, type RasterAssetItem, type RasterItem, type RasterItemBase64, RasterType, ReadOnlyTiffImage, SegmentationType, SelectedPoint, TiffImage, TiffImageContainer, TimeSeries, ViewAssets, WaybackTimelineMap, useEvolandStore, useMapLayerStore, useMapStore };

package/dist/index.js

@@ -470,6 +470,7 @@ __export(src_exports, {
   LabelButtonView: () => LabelButtonView,
   LayerStoreList: () => LayerStoreList,
   MapEvents: () => MapEvents,
+  MapLibre: () => MapLibre,
   MapSidebar: () => MapSidebar,
   OverlayLayer: () => OverlayLayer,
   PointSelection: () => PointSelection,
@@ -16673,6 +16674,276 @@ var WaybackTimelineMap = (props) => {
     }
   ) });
 };
+
+// src/Components/Map/MapLibre.tsx
+var import_react62 = require("react");
+var import_react63 = require("react");
+var import_maplibre_gl = __toESM(require("maplibre-gl"));
+var import_MapPinIcon4 = __toESM(require("@heroicons/react/24/solid/MapPinIcon"));
+var import_server8 = require("react-dom/server");
+var import_design_system = require("@geowiki/design-system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var MapLibre = (0, import_react63.forwardRef)(({ baseLayers, customLayers, mapControls, sourceData }, ref) => {
+  const mapContainer = ref;
+  const mapRef = (0, import_react62.useRef)(null);
+  const changeMapProjection = () => {
+    var _a;
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
+    const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
+    map.setProjection({
+      type: newProjection
+    });
+  };
+  const zoomIn = () => {
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    map.zoomIn();
+  };
+  const zoomOut = () => {
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    map.zoomOut();
+  };
+  function getLayersByPattern(map, pattern) {
+    return map.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 newVisibility = visibility === "none" ? "visible" : "none";
+      map.setLayoutProperty(id, "visibility", newVisibility);
+    });
+  };
+  const buildControls = (controls) => {
+    return controls.map((c) => {
+      switch (c.type) {
+        case "projection":
+          return {
+            id: "projection",
+            title: "Change Projection",
+            icon: import_design_system.GlobeIcon,
+            onClick: changeMapProjection,
+            position: "topright",
+            isOpen: true,
+            isDisplayOnly: false,
+            popoverDirection: "right",
+            isMobileFilter: true
+          };
+        case "zoom":
+          return [
+            {
+              id: "zoomIn",
+              icon: import_design_system.PlusIcon,
+              onClick: zoomIn,
+              position: "topright",
+              isOpen: true,
+              isDisplayOnly: false,
+              popoverDirection: "right",
+              isMobileFilter: true
+            },
+            {
+              id: "zoomOut",
+              icon: import_design_system.MinusIcon,
+              onClick: zoomOut,
+              position: "topright",
+              isOpen: true,
+              isDisplayOnly: false,
+              popoverDirection: "right",
+              isMobileFilter: true
+            }
+          ];
+        case "toggle_layers":
+          let custom_layers = customLayers == null ? void 0 : customLayers.map((l) => __spreadProps(__spreadValues({}, l), {
+            ontoggle: () => handleToggle(l.id)
+          }));
+          return {
+            id: "overlay",
+            icon: import_design_system.LayerGroupIcon,
+            panel: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              import_design_system.LayerSwitcher,
+              {
+                mapMenuItems: [
+                  {
+                    MapMenuItem: {},
+                    Layers: [],
+                    Title: ""
+                  }
+                ],
+                customLayers: custom_layers
+              }
+            ),
+            position: "topleft",
+            isOpen: false,
+            isDisplayOnly: false,
+            popoverDirection: "right",
+            isMobileFilter: true
+          };
+        default:
+          return null;
+      }
+    }).flat();
+  };
+  const [mapControl, setMapControl] = (0, import_react62.useState)(() => buildControls(mapControls));
+  const toggleControl = (id) => {
+    setMapControl((prevControls) => prevControls.map((control) => {
+      if (control.id === id) {
+        return __spreadProps(__spreadValues({}, control), { isOpen: !control.isOpen });
+      }
+      return control;
+    }));
+  };
+  (0, import_react62.useEffect)(() => {
+    if (typeof mapContainer === "function")
+      return;
+    if (!(mapContainer == null ? void 0 : mapContainer.current))
+      return;
+    if (!sourceData)
+      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"
+          }
+        ],
+        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_runtime79.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* () {
+        if (source.is_cluster) {
+          map.addSource(source.name, {
+            type: source.type,
+            data: source.data,
+            cluster: true,
+            clusterMaxZoom: 10,
+            clusterRadius: 50
+          });
+        }
+        if (source.show_cluster_count) {
+          map.addLayer({
+            id: `${source.name}-cluster-circles`,
+            type: "circle",
+            source: source.name,
+            filter: ["has", "point_count"],
+            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
+            }
+          });
+          map.addLayer({
+            id: `${source.name}-cluster-count`,
+            type: "symbol",
+            source: source.name,
+            filter: ["has", "point_count"],
+            layout: {
+              "text-field": "{point_count_abbreviated}",
+              "text-font": ["Open Sans Bold"],
+              "text-size": 14
+            },
+            paint: {
+              "text-color": "#f7f2f2"
+            }
+          });
+          if (!map.hasImage("pin")) {
+            const img = yield loadSvgImage();
+            map.addImage("pin", img);
+          }
+          map.addLayer({
+            id: source.name + "-count",
+            type: "symbol",
+            source: source.name,
+            filter: ["!", ["has", "point_count"]],
+            layout: {
+              "icon-image": "pin",
+              "icon-size": 1,
+              "icon-allow-overlap": true,
+              "icon-anchor": "bottom"
+            }
+          });
+        }
+      }));
+    }));
+    return () => {
+      map.remove();
+    };
+  }, [sourceData, mapControls]);
+  if (!sourceData)
+    return;
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref: mapContainer, className: "w-full h-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_design_system.MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
+  ] });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Annotation,
@@ -16694,6 +16965,7 @@ var WaybackTimelineMap = (props) => {
   LabelButtonView,
   LayerStoreList,
   MapEvents,
+  MapLibre,
   MapSidebar,
   OverlayLayer,
   PointSelection,

package/dist/index.mjs

@@ -16867,6 +16867,276 @@ var WaybackTimelineMap = (props) => {
     }
   ) });
 };
+
+// src/Components/Map/MapLibre.tsx
+import { useEffect as useEffect34, useRef as useRef16, useState as useState36 } from "react";
+import { forwardRef as forwardRef5 } from "react";
+import maplibregl from "maplibre-gl";
+import MapPinIcon5 from "@heroicons/react/24/solid/MapPinIcon";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MapControlToolbar, GlobeIcon as GlobeIcon2, PlusIcon as PlusIcon3, MinusIcon as MinusIcon3, LayerGroupIcon as LayerGroupIcon5, LayerSwitcher as LayerSwitcher2 } from "@geowiki/design-system";
+import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData }, ref) => {
+  const mapContainer = ref;
+  const mapRef = useRef16(null);
+  const changeMapProjection = () => {
+    var _a;
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
+    const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
+    map.setProjection({
+      type: newProjection
+    });
+  };
+  const zoomIn = () => {
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    map.zoomIn();
+  };
+  const zoomOut = () => {
+    if (!mapRef.current)
+      return;
+    const map = mapRef.current;
+    map.zoomOut();
+  };
+  function getLayersByPattern(map, pattern) {
+    return map.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 newVisibility = visibility === "none" ? "visible" : "none";
+      map.setLayoutProperty(id, "visibility", newVisibility);
+    });
+  };
+  const buildControls = (controls) => {
+    return controls.map((c) => {
+      switch (c.type) {
+        case "projection":
+          return {
+            id: "projection",
+            title: "Change Projection",
+            icon: GlobeIcon2,
+            onClick: changeMapProjection,
+            position: "topright",
+            isOpen: true,
+            isDisplayOnly: false,
+            popoverDirection: "right",
+            isMobileFilter: true
+          };
+        case "zoom":
+          return [
+            {
+              id: "zoomIn",
+              icon: PlusIcon3,
+              onClick: zoomIn,
+              position: "topright",
+              isOpen: true,
+              isDisplayOnly: false,
+              popoverDirection: "right",
+              isMobileFilter: true
+            },
+            {
+              id: "zoomOut",
+              icon: MinusIcon3,
+              onClick: zoomOut,
+              position: "topright",
+              isOpen: true,
+              isDisplayOnly: false,
+              popoverDirection: "right",
+              isMobileFilter: true
+            }
+          ];
+        case "toggle_layers":
+          let custom_layers = customLayers == null ? void 0 : customLayers.map((l) => __spreadProps(__spreadValues({}, l), {
+            ontoggle: () => handleToggle(l.id)
+          }));
+          return {
+            id: "overlay",
+            icon: LayerGroupIcon5,
+            panel: /* @__PURE__ */ jsx79(
+              LayerSwitcher2,
+              {
+                mapMenuItems: [
+                  {
+                    MapMenuItem: {},
+                    Layers: [],
+                    Title: ""
+                  }
+                ],
+                customLayers: custom_layers
+              }
+            ),
+            position: "topleft",
+            isOpen: false,
+            isDisplayOnly: false,
+            popoverDirection: "right",
+            isMobileFilter: true
+          };
+        default:
+          return null;
+      }
+    }).flat();
+  };
+  const [mapControl, setMapControl] = useState36(() => buildControls(mapControls));
+  const toggleControl = (id) => {
+    setMapControl((prevControls) => prevControls.map((control) => {
+      if (control.id === id) {
+        return __spreadProps(__spreadValues({}, control), { isOpen: !control.isOpen });
+      }
+      return control;
+    }));
+  };
+  useEffect34(() => {
+    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: "© 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__ */ jsx79(MapPinIcon5, { 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* () {
+        if (source.is_cluster) {
+          map.addSource(source.name, {
+            type: source.type,
+            data: source.data,
+            cluster: true,
+            clusterMaxZoom: 10,
+            clusterRadius: 50
+          });
+        }
+        if (source.show_cluster_count) {
+          map.addLayer({
+            id: `${source.name}-cluster-circles`,
+            type: "circle",
+            source: source.name,
+            filter: ["has", "point_count"],
+            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
+            }
+          });
+          map.addLayer({
+            id: `${source.name}-cluster-count`,
+            type: "symbol",
+            source: source.name,
+            filter: ["has", "point_count"],
+            layout: {
+              "text-field": "{point_count_abbreviated}",
+              "text-font": ["Open Sans Bold"],
+              "text-size": 14
+            },
+            paint: {
+              "text-color": "#f7f2f2"
+            }
+          });
+          if (!map.hasImage("pin")) {
+            const img = yield loadSvgImage();
+            map.addImage("pin", img);
+          }
+          map.addLayer({
+            id: source.name + "-count",
+            type: "symbol",
+            source: source.name,
+            filter: ["!", ["has", "point_count"]],
+            layout: {
+              "icon-image": "pin",
+              "icon-size": 1,
+              "icon-allow-overlap": true,
+              "icon-anchor": "bottom"
+            }
+          });
+        }
+      }));
+    }));
+    return () => {
+      map.remove();
+    };
+  }, [sourceData, mapControls]);
+  if (!sourceData)
+    return;
+  return /* @__PURE__ */ jsxs57("div", { className: "relative", style: { width: "100%", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx79("div", { ref: mapContainer, className: "w-full h-full" }),
+    /* @__PURE__ */ jsx79(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
+  ] });
+});
 export {
   Annotation,
   BasfMap,
@@ -16887,6 +17157,7 @@ export {
   LabelButtonView,
   LayerStoreList,
   MapEvents,
+  MapLibre,
   MapSidebar,
   OverlayLayer,
   PointSelection,

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@geowiki/map",
-  "version": "0.16.8-dev.1",
+  "version": "0.16.9-dev.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "src/types",
     "README.md"
   ],
   "license": "MIT",
@@ -23,17 +24,18 @@
     "react-hook-form": "^7.53.0",
     "react-hotkeys-hook": "^4.5.0",
     "react-leaflet": "^4.2.1",
-    "zod": "^3.23.8",
-    "@geowiki/core": "0.16.8-dev.1",
-    "@geowiki/ui": "0.16.8-dev.1",
-    "@geowiki/evoland-api-proxy": "0.16.8-dev.1",
-    "@geowiki/cms-proxy": "0.16.8-dev.1"
+    "zod": "^3.25.7",
+    "@geowiki/cms-proxy": "0.16.9-dev.1",
+    "@geowiki/core": "0.16.9-dev.1",
+    "@geowiki/design-system": "0.16.9-dev.1",
+    "@geowiki/evoland-api-proxy": "0.16.9-dev.1",
+    "@geowiki/ui": "0.16.9-dev.1"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@headlessui/react": "^1.7.16",
+    "@headlessui/react": "^2.2.10",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-popover": "^1.0.6",
@@ -53,6 +55,7 @@
     "leaflet.markercluster": "^1.5.3",
     "leaflet.polylinemeasure": "^3.0.0",
     "lucide-react": "^0.224.0",
+    "maplibre-gl": "^5.23.0",
     "plotty": "^0.4.9",
     "pngjs": "^7.0.0",
     "proj4": "^2.9.0",
@@ -63,11 +66,14 @@
     "zustand": "4.3.9"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^3.0.5",
     "@types/esri-leaflet": "^3.0.3",
     "@types/geojson": "^7946.0.10",
-    "@types/leaflet": "^1.9.3",
+    "@types/leaflet": "^1.9.21",
     "@types/leaflet-draw": "^1.0.7",
     "@types/leaflet.markercluster": "^1.5.1",
     "@types/node": "18.11.18",
@@ -75,14 +81,11 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.7",
     "@types/uuid": "^10.0.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.46.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
     "tailwindcss-animate": "^1.0.7",
-    "autoprefixer": "^10.4.14",
     "tsup": "^8.0.2",
     "typescript": "5.4.2",
     "eslint-config-custom": "0.0.0",

package/src/types/geojson-to-kml.d.ts

@@ -0,0 +1,5 @@
+declare module "geojson-to-kml" {
+  export default function geojsonToKml(
+    geojson: GeoJSON.FeatureCollection | GeoJSON.Feature
+  ): string;
+}

package/src/types/ifbn.ts

@@ -0,0 +1,20 @@
+import { GeoJsonProperties } from "geojson";
+
+export interface GeoJsonPropertiesProps {
+  properties: GeoJsonProperties;
+  isLoading?: boolean;
+}
+
+export interface ResearchSiteData {
+  id: number;
+  name: string;
+  country: string;
+  url: string;
+  established: string;
+  reference: string;
+  network: string;
+  PIs: string[];
+  PIs_text: string;
+  institutions: string[];
+  photos: string | null;
+}

package/src/types/leaflet-area-selection.d.ts

@@ -0,0 +1,44 @@
+declare module "@bopen/leaflet-area-selection" {
+  import { Control, Map, LatLng, Polygon, Marker } from "leaflet";
+
+  export interface DrawAreaSelectionOptions {
+    active?: boolean;
+    fadeOnActivation?: boolean;
+    onPolygonReady?: (polygon: Polygon, control: DrawAreaSelection) => void;
+    onPolygonDblClick?: (
+      polygon: Polygon,
+      control: DrawAreaSelection,
+      event: Event,
+    ) => void;
+    onButtonActivate?: (control: DrawAreaSelection, event: Event) => void;
+    onButtonDeactivate?: (
+      polygon: Polygon,
+      control: DrawAreaSelection,
+      event: Event,
+    ) => void;
+  }
+
+  export class DrawAreaSelection extends Control {
+    constructor(options?: DrawAreaSelectionOptions);
+    onAdd(map: Map): HTMLElement;
+    onRemove(map: Map): void;
+    getMap(): Map;
+    onPolygonReady(): void;
+    onPolygonDblClick(ev: Event): void;
+    setPhase(phase: "inactive" | "draw" | "adjust", forceClear?: boolean): void;
+    clearMarkers(): void;
+    clearGhostMarkers(): void;
+    clearPolygon(): void;
+    deactivate(): void;
+    activate(): void;
+    active: boolean;
+    phase: "inactive" | "draw" | "adjust";
+    polygon: Polygon | null;
+    markers: Array<{ marker: Marker }>;
+    ghostMarkers: Array<{ marker: Marker }>;
+  }
+
+  export function drawAreaSelection(
+    options?: DrawAreaSelectionOptions,
+  ): DrawAreaSelection;
+}

package/src/types/leaflet-polylinemeasure.d.ts

@@ -0,0 +1,98 @@
+// src/types/leaflet-polylinemeasure.d.ts
+
+import * as L from "leaflet";
+
+declare module "leaflet" {
+  // Define the options interface
+  interface PolylineMeasureOptions extends L.ControlOptions {
+    unit?:
+      | "metres"
+      | "landmiles"
+      | "nauticalmiles"
+      | "feet"
+      | "inches"
+      | "yards";
+    showBearings?: boolean;
+    clearMeasurementsOnStop?: boolean;
+    showClearControl?: boolean;
+    showUnitControl?: boolean;
+    unitControlTitle?: object;
+    bearingTextIn?: string;
+    bearingTextOut?: string;
+    tooltipTextFinish?: string;
+    tooltipTextDelete?: string;
+    tooltipTextMove?: string;
+    tooltipTextResume?: string;
+    measureControlTitleOn?: string;
+    measureControlTitleOff?: string;
+    measureControlLabel?: string;
+    clearControlTitle?: string;
+    clearControlLabel?: string;
+    tempLine?:
+      | {
+          color?: string;
+          weight?: number;
+        }
+      | object;
+    fixedLine?:
+      | {
+          color?: string;
+          weight?: number;
+        }
+      | object;
+    startCircle?:
+      | {
+          color?: string;
+        }
+      | object;
+    intermedCircle?:
+      | {
+          color?: string;
+        }
+      | object;
+    currentCircle?: object;
+    endCircle?:
+      | {
+          color?: string;
+        }
+      | object;
+  }
+
+  // Define the control interface
+  interface PolylineMeasureControl extends L.Control {
+    _container: HTMLElement;
+    _toggleMeasure(): void;
+    _clearAllMeasurements(): void;
+    _measureControl: boolean;
+    _control?: {
+      _measuring: boolean;
+      _toggleMeasure: () => void;
+    };
+  }
+
+  function controlPolylineMeasure(
+    options?: PolylineMeasureOptions,
+  ): PolylineMeasureControl;
+
+  namespace control {
+    function polylineMeasure(
+      options?: PolylineMeasureOptions,
+    ): PolylineMeasureControl;
+  }
+}
+
+// Augment Leaflet namespace to properly expose the interface
+declare global {
+  namespace L {
+    interface PolylineMeasureControl extends Control {
+      _container: HTMLElement;
+      _toggleMeasure(): void;
+      _clearAllMeasurements(): void;
+      _measureControl: boolean;
+      _control?: {
+        _measuring: boolean;
+        _toggleMeasure: () => void;
+      };
+    }
+  }
+}

package/src/types/leaflet.d.ts

@@ -0,0 +1,16 @@
+import { Point } from "leaflet";
+
+declare module "leaflet" {
+  interface Map {
+    selectArea: {
+      enable(): void;
+      disable(): void;
+      setValidate(validateFn?: (point: Point) => boolean): void;
+      setControlKey(ctrlKey: boolean): void;
+    };
+  }
+
+  interface LeafletEvent {
+    bounds?: LatLngBounds;
+  }
+}

package/src/types/map.ts

@@ -0,0 +1,28 @@
+export type ControlPosition =
+  | "topleft"
+  | "topright"
+  | "bottomleft"
+  | "bottomright";
+
+export type PopoverDirection = "top" | "right" | "bottom" | "left";
+
+export interface MapControl {
+  id: string;
+  title?: string;
+  icon: React.ComponentType<any>;
+  panel?: React.ReactNode;
+  onClick?: () => void;
+  position: ControlPosition;
+  isOpen: boolean;
+  popoverDirection?: PopoverDirection;
+  isMobileFilter?: boolean;
+  isDisplayOnly?: boolean;
+}
+
+export type BaseLayerType =
+  | "Esri World imagery"
+  | "OpenStreetMap"
+  | "Google Hybrid"
+  | "Google Satellite";
+// | "Azure Satellite"
+// | "Azure Satellite with Labels";

package/src/types/markers.ts

@@ -0,0 +1,10 @@
+export interface MarkerPosition {
+  lat: number;
+  lng: number;
+  label?: string;
+}
+
+export interface LayerConfig {
+  layerName: string;
+  maxZoom: number;
+}

package/src/types/turf.d.ts

@@ -0,0 +1 @@
+declare module "@turf/turf";