@opengeoweb/webmap-react 10.0.0 → 10.2.0

package/index.esm.js

@@ -1,4 +1,4 @@
-import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, tilesettings, WMBBOX, getWMLayerById, WMJSMap } from '@opengeoweb/webmap';
+import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, tilesettings, WMBBOX, getWMLayerById, WMJSMap, privateWebMapUtils } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -16,6 +16,7 @@ import { produce } from 'immer';
 import { useResizeDetector } from 'react-resize-detector';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
+import { useQuery } from '@tanstack/react-query';
 
 var en = {
 	"webmap-react-event": "event:",
@@ -6797,17 +6798,32 @@ var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps
         child.onLayerError && child.onLayerError(newWMLayer, new Error(newWMLayer.lastError));
       }
       // This ensures that MultiMapViewConnect works properly.
-      setTimeout(function () {
-        var wmjsMap = getWMJSMapById(mapId);
-        if (!wmjsMap || wmjsMap.isDestroyed) {
-          return;
-        }
-        setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
-        var layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
-        onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-        child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
-        wmjsMap.draw();
-      }, 1);
+      setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var wmjsMap, layerInfo;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              wmjsMap = getWMJSMapById(mapId);
+              if (!(!wmjsMap || wmjsMap.isDestroyed)) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
+              _context.next = 6;
+              return newWMLayer.parseLayer();
+            case 6:
+              layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
+              onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
+              child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
+              wmjsMap.draw();
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      })), 1);
     })["catch"](function (e) {
       child.onLayerError && child.onLayerError(e);
     });
