@opengeoweb/webmap-react 9.8.0 → 9.10.0

package/index.esm.js

@@ -1,377 +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 produce from 'immer';
+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 { differenceInMinutes } from 'date-fns';
 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) {
@@ -3053,12 +2693,14 @@ class MapDraw extends React.PureComponent {
       isInEditMode,
       isInDeleteMode,
       drawMode,
-      mapId
+      mapId,
+      selectedFeatureIndex
     } = this.props;
     const prevGeojson = prevProps && prevProps.geojson;
     const prevIsInEditMode = prevProps && prevProps.isInEditMode;
     const prevIsInDeleteMode = prevProps && prevProps.isInDeleteMode;
     const prevDrawMode = prevProps && prevProps.drawMode;
+    const prevSelectedFeatureIndex = prevProps && prevProps.selectedFeatureIndex;
     /* Handle geojson update */
     if (geojson !== prevGeojson) {
       this.handleGeoJSONUpdate(geojson);
@@ -3087,6 +2729,9 @@ class MapDraw extends React.PureComponent {
         this.myEditMode = EDITMODE.EMPTY;
       }
     }
+    if (selectedFeatureIndex !== prevSelectedFeatureIndex) {
+      webmapUtils.getWMJSMapById(mapId).draw('MapDraw::componentDidUpdateSelectedFeatureIndex');
+    }
     /* Handle new drawmode */
     if (drawMode !== prevDrawMode) {
       /* Handle drawmode */
@@ -3137,14 +2782,14 @@ class MapDraw extends React.PureComponent {
     const XYCoords = [];
     const from = getProj4(proj.lonlat);
     const to = getProj4(proj.crs);
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      if (featureCoords[j].length < 2) {
+    for (const featureCoord of featureCoords) {
+      if (featureCoord.length < 2) {
         // eslint-disable-next-line no-continue
         continue;
       }
       let coordinates = {
-        x: featureCoords[j][0],
-        y: featureCoords[j][1]
+        x: featureCoord[0],
+        y: featureCoord[1]
       };
       coordinates = proj.proj4.transform(from, to, coordinates);
       const x = width * (coordinates.x - bbox.left) / (bbox.right - bbox.left);
@@ -3876,11 +3521,9 @@ class MapDraw extends React.PureComponent {
     const incY = this.mouseGeoCoord.y - this.snappedGeoCoords.y;
     this.snappedGeoCoords.x = this.mouseGeoCoord.x;
     this.snappedGeoCoords.y = this.mouseGeoCoord.y;
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      /* eslint-disable-next-line no-param-reassign */
-      featureCoords[j][0] += incX;
-      /* eslint-disable-next-line no-param-reassign */
-      featureCoords[j][1] += incY;
+    for (const featureCoord of featureCoords) {
+      featureCoord[0] += incX;
+      featureCoord[1] += incY;
     }
     if (this.myEditMode !== EDITMODE.ADD_FEATURE) {
       this.somethingWasDragged = DRAGMODE.FEATURE;
@@ -4002,18 +3645,18 @@ class MapDraw extends React.PureComponent {
     if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
       return;
     }
-    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
+    for (const geoJsonFeature of this.geojson.features) {
       if (!this.geojson.features) {
         this.geojson.features = [];
       }
-      const feature = this.geojson.features[featureIndex];
+      const feature = geoJsonFeature;
       this.validateFeature(feature);
       const featureType = feature.geometry.type;
       if (featureType === 'Polygon') {
         /* Loop through all polygons of the same feature */
         const polygonGeometry = feature.geometry;
-        for (let polygonIndex = 0; polygonIndex < polygonGeometry.coordinates.length; polygonIndex += 1) {
-          let featureCoords = polygonGeometry.coordinates[polygonIndex];
+        for (const polyCoordinates of polygonGeometry.coordinates) {
+          let featureCoords = polyCoordinates;
           /* Remove duplicates */
           if (!this.checkIfFeatureIsBox(feature)) {
             for (let coordIndex = featureCoords.length - 2; coordIndex >= 0; coordIndex -= 1) {
@@ -4131,8 +3774,7 @@ class MapDraw extends React.PureComponent {
       }
       if (featureType === 'MultiPolygon') {
         const multiPolygonGeometry = feature.geometry;
-        for (let multiPolygonIndex = 0; multiPolygonIndex < multiPolygonGeometry.coordinates.length; multiPolygonIndex += 1) {
-          const multiPoly = multiPolygonGeometry.coordinates[multiPolygonIndex];
+        for (const multiPoly of multiPolygonGeometry.coordinates) {
           for (let polygonIndex = 0; polygonIndex < multiPoly.length; polygonIndex += 1) {
             const featureCoords = multiPoly[polygonIndex];
             const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
@@ -4257,12 +3899,12 @@ class MapDraw extends React.PureComponent {
       }
     }
     /* Draw labels */
-    for (let j = 0; j < this.textPositions.length; j += 1) {
+    for (const textPosition of this.textPositions) {
       const {
         x,
         y,
         text
-      } = this.textPositions[j];
+      } = textPosition;
       ctx.fillStyle = 'black';
       ctx.font = '12px Arial';
       ctx.fillText(text, x, y);
@@ -4641,14 +4283,14 @@ class MapDraw extends React.PureComponent {
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     const XYCoords = [];
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      if (featureCoords[j].length < 2) {
+    for (const featureCoord of featureCoords) {
+      if (featureCoord.length < 2) {
         // eslint-disable-next-line no-continue
         continue;
       }
       const coord = webmapjs.getPixelCoordFromLatLong({
-        x: featureCoords[j][0],
-        y: featureCoords[j][1]
+        x: featureCoord[0],
+        y: featureCoord[1]
       });
       XYCoords.push(coord);
     }
@@ -4826,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
@@ -4848,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);
   }))));
 };
 
@@ -4900,6 +4556,22 @@ const EditModeButton = ({
   }, "press ESC to exit draw mode")))));
 };
 
+/* *
+ * 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 simplePolygonGeoJSON = {
   type: 'FeatureCollection',
   features: [{
@@ -5201,9 +4873,7 @@ const intersectionFeatureNL = {
     type: 'Polygon',
     coordinates: [[[5.0, 55.0], [4.331914, 55.332644], [3.368817, 55.764314], [2.761908, 54.379261], [3.15576, 52.913554], [2.000002, 51.500002], [3.370001, 51.369722], [3.370527, 51.36867], [3.362223, 51.320002], [3.36389, 51.313608], [3.373613, 51.309999], [3.952501, 51.214441], [4.397501, 51.452776], [5.078611, 51.391665], [5.848333, 51.139444], [5.651667, 50.824717], [6.011797, 50.757273], [5.934168, 51.036386], [6.222223, 51.361666], [5.94639, 51.811663], [6.405001, 51.830828], [7.053095, 52.237764], [7.031389, 52.268885], [7.063612, 52.346109], [7.065557, 52.385828], [7.133055, 52.888887], [7.14218, 52.898244], [7.191667, 53.3], [6.5, 53.666667], [6.500002, 55.000002], [5.0, 55.0]]]
   },
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'fir'
-  })
+  properties: defaultGeoJSONStyleProperties
 };
 const intersectionFeatureBE = {
   type: 'Feature',
@@ -5211,9 +4881,7 @@ const intersectionFeatureBE = {
     type: 'Polygon',
     coordinates: [[[4.83163899984, 51.4375169997], [4.83971700004, 51.4211280003], [4.78471399965, 51.4327609998], [4.7811030004, 51.4302970004], [4.77944200025, 51.4175190002], [4.80665799987, 51.4100140003], [4.88973599992, 51.4160859998], [4.90944699968, 51.4091530002], [4.97808600027, 51.4238780003], [5.01693300026, 51.4755610004], [5.03137199972, 51.4852999999], [5.04139699977, 51.4866750004], [5.05027800013, 51.4747000003], [5.06139400013, 51.4719500003], [5.10058599984, 51.4399779999], [5.07663599975, 51.3988970003], [5.07864199963, 51.3916780001], [5.12780000027, 51.3497389997], [5.14000300004, 51.3208609998], [5.14945799989, 51.3171939998], [5.178908, 51.3166780003], [5.22806699979, 51.3122110002], [5.22523100031, 51.2688940001], [5.25029999985, 51.2633360001], [5.32971099986, 51.2621920004], [5.34724199982, 51.2694670004], [5.38752200024, 51.2677470002], [5.46779400039, 51.2827610001], [5.517222, 51.2958330004], [5.54250799964, 51.2769170004], [5.55780600005, 51.2639109996], [5.55666699968, 51.2558330003], [5.5572329997, 51.2313669998], [5.5591809996, 51.2244330002], [5.64942199993, 51.2016859998], [5.65555300027, 51.1964140004], [5.71055599976, 51.1822219997], [5.73553599969, 51.1916609998], [5.77696099985, 51.180258], [5.77942500016, 51.1694279997], [5.82806899958, 51.1669640003], [5.85500000045, 51.1510939996], [5.85601899978, 51.1473080004], [5.8472219997, 51.1352779996], [5.81695299958, 51.1225030004], [5.84056100009, 51.1058309996], [5.80641099997, 51.0958610003], [5.80280299996, 51.093339], [5.80222800042, 51.0616560003], [5.7752999997, 51.0597080004], [5.77140299985, 51.0475029997], [5.76332499965, 51.0394250004], [5.76303899995, 51.0352999999], [5.7747280003, 51.028594], [5.77696099985, 51.0258470001], [5.76418599978, 50.9899779999], [5.74802800019, 50.9819579997], [5.72276099962, 50.9652829996], [5.72390600026, 50.9577779998], [5.72831700043, 50.9561169996], [5.74418900032, 50.9577779998], [5.72974999996, 50.9141749999], [5.7150249999, 50.9105669999], [5.68406700039, 50.8831669999], [5.66555600021, 50.8769439998], [5.65331699968, 50.8783079997], [5.64776099977, 50.8677670001], [5.63750299976, 50.8502920001], [5.63945299976, 50.8430719999], [5.6472220001, 50.8324999998], [5.70001400015, 50.8069169999], [5.70052799957, 50.8033079999], [5.69806400015, 50.7999859996], [5.69694399977, 50.7897220002], [5.6933110004, 50.762514], [5.69308099969, 50.7591919997], [5.73719699984, 50.7594190003], [5.76195000009, 50.7763810001], [5.7747280003, 50.7816500002], [5.77862200001, 50.7794169998], [5.77999699956, 50.7758639996], [5.79747499977, 50.7694469996], [5.80417800041, 50.7647499997], [5.83888900033, 50.7616669996], [5.84720599986, 50.7669250002], [5.85471099971, 50.7591919997], [5.88307199997, 50.7664109999], [5.89250000037, 50.7544440002], [5.93251899955, 50.756956], [5.99888899983, 50.7538889998], [6.01163300026, 50.7566690003], [6.01611400006, 50.765264], [6.06666700028, 50.7166670001], [6.11666700018, 50.7333329997], [6.16666700008, 50.6666670002], [6.2500000002, 50.6499999996], [6.28333300042, 50.6166670003], [6.2500000002, 50.5999999997], [6.2500000002, 50.583333], [6.2000000003, 50.5499999998], [6.1986110001, 50.5194439999], [6.2500000002, 50.4833330002], [6.35, 50.4666669997], [6.37388899998, 50.4349999999], [6.38333300022, 50.4333330003], [6.40833300017, 50.3333329996], [6.3000000001, 50.316667], [6.29916700036, 50.303056], [6.23166700013, 50.2388889997], [6.1500000004, 50.1499999997], [6.13301100026, 50.1268060003], [6.11655799965, 50.0714689998], [6.12647199998, 50.0711830001], [6.11322499973, 50.0586359998], [6.13316099998, 50.0435579996], [6.14093299956, 49.9935890002], [6.16349999973, 49.9814360001], [6.15971699974, 49.9746389996], [6.17998600005, 49.9583389997], [6.18282499967, 49.9675310001], [6.18998899999, 49.9667970004], [6.21388899958, 49.955556], [6.22060299983, 49.9355170004], [6.22500000025, 49.9083329996], [6.23418300015, 49.897519], [6.30860799956, 49.8644609999], [6.32110000006, 49.8483030003], [6.32195800006, 49.8399940002], [6.34109700043, 49.8475000001], [6.36917200009, 49.8419420001], [6.4435970004, 49.8094560003], [6.50307200017, 49.8072219998], [6.51304200039, 49.8041860001], [6.5222080004, 49.8111170004], [6.52140600029, 49.7974810002], [6.50668100023, 49.7863670003], [6.51751099963, 49.7580609999], [6.49997799959, 49.7419610003], [6.5166500004, 49.7194439997], [6.49779999987, 49.7203029998], [6.50141100002, 49.7060940001], [6.46111099957, 49.6916670003], [6.42085300017, 49.6658169999], [6.42056400033, 49.6602579998], [6.43805600028, 49.6541670004], [6.42499999985, 49.638889], [6.42499999985, 49.6333330001], [6.37944399984, 49.5969440002], [6.3719220001, 49.5872059999], [6.3750139997, 49.5822220002], [6.36137800039, 49.5752889998], [6.37335300044, 49.549161], [6.36779699963, 49.5422280004], [6.36166700023, 49.4543310003], [6.2805329999, 49.4930689997], [6.21666699998, 49.5000000001], [6.15304999986, 49.5025220004], [6.15969699972, 49.4933560004], [6.12251400002, 49.4839029997], [6.11804199974, 49.469692], [6.09054199961, 49.4530749999], [6.06916899965, 49.4633329999], [6.04321399973, 49.4534189996], [5.9999999998, 49.4500000002], [5.95833300017, 49.4833330004], [5.8511029997, 49.5052720004], [5.80858100021, 49.5446939999], [5.75833299967, 49.5361109998], [5.48333300022, 49.5000000001], [5.4000000001, 49.6083330002], [5.31666699998, 49.6166669996], [5.3000000003, 49.6666670004], [5.17499999965, 49.6916670003], [5.06666699958, 49.7583329999], [5.0, 49.7833329998], [4.8500000003, 49.7833329998], [4.85833299967, 49.9166669999], [4.8000000004, 49.9500000001], [4.83888899963, 50.0472220004], [4.87222199985, 50.088889], [4.86749999973, 50.1152780002], [4.87022799962, 50.1267969999], [4.89647500042, 50.1402000001], [4.88140799988, 50.1486169998], [4.87752199964, 50.1560970003], [4.85856400043, 50.1539169996], [4.83766699993, 50.1585920002], [4.82454400001, 50.1676309998], [4.81676900029, 50.1657609999], [4.80753599989, 50.1536059996], [4.76428099987, 50.1377080003], [4.7499999996, 50.1180559997], [4.74027800003, 50.1083330001], [4.73317799996, 50.1093419998], [4.71540300045, 50.0977579998], [4.68333300002, 50.0], [4.48333300042, 49.9333330004], [4.18333300012, 49.9500000001], [4.12499999995, 50.0166669997], [4.14888899993, 50.0347220004], [4.1999999998, 50.0999999998], [4.11666699968, 50.1499999997], [4.16666699958, 50.2500000004], [4.17222200035, 50.2833329997], [4.01666699988, 50.3500000002], [3.9000000004, 50.316667], [3.79166700033, 50.3333329996], [3.7099999997, 50.3083329997], [3.6599999998, 50.3719440004], [3.61666699978, 50.4833330002], [3.40499999995, 50.4633329997], [3.27666700028, 50.5300000002], [3.22499999995, 50.6783330004], [3.11666699988, 50.7833329996], [2.8999999997, 50.7000000004], [2.81666699958, 50.7250000003], [2.71666699978, 50.8000000002], [2.63333299962, 50.8166669999], [2.5500000004, 51.0833329999], [1.9999999997, 51.1166670002], [1.9999999997, 51.4999999997], [3.0000000004, 51.4086179998], [3.10027800043, 51.3994440003], [3.36388899988, 51.3736109997], [3.38724200032, 51.3413280003], [3.38377200038, 51.3313580001], [3.36248900007, 51.3184579996], [3.37401700018, 51.3050059998], [3.36470599978, 51.3019560004], [3.36492800013, 51.2987639998], [3.3813890002, 51.2836109997], [3.42589999969, 51.2589609998], [3.43277200003, 51.2486970004], [3.45504400008, 51.2451440002], [3.49817799991, 51.2463390004], [3.53010600009, 51.2507780001], [3.52079199955, 51.2930780001], [3.52611400036, 51.2955750002], [3.54363099967, 51.2896110003], [3.56447200028, 51.2968220001], [3.58376100037, 51.2897499996], [3.58575599974, 51.3012609998], [3.59285000043, 51.3063919999], [3.6037139996, 51.3037579998], [3.64140600029, 51.2876689998], [3.65204699997, 51.2872530004], [3.65847799976, 51.2835080004], [3.69151399977, 51.2815669999], [3.71390800005, 51.2744940002], [3.73109999967, 51.2727249996], [3.75780600005, 51.2722750004], [3.76866900007, 51.2646470003], [3.77842500031, 51.2670030001], [3.79084200006, 51.2625669997], [3.79061899967, 51.2514719997], [3.79039700022, 51.2199890003], [3.80370000035, 51.2145779999], [3.84560600022, 51.2120829999], [3.86400799987, 51.2141639997], [3.87886100043, 51.2273390002], [3.88846099978, 51.2265610003], [3.88839700042, 51.217214], [3.88462800018, 51.2088920003], [3.91278600007, 51.209725], [3.92298299997, 51.220958], [3.9300779998, 51.2226220003], [3.93916899995, 51.2165219996], [3.94870299984, 51.215828], [3.97109700013, 51.2215139996], [4.10833300027, 51.2708330004], [4.25143300013, 51.3750060002], [4.33391100039, 51.3766670004], [4.34307800045, 51.3647500003], [4.3469750003, 51.3625169999], [4.41859199972, 51.3591360004], [4.43165799972, 51.3644639997], [4.42805599998, 51.3744440004], [4.3966499996, 51.4169469999], [4.40942499966, 51.4375169997], [4.40805000011, 51.440839], [4.39389999959, 51.4502919998], [4.46528900019, 51.4716639997], [4.4986109999, 51.4788890001], [4.51250000007, 51.4805559997], [4.54556100034, 51.4850140002], [4.54498900004, 51.4627830002], [4.53805599958, 51.4524690003], [4.53530599957, 51.4397500002], [4.62361099965, 51.4272219998], [4.67166899992, 51.4274890004], [4.67304400038, 51.4308109998], [4.66863300021, 51.440839], [4.68415800029, 51.4494329997], [4.69859699975, 51.4644440004], [4.76918600033, 51.502775], [4.80833299977, 51.4999999997], [4.8408059999, 51.4830670003], [4.84470299974, 51.4614079998], [4.83696700003, 51.4569389996], [4.83163899984, 51.4375169997]]]
   },
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'fir-be'
-  })
+  properties: defaultGeoJSONStyleProperties
 };
 
 const drawPolyStoryStyles = {
@@ -5464,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) {
@@ -5473,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 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 intersectGeoJSONS = (a, b, geoJSONProperties = {
+const intersectPolygonGeoJSONS = (a, b, geoJSONProperties = {
   stroke: '#FF0000',
   'stroke-width': 10.0,
   'stroke-opacity': 1,
@@ -5534,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
@@ -5548,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);
     }
@@ -5570,11 +5292,38 @@ const getGeoJson = (geojson, shouldAllowMultipleShapes) => {
     draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
   }) : geojson;
 };
+const hasFeatures = geometry => {
+  if (geometry.type === 'Point') {
+    return geometry.coordinates.length > 0;
+  }
+  if (geometry.type === 'LineString' || geometry.type === 'Polygon') {
+    return geometry.coordinates[0].length > 0;
+  }
+  return false;
+};
+const getLastEmptyFeatureIndex = geoJSONFeatureCollection => {
+  const totalFeatures = geoJSONFeatureCollection.features.length;
+  if (totalFeatures > 0) {
+    const lastFeatureIndex = totalFeatures - 1;
+    const lastFeature = geoJSONFeatureCollection.features[lastFeatureIndex];
+    if (!hasFeatures(lastFeature.geometry)) {
+      return lastFeatureIndex;
+    }
+  }
+  return undefined;
+};
 const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleShapes, geoJSONFeatureCollection = emptyGeoJSON) => {
   if (geoJSONFeature.type === 'FeatureCollection') {
     return geoJSONFeature;
   }
   if (shouldAllowMultipleShapes) {
+    const lastFeatureIndex = getLastEmptyFeatureIndex(geoJSONFeatureCollection);
+    if (lastFeatureIndex !== undefined) {
+      // replace last feature if it's an empty shape
+      return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
+        features: geoJSONFeatureCollection.features.map((feature, index) => index === lastFeatureIndex ? geoJSONFeature : feature)
+      });
+    }
     return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
       features: geoJSONFeatureCollection.features.concat(geoJSONFeature)
     });
@@ -5583,15 +5332,14 @@ const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleShapes, geoJSON
     features: [geoJSONFeature]
   });
 };
-// compares 2 geoJSONs and returns true if both have properties.selectionType with the same value
-const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
-  var _a, _b, _c;
+// check if geoJSON has same selectionType in properties as passed selectionType
+const isGeoJSONFeatureCreatedByTool = (existingJSON, selectionType, featureLayerIndex = 0) => {
+  var _a;
   if (!existingJSON.features.length) {
     return false;
   }
-  const lastUsedTool = (_a = existingJSON.features[0].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
-  const newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
-  return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
+  const lastUsedTool = (_a = existingJSON.features[featureLayerIndex].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
+  return lastUsedTool !== undefined && selectionType !== undefined ? lastUsedTool === selectionType : false;
 };
 const rewindGeometry = geoJSON => {
   return produce(geoJSON, geoJSONDraft => {
@@ -5607,45 +5355,53 @@ const rewindGeometry = geoJSON => {
     }
   });
 };
+const addGeoJSONPropertiesToFeature = (geoJSONFeature, newProperties) => Object.assign(Object.assign({}, geoJSONFeature), {
+  properties: Object.assign(Object.assign({}, geoJSONFeature.properties), newProperties)
+});
+const addGeoJSONProperties = (geoJSON, newProperties) => {
+  if (geoJSON.type === 'Feature') {
+    return addGeoJSONPropertiesToFeature(geoJSON, newProperties);
+  }
+  return Object.assign(Object.assign({}, geoJSON), {
+    features: geoJSON.features.map(feature => addGeoJSONPropertiesToFeature(feature, newProperties))
+  });
+};
+const addSelectionTypeToGeoJSON = (geoJSON, selectionType) => {
+  return addGeoJSONProperties(geoJSON, {
+    selectionType
+  });
+};
 
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
 });
 const emptyLineString = Object.assign(Object.assign({}, lineString.features[0]), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'linestring'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyPoint = Object.assign(Object.assign({}, featurePoint), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'point'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyPolygon = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'poly'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyBox = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'box'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 // TODO: improve this: without a feature, the custom shape does not work on first click
 const emptyIntersectionShape = Object.assign(Object.assign({}, emptyGeoJSON), {
   features: [featurePolygon]
 });
-const getIcon = drawModeId => {
-  switch (drawModeId) {
-    case 'drawtools-point':
+const getIcon = selectionType => {
+  switch (selectionType) {
+    case 'point':
       return /*#__PURE__*/React__default.createElement(Location, null);
-    case 'drawtools-polygon':
+    case 'poly':
       return /*#__PURE__*/React__default.createElement(DrawPolygon, null);
-    case 'drawtools-box':
+    case 'box':
       return /*#__PURE__*/React__default.createElement(DrawRegion, null);
-    case 'drawtools-linestring':
+    case 'linestring':
       return /*#__PURE__*/React__default.createElement(Edit, null);
-    case 'drawtools-delete':
+    case 'delete':
       return /*#__PURE__*/React__default.createElement(Delete, null);
     default:
       return null;
@@ -5656,35 +5412,40 @@ const defaultPoint = {
   value: DRAWMODE.POINT,
   title: 'Point',
   shape: emptyPoint,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'point'
 };
 const defaultPolygon = {
   drawModeId: 'drawtools-polygon',
   value: DRAWMODE.POLYGON,
   title: 'Polygon',
   shape: emptyPolygon,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'poly'
 };
 const defaultBox = {
   drawModeId: 'drawtools-box',
   value: DRAWMODE.BOX,
   title: 'Box',
   shape: emptyBox,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'box'
 };
 const defaultLineString = {
   drawModeId: 'drawtools-linestring',
   value: DRAWMODE.LINESTRING,
   title: 'LineString',
   shape: emptyLineString,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'linestring'
 };
 const defaultDelete = {
   drawModeId: 'drawtools-delete',
   value: 'DELETE',
   title: 'Delete',
   shape: emptyGeoJSON,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'delete'
 };
 const defaultModes = [defaultPoint, defaultPolygon, defaultBox, defaultLineString, defaultDelete];
 const currentlySupportedDrawModes = [defaultPolygon, defaultDelete];
@@ -5712,11 +5473,8 @@ const useMapDrawTool = ({
   const changeProperties = styleProperties => {
     // update all modes with new properties
     const newModes = drawModes.map(mode => {
-      const shape = mode.shape.type === 'Feature' ? Object.assign(Object.assign({}, mode.shape), {
-        properties: Object.assign(Object.assign({}, mode.shape.properties), styleProperties)
-      }) : addFeatureProperties(mode.shape, styleProperties);
       return Object.assign(Object.assign({}, mode), {
-        shape
+        shape: addGeoJSONProperties(mode.shape, styleProperties)
       });
     });
     setDrawModes(newModes);
@@ -5739,10 +5497,10 @@ const useMapDrawTool = ({
     }
     setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
     // updates shape
-    const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
-    const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleShapes || isNewSelectedTool;
+    const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.selectionType, featureLayerIndex);
+    const shouldUpdateShape = !geoJSON.features.length || isNewSelectedTool || !newMode.isSelectable;
     if (shouldUpdateShape) {
-      const updatedGeoJSON = changeGeoJSON(newMode.shape);
+      const updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType));
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
     }
     // handle modes and update feature layer index
@@ -5753,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);
       }
@@ -5777,10 +5537,21 @@ const useMapDrawTool = ({
       setActiveTool(newActiveTool.drawModeId);
     }
   };
+  const removeLastEmptyShape = () => {
+    const lastFeatureIndex = getLastEmptyFeatureIndex(geoJSON);
+    if (lastFeatureIndex !== undefined) {
+      const newGeoJSON = Object.assign(Object.assign({}, geoJSON), {
+        features: geoJSON.features.filter((_feature, index) => index !== lastFeatureIndex)
+      });
+      setGeoJSON(newGeoJSON);
+      setFeatureLayerIndex(newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0);
+    }
+  };
   const deactivateTool = () => {
     setEditMode(false);
     setActiveTool('');
     setDrawMode('');
+    removeLastEmptyShape();
   };
   const reset = (shouldClearState = false) => {
     deactivateTool();
@@ -5834,21 +5605,21 @@ 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 getToolIcon = id => {
-  const defaultIcon = getIcon(id);
+const strokeWidthOptions = ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'];
+const getToolIcon = selectionType => {
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (id === 'tool-fir') {
+  if (selectionType === shapeButtonNL$2.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
   }
-  if (id === 'tool-custom-line') {
+  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 = {
@@ -5856,7 +5627,8 @@ const shapeButtonNL$2 = {
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionFeatureNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'custom-fir'
 };
 const customLineButton = {
   drawModeId: 'tool-custom-line',
@@ -5868,9 +5640,12 @@ 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
+  isSelectable: false,
+  selectionType: 'custom-line'
 };
 const basicExampleDrawOptions = {
   defaultDrawModes: [...defaultModes, shapeButtonNL$2, customLineButton],
@@ -5903,16 +5678,158 @@ 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 = id => {
-  const defaultIcon = getIcon(id);
+const getIntersectionToolIcon = selectionType => {
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (id === 'fir-nl') {
+  if (selectionType === shapeButtonNL$1.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
   }
-  if (id === 'fir-be') {
+  if (selectionType === shapeButtonBE$1.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
       sx: {
         transform: `scaleY(-1)`
@@ -5927,14 +5844,16 @@ const shapeButtonNL$1 = {
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionFeatureNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'fir-NL'
 };
 const shapeButtonBE$1 = {
   drawModeId: 'fir-be',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR BE polygon',
   shape: intersectionFeatureBE,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'fir-BE'
 };
 const geoJSONIntersectionBoundsStyle$1 = {
   stroke: '#000000',
@@ -6025,7 +5944,7 @@ const exampleIntersectionWithShapeOptions = {
   defaultGeoJSONIntersectionProperties: featurePropsIntersectionEnd
 };
 
-const firButtonDrawId = 'fir-button';
+const firSelectionType = 'fir';
 // styles and shapes
 const featurePropertiesStart = defaultGeoJSONStyleProperties;
 const featurePropertiesEnd = {
@@ -6045,33 +5964,31 @@ const geoJSONIntersectionBoundsStyle = {
 const intersectionShapeNL = {
   type: 'FeatureCollection',
   features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
-    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
-      selectionType: 'fir'
-    })
+    properties: Object.assign({}, geoJSONIntersectionBoundsStyle)
   })]
 };
 const intersectionShapeBE = {
   type: 'FeatureCollection',
   features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
-    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
-      selectionType: 'fir'
-    })
+    properties: Object.assign({}, geoJSONIntersectionBoundsStyle)
   })]
 };
 // custom buttons
 const shapeButtonNL = {
-  drawModeId: firButtonDrawId,
+  drawModeId: 'fir-tool-NL',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionShapeNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: firSelectionType
 };
 const shapeButtonBE = {
-  drawModeId: firButtonDrawId,
+  drawModeId: 'fir-tool-BE',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR BE polygon',
   shape: intersectionShapeBE,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: firSelectionType
 };
 const exampleIntersectionsMultiDrawTool = [{
   title: 'NL',
@@ -6082,13 +5999,13 @@ const exampleIntersectionsMultiDrawTool = [{
 }];
 const getDoubleControlToolIcon = drawMode => {
   const {
-    drawModeId
+    selectionType
   } = drawMode;
-  const defaultIcon = getIcon(drawModeId);
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (drawModeId === firButtonDrawId) {
+  if (selectionType === firSelectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
       sx: Object.assign({}, drawMode.title === shapeButtonBE.title && {
         transform: `scaleY(-1)`
@@ -6121,7 +6038,7 @@ const getFirTitle = isNL => isNL ? shapeButtonNL.title : shapeButtonBE.title;
 const updateEditModeButtonsWithFir = (drawModes, newFirGeoJSON) => {
   const isNL = newFirGeoJSON === intersectionShapeNL;
   return drawModes.map(mode => {
-    if (mode.drawModeId === firButtonDrawId) {
+    if (mode.selectionType === firSelectionType) {
       return Object.assign(Object.assign({}, mode), {
         shape: getUpdatedFirShape(isNL),
         title: getFirTitle(isNL)
@@ -7611,7 +7528,7 @@ function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layer
   if (acceptanceTimeInMinutes === undefined || !mapCurrentTime || !layerCurrentTime) {
     return true;
   }
-  const minutesBetween = differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
+  const minutesBetween = dateUtils.differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
   if (Math.abs(minutesBetween) > acceptanceTimeInMinutes) {
     return false;
   }
@@ -7683,8 +7600,8 @@ const setWMLayerPropsBasedOnChildProps = (child, wmLayer, mapViewProps) => {
   }
   /* Set the dimensions of the ADAGUC WMJSLayer */
   if (child.dimensions !== undefined) {
-    for (let d = 0; d < child.dimensions.length; d += 1) {
-      const dim = child.dimensions[d];
+    for (const childDimension of child.dimensions) {
+      const dim = childDimension;
       const wmjsDim = wmLayer.getDimension(dim.name);
       if (wmjsDim) {
         if (wmjsDim.currentValue !== dim.currentValue) {
@@ -7778,7 +7695,7 @@ const orderLayers = (wmjsMap, _reactMapViewLayers) => {
 const getDisplayText = currentAdagucTime => {
   const timeFormat = 'eee dd MMM yyyy HH:mm [UTC]';
   const adagucTime = dateUtils.utc(currentAdagucTime);
-  const adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat);
+  const adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat) || '';
   return adagucTimeFormatted;
 };
 const ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
@@ -7870,7 +7787,8 @@ class ReactMapView extends React.Component {
   }
   componentWillUnmount() {
     const {
-      mapId
+      mapId,
+      onWMJSUnMount
     } = this.props;
     window.removeEventListener('resize', this.handleWindowResize);
     this.clearRefetchTimer();
@@ -7882,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();
@@ -7980,8 +7899,7 @@ class ReactMapView extends React.Component {
     /* Check map dimensions */
     if (!prevProps || prevProps.dimensions !== props.dimensions) {
       if (props.dimensions) {
-        for (let d = 0; d < props.dimensions.length; d += 1) {
-          const propDimension = props.dimensions[d];
+        for (const propDimension of props.dimensions) {
           const mapDim = wmjsMap.getDimension(propDimension.name);
           if (mapDim && mapDim.currentValue !== propDimension.currentValue || !mapDim) {
             wmjsMap.setDimension(propDimension.name, propDimension.currentValue, false, false);
@@ -8323,6 +8241,7 @@ ReactMapView.defaultProps = {
   displayMapPin: false,
   disableMapPin: false,
   onWMJSMount: () => {},
+  onWMJSUnMount: () => {},
   onMapChangeDimension: () => {
     /* nothing */
   },
@@ -8855,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.
@@ -8893,9 +9095,9 @@ const overLayer = {
 };
 
 var defaultLayers = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  baseLayerGrey: baseLayerGrey,
-  overLayer: overLayer
+	__proto__: null,
+	baseLayerGrey: baseLayerGrey,
+	overLayer: overLayer
 });
 
 /* *
@@ -9011,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
 });
 
 /* *
@@ -9370,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, 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, firButtonDrawId, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, 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 };