@opengeoweb/webmap-react 9.9.0 → 9.10.1

package/index.esm.js

@@ -1,376 +1,17 @@
 import * as React from 'react';
-import React__default, { Component, useRef, useState, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getMapImageStore, getWMJSMapById, debugLogger, DebugType, LayerType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
-import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, FormLabel, Switch } from '@mui/material';
-import { CustomTooltip, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
+import { CustomTooltip, CanvasComponent, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
+import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
 import _, { cloneDeep } from 'lodash';
 import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus } from '@opengeoweb/theme';
+import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus, Equalizer, DimensionsElevation, Link, LinkOff } from '@opengeoweb/theme';
 import { produce } from 'immer';
 import { debounce } from 'throttle-debounce';
 import { useResizeDetector } from 'react-resize-detector';
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-class CanvasComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.canvas = null;
-    this.ctx = null;
-    this.currentWidth = 1;
-    this.currentHeight = 1;
-    this.canvascontaineroutside = null;
-    this.canvascontainer = null;
-    this.timer = null;
-    this.redrawTimer = null;
-    this.loopHasStarted = false;
-    this.mounted = false;
-    this.updateCanvas = this.updateCanvas.bind(this);
-    this.handleMouseMoveEvent = this.handleMouseMoveEvent.bind(this);
-    this.handleMouseUpEvent = this.handleMouseUpEvent.bind(this);
-    this.handleMouseDownEvent = this.handleMouseDownEvent.bind(this);
-    this.resize = this.resize.bind(this);
-    this._handleWindowResize = this._handleWindowResize.bind(this);
-    this.handleClickEvent = this.handleClickEvent.bind(this);
-    this.handleWheelEvent = this.handleWheelEvent.bind(this);
-    this.handleTouchStartEvent = this.handleTouchStartEvent.bind(this);
-    this.handleTouchEndEvent = this.handleTouchEndEvent.bind(this);
-    this.handleTouchMoveEvent = this.handleTouchMoveEvent.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.startLoop = this.startLoop.bind(this);
-    this._documentKeyDown = this._documentKeyDown.bind(this);
-    this._isFocussed = false;
-    this.canvas = null;
-    this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
-    this.canvascontainer = /*#__PURE__*/React__default.createRef();
-  }
-  componentDidMount() {
-    this.mounted = true;
-    if (this.canvas) {
-      this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
-      this.canvas.addEventListener('mouseup', this.handleMouseUpEvent);
-      this.canvas.addEventListener('mousedown', this.handleMouseDownEvent);
-      this.canvas.addEventListener('touchstart', this.handleTouchStartEvent);
-      this.canvas.addEventListener('touchend', this.handleTouchEndEvent);
-      this.canvas.addEventListener('touchmove', this.handleTouchMoveEvent);
-      this.canvas.addEventListener('wheel', this.handleWheelEvent);
-      this.canvas.addEventListener('click', this.handleClickEvent);
-      document.addEventListener('keydown', this._documentKeyDown, false);
-      this.resize();
-      this.updateCanvas();
-    }
-    const {
-      onKeyUp,
-      redrawInterval: loopInterval
-    } = this.props;
-    if (onKeyUp) {
-      window.addEventListener('keyup', this.onKeyUp);
-    }
-    window.addEventListener('resize', this._handleWindowResize);
-    if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
-      this.canvascontaineroutside.current.focus();
-    }
-    this.timer = setInterval(() => {
-      this.resize();
-    }, 1000);
-    if (loopInterval) {
-      this.redrawTimer = setInterval(() => {
-        this.updateCanvas();
-      }, loopInterval);
-    }
-  }
-  shouldComponentUpdate() {
-    window.requestAnimationFrame(() => {
-      this.updateCanvas();
-    });
-    return false;
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-    window.removeEventListener('resize', this._handleWindowResize);
-    const {
-      onKeyUp
-    } = this.props;
-    if (onKeyUp) {
-      window.removeEventListener('keyup', this.onKeyUp);
-    }
-    if (this.canvas) {
-      this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
-      this.canvas.removeEventListener('mouseup', this.handleMouseUpEvent);
-      this.canvas.removeEventListener('mousemove', this.handleMouseMoveEvent);
-      this.canvas.removeEventListener('touchstart', this.handleTouchStartEvent);
-      this.canvas.removeEventListener('touchend', this.handleTouchEndEvent);
-      this.canvas.removeEventListener('touchmove', this.handleTouchMoveEvent);
-      this.canvas.removeEventListener('wheel', this.handleWheelEvent);
-      this.canvas.removeEventListener('click', this.handleClickEvent);
-      document.removeEventListener('keydown', this._documentKeyDown);
-    }
-    clearInterval(this.timer);
-    clearInterval(this.redrawTimer);
-  }
-  handleMouseMoveEvent(event) {
-    const {
-      onMouseMove,
-      onCanvasClick
-    } = this.props;
-    const x = event.offsetX;
-    const y = event.offsetY;
-    if (event.buttons === 1) {
-      onCanvasClick(x, y, this.currentWidth, this.currentHeight);
-    }
-    onMouseMove(x, y, event, this.currentWidth);
-  }
-  handleMouseUpEvent(event) {
-    const {
-      onMouseUp
-    } = this.props;
-    const x = event.offsetX;
-    onMouseUp(x);
-  }
-  handleMouseDownEvent(event) {
-    const {
-      onMouseDown
-    } = this.props;
-    const x = event.offsetX;
-    const y = event.offsetY;
-    onMouseDown(x, y, this.currentWidth);
-  }
-  handleTouchStartEvent(event) {
-    const {
-      onTouchStart
-    } = this.props;
-    onTouchStart(event, this.currentWidth);
-  }
-  handleTouchEndEvent() {
-    const {
-      onTouchEnd
-    } = this.props;
-    onTouchEnd();
-  }
-  handleTouchMoveEvent(event) {
-    const {
-      onTouchMove,
-      onCanvasClick
-    } = this.props;
-    const touches = event && event.touches && event.touches[0];
-    if (touches && touches.clientX && touches.clientY) {
-      const x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
-      const y2 = event.touches[0].clientY;
-      onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
-    }
-    onTouchMove(event, this.currentWidth);
-  }
-  handleClickEvent(event) {
-    const {
-      onCanvasClick
-    } = this.props;
-    const x = event.offsetX;
-    const y = event.offsetY;
-    onCanvasClick(x, y, this.currentWidth, this.currentHeight);
-  }
-  handleWheelEvent(event) {
-    const {
-      onWheel
-    } = this.props;
-    onWheel({
-      event,
-      deltaY: event.deltaY,
-      deltaX: event.deltaX,
-      canvasWidth: event.srcElement.width,
-      mouseX: event.offsetX
-    });
-  }
-  onFocus() {
-    const {
-      isFocussed
-    } = this.props;
-    this._isFocussed = true;
-    if (isFocussed) {
-      isFocussed(true);
-    }
-  }
-  onBlur() {
-    const {
-      isFocussed
-    } = this.props;
-    this._isFocussed = false;
-    if (isFocussed) {
-      isFocussed(false);
-    }
-  }
-  onKeyUp(event) {
-    const {
-      onKeyUp
-    } = this.props;
-    if (onKeyUp) {
-      onKeyUp(event);
-    }
-    if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
-      if (event.code === 'Escape') {
-        this.canvascontaineroutside.current.focus();
-      }
-    }
-  }
-  _documentKeyDown(event) {
-    if (this._isFocussed) {
-      const {
-        onKeyDown
-      } = this.props;
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    }
-  }
-  _handleWindowResize() {
-    this.resize();
-  }
-  startLoop() {
-    const {
-      onRenderCanvas
-    } = this.props;
-    if (this.mounted === false || this.loopHasStarted === false) {
-      return;
-    }
-    if (this.canvas) {
-      onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
-    }
-    requestAnimationFrame(this.startLoop);
-  }
-  updateCanvas() {
-    if (!this.canvas) {
-      return;
-    }
-    const {
-      onRenderCanvas,
-      loop
-    } = this.props;
-    this.ctx = this.canvas.getContext('2d');
-    if (!this.ctx) {
-      return;
-    }
-    if (this.ctx.canvas.height !== this.currentHeight) {
-      this.ctx.canvas.height = this.currentHeight;
-    }
-    if (this.ctx.canvas.width !== this.currentWidth) {
-      this.ctx.canvas.width = this.currentWidth;
-    }
-    if (loop !== true) {
-      this.loopHasStarted = false;
-      onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
-    } else if (this.loopHasStarted === false) {
-      this.loopHasStarted = true;
-      this.startLoop();
-    }
-  }
-  resize() {
-    const {
-      canvascontainer,
-      props: {
-        resizeCallback
-      }
-    } = this;
-    if (canvascontainer && canvascontainer.current) {
-      const newWidth = canvascontainer.current.clientWidth;
-      const newHeight = canvascontainer.current.clientHeight;
-      if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
-        this.currentWidth = newWidth;
-        this.currentHeight = newHeight;
-        this.updateCanvas();
-        resizeCallback && resizeCallback(newWidth);
-      }
-    }
-  }
-  render() {
-    this.updateCanvas();
-    this._handleWindowResize();
-    return /*#__PURE__*/React__default.createElement("div", {
-      role: "button",
-      ref: this.canvascontaineroutside,
-      tabIndex: 0,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      style: {
-        height: '100%',
-        width: '100%',
-        border: 'none',
-        display: 'block',
-        overflow: 'hidden'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      ref: this.canvascontainer,
-      style: {
-        minWidth: 'inherit',
-        minHeight: 'inherit',
-        width: 'inherit',
-        height: 'inherit',
-        overflow: 'hidden',
-        display: 'block',
-        border: 'none'
-      },
-      "data-testid": "canvas-container"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        overflow: 'visible',
-        width: 0,
-        height: 0
-      },
-      role: "presentation",
-      "aria-label": "canvas"
-    }, /*#__PURE__*/React__default.createElement("canvas", {
-      ref: canvas => {
-        this.canvas = canvas;
-      }
-    }))));
-  }
-}
-CanvasComponent.defaultProps = {
-  onRenderCanvas: () => {
-    /* intentionally left blank */
-  },
-  onCanvasClick: () => {
-    /* intentionally left blank */
-  },
-  onMouseMove: () => {
-    /* intentionally left blank */
-  },
-  onMouseUp: () => {
-    /* intentionally left blank */
-  },
-  onMouseDown: () => {
-    /* intentionally left blank */
-  },
-  onTouchStart: () => {
-    /* intentionally left blank */
-  },
-  onTouchEnd: () => {
-    /* intentionally left blank */
-  },
-  onTouchMove: () => {
-    /* intentionally left blank */
-  },
-  onWheel: () => {
-    /* intentionally left blank */
-  }
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var fails$i = function (exec) {
@@ -4827,12 +4468,17 @@ const GeoJSONTextField = ({
 const FeatureLayers = ({
   geojson,
   onChangeLayerIndex,
-  activeFeatureLayerIndex
+  activeFeatureLayerIndex,
+  getToolIcon
 }) => {
-  const featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(index => ({
-    key: index,
-    value: `feature ${index + 1}: ${geojson.features[index].geometry.type}`
-  })) : [];
+  const featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(index => {
+    var _a;
+    return {
+      index,
+      value: (_a = geojson.features[index].properties) === null || _a === void 0 ? void 0 : _a.selectionType,
+      label: `${index + 1}: ${geojson.features[index].geometry.type}`
+    };
+  }) : [];
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sm: 12
@@ -4849,13 +4495,22 @@ const FeatureLayers = ({
     value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
     onChange: event => {
       const featureNr = parseInt(event.target.value, 10);
-      onChangeLayerIndex(featureNr);
+      onChangeLayerIndex(featureNr, geojson.features[featureNr]);
+    },
+    sx: {
+      '.MuiSelect-select': {
+        display: 'flex'
+      }
     }
   }, featureLayerList.map(listItem => {
     return /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: listItem.key,
-      value: listItem.key
-    }, listItem.value);
+      key: listItem.index,
+      value: listItem.index
+    }, /*#__PURE__*/React__default.createElement(Icon$1, {
+      sx: {
+        transform: 'scale(0.9)'
+      }
+    }, getToolIcon(listItem.value)), listItem.label);
   }))));
 };
 