@@ -6829,11 +6845,11 @@ var removeWMLayerFromMap = function removeWMLayerFromMap(wmLayer, mapId, onUpdat
     mapDimensions: {
       origin: origin,
       mapId: mapId,
-      dimensions: wmjsMap.mapdimensions.map(function (_ref) {
-        var name = _ref.name,
-          units = _ref.units,
-          currentValue = _ref.currentValue,
-          synced = _ref.synced;
+      dimensions: wmjsMap.mapdimensions.map(function (_ref2) {
+        var name = _ref2.name,
+          units = _ref2.units,
+          currentValue = _ref2.currentValue,
+          synced = _ref2.synced;
         return {
           name: name,
           units: units,
@@ -8162,9 +8178,11 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
           value: sliderValue,
           onKeyDown: upDownNavigation,
           onChange: function onChange(e, val) {
-            onChangeDimensionValue(values[val].toString());
-            if (!managedValue) {
-              setCurrentIndex(val);
+            if (typeof val === 'number') {
+              onChangeDimensionValue(values[val].toString());
+              if (!managedValue) {
+                setCurrentIndex(val);
+              }
             }
           }
         })
@@ -8458,7 +8476,12 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     order = _ref$order === void 0 ? 0 : _ref$order,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source,
-    dialogHeight = _ref.dialogHeight;
+    dialogHeight = _ref.dialogHeight,
+    _ref$startPosition = _ref.startPosition,
+    startPosition = _ref$startPosition === void 0 ? {
+      top: 150,
+      left: 900
+    } : _ref$startPosition;
   var styles = getLayerStyles(layer);
   var dimensions = getDimensionsList(layer.dimensions);
   var _useWebmapReactTransl = useWebmapReactTranslation(),
@@ -8470,10 +8493,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       width: 288,
       height: dialogHeight || 650
     },
-    startPosition: {
-      top: 150,
-      left: 900
-    },
+    startPosition: startPosition,
     title: t('webmap-react-layer-info'),
     isOpen: isOpen,
     onMouseDown: onMouseDown,
@@ -8831,14 +8851,14 @@ var obsPrecipitationIntensityPWS = {
 };
 var harmonieRelativeHumidityPl = {
   service: KNMIgeoservicesHarmonie.url,
-  name: 'relative_humidity__at_pl',
+  name: 'relative_humidity_pl',
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer,
   enabled: true
 };
 var harmonieWindPl = {
   service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_pl',
+  name: 'wind_speed_pl',
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer,
   enabled: true
@@ -8866,7 +8886,7 @@ var harmoniePressure = {
 };
 var harmonieWindFlags = {
   service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_10m',
+  name: 'wind_speed_components_hagl',
   enabled: true,
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer
@@ -9077,4 +9097,177 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels
 });
 
-export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };
+var privateWmsGetCapabilities = privateWebMapUtils.privateWmsGetCapabilities,
+  privateGetWMSServiceInfo = privateWebMapUtils.privateGetWMSServiceInfo,
+  privateWmsGetLayerTree = privateWebMapUtils.privateWmsGetLayerTree,
+  privateWmsFlattenLayerTree = privateWebMapUtils.privateWmsFlattenLayerTree,
+  privateWmtsGetCapabilities = privateWebMapUtils.privateWmtsGetCapabilities,
+  QUERYWMS_GETCAPABILITIES = privateWebMapUtils.QUERYWMS_GETCAPABILITIES;
+/**
+ * Queries the WMS GetCapabilities. This is the base TanStack hook for the other hooks in this file.
+ *
+ * @param {string} serviceUrl
+ * @returns {UseQueryResult<GetCapabilitiesJson>}
+ */
+var useQueryGetWMSGetCapabilities = function useQueryGetWMSGetCapabilities(serviceUrl) {
+  var uriKey = new URLSearchParams(serviceUrl).toString();
+  return useQuery({
+    queryKey: [uriKey, QUERYWMS_GETCAPABILITIES],
+    queryFn: function queryFn() {
+      return privateWmsGetCapabilities(serviceUrl);
+    }
+  });
+};
+/**
+ * Returns details about the WMS service
+ *
+ * @param {string} serviceUrl
+ * @returns {(WMSServiceInfo | null)}
+ */
+var useQueryGetWMSServiceInfo = function useQueryGetWMSServiceInfo(serviceUrl) {
+  var _React$useState = React__default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    serviceInfo = _React$useState2[0],
+    setServiceInfo = _React$useState2[1];
+  var _useQueryGetWMSGetCap = useQueryGetWMSGetCapabilities(serviceUrl),
+    getCapabilitiesJSON = _useQueryGetWMSGetCap.data;
+  React__default.useEffect(function () {
+    if (!getCapabilitiesJSON) {
+      setServiceInfo(null);
+    } else {
+      setServiceInfo(privateGetWMSServiceInfo(getCapabilitiesJSON, serviceUrl));
+    }
+  }, [serviceUrl, getCapabilitiesJSON]);
+  return serviceInfo;
+};
+/**
+ * Gets the layer tree in hierarchical order for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
+ *
+ * @param {string} serviceUrl
+ * @returns {(LayerTree | null)}
+ */
+var useQueryGetWMSLayersTree = function useQueryGetWMSLayersTree(serviceUrl) {
+  var _React$useState3 = React__default.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    layerTree = _React$useState4[0],
+    setLayerTree = _React$useState4[1];
+  var _useQueryGetWMSGetCap2 = useQueryGetWMSGetCapabilities(serviceUrl),
+    getCapabilitiesJSON = _useQueryGetWMSGetCap2.data;
+  React__default.useEffect(function () {
+    if (!getCapabilitiesJSON) {
+      setLayerTree(null);
+    } else {
+      setLayerTree(privateWmsGetLayerTree(getCapabilitiesJSON));
+    }
+  }, [serviceUrl, getCapabilitiesJSON]);
+  return layerTree;
+};
+/**
+ * Gets the flat layer list (without hierarchy) for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
+ *
+ * @param {string} serviceUrl
+ * @returns {LayerProps[]}
+ */
+var useQueryGetWMSLayers = function useQueryGetWMSLayers(serviceUrl) {
+  var _React$useState5 = React__default.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    layers = _React$useState6[0],
+    setLayers = _React$useState6[1];
+  var _useQueryGetWMSGetCap3 = useQueryGetWMSGetCapabilities(serviceUrl),
+    getCapabilitiesJSON = _useQueryGetWMSGetCap3.data;
+  React__default.useEffect(function () {
+    if (!getCapabilitiesJSON) {
+      setLayers([]);
+    } else {
+      setLayers(privateWmsFlattenLayerTree(privateWmsGetLayerTree(getCapabilitiesJSON)));
+    }
+  }, [serviceUrl, getCapabilitiesJSON]);
+  return layers;
+};
+/**
+ * Returns specific layer from the WMS service
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(LayerProps | null)}
+ */
+var useQueryGetWMSLayer = function useQueryGetWMSLayer(serviceUrl, name) {
+  var _React$useState7 = React__default.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    layer = _React$useState8[0],
+    setLayer = _React$useState8[1];
+  var layers = useQueryGetWMSLayers(serviceUrl);
+  React__default.useEffect(function () {
+    setLayer(layers.find(function (l) {
+      return l.name === name;
+    }) || null);
+  }, [layers, name]);
+  return layer;
+};
+/**
+ * Returns a stylelist for given layer in a service
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(Style[] | null)}
+ */
+var useGetWMSLayerStyleList = function useGetWMSLayerStyleList(serviceUrl, name) {
+  var _useQueryGetWMSLayer;
+  return ((_useQueryGetWMSLayer = useQueryGetWMSLayer(serviceUrl, name)) === null || _useQueryGetWMSLayer === void 0 ? void 0 : _useQueryGetWMSLayer.styles) || null;
+};
+/**
+ * Returns WMLayer instance. The layer will contains parsed dimensions and styles and keeps a state for these properties.
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(WMLayer | null)}
+ */
+var useGetWMLayerInstance = function useGetWMLayerInstance(serviceUrl, name, id) {
+  var _React$useState9 = React__default.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    layer = _React$useState10[0],
+    setLayer = _React$useState10[1];
+  var refId = useRef(webmapUtils.generateLayerId()).current;
+  var layerId = id || refId;
+  React__default.useEffect(function () {
+    // Check if the layer is already registered
+    var l = webmapUtils.getWMLayerById(layerId);
+    if (!l || l.service !== serviceUrl) {
+      // Make a new layer if the serviceUrl changes. (But not when the name changes)
+      var _wmLayer = new WMLayer({
+        name: name,
+        service: serviceUrl,
+        layerType: LayerType.mapLayer,
+        id: layerId
+      });
+      webmapUtils.registerWMLayer(_wmLayer, layerId);
+    }
+    // Set the name and parse the layer
+    var wmLayer = webmapUtils.getWMLayerById(layerId);
+    wmLayer.setName(name).then(function () {
+      webmapUtils.registerWMLayer(wmLayer, layerId);
+      setLayer(wmLayer);
+    })["catch"](function (e) {
+      console.error(e);
+      webmapUtils.registerWMLayer(wmLayer, layerId);
+      setLayer(wmLayer);
+    });
+  }, [layerId, name, serviceUrl]);
+  return layer;
+};
+/**
+ * Used for querying WMTS GetCapabilities documents
+ * @param serviceUrl
+ * @returns
+ */
+var useQueryWMTSGetCapabilities = function useQueryWMTSGetCapabilities(serviceUrl) {
+  var uriKey = new URLSearchParams(serviceUrl).toString();
+  return useQuery({
+    queryKey: [uriKey, 'queryGetCapabilities'],
+    queryFn: function queryFn() {
+      return privateWmtsGetCapabilities(serviceUrl, [], true);
+    }
+  });
+};
+
+export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useMapDrawTool, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "10.0.0",
+  "version": "10.2.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/Axis/ProfileAxis.stories.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
-export declare const ProfileAxisStory: {
-    (): React.ReactElement;
-    storyName: string;
-};
-declare const _default: {
-    title: string;
-};
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProfileAxis } from './ProfileAxis';
+declare const meta: Meta<typeof ProfileAxis>;
+export default meta;
+type Story = StoryObj<typeof ProfileAxis>;
+export declare const Component: Story;
+export declare const ProfileAxisStory: Story;

package/src/lib/components/LayerInfo/LayerInfoDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Source } from '@opengeoweb/shared';
+import { Position, Source } from '@opengeoweb/shared';
 import { LayerProps } from '@opengeoweb/webmap';
 export interface LayerInfoDialogProps {
     layer: LayerProps;
@@ -10,5 +10,6 @@ export interface LayerInfoDialogProps {
     order?: number;
     source?: Source;
     dialogHeight?: number;
+    startPosition?: Position;
 }
 export declare const LayerInfoDialog: React.FC<LayerInfoDialogProps>;

package/src/lib/components/LayerInfo/LayerInfoDialog.stories.d.ts

@@ -1,25 +1,10 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const LayerInfoDialogLight: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const LayerInfoDialogDark: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { LayerInfoDialog } from './LayerInfoDialog';
+declare const meta: Meta<typeof LayerInfoDialog>;
+export default meta;
+type Story = StoryObj<typeof LayerInfoDialog>;
+export declare const Component: Story;
+export declare const LayerInfoDialogLightDoc: Story;
+export declare const LayerInfoDialogLight: Story;
+export declare const LayerInfoDialogDarkDoc: Story;
+export declare const LayerInfoDialogDark: Story;

package/src/lib/components/Legend/Legend.stories.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const SimpleLegend: () => React.ReactElement;
-export declare const SimpleLegendWithMultiDimensions: () => React.ReactElement;
-export declare const SimpleLegendWithoutDimensionsOrGraphic: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { Legend } from './Legend';
+declare const meta: Meta<typeof Legend>;
+export default meta;
+type Story = StoryObj<typeof Legend>;
+export declare const SimpleLegend: Story;
+export declare const SimpleLegendWithMultiDimensions: Story;
+export declare const SimpleLegendWithoutDimensionsOrGraphic: Story;

package/src/lib/components/MapDimensionSelect/DimensionSelectDialog.stories.d.ts

@@ -1,29 +1,13 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const DimensionSelectElevationLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const DimensionSelectElevationDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const DimensionSelectEnsembleMemberLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const DimensionSelectEnsembleMemberDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const DimensionSelectInvalidSyncLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const DimensionSelectInvalidSyncDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import MapDimensionSelect from './MapDimensionSelect';
+declare const meta: Meta<typeof MapDimensionSelect>;
+export default meta;
+type Story = StoryObj<typeof MapDimensionSelect>;
+export declare const Component: Story;
+export declare const ComponentDark: Story;
+export declare const DimensionSelectElevationLight: Story;
+export declare const DimensionSelectElevationDark: Story;
+export declare const DimensionSelectEnsembleMemberLight: Story;
+export declare const DimensionSelectEnsembleMemberDark: Story;
+export declare const DimensionSelectInvalidSyncLight: Story;
+export declare const DimensionSelectInvalidSyncDark: Story;

package/src/lib/components/MapDimensionSelect/MapDimensionSelect.stories.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import type { StoryObj } from '@storybook/react';
+import MapDimensionSelect from './MapDimensionSelect';
 declare const _default: {
     title: string;
     component: React.FC<import("../MapView").MapViewProps>;
 };
 export default _default;
-export declare const MapDimensionOnMap: () => React.ReactElement;
+type Story = StoryObj<typeof MapDimensionSelect>;
+export declare const MapDimensionOnMap: Story;

package/src/lib/components/MapDraw/MapDraw.stories.d.ts

@@ -1,37 +1,13 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Map1: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map2: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map3: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map4: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map5: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map6: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map7: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const Map8: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapDrawGeoJSON } from './storyComponents/MapDrawGeoJSON';
+declare const meta: Meta<typeof MapDrawGeoJSON>;
+export default meta;
+type Story = StoryObj<typeof MapDrawGeoJSON>;
+export declare const Map1: Story;
+export declare const Map2: Story;
+export declare const Map3: Story;
+export declare const Map4: Story;
+export declare const Map5: Story;
+export declare const Map6: Story;
+export declare const Map7: Story;
+export declare const Map8: Story;

package/src/lib/components/MapDrawTool/MapDrawTool.stories.d.ts

@@ -1,13 +1,9 @@
-import React from 'react';
-import { MapDrawToolOptions } from './useMapDrawTool';
-declare const _default: {
-    title: string;
-};
-export default _default;
-interface BasicMapDrawToolProps {
-    mapDrawOptions: MapDrawToolOptions;
-}
-export declare const BasicMapDrawTool: React.FC<BasicMapDrawToolProps>;
-export declare const BasicMapDrawToolShape: () => React.ReactElement;
-export declare const BasicMapDrawToolWithMultipleShapes: () => React.ReactElement;
-export declare const BasicMapDrawToolWithMultipleShapesValues: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMapDrawTool } from './useMapDrawTool';
+declare const meta: Meta<typeof useMapDrawTool>;
+export default meta;
+type Story = StoryObj<typeof useMapDrawTool>;
+export declare const BasicMapDrawTool: Story;
+export declare const BasicMapDrawToolShape: Story;
+export declare const BasicMapDrawToolWithMultipleShapes: Story;
+export declare const BasicMapDrawToolWithMultipleShapesValues: Story;

package/src/lib/components/MapDrawTool/MapDrawToolIntersection.stories.d.ts

@@ -1,11 +1,7 @@
-import React from 'react';
-import { MapDrawToolOptions } from './useMapDrawTool';
-declare const _default: {
-    title: string;
-};
-export default _default;
-interface MapDrawToolIntersectDemoProps {
-    mapDrawOptions: MapDrawToolOptions;
-}
-export declare const IntersectionDemo: React.FC<MapDrawToolIntersectDemoProps>;
-export declare const IntersectionWithShapeDemo: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMapDrawTool } from './useMapDrawTool';
+declare const meta: Meta<typeof useMapDrawTool>;
+export default meta;
+type Story = StoryObj<typeof useMapDrawTool>;
+export declare const IntersectionDemo: Story;
+export declare const IntersectionWithShapeDemo: Story;

package/src/lib/components/MapDrawTool/MapDrawToolMultipleDrawTools.stories.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const MultipleDrawToolsDemo: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMapDrawTool } from './useMapDrawTool';
+declare const meta: Meta<typeof useMapDrawTool>;
+export default meta;
+type Story = StoryObj<typeof useMapDrawTool>;
+export declare const MultipleDrawToolsDemo: Story;

package/src/lib/components/MapView/MapView.Error.stories.d.ts

@@ -1,14 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const MapError: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const MapWithDuplicateLayerIdsError: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const Component: Story;
+export declare const MapError: Story;
+export declare const MapWithDuplicateLayerIdsError: Story;

package/src/lib/components/MapView/MapView.MapPin.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const SetMapPin: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const SetMapPin: Story;

package/src/lib/components/MapView/MapView.Passive.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const PassiveMap: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const PassiveMap: Story;

package/src/lib/components/MapView/MapView.ProfileSounding.stories.d.ts

@@ -1,9 +1,6 @@
-import * as React from 'react';
-export declare const MapViewProfile: {
-    (): React.ReactElement;
-    storyName: string;
-};
-declare const _default: {
-    title: string;
-};
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from './MapView';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const MapViewProfile: Story;

package/src/lib/components/MapView/MapView.RadarAnimation.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const RadarAnimation: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const RadarAnimation: Story;