@@ -5477,7 +5132,7 @@ const getGeoJSONPropertyValue = (property, properties, polygonDrawMode, defaultP
  * @param {number} featureLayerIndex - feature layer index
  * @param {string} text - reason of change
  */
-const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason) => {
+const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason, selectionType) => {
   const feature = newGeoJSON.features[featureLayerIndex];
   const currentFeature = currentGeoJSON.features[featureLayerIndex];
   if (feature) {
@@ -5486,38 +5141,86 @@ const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason) => {
     } = feature;
     if (geometry.type === 'Polygon' && geometry.coordinates.length > 1 && reason === NEW_FEATURE_CREATED) {
       const lastCoordinate = geometry.coordinates.pop();
-      const copyFeature = Object.assign(Object.assign({}, feature), {
+      const copyFeature = Object.assign(Object.assign(Object.assign({}, feature), {
         geometry: Object.assign(Object.assign({}, geometry), {
           coordinates: [lastCoordinate]
         })
+      }), selectionType && {
+        properties: Object.assign(Object.assign({}, feature.properties), {
+          selectionType
+        })
       });
       newGeoJSON.features.push(copyFeature);
       return newGeoJSON.features.length - 1;
     }
     if (geometry.type === 'LineString' && geometry.coordinates.length > 2 && reason === NEW_LINESTRING_CREATED) {
       const lastCoordinate = geometry.coordinates.pop();
-      const copyFeature = Object.assign(Object.assign({}, feature), {
+      const copyFeature = Object.assign(Object.assign(Object.assign({}, feature), {
         geometry: Object.assign(Object.assign({}, geometry), {
           coordinates: [lastCoordinate, lastCoordinate]
         })
+      }), selectionType && {
+        properties: Object.assign(Object.assign({}, feature.properties), {
+          selectionType
+        })
       });
       newGeoJSON.features.push(copyFeature);
       return newGeoJSON.features.length - 1;
     }
     if (geometry.type === 'Point' && currentFeature && currentFeature.geometry.type === 'Point' && currentFeature.geometry.coordinates.length > 0 && reason === NEW_POINT_CREATED) {
-      newGeoJSON.features.push(currentFeature);
+      const copyFeature = Object.assign(Object.assign({}, currentFeature), selectionType && {
+        properties: Object.assign(Object.assign({}, feature.properties), {
+          selectionType
+        })
+      });
+      newGeoJSON.features.push(copyFeature);
       return newGeoJSON.features.length - 1;
     }
   }
   return undefined;
 };
 /**
- * Returns the intersection of two features. In case of a polygon, only the first feature is used.
+ * Returns the intersection of two point features. In case of a polygon, only the first feature is used.
  * @param a Feature A
  * @param b Feature B
  * @returns The intersection of the two features.
  */
-const intersectGeoJSONS = (a, b, geoJSONProperties = {
+const intersectPointGeoJSONS = (a, b, geoJSONProperties = {
+  stroke: '#FF0000',
+  'stroke-width': 10.0,
+  'stroke-opacity': 1,
+  fill: '#0000FF',
+  'fill-opacity': 1.0
+}) => {
+  const featureA = turf.feature(a.features[0].geometry);
+  const featureB = turf.feature(b.features[0].geometry);
+  const options = {
+    tolerance: 0.001,
+    highQuality: true
+  };
+  const simplifiedB = turf.simplify(featureB, options);
+  const isInside = turf.booleanPointInPolygon(a.features[0].geometry, simplifiedB);
+  return addFeatureProperties({
+    type: 'FeatureCollection',
+    features: !isInside ? [{
+      type: 'Feature',
+      properties: {
+        selectionType: 'point'
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: []
+      }
+    }] : [featureA]
+  }, geoJSONProperties);
+};
+/**
+ * Returns the intersection of two (multi) polygon features. In case of a polygon, only the first feature is used.
+ * @param a Feature A
+ * @param b Feature B
+ * @returns The intersection of the two features.
+ */
+const intersectPolygonGeoJSONS = (a, b, geoJSONProperties = {
   stroke: '#FF0000',
   'stroke-width': 10.0,
   'stroke-opacity': 1,
@@ -5547,6 +5250,9 @@ const intersectGeoJSONS = (a, b, geoJSONProperties = {
     }] : [intersection]
   }, geoJSONProperties);
 };
+const isPointFeatureCollection = geojson => {
+  return geojson.features[0].geometry.type === 'Point';
+};
 /**
  * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
  * @param geoJSONs
@@ -5561,7 +5267,10 @@ const createInterSections = (geojson, otherGeoJSON, geoJSONproperties = {
 }) => {
   const intersections = produce(geojson, () => {
     try {
-      return addFeatureProperties(intersectGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
+      if (isPointFeatureCollection(geojson)) {
+        return addFeatureProperties(intersectPointGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
+      }
+      return addFeatureProperties(intersectPolygonGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
     } catch (error) {
       return addFeatureProperties(geojson, geoJSONproperties);
     }
@@ -5789,7 +5498,7 @@ const useMapDrawTool = ({
     setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
     // updates shape
     const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.selectionType, featureLayerIndex);
-    const shouldUpdateShape = !geoJSON.features.length || isNewSelectedTool;
+    const shouldUpdateShape = !geoJSON.features.length || isNewSelectedTool || !newMode.isSelectable;
     if (shouldUpdateShape) {
       const updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType));
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
@@ -5802,7 +5511,9 @@ const useMapDrawTool = ({
     const geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, _shouldAllowMultipleShapes, geoJSON);
     const newGeoJSON = getGeoJson(geoJSONFeatureCollection, _shouldAllowMultipleShapes);
     if (_shouldAllowMultipleShapes) {
-      const newFeatureIndex = moveFeature(geoJSON, newGeoJSON, featureLayerIndex, reason);
+      const activeDrawTool = drawModes.find(mode => mode.drawModeId === activeTool);
+      const selectionType = activeDrawTool === null || activeDrawTool === void 0 ? void 0 : activeDrawTool.selectionType;
+      const newFeatureIndex = moveFeature(geoJSON, newGeoJSON, featureLayerIndex, reason, selectionType);
       if (newFeatureIndex !== undefined) {
         setFeatureLayerIndex(newFeatureIndex);
       }
@@ -5894,9 +5605,9 @@ const useMapDrawTool = ({
   };
 };
 
-const opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
+const opacityOptions = ['100', '90', '80', '70', '60', '50', '40', '30', '20', '10', '0'];
 const fillOptions = [defaultGeoJSONStyleProperties.fill, '#6e1e91', '#FF00FF', '#33ccFF', '#8F8'];
-const strokeWidthOptions = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
+const strokeWidthOptions = ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'];
 const getToolIcon = selectionType => {
   const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
@@ -5908,7 +5619,7 @@ const getToolIcon = selectionType => {
   if (selectionType === customLineButton.selectionType) {
     return /*#__PURE__*/React__default.createElement(ArrowUp, null);
   }
-  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  return /*#__PURE__*/React__default.createElement("div", null);
 };
 // custom buttons
 const shapeButtonNL$2 = {
@@ -5929,7 +5640,9 @@ const customLineButton = {
       type: 'LineString',
       coordinates: [[4.136829504703722, 50.944730810381465], [4.450134704406403, 53.81224530783831], [2.5703035061903217, 53.78911570560625], [5.252979278644519, 56.722490281934554], [8.758081200318252, 53.85846624679025], [6.290802752659646, 53.84691579421783], [6.623689527343743, 51.0556380592049], [4.136829504703722, 50.95706693142843]]
     },
-    properties: defaultGeoJSONStyleProperties
+    properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
+      selectionType: 'custom-line'
+    })
   },
   isSelectable: false,
   selectionType: 'custom-line'