package/src/lib/components/MapView/MapView.RadarData.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const MapViewRadar: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from './MapView';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const MapViewRadar: Story;

package/src/lib/components/MapView/MapView.SetProjectionBBox.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const SetProjectionBBox: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const SetProjectionBBox: Story;

package/src/lib/components/MapView/MapView.SetProjectionBBoxLocalState.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const SetProjectionBBoxLocalState: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const SetProjectionBBoxLocalState: Story;

package/src/lib/components/MapView/MapView.ShiftToZoom.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const HoldShiftToZoom: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const HoldShiftToZoom: Story;

package/src/lib/components/MapView/MapView.ShowLayerInfo.stories.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
-export declare const MapWithShowLayerInfoEnabled: {
-    (): React.ReactElement;
-    storyName: string;
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from '.';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
+export declare const MapWithShowLayerInfoEnabled: Story;

package/src/lib/components/MapView/MapView.TiledBaseLayers.stories.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./MapView").MapViewProps>;
-};
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapView } from './MapView';
+declare const meta: Meta<typeof MapView>;
+export default meta;
+type Story = StoryObj<typeof MapView>;
 export interface MapDropDownItem {
     name: string;
     title: string;
@@ -15,8 +14,4 @@ export interface MapDropDownProps {
     top?: number;
     left?: number;
 }
-export declare const MapDropDown: ({ value, change, options, top, left, }: MapDropDownProps) => React.ReactElement<MapDropDownProps>;
-export declare const MapViewTiledBaseLayers: {
-    (): React.ReactElement;
-    storyName: string;
-};
+export declare const MapViewTiledBaseLayers: Story;

package/src/lib/components/WMSViewerDemo/WebmapReact.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+type Story = StoryObj;
+export declare const DemoDemoWMSViewerStory: Story;
+export declare const MapComponentDemo: Story;
+declare const meta: Meta<typeof DemoDemoWMSViewerStory>;
+export default meta;

package/src/lib/components/WMSViewerDemo/components/WMSDimTimeYearSelector.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare enum TimeMode {
+    YEAR = 0,
+    MONTH = 1,
+    DAY = 2,
+    HOUR = 3,
+    MINUTE = 4,
+    SECOND = 5
+}
+interface WMSDimTimeYearSelectorProps {
+    selectedISOTime: string;
+    layerId: string;
+    onSelectTime: (time: string) => void;
+    mode: TimeMode;
+}
+export declare const increaseTime: (selectedISOTime: string, timeRes: string) => string;
+declare const WMSDimTimeYearSelector: ({ selectedISOTime, layerId, onSelectTime, mode, }: WMSDimTimeYearSelectorProps) => React.ReactElement<WMSDimTimeYearSelectorProps> | null;
+export default WMSDimTimeYearSelector;

package/src/lib/components/WMSViewerDemo/components/WMSLayerSelector.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { LayerProps, LayerFoundation } from '@opengeoweb/webmap';
+interface WMSLayerSelectorProps {
+    layer: LayerFoundation;
+    layers: LayerProps[];
+    onSelectLayer: (layer: LayerProps) => void;
+}
+declare const WMSLayerSelector: ({ layer, layers, onSelectLayer, }: WMSLayerSelectorProps) => React.ReactElement<WMSLayerSelectorProps>;
+export default WMSLayerSelector;

package/src/lib/components/WMSViewerDemo/components/WMSStyleSelector.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { LayerFoundation } from '@opengeoweb/webmap';
+interface WMSStyleSelectorProps {
+    layer: LayerFoundation;
+    onSelectStyle: (layer: LayerFoundation) => void;
+}
+declare const WMSStyleSelector: ({ layer, onSelectStyle, }: WMSStyleSelectorProps) => React.ReactElement<WMSStyleSelectorProps> | null;
+export default WMSStyleSelector;

package/src/lib/components/WMSViewerDemo/components/WMSTimeSlider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface WMSTimeSliderProps {
+    selectedISOTime: string;
+    layerId: string;
+    onSelectTime: (time: string) => void;
+}
+declare const WMSTimeSlider: ({ selectedISOTime, layerId, onSelectTime, }: WMSTimeSliderProps) => React.ReactElement<WMSTimeSliderProps> | null;
+export default WMSTimeSlider;

package/src/lib/hooks/useHooksGetCapabilities.d.ts

@@ -1,4 +1,4 @@
-import { GetCapabilitiesJson, WMSServiceInfo, LayerTree, LayerProps, WMLayer } from '@opengeoweb/webmap';
+import { GetCapabilitiesJson, WMSServiceInfo, LayerTree, LayerProps, WMLayer, Style } from '@opengeoweb/webmap';
 import { UseQueryResult } from '@tanstack/react-query';
 /**
  * Queries the WMS GetCapabilities. This is the base TanStack hook for the other hooks in this file.
@@ -36,6 +36,14 @@ export declare const useQueryGetWMSLayers: (serviceUrl: string) => LayerProps[];
  * @returns {(LayerProps | null)}
  */
 export declare const useQueryGetWMSLayer: (serviceUrl: string, name: string) => LayerProps | null;
+/**
+ * Returns a stylelist for given layer in a service
+ *
+ * @param {string} serviceUrl
+ * @param {string} name
+ * @returns {(Style[] | null)}
+ */
+export declare const useGetWMSLayerStyleList: (serviceUrl: string, name: string) => Style[] | null;
 /**
  * Returns WMLayer instance. The layer will contains parsed dimensions and styles and keeps a state for these properties.
  *
@@ -43,4 +51,10 @@ export declare const useQueryGetWMSLayer: (serviceUrl: string, name: string) =>
  * @param {string} name
  * @returns {(WMLayer | null)}
  */
-export declare const useGetWMLayerInstance: (serviceUrl: string, name: string) => WMLayer | null;
+export declare const useGetWMLayerInstance: (serviceUrl: string, name: string, id?: string) => WMLayer | null;
+/**
+ * Used for querying WMTS GetCapabilities documents
+ * @param serviceUrl
+ * @returns
+ */
+export declare const useQueryWMTSGetCapabilities: (serviceUrl: string) => UseQueryResult<GetCapabilitiesJson>;

package/src/lib/hooks/useHooksGetCapabilities.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './layers';
+export * from './hooks/useHooksGetCapabilities';
 export { WEBMAP_REACT_NAMESPACE } from './utils/i18n';