@@ -5965,6 +5678,148 @@ const basicExampleMultipleShapeDrawOptions = {
     })
   }))
 };
+const basicExampleMultipleShapeWithValuesDrawOptions = Object.assign(Object.assign({}, basicExampleMultipleShapeDrawOptions), {
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.7,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'box'
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[-2.1980359430346246, 57.20029287883823], [-2.1980359430346246, 55.903312387397165], [0.20402079718587424, 55.903312387397165], [0.20402079718587424, 57.20029287883823], [-2.1980359430346246, 57.20029287883823]]]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.7,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'poly'
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[0.9181457740081845, 55.88511120390367], [2.378855953872001, 57.226659207134794], [3.612344550201447, 55.903312387397165], [0.9181457740081845, 55.88511120390367], [3.612344550201447, 55.903312387397165], [0.9181457740081845, 55.88511120390367]]]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.7,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'point'
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [5.446347331586017, 56.5975874650108]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.7,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'linestring'
+      },
+      geometry: {
+        type: 'LineString',
+        coordinates: [[6.955747850778628, 57.15630712609812], [9.666176740081486, 55.98511209901979], [6.7772166065730515, 55.96694931494649], [9.633716513862291, 57.253006702542514], [9.633716513862291, 57.253006702542514]]
+      }
+    }, {
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[-0.20986630818094482, 54.77174384201191], [-0.8779523081809448, 55.10438784201191], [-1.8410493081809447, 55.53605784201191], [-2.4479583081809433, 54.15100484201191], [-2.0541063081809448, 52.685297842011906], [-3.209864308180943, 51.27174584201191], [-1.8398653081809448, 51.14146584201191], [-1.8393393081809446, 51.14041384201191], [-1.8476433081809445, 51.09174584201191], [-1.8459763081809446, 51.08535184201191], [-1.8362533081809445, 51.081742842011906], [-1.2573653081809448, 50.98618484201191], [-0.812365308180945, 51.22451984201191], [-0.13125530818094439, 51.16340884201191], [0.6384666918190558, 50.911187842011906], [0.44180069181905546, 50.59646084201191], [0.8019306918190554, 50.529016842011906], [0.7243016918190552, 50.80812984201191], [1.0123566918190556, 51.13340984201191], [0.7365236918190547, 51.58340684201191], [1.1951346918190564, 51.602571842011905], [1.843228691819056, 52.00950784201191], [1.821522691819056, 52.040628842011905], [1.853745691819056, 52.11785284201191], [1.8556906918190572, 52.157571842011905], [1.9231886918190562, 52.660630842011905], [1.932313691819057, 52.669987842011906], [1.9818006918190565, 53.071743842011905], [1.290133691819056, 53.438410842011905], [1.2901356918190563, 54.77174584201191], [-0.20986630818094482, 54.77174384201191]]]
+      },
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'custom-fir'
+      }
+    }, {
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: [[4.136829504703722, 50.944730810381465], [4.450134704406403, 53.81224530783831], [2.5703035061903217, 53.78911570560625], [5.252979278644519, 56.722490281934554], [8.758081200318252, 53.85846624679025], [6.290802752659646, 53.84691579421783], [6.623689527343743, 51.0556380592049], [4.136829504703722, 50.95706693142843]]
+      },
+      properties: {
+        fill: '#33ccFF',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        selectionType: 'custom-line'
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#6e1e91',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [3.9694070386126015, 53.40680002840567]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#6e1e91',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[3.790875794407024, 52.29939515934869], [5.5761882364628, 53.811222537395366], [6.095551855969935, 52.16022302393104], [3.790875794407024, 52.29939515934869]]]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#6e1e91',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[6.890827398340236, 53.73448815953251], [6.890827398340236, 52.18013147265132], [9.682406853191086, 52.18013147265132], [9.682406853191086, 53.73448815953251], [6.890827398340236, 53.73448815953251]]]
+      }
+    }, {
+      type: 'Feature',
+      properties: {
+        fill: '#6e1e91',
+        'fill-opacity': 0.5,
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1
+      },
+      geometry: {
+        type: 'LineString',
+        coordinates: [[10.396531830013394, 53.71528264245669], [10.510142621780581, 52.03060087360206], [11.402798842808469, 52.408438794651005], [11.922162462315605, 53.290538521680475], [11.922162462315605, 53.30023909261376], [12.084463593411584, 54.10724495817889]]
+      }
+    }]
+  }
+});
 
 const getIntersectionToolIcon = selectionType => {
   const defaultIcon = getIcon(selectionType);
@@ -7932,7 +7787,8 @@ class ReactMapView extends React.Component {
   }
   componentWillUnmount() {
     const {
-      mapId
+      mapId,
+      onWMJSUnMount
     } = this.props;
     window.removeEventListener('resize', this.handleWindowResize);
     this.clearRefetchTimer();
@@ -7944,6 +7800,7 @@ class ReactMapView extends React.Component {
     this.adaguc.baseLayers = [];
     this.adaguc.oldbbox = new WMBBOX();
     this.adaguc.currentChildren = [];
+    onWMJSUnMount && onWMJSUnMount(mapId);
   }
   handleWindowResize() {
     this.resize();
@@ -8384,6 +8241,7 @@ ReactMapView.defaultProps = {
   displayMapPin: false,
   disableMapPin: false,
   onWMJSMount: () => {},
+  onWMJSUnMount: () => {},
   onMapChangeDimension: () => {
     /* nothing */
   },
@@ -8916,6 +8774,289 @@ const MapWarningProperties = ({
   }, "Identifier: ", selectedFeatureProperties.identifier))));
 };
 
+const dimensionConfig = [{
+  name: 'elevation',
+  label: 'Vertical level',
+  defaultUnit: 'hPa',
+  reversed: true,
+  iconType: 'IconLevels'
+}, {
+  name: 'ensemble_member',
+  label: 'Ensemble member',
+  defaultUnit: 'member',
+  reversed: false,
+  iconType: 'IconEnsemble'
+}, {
+  name: 'probability',
+  label: 'Probability',
+  defaultUnit: '%',
+  reversed: false,
+  iconType: 'IconLevels'
+}, {
+  name: 'level',
+  label: 'Level',
+  defaultUnit: 'level',
+  reversed: false,
+  iconType: 'IconLevels'
+}];
+const getDimensionIcon = iconType => {
+  if (iconType === 'IconEnsemble') {
+    return Equalizer;
+  }
+  return DimensionsElevation;
+};
+const marksByDimension = dim => {
+  if (!dim || !dim.name) {
+    return [];
+  }
+  const dimCnf = dimensionConfig.find(cnf => cnf.name === dim.name);
+  const defaultUnit = dimCnf ? dimCnf.defaultUnit : '';
+  const marks = [];
+  if (dim && dim.size) {
+    for (let i = 0; i < dim.size(); i += 1) {
+      marks.push({
+        value: Number(dim.getValueForIndex(i)) || dim.getValueForIndex(i),
+        label: `${Number(dim.getValueForIndex(i)) || dim.getValueForIndex(i)} ${dim.unitSymbol ? dim.unitSymbol : defaultUnit}`
+      });
+    }
+  }
+  return marks;
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+const DimensionSelectButton = ({
+  dimension,
+  onClickDimensionButton,
+  isActive: _isActive = false
+}) => {
+  const dimConfig = dimensionConfig.find(cnf => cnf.name === dimension);
+  const Icon = getDimensionIcon(dimConfig && dimConfig.iconType || 'IconLevels');
+  const title = `Show ${dimConfig ? dimConfig.label.toLowerCase() : dimension.toLowerCase()}`;
+  return /*#__PURE__*/React.createElement(MapControlButton, {
+    title: title,
+    "data-testid": `dimensionMapBtn-${dimension}`,
+    onClick: onClickDimensionButton,
+    isActive: _isActive
+  }, /*#__PURE__*/React.createElement(Icon, null));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+const DimensionSelectDialog = ({
+  isOpen,
+  order: _order = 0,
+  onMouseDown,
+  onClose,
+  source: _source = 'app',
+  dimensionName,
+  index: _index = 0,
+  children
+}) => {
+  const dimConfig = dimensionConfig.find(cnf => cnf.name === dimensionName);
+  const title = dimConfig ? dimConfig.label : dimensionName;
+  const topPos = _index * 32 + 164; // index * btn height + offset top of window
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    startPosition: {
+      left: 50,
+      top: topPos
+    },
+    minWidth: 180,
+    title: title,
+    isOpen: isOpen,
+    "data-testid": `multidimensionContent-${title}`,
+    onClose: onClose,
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: _order,
+    source: _source
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 4
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    direction: "row"
+  }, children)));
+};
+
+const SmallFontSlider = styled(Slider)(() => ({
+  '& .MuiSlider-markLabel': {
+    fontSize: '80%'
+  }
+}));
+const DimensionSelectSlider = ({
+  marks,
+  layerTitle,
+  reverse: _reverse = false,
+  isDisabled: _isDisabled = false,
+  managedValue: _managedValue = null,
+  validSelection: _validSelection = true,
+  alertColor: _alertColor = 'red',
+  onChangeDimensionValue
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  if (!marks || !marks.length) {
+    return null;
+  }
+  const sortedMarks = [...marks].sort((a, b) => Number(typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value));
+  const adaptedMarks = _reverse ? sortedMarks.reverse() : sortedMarks;
+  const values = adaptedMarks.map(m => m.value);
+  // using index as values in slider to get constant spacing between marks
+  const indexLabelMarks = adaptedMarks.map((m, index) => {
+    return {
+      value: index,
+      label: m.label
+    };
+  });
+  const sliderValue = _managedValue !== null ? values.findIndex(v => v === _managedValue) : currentIndex;
+  const upDownNavigation = event => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.metaKey || event.ctrlKey) {
+      event.preventDefault();
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "slider-dimensionSelect",
+    sx: {
+      height: '320px',
+      margin: '10px',
+      marginLeft: '-5px',
+      minWidth: 120,
+      fontSize: '90%'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    m: 1
+  }, /*#__PURE__*/React.createElement(SmallFontSlider, {
+    "data-testid": "verticalSlider",
+    orientation: "vertical",
+    "aria-labelledby": "vertical-slider",
+    step: null,
+    min: 0,
+    max: indexLabelMarks.length - 1,
+    marks: indexLabelMarks,
+    style: !_validSelection ? {
+      color: _alertColor
+    } : {},
+    disabled: _isDisabled,
+    value: sliderValue,
+    onKeyDown: upDownNavigation,
+    onChange: (e, val) => {
+      onChangeDimensionValue(values[val].toString());
+      if (!_managedValue) {
+        setCurrentIndex(val);
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: layerTitle
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    sx: {
+      paddingLeft: '10px',
+      maxWidth: 130,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, layerTitle)));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+const Icon = ({
+  isLayerDimensionSynced
+}) => isLayerDimensionSynced ? ( /*#__PURE__*/React.createElement(Link, {
+  "data-testid": "syncIcon"
+})) : ( /*#__PURE__*/React.createElement(LinkOff, {
+  "data-testid": "syncDisIcon"
+}));
+const MapDimensionSelect = ({
+  layerId,
+  dimensionName,
+  handleDimensionValueChanged,
+  handleSyncChanged,
+  layerDimension
+}) => {
+  const wmLayer = webmapUtils.getWMLayerById(layerId);
+  const dimConfig = dimensionConfig.find(cnf => cnf.name === dimensionName);
+  if (!layerDimension || !wmLayer) {
+    return null;
+  }
+  const wmsDimension = wmLayer.getDimension(dimensionName);
+  if (!wmsDimension) {
+    return null;
+  }
+  const layerTitle = wmLayer.title;
+  const marks = marksByDimension(wmsDimension);
+  const isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
+  const tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
+  return /*#__PURE__*/React.createElement(Grid, {
+    key: layerId,
+    item: true,
+    xs: "auto"
+  }, /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipTitle: tooltipTitle,
+    onClick: () => handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced),
+    sx: {
+      margin: '5px'
+    },
+    "data-testid": "syncButton"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isLayerDimensionSynced: isLayerDimensionSynced
+  })), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
+    marks: marks,
+    layerTitle: layerTitle,
+    reverse: dimConfig ? dimConfig.reversed : false,
+    managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
+    onChangeDimensionValue: value => {
+      handleDimensionValueChanged(layerId, dimensionName, value);
+    },
+    isDisabled: false,
+    validSelection: layerDimension.synced === false || !(layerDimension.validSyncSelection !== undefined && layerDimension.validSyncSelection === false)
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -8954,9 +9095,9 @@ const overLayer = {
 };
 
 var defaultLayers = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  baseLayerGrey: baseLayerGrey,
-  overLayer: overLayer
+	__proto__: null,
+	baseLayerGrey: baseLayerGrey,
+	overLayer: overLayer
 });
 
 /* *
@@ -9072,26 +9213,26 @@ const MeteoCanada = {
 };
 
 var publicServices = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DWD: DWD,
-  nationaalgeoregister: nationaalgeoregister,
-  KNMImsgcpp: KNMImsgcpp,
-  HeiGit: HeiGit,
-  ArcGisCanvas: ArcGisCanvas,
-  KNMIgeoservicesRadar: KNMIgeoservicesRadar,
-  KNMIgeoservicesObs: KNMIgeoservicesObs,
-  KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
-  KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
-  KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
-  MetNorwayService: MetNorwayService,
-  FMIopenwms: FMIopenwms,
-  DWDObservations: DWDObservations,
-  DWDWarnings: DWDWarnings,
-  DWDWXProdukt: DWDWXProdukt,
-  EUMETSAT: EUMETSAT,
-  eumetviewEUMETSAT: eumetviewEUMETSAT,
-  ECMWFPublicService: ECMWFPublicService,
-  MeteoCanada: MeteoCanada
+	__proto__: null,
+	DWD: DWD,
+	nationaalgeoregister: nationaalgeoregister,
+	KNMImsgcpp: KNMImsgcpp,
+	HeiGit: HeiGit,
+	ArcGisCanvas: ArcGisCanvas,
+	KNMIgeoservicesRadar: KNMIgeoservicesRadar,
+	KNMIgeoservicesObs: KNMIgeoservicesObs,
+	KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
+	KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
+	KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
+	MetNorwayService: MetNorwayService,
+	FMIopenwms: FMIopenwms,
+	DWDObservations: DWDObservations,
+	DWDWarnings: DWDWarnings,
+	DWDWXProdukt: DWDWXProdukt,
+	EUMETSAT: EUMETSAT,
+	eumetviewEUMETSAT: eumetviewEUMETSAT,
+	ECMWFPublicService: ECMWFPublicService,
+	MeteoCanada: MeteoCanada
 });
 
 /* *
@@ -9431,49 +9572,49 @@ const msgNaturalEUMETSAT = {
 };
 
 var publicLayers = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  defaultLayers: defaultLayers,
-  baseLayer: baseLayer,
-  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
-  baseLayerArcGisCanvas: baseLayerArcGisCanvas,
-  baseLayerWorldMap: baseLayerWorldMap,
-  baseLayerHeiGit: baseLayerHeiGit,
-  msgCppLayer: msgCppLayer,
-  veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
-  veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
-  radarLayer: radarLayer,
-  radarLayerWithError: radarLayerWithError,
-  obsAirTemperature: obsAirTemperature,
-  obsWind: obsWind,
-  obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
-  obsRelativeHumidity: obsRelativeHumidity,
-  obsGlobalSolarRadiation: obsGlobalSolarRadiation,
-  obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
-  harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
-  harmonieWindPl: harmonieWindPl,
-  harmonieAirTemperature: harmonieAirTemperature,
-  harmoniePrecipitation: harmoniePrecipitation,
-  harmoniePressure: harmoniePressure,
-  harmonieWindFlags: harmonieWindFlags,
-  klimaatAtlasTG3: klimaatAtlasTG3,
-  dwdWarningLayer: dwdWarningLayer,
-  dwdRadarLayer: dwdRadarLayer,
-  dwdObservationsWetterLayer: dwdObservationsWetterLayer,
-  dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
-  dwdObservationsWindLayer: dwdObservationsWindLayer,
-  FMITemp: FMITemp,
-  MetNoTemp: MetNoTemp,
-  metNorwayWind1: metNorwayWind1,
-  metNorwayWind2: metNorwayWind2,
-  metNorwayWind3: metNorwayWind3,
-  metNorwayLatestT: metNorwayLatestT,
-  metNorwaySalinaty: metNorwaySalinaty,
-  msgFesEUMETSAT: msgFesEUMETSAT,
-  msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
-  msgAshEUMETSAT: msgAshEUMETSAT,
-  msgCthEUMETSAT: msgCthEUMETSAT,
-  msgFogEUMETSAT: msgFogEUMETSAT,
-  msgNaturalEUMETSAT: msgNaturalEUMETSAT
+	__proto__: null,
+	defaultLayers: defaultLayers,
+	baseLayer: baseLayer,
+	baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
+	baseLayerArcGisCanvas: baseLayerArcGisCanvas,
+	baseLayerWorldMap: baseLayerWorldMap,
+	baseLayerHeiGit: baseLayerHeiGit,
+	msgCppLayer: msgCppLayer,
+	veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
+	veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
+	radarLayer: radarLayer,
+	radarLayerWithError: radarLayerWithError,
+	obsAirTemperature: obsAirTemperature,
+	obsWind: obsWind,
+	obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
+	obsRelativeHumidity: obsRelativeHumidity,
+	obsGlobalSolarRadiation: obsGlobalSolarRadiation,
+	obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
+	harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
+	harmonieWindPl: harmonieWindPl,
+	harmonieAirTemperature: harmonieAirTemperature,
+	harmoniePrecipitation: harmoniePrecipitation,
+	harmoniePressure: harmoniePressure,
+	harmonieWindFlags: harmonieWindFlags,
+	klimaatAtlasTG3: klimaatAtlasTG3,
+	dwdWarningLayer: dwdWarningLayer,
+	dwdRadarLayer: dwdRadarLayer,
+	dwdObservationsWetterLayer: dwdObservationsWetterLayer,
+	dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
+	dwdObservationsWindLayer: dwdObservationsWindLayer,
+	FMITemp: FMITemp,
+	MetNoTemp: MetNoTemp,
+	metNorwayWind1: metNorwayWind1,
+	metNorwayWind2: metNorwayWind2,
+	metNorwayWind3: metNorwayWind3,
+	metNorwayLatestT: metNorwayLatestT,
+	metNorwaySalinaty: metNorwaySalinaty,
+	msgFesEUMETSAT: msgFesEUMETSAT,
+	msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
+	msgAshEUMETSAT: msgAshEUMETSAT,
+	msgCthEUMETSAT: msgCthEUMETSAT,
+	msgFogEUMETSAT: msgFogEUMETSAT,
+	msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getLastEmptyFeatureIndex, getTimeDimension, getToolIcon, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };
+export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, 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, firSelectionType, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getLastEmptyFeatureIndex, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, marksByDimension, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };