@opengeoweb/webmap-react 12.6.0 → 12.8.0

package/index.esm.js

@@ -1,4 +1,4 @@
-import { WMImageStore, privateWebMapUtils, webmapUtils, WMLayer, LayerType, WMInvalidDateValues, getCorrectWMSDimName, WMProj4Defs, tilesettings, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, getWMJSMapById, debugLogger, DebugType, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, WEBMAP_NAMESPACE } from '@opengeoweb/webmap';
+import { WMImageStore, privateWebMapUtils, webmapUtils, WMLayer, LayerType, WMInvalidDateValues, getCorrectWMSDimName, WMProj4Defs, tilesettings, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WEBMAP_NAMESPACE } from '@opengeoweb/webmap';
 export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -9,7 +9,7 @@ import LayerProperty from 'ol/layer/Property';
 import ImageSource, { getRequestExtent } from 'ol/source/Image';
 import ImageState from 'ol/ImageState';
 import { fromResolutionLike } from 'ol/resolution';
-import { without, isEqual, throttle, memoize, range, debounce, cloneDeep } from 'lodash';
+import { without, isEqual, throttle, memoize, range, debounce } from 'lodash';
 import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { useQuery } from '@tanstack/react-query';
@@ -21,7 +21,7 @@ import { register } from 'ol/proj/proj4';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import { optionsFromCapabilities } from 'ol/source/WMTS';
 import { View, Map, Feature, Collection } from 'ol';
-import { dateUtils, CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, PROJECTION } from '@opengeoweb/shared';
+import { dateUtils, CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton } from '@opengeoweb/shared';
 import { Vector } from 'ol/layer';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -34,7 +34,6 @@ import { Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location
 import * as turf from '@turf/turf';
 import { polygonToLine, booleanClockwise, rewind } from '@turf/turf';
 import { produce } from 'immer';
-import { useResizeDetector } from 'react-resize-detector';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap } from 'ol/interaction';
@@ -292,54 +291,6 @@ function _createClass(e, r, t) {
     writable: false
   }), e;
 }
-function _createForOfIteratorHelper(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (!t) {
-    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
-      t && (r = t);
-      var n = 0,
-        F = function () {};
-      return {
-        s: F,
-        n: function () {
-          return n >= r.length ? {
-            done: true
-          } : {
-            done: false,
-            value: r[n++]
-          };
-        },
-        e: function (r) {
-          throw r;
-        },
-        f: F
-      };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  var o,
-    a = true,
-    u = false;
-  return {
-    s: function () {
-      t = t.call(r);
-    },
-    n: function () {
-      var r = t.next();
-      return a = r.done, r;
-    },
-    e: function (r) {
-      u = true, o = r;
-    },
-    f: function () {
-      try {
-        a || null == t.return || t.return();
-      } finally {
-        if (u) throw o;
-      }
-    }
-  };
-}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -775,7 +726,7 @@ function _toPrimitive(t, r) {
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (String )(t);
+  return ("string" === r ? String : Number)(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
@@ -931,6 +882,9 @@ var TIMEAWAREIMAGEWRAPPER_IMAGEDIDNOTLOADSUCCESFULLY = 'Image did not load succe
 var openLayersGetMapImageStore = new WMImageStore(NUM_IMAGES_TO_CACHE, {
   id: 'ol'
 });
+var clearImageCacheForAllMaps = function clearImageCacheForAllMaps() {
+  openLayersGetMapImageStore.clear();
+};
 var TimeAwareImageWrapper = /*#__PURE__*/function (_ImageWrapper) {
   function TimeAwareImageWrapper(extent, resolution, pixelRatio) {
     var _this;
@@ -1492,7 +1446,7 @@ var useGetWMLayerInstance = function useGetWMLayerInstance(serviceUrl, name, id,
 /**
  * Used for querying WMTS GetCapabilities documents
  * @param serviceUrl
- * @returns
+ * @returns {UseQueryResult<string>}
  */
 var useQueryWMTSGetCapabilities = function useQueryWMTSGetCapabilities(serviceUrl) {
   var uriKey = new URLSearchParams(serviceUrl).toString();
@@ -3158,7 +3112,8 @@ var FeatureLayer = function FeatureLayer(_ref) {
     zIndex = _ref.zIndex,
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    opacity = _ref.opacity;
   var _useContext = useContext(MapContext),
     map = _useContext.map;
   var _useState = useState(),
@@ -3179,7 +3134,8 @@ var FeatureLayer = function FeatureLayer(_ref) {
       style: style,
       properties: {
         testId: testId
-      }
+      },
+      opacity: opacity
     });
     layerRef.current = layer;
     layer.set('layerType', 'FeatureLayer');
@@ -3198,6 +3154,13 @@ var FeatureLayer = function FeatureLayer(_ref) {
       (_layerRef$current = layerRef.current) === null || _layerRef$current === void 0 || _layerRef$current.setStyle(style);
     }
   }, [style]);
+  useEffect(function () {
+    // Handle opacity:
+    if (layerRef.current && opacity) {
+      var _layerRef$current2;
+      (_layerRef$current2 = layerRef.current) === null || _layerRef$current2 === void 0 || _layerRef$current2.setOpacity(opacity);
+    }
+  }, [opacity]);
   useEffect(function () {
     if (!source) {
       return;
@@ -3272,7 +3235,8 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     zIndex = _ref.zIndex,
     hoverSelect = _ref.hoverSelect,
     clickOnFeature = _ref.clickOnFeature,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    opacity = _ref.opacity;
   var projection = useProjection();
   var featureCollectionRef = useRef();
   var features = useRef([]);
@@ -3293,7 +3257,8 @@ var OpenLayersFeatureLayer = function OpenLayersFeatureLayer(_ref) {
     zIndex: zIndex,
     hoverSelect: hoverSelect,
     clickOnFeature: clickOnFeature,
-    testId: testId
+    testId: testId,
+    opacity: opacity
   });
 };
 
@@ -9613,7 +9578,7 @@ var LegendDialog = function LegendDialog(_ref) {
   });
 };
 
-var _excluded$3 = ["onClick", "children", "title", "placement", "isActive"];
+var _excluded$2 = ["onClick", "children", "title", "placement", "isActive"];
 var MapControlButton = function MapControlButton(_ref) {
   var onClick = _ref.onClick,
     children = _ref.children,
@@ -9622,7 +9587,7 @@ var MapControlButton = function MapControlButton(_ref) {
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   return jsx(CustomIconButton, _objectSpread2(_objectSpread2({
     variant: "tool",
     tooltipProps: {
@@ -9662,10 +9627,10 @@ var ZoomControls = function ZoomControls(_ref) {
   });
 };
 
-var _excluded$2 = ["children"];
+var _excluded$1 = ["children"];
 var MapControls = function MapControls(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return jsx(Box, _objectSpread2(_objectSpread2({
     sx: {
       position: 'absolute',
@@ -9708,6 +9673,23 @@ var LegendButton = function LegendButton(_ref) {
   });
 };
 
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 var Proj4js = proj4;
 // Cache for for storing and reusing Proj4 instances
 var projectorCache = {};
@@ -9724,307 +9706,6 @@ var getProj4 = function getProj4(projection) {
   projectorCache[projection] = new Proj4js.Proj(projection);
   return projectorCache[projection];
 };
-/* Function which calculates the distance between two points */
-var distance = function distance(a, b) {
-  return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
-};
-/* Function which calculates if a point is between two other points */
-var isBetween = function isBetween(a, c, b) {
-  var da = distance(a, c) + distance(c, b);
-  var db = distance(a, b);
-  return Math.abs(da - db) < 1;
-};
-var convertGeoCoordsToScreenCoords = function convertGeoCoordsToScreenCoords(featureCoords, mapId) {
-  var webmapjs = webmapUtils.getWMJSMapById(mapId);
-  if (!webmapjs) {
-    return [];
-  }
-  var XYCoords = [];
-  var _iterator = _createForOfIteratorHelper(featureCoords),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var featureCoord = _step.value;
-      if (featureCoord.length < 2) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      var coord = getPixelCoordFromLatLong(webmapjs, {
-        x: featureCoord[0],
-        y: featureCoord[1]
-      });
-      XYCoords.push(coord);
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return XYCoords;
-};
-var getPixelCoordFromGeoCoord = function getPixelCoordFromGeoCoord(featureCoords, mapId) {
-  var webmapjs = webmapUtils.getWMJSMapById(mapId);
-  if (!webmapjs) {
-    return [];
-  }
-  var _webmapjs$getSize = webmapjs.getSize(),
-    width = _webmapjs$getSize.width,
-    height = _webmapjs$getSize.height;
-  var bbox = webmapjs.getDrawBBOX();
-  var proj = webmapjs.getProj4();
-  var XYCoords = [];
-  var from = getProj4(WMJSMAP_LONLAT_EPSGCODE);
-  var to = getProj4(proj.crs);
-  var _iterator2 = _createForOfIteratorHelper(featureCoords),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var featureCoord = _step2.value;
-      if (featureCoord.length < 2) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      var coordinates = {
-        x: featureCoord[0],
-        y: featureCoord[1]
-      };
-      coordinates = proj.proj4.transform(from, to, coordinates);
-      if (coordinates !== null) {
-        var x = width * (coordinates.x - bbox.left) / (bbox.right - bbox.left);
-        var y = height * (coordinates.y - bbox.top) / (bbox.bottom - bbox.top);
-        XYCoords.push({
-          x: x,
-          y: y
-        });
-      }
-    }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
-  }
-  return XYCoords;
-};
-var findClosestCoords = function findClosestCoords(positions, mouseX, mouseY) {
-  var thresholds = {
-    max: 150,
-    min: 0.5
-  };
-  var closestIndexes = [];
-  var closestDist = Infinity;
-  positions.forEach(function (position, index) {
-    var currentDist = distance(position, {
-      x: mouseX,
-      y: mouseY
-    });
-    if (currentDist < thresholds.min || currentDist > thresholds.max) {
-      return;
-    }
-    if (currentDist < closestDist) {
-      closestDist = currentDist;
-      closestIndexes = [index];
-    } else if (currentDist === closestDist) {
-      closestIndexes.push(index);
-    }
-  });
-  return closestIndexes;
-};
-var checkHoverVertice = function checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) {
-  var geometry = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : feature.geometry;
-  var maxDistance = 20;
-  if (geometry.type === 'GeometryCollection') {
-    var _iterator3 = _createForOfIteratorHelper(geometry.geometries),
-      _step3;
-    try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var geom = _step3.value;
-        var result = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature, geom);
-        if (result) {
-          return result;
-        }
-      }
-    } catch (err) {
-      _iterator3.e(err);
-    } finally {
-      _iterator3.f();
-    }
-  }
-  if (geometry.type === 'Point') {
-    var featureCoords = geometry.coordinates;
-    /* Get all vertexes */
-    var XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-    var calculatedDistance = XYCoords.length > 0 ? distance(XYCoords[0], {
-      x: mouseX,
-      y: mouseY
-    }) : null;
-    if (calculatedDistance && calculatedDistance < maxDistance) {
-      return {
-        coordinateIndexInFeature: 0,
-        distance: calculatedDistance,
-        screenCoords: _objectSpread2({}, XYCoords[0])
-      };
-    }
-  }
-  if (geometry.type === 'MultiPoint') {
-    for (var polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-      var _featureCoords = geometry.coordinates[polygonIndex];
-      if (_featureCoords === undefined) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      /* Get all vertexes */
-      var _XYCoords = convertGeoCoordsToScreenCoords([_featureCoords]);
-      var _calculatedDistance = _XYCoords.length > 0 && distance(_XYCoords[0], {
-        x: mouseX,
-        y: mouseY
-      });
-      if (_calculatedDistance && _calculatedDistance < maxDistance) {
-        return {
-          coordinateIndexInFeature: polygonIndex,
-          distance: _calculatedDistance,
-          screenCoords: _objectSpread2({}, _XYCoords[0])
-        };
-      }
-    }
-  }
-  if (geometry.type === 'Polygon') {
-    var point = [mouseX, mouseY];
-    for (var _polygonIndex = geometry.coordinates.length - 1; _polygonIndex >= 0; _polygonIndex -= 1) {
-      var _featureCoords2 = geometry.coordinates[_polygonIndex];
-      if (_featureCoords2 === undefined) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      /* Get all vertexes */
-      var poly = [convertGeoCoordsToScreenCoords(_featureCoords2).map(function (coord) {
-        return [coord.x, coord.y];
-      })];
-      try {
-        var isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.polygon(poly));
-        if (isPointInPoly) {
-          if (ignoreCoordinateIndexInFeature) {
-            return {
-              coordinateIndexInFeature: 0,
-              distance: 0,
-              screenCoords: {
-                x: mouseX,
-                y: mouseY
-              }
-            };
-          }
-          return {
-            coordinateIndexInFeature: _polygonIndex,
-            distance: 0,
-            screenCoords: {
-              x: mouseX,
-              y: mouseY
-            }
-          };
-        }
-      } catch (e) {
-        // console.warn(e);
-      }
-    }
-  }
-  if (geometry.type === 'MultiPolygon') {
-    var _point = [mouseX, mouseY];
-    for (var _polygonIndex2 = geometry.coordinates.length - 1; _polygonIndex2 >= 0; _polygonIndex2 -= 1) {
-      var _featureCoords3 = geometry.coordinates[_polygonIndex2][0];
-      if (_featureCoords3 === undefined) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      var _poly = [convertGeoCoordsToScreenCoords(_featureCoords3).map(function (coord) {
-        return [coord.x, coord.y];
-      })];
-      try {
-        var _isPointInPoly = turf.booleanPointInPolygon(turf.point(_point), turf.polygon(_poly));
-        if (_isPointInPoly) {
-          return {
-            coordinateIndexInFeature: _polygonIndex2,
-            distance: 0,
-            screenCoords: {
-              x: mouseX,
-              y: mouseY
-            }
-          };
-        }
-      } catch (e) {
-        console.warn(e);
-      }
-    }
-  }
-  if (geometry.type === 'LineString') {
-    /* Get all vertexes */
-    var _XYCoords2 = convertGeoCoordsToScreenCoords(geometry.coordinates);
-    /* Snap to the vertex closer than specified pixels */
-    for (var j = 0; j < _XYCoords2.length; j += 1) {
-      var coord = _XYCoords2[j];
-      if (distance(coord, {
-        x: mouseX,
-        y: mouseY
-      }) < maxDistance) {
-        return {
-          coordinateIndexInFeature: j,
-          distance: 0,
-          screenCoords: _objectSpread2({}, coord)
-        };
-      }
-    }
-  }
-  return null;
-};
-var checkHoverFeatures = function checkHoverFeatures(geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) {
-  var result = [];
-  for (var j = 0; j < geojson.features.length; j += 1) {
-    var feature = geojson.features[j];
-    var hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature);
-    if (hoverResult != null && hoverResult.distance != null) {
-      result.push({
-        coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
-        featureIndex: j,
-        feature: feature,
-        distance: hoverResult.distance,
-        screenCoords: _objectSpread2({}, hoverResult.screenCoords)
-      });
-    }
-  }
-  if (result.length === 0) {
-    return null;
-  }
-  /* Sort the list, closest distance on top */
-  result.sort(function (a, b) {
-    var distanceA = a ? a.distance : 0;
-    var distanceB = b ? b.distance : 0;
-    return distanceA - distanceB;
-  }); // b - a for reverse sort
-  return result[0];
-};
-var generatedDrawFunctionIds = 0;
-var generateDrawFunctionId = function generateDrawFunctionId() {
-  generatedDrawFunctionIds += 1;
-  return "drawFunctionId_".concat(generatedDrawFunctionIds);
-};
-/**
- *  DrawFunction store for re-use of drawFunctions
- */
-var drawFunctionStore = [];
-var getDrawFunctionFromStore = function getDrawFunctionFromStore(id) {
-  var drawFunction = drawFunctionStore.find(function (drawFunction) {
-    return drawFunction.id === id;
-  });
-  return drawFunction === null || drawFunction === void 0 ? void 0 : drawFunction.drawMethod;
-};
-var registerDrawFunction = function registerDrawFunction() {
-  var drawFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
-  var id = generateDrawFunctionId();
-  var newFunction = {
-    id: id,
-    drawMethod: drawFunction
-  };
-  drawFunctionStore.push(newFunction);
-  return id;
-};
 var NEW_LINESTRING_CREATED = 'new point in LineString created';
 var NEW_FEATURE_CREATED = 'new feature created';
 var NEW_POINT_CREATED = 'new point created';
@@ -10108,2111 +9789,92 @@ var lineStringCollection = {
   features: [lineString]
 };
 
-var colors = {
-  main: '#ff7800',
-  vertice: '#000'
-};
-var EDITMODE;
-(function (EDITMODE) {
-  EDITMODE["EMPTY"] = "EMPTY";
-  EDITMODE["DELETE_FEATURES"] = "DELETE_FEATURES";
-  EDITMODE["ADD_FEATURE"] = "ADD_FEATURE";
-})(EDITMODE || (EDITMODE = {}));
-var DRAWMODE;
-(function (DRAWMODE) {
-  DRAWMODE["POLYGON"] = "POLYGON";
-  DRAWMODE["BOX"] = "BOX";
-  DRAWMODE["MULTIPOINT"] = "MULTIPOINT";
-  DRAWMODE["POINT"] = "POINT";
-  DRAWMODE["LINESTRING"] = "LINESTRING";
-})(DRAWMODE || (DRAWMODE = {}));
-var VERTEX;
-(function (VERTEX) {
-  VERTEX["NONE"] = "NONE";
-  VERTEX["MIDDLE_POINT_OF_FEATURE"] = "MIDDLE_POINT_OF_FEATURE";
-})(VERTEX || (VERTEX = {}));
-var EDGE;
-(function (EDGE) {
-  EDGE["NONE"] = "NONE";
-})(EDGE || (EDGE = {}));
-var SNAPPEDFEATURE;
-(function (SNAPPEDFEATURE) {
-  SNAPPEDFEATURE["NONE"] = "NONE";
-})(SNAPPEDFEATURE || (SNAPPEDFEATURE = {}));
-var DRAGMODE;
-(function (DRAGMODE) {
-  DRAGMODE["NONE"] = "NONE";
-  DRAGMODE["VERTEX"] = "VERTEX";
-  DRAGMODE["FEATURE"] = "FEATURE";
-})(DRAGMODE || (DRAGMODE = {}));
-/**
- * Initializes a new feature for given type
- * @param type
- * @returns
- */
-var getNewFeature = function getNewFeature(type) {
-  switch (type) {
-    case DRAWMODE.POINT:
-      return cloneDeep(featurePoint);
-    case DRAWMODE.MULTIPOINT:
-      return cloneDeep(featureMultiPoint);
-    case DRAWMODE.POLYGON:
-      return cloneDeep(featurePolygon);
-    case DRAWMODE.BOX:
-      return cloneDeep(featureBox);
-    case DRAWMODE.LINESTRING:
-      return cloneDeep(lineString);
-  }
-  return undefined;
-};
-var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
-  function MapDraw(props) {
-    var _this;
-    _classCallCheck(this, MapDraw);
-    _this = _callSuper(this, MapDraw, [props]);
-    _this.handleGeoJSONUpdate = function (newGeoJSON) {
-      var _this$geojson;
-      var _this$props = _this.props,
-        selectedFeatureIndex = _this$props.selectedFeatureIndex,
-        mapId = _this$props.mapId;
-      _this.geojson = cloneDeep(newGeoJSON);
-      /* Ensure that this.snappedPolygonIndex is still within the coordinates array */
-      if ((_this$geojson = _this.geojson) !== null && _this$geojson !== void 0 && _this$geojson.features && selectedFeatureIndex < _this.geojson.features.length) {
-        var _feature$geometry;
-        var feature = _this.getSelectedFeature();
-        if (((_feature$geometry = feature.geometry) === null || _feature$geometry === void 0 ? void 0 : _feature$geometry.type) === 'Polygon') {
-          var coordinates = feature.geometry.coordinates;
-          if (Number(_this.snappedPolygonIndex) > coordinates.length - 1) {
-            _this.snappedPolygonIndex = coordinates.length - 1;
-          }
-        } else {
-          _this.snappedPolygonIndex = SNAPPEDFEATURE.NONE;
-        }
-      }
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      webmapjs === null || webmapjs === void 0 || webmapjs.draw('MapDraw::handleGeoJSONUpdate');
-    };
-    _this.handleExitDrawMode = function () {
-      var reason = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'escaped';
-      var exitDrawModeCallback = _this.props.exitDrawModeCallback;
-      // remove last vertice when pressing ESC while drawing a polygon
-      if (_this.myDrawMode === DRAWMODE.POLYGON && _this.myEditMode === EDITMODE.ADD_FEATURE) {
-        var currentFeature = _this.getSelectedFeature();
-        var currentGeometry = currentFeature.geometry;
-        if (currentGeometry.type === 'Polygon') {
-          var coordinates = currentGeometry.coordinates[0];
-          var firstElement = coordinates[0];
-          coordinates[_this.mouseIsOverVertexNr] = cloneDeep(firstElement);
+var GeoJSONTextField = function GeoJSONTextField(_ref) {
+  var onChangeGeoJSON = _ref.onChangeGeoJSON,
+    geoJSON = _ref.geoJSON,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'GeoJSON text' : _ref$title,
+    sx = _ref.sx,
+    _ref$maxRows = _ref.maxRows,
+    maxRows = _ref$maxRows === void 0 ? 18 : _ref$maxRows;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isValid = _useState2[0],
+    setValidity = _useState2[1];
+  var onChange = function onChange(event) {
+    try {
+      onChangeGeoJSON(JSON.parse(event.target.value));
+      setValidity(true);
+    } catch (e) {
+      onChangeGeoJSON(null);
+      setValidity(false);
+    }
+  };
+  return jsx(Grid, {
+    size: {
+      xs: 12
+    },
+    sx: sx,
+    children: jsx(TextField, {
+      sx: {
+        padding: 0,
+        border: 'none',
+        width: '100%',
+        height: '100%',
+        fontSize: '10px',
+        '.MuiInputBase-root': {
+          height: '100%',
+          alignItems: 'baseline'
         }
-      }
-      if (exitDrawModeCallback && (_this.myEditMode === EDITMODE.EMPTY || _this.myEditMode === EDITMODE.DELETE_FEATURES)) {
-        exitDrawModeCallback(reason, _this.geojson);
-      }
-      _this.cancelEdit(_this.myDrawMode !== DRAWMODE.BOX);
-      if (_this.myDrawMode === DRAWMODE.POLYGON && exitDrawModeCallback) {
-        exitDrawModeCallback(reason, _this.geojson);
-      }
-      if (_this.myDrawMode === DRAWMODE.LINESTRING && exitDrawModeCallback) {
-        exitDrawModeCallback(reason, _this.geojson);
-      }
-    };
-    _this.getSelectedFeature = function () {
-      var selectedFeatureIndex = _this.props.selectedFeatureIndex;
-      return _this.geojson.features[selectedFeatureIndex];
-    };
-    _this.myEditMode = EDITMODE.EMPTY;
-    _this.myDrawMode = DRAWMODE.POLYGON;
-    _this.beforeDraw = _this.beforeDraw.bind(_this);
-    _this.mouseMove = _this.mouseMove.bind(_this);
-    _this.mouseDown = _this.mouseDown.bind(_this);
-    _this.deleteFeature = _this.deleteFeature.bind(_this);
-    _this.mouseUp = _this.mouseUp.bind(_this);
-    _this.cancelEdit = _this.cancelEdit.bind(_this);
-    _this.checkDist = _this.checkDist.bind(_this);
-    _this.hoverEdge = _this.hoverEdge.bind(_this);
-    _this.drawPolygon = _this.drawPolygon.bind(_this);
-    _this.moveVertex = _this.moveVertex.bind(_this);
-    _this.featureHasChanged = _this.featureHasChanged.bind(_this);
-    _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-    _this.hoverVertex = _this.hoverVertex.bind(_this);
-    _this.transposePolygon = _this.transposePolygon.bind(_this);
-    _this.transposeVertex = _this.transposeVertex.bind(_this);
-    _this.triggerMouseDownTimer = _this.triggerMouseDownTimer.bind(_this);
-    _this.mouseDoubleClick = _this.mouseDoubleClick.bind(_this);
-    _this.handleDrawMode = _this.handleDrawMode.bind(_this);
-    _this.componentCleanup = _this.componentCleanup.bind(_this);
-    _this.initializeFeatureCoordinates = _this.initializeFeatureCoordinates.bind(_this);
-    _this.validatePolys = _this.validatePolys.bind(_this);
-    _this.insertVertexInEdge = _this.insertVertexInEdge.bind(_this);
-    _this.createNewFeature = _this.createNewFeature.bind(_this);
-    _this.addPointToMultiPointFeature = _this.addPointToMultiPointFeature.bind(_this);
-    _this.addVerticesToPolygonFeature = _this.addVerticesToPolygonFeature.bind(_this);
-    _this.checkIfFeatureIsBox = _this.checkIfFeatureIsBox.bind(_this);
-    _this.handleGeoJSONUpdate = _this.handleGeoJSONUpdate.bind(_this);
-    _this.handleNewFeatureIndex = _this.handleNewFeatureIndex.bind(_this);
-    _this.getSelectedFeature = _this.getSelectedFeature.bind(_this);
-    _this.handleDrawMode(props.drawMode);
-    _this.textPositions = [];
-    _this.mouseOverPolygonCoordinates = [];
-    _this.defaultPolyProps = {
-      stroke: '#000',
-      'stroke-width': 0.4,
-      'stroke-opacity': 1,
-      fill: '#33cc00',
-      'fill-opacity': 1
-    };
-    _this.defaultLineStringProps = {
-      stroke: '#000',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#33cc00',
-      'fill-opacity': 1
-    };
-    _this.defaultIconProps = {
-      imageWidth: 30,
-      imageHeight: 30
+      },
+      multiline: true,
+      error: !isValid,
+      maxRows: maxRows,
+      label: !isValid ? 'GeoJSON not valid' : title,
+      variant: "filled",
+      onChange: onChange,
+      value: JSON.stringify(geoJSON, null, 2),
+      disabled: !onChangeGeoJSON
+    })
+  });
+};
+
+var FeatureLayers = function FeatureLayers(_ref) {
+  var geojson = _ref.geojson,
+    onChangeLayerIndex = _ref.onChangeLayerIndex,
+    activeFeatureLayerIndex = _ref.activeFeatureLayerIndex,
+    getToolIcon = _ref.getToolIcon;
+  var featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(function (index) {
+    var _geojson$features$ind;
+    return {
+      index: index,
+      value: (_geojson$features$ind = geojson.features[index].properties) === null || _geojson$features$ind === void 0 ? void 0 : _geojson$features$ind.selectionType,
+      label: "".concat(index + 1, ": ").concat(geojson.features[index].geometry.type)
     };
-    _this.somethingWasDragged = DRAGMODE.NONE;
-    _this.mouseIsOverVertexNr = VERTEX.NONE;
-    _this.selectedEdge = EDGE.NONE;
-    if (props.geojson) {
-      _this.geojson = cloneDeep(props.geojson);
-    } else {
-      _this.geojson = cloneDeep(emptyGeoJSON);
-      _this.featureHasChanged('new');
-    }
-    _this.validatePolys(true);
-    return _this;
-  }
-  _inherits(MapDraw, _React$PureComponent);
-  return _createClass(MapDraw, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('keydown', this.handleKeyDown);
-      var _this$props2 = this.props,
-        mapId = _this$props2.mapId,
-        isInDeleteMode = _this$props2.isInDeleteMode;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (this.disabled === undefined) {
-        this.disabled = isInDeleteMode;
-      }
-      if (webmapjs !== undefined && this.listenersInitialized !== true) {
-        this.listenersInitialized = true;
-        webmapjs.addListener('beforecanvasdisplay', this.beforeDraw, true);
-        webmapjs.addListener('beforemousemove', this.mouseMove, true);
-        webmapjs.addListener('beforemousedown', this.mouseDown, true);
-        webmapjs.addListener('beforemouseup', this.mouseUp, true);
-        this.disabled = false;
-      }
-      if (webmapjs !== undefined) {
-        webmapjs.draw();
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props3 = this.props,
-        geojson = _this$props3.geojson,
-        isInEditMode = _this$props3.isInEditMode,
-        isInDeleteMode = _this$props3.isInDeleteMode,
-        drawMode = _this$props3.drawMode,
-        mapId = _this$props3.mapId,
-        selectedFeatureIndex = _this$props3.selectedFeatureIndex;
-      var prevGeojson = prevProps && prevProps.geojson;
-      var prevIsInEditMode = prevProps && prevProps.isInEditMode;
-      var prevIsInDeleteMode = prevProps && prevProps.isInDeleteMode;
-      var prevDrawMode = prevProps && prevProps.drawMode;
-      var prevSelectedFeatureIndex = prevProps && prevProps.selectedFeatureIndex;
-      /* Handle geojson update */
-      if (geojson !== prevGeojson) {
-        this.handleGeoJSONUpdate(geojson);
-      }
-      /* Handle toggle edit */
-      if (isInEditMode !== prevIsInEditMode) {
-        var _webmapUtils$getWMJSM;
-        if (isInEditMode === false && this.myEditMode !== EDITMODE.EMPTY) {
-          this.cancelEdit(true); /* Throw away last vertice */
-          if (this.myEditMode === EDITMODE.DELETE_FEATURES) {
-            this.myEditMode = EDITMODE.EMPTY;
-            return;
-          }
-        }
-        (_webmapUtils$getWMJSM = webmapUtils.getWMJSMapById(mapId)) === null || _webmapUtils$getWMJSM === void 0 || _webmapUtils$getWMJSM.draw('MapDraw::componentDidUpdateIsInEditMode');
-      }
-      /* Handle toggle delete */
-      if (isInDeleteMode !== prevIsInDeleteMode) {
-        if (isInDeleteMode === true) {
-          this.myEditMode = EDITMODE.DELETE_FEATURES;
-        } else if (this.myEditMode === EDITMODE.DELETE_FEATURES) {
-          this.myEditMode = EDITMODE.EMPTY;
-        }
-      }
-      if (isInEditMode !== prevIsInEditMode || isInDeleteMode !== prevIsInDeleteMode) {
-        if (isInEditMode === false && isInDeleteMode === false) {
-          this.myEditMode = EDITMODE.EMPTY;
-        }
-      }
-      if (selectedFeatureIndex !== prevSelectedFeatureIndex) {
-        this.handleNewFeatureIndex();
-      }
-      /* Handle new drawmode */
-      if (drawMode !== prevDrawMode) {
-        /* Handle drawmode */
-        this.handleDrawMode(drawMode);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.componentCleanup();
-    }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      var isInEditMode = this.props.isInEditMode;
-      if (event.key === 'Escape') {
-        this.handleExitDrawMode('escaped');
-      }
-      if (isInEditMode && (event.key === 'Delete' || event.key === 'Backspace')) {
-        this.deleteFeature();
-      }
-    }
-  }, {
-    key: "handleNewFeatureIndex",
-    value: function handleNewFeatureIndex() {
-      var _webmapUtils$getWMJSM2;
-      // Another feature was selected. The mouseIsOverVertexNr should be updated
-      var mapId = this.props.mapId;
-      var feature = this.getSelectedFeature();
-      if (feature && feature.geometry.type !== 'GeometryCollection') {
-        var featureCoords = feature.geometry.coordinates;
-        this.mouseIsOverVertexNr = featureCoords.length - 1;
-      }
-      (_webmapUtils$getWMJSM2 = webmapUtils.getWMJSMapById(mapId)) === null || _webmapUtils$getWMJSM2 === void 0 || _webmapUtils$getWMJSM2.draw('MapDraw::componentDidUpdateSelectedFeatureIndex');
-    }
-    /* Converts string input into right drawmode */
-  }, {
-    key: "handleDrawMode",
-    value: function handleDrawMode(_drawMode) {
-      if (_drawMode) {
-        var drawMode = _drawMode.toUpperCase();
-        if (drawMode === 'POINT') {
-          this.myDrawMode = DRAWMODE.POINT;
-        }
-        if (drawMode === 'MULTIPOINT') {
-          this.myDrawMode = DRAWMODE.MULTIPOINT;
-        }
-        if (drawMode === 'BOX') {
-          this.myDrawMode = DRAWMODE.BOX;
-        }
-        if (drawMode === 'POLYGON') {
-          this.myDrawMode = DRAWMODE.POLYGON;
-        }
-        if (drawMode === 'LINESTRING') {
-          this.myDrawMode = DRAWMODE.LINESTRING;
-        }
-      }
-    }
-  }, {
-    key: "hoverVertex",
-    value: function hoverVertex(feature, mouseX, mouseY) {
-      var mapId = this.props.mapId;
-      var foundVertex = VERTEX.NONE;
-      this.mouseIsOverVertexNr = VERTEX.NONE;
-      if (feature.geometry.type === 'Point') {
-        this.snappedPolygonIndex = SNAPPEDFEATURE.NONE;
-        var featureCoords = feature.geometry.coordinates;
-        /* Get all vertexes */
-        var XYCoords = convertGeoCoordsToScreenCoords([featureCoords], mapId);
-        if (XYCoords.length > 0 && this.checkDist(XYCoords[0], 0, mouseX, mouseY)) {
-          this.mouseIsOverVertexNr = 0;
-          return;
-        }
-      }
-      if (feature.geometry.type === 'MultiPoint') {
-        this.snappedPolygonIndex = SNAPPEDFEATURE.NONE;
-        for (var polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-          var _featureCoords = feature.geometry.coordinates[polygonIndex];
-          if (_featureCoords === undefined) {
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-          /* Get all vertexes */
-          var _XYCoords = convertGeoCoordsToScreenCoords([_featureCoords], mapId);
-          if (_XYCoords.length > 0 && this.checkDist(_XYCoords[0], polygonIndex, mouseX, mouseY)) {
-            this.mouseIsOverVertexNr = polygonIndex;
-            return;
-          }
-        }
-      }
-      if (feature.geometry.type === 'Polygon') {
-        for (var _polygonIndex = feature.geometry.coordinates.length - 1; _polygonIndex >= 0; _polygonIndex -= 1) {
-          var _featureCoords2 = feature.geometry.coordinates[_polygonIndex];
-          if (_featureCoords2 === undefined) {
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-          /* Get all vertexes */
-          var _XYCoords2 = convertGeoCoordsToScreenCoords(_featureCoords2, mapId);
-          var middle = {
-            x: 0,
-            y: 0
-          };
-          /* Snap to the vertex closer than specified pixels */
-          for (var j = 0; j < _XYCoords2.length - 1; j += 1) {
-            var coord = _XYCoords2[j];
-            middle.x += coord.x;
-            middle.y += coord.y;
-            if (this.checkDist(coord, _polygonIndex, mouseX, mouseY)) {
-              foundVertex = j;
-              break;
-            }
-          }
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          middle.x = parseInt(middle.x / (_XYCoords2.length - 1), 10);
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          middle.y = parseInt(middle.y / (_XYCoords2.length - 1), 10);
-          /* Check if the mouse hovers the middle vertex */
-          if (foundVertex === VERTEX.NONE && this.checkDist(middle, _polygonIndex, mouseX, mouseY)) {
-            foundVertex = VERTEX.MIDDLE_POINT_OF_FEATURE;
-          }
-          this.mouseIsOverVertexNr = foundVertex;
-        }
-      }
-      if (feature.geometry.type === 'LineString') {
-        var lineStringIndex = 0;
-        var _featureCoords3 = feature.geometry.coordinates;
-        /* Get all vertexes */
-        var _XYCoords3 = convertGeoCoordsToScreenCoords(_featureCoords3, mapId);
-        /* Snap to the vertex closer than specified pixels */
-        for (var _j = 0; _j < _XYCoords3.length; _j += 1) {
-          var _coord2 = _XYCoords3[_j];
-          // if (!coord || coord.length < 2) continue;
-          if (this.checkDist(_coord2, lineStringIndex, mouseX, mouseY)) {
-            foundVertex = _j;
-            break;
-          }
-        }
-        this.mouseIsOverVertexNr = foundVertex;
-      }
-    }
-  }, {
-    key: "mouseMove",
-    value: function mouseMove(event) {
-      var _this2 = this;
-      var _this$props4 = this.props,
-        isInEditMode = _this$props4.isInEditMode,
-        onHoverFeature = _this$props4.onHoverFeature,
-        mapId = _this$props4.mapId;
-      if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
-        return undefined;
-      }
-      /* mouseMove is an event callback function which is triggered when the mouse moves over the map
-        This event is only triggered if the map is in hover state.
-        E.g. when the map is dragging/panning, this event is not triggerd
-      */
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY,
-        mouseDown = event.mouseDown;
-      this.mouseX = mouseX;
-      this.mouseY = mouseY;
-      if (onHoverFeature) {
-        var handleMouseStoppedTimer = function handleMouseStoppedTimer() {
-          var result = checkHoverFeatures(_this2.geojson, _this2.mouseX, _this2.mouseY, function (coordinates) {
-            return convertGeoCoordsToScreenCoords(coordinates, mapId);
-          });
-          if (result) {
-            _this2.featureEvent = {
-              coordinateIndexInFeature: result.coordinateIndexInFeature,
-              featureIndex: result.featureIndex,
-              mouseX: mouseX,
-              mouseY: mouseY,
-              isInEditMode: isInEditMode,
-              feature: result.feature,
-              screenCoords: result.screenCoords
-            };
-            onHoverFeature(_this2.featureEvent);
-          } else if (_this2.featureEvent) {
-            _this2.featureEvent = undefined;
-            onHoverFeature(undefined);
-          }
-          var webmapjs = webmapUtils.getWMJSMapById(mapId);
-          webmapjs && webmapjs.draw('MapDraw::onHoverFeature');
-        };
-        window.clearTimeout(this.mouseStoppedTimer);
-        this.mouseStoppedTimer = window.setTimeout(handleMouseStoppedTimer, 20);
-      }
-      if (isInEditMode === false) {
-        return undefined;
-      }
-      var feature = this.getSelectedFeature();
-      if (!feature) {
-        return undefined;
-      }
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return undefined;
-      }
-      this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-        x: mouseX,
-        y: mouseY
-      });
-      /* The mouse is hovering a vertice, and the mousedown is into effect, move vertice accordingly */
-      var ret = this.moveVertex(feature, mouseDown);
-      if (ret === false) {
-        webmapjs.draw('MapDraw::mouseMove');
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      /* Check if the mouse hovers any vertice of any polygon */
-      this.hoverVertex(feature, mouseX, mouseY);
-      if (this.mouseIsOverVertexNr !== VERTEX.NONE) {
-        /* We found a vertex */
-        this.selectedEdge = EDGE.NONE; /* We found a vertex, not an edge: reset it */
-        webmapjs.setCursor('move');
-        webmapjs.draw('MapDraw::hoverVertex');
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      webmapjs.setCursor();
-      /* Check if the mouse hovers an edge of a polygon */
-      this.selectedEdge = EDGE.NONE;
-      if (this.myEditMode !== EDITMODE.DELETE_FEATURES && !this.checkIfFeatureIsBox(feature)) {
-        var retObj = this.hoverEdge(feature.geometry, mouseX, mouseY);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.selectedEdge = retObj.selectedEdge;
-        this.snappedPolygonIndex = retObj.snappedPolygonIndex;
-      }
-      if (this.selectedEdge !== EDGE.NONE) {
-        webmapjs.draw('MapDraw::mouseMove');
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      if (this.myEditMode === EDITMODE.ADD_FEATURE) {
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      /* We did not find anything under the mousecursor,
-        return true means that the map will continue with its own mousehandling
-      */
-      if (this.mouseIsOverVertexNr === VERTEX.NONE && this.selectedEdge === EDGE.NONE) {
-        webmapjs.draw('MapDraw::mouseMove');
-        // eslint-disable-next-line consistent-return
-        return true; /* False means that this component will take over entire controll.
-                       True means that it is still possible to pan and drag the map while editing */
-      }
-      return undefined;
-    }
-    /* Returns true if double click is detected */
-  }, {
-    key: "triggerMouseDownTimer",
-    value: function triggerMouseDownTimer(event) {
-      var _this3 = this;
-      if (!this.doubleClickTimer) {
-        this.doubleClickTimer = {};
-      }
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var checkTimeOut = function checkTimeOut() {
-        _this3.doubleClickTimer.isRunning = false;
-      };
-      /* Reset the timer */
-      if (this.doubleClickTimer.timer) {
-        clearTimeout(this.doubleClickTimer.timer);
-        this.doubleClickTimer.timer = null;
-      }
-      /* Check if double click on this location occured */
-      if (this.doubleClickTimer.isRunning === true) {
-        if (mouseX === this.doubleClickTimer.mouseX && mouseY === this.doubleClickTimer.mouseY) {
-          this.doubleClickTimer.isRunning = false;
-          return true;
-        }
-      }
-      /* Create new timer */
-      this.doubleClickTimer.isRunning = true;
-      this.doubleClickTimer.mouseX = mouseX;
-      this.doubleClickTimer.mouseY = mouseY;
-      this.doubleClickTimer.timer = window.setTimeout(checkTimeOut, 300);
-      /* No double click detected, return false */
-      return false;
-    }
-  }, {
-    key: "mouseDoubleClick",
-    value: function mouseDoubleClick() {
-      this.handleExitDrawMode('doubleClicked');
-    }
-    /* Insert a new vertex into an edge, e.g a line is clicked and a point is added */
-  }, {
-    key: "insertVertexInEdge",
-    value: function insertVertexInEdge(event) {
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return false;
-      }
-      if (this.myDrawMode === DRAWMODE.POLYGON) {
-        if (this.selectedEdge !== EDGE.NONE && this.myEditMode !== EDITMODE.DELETE_FEATURES) {
-          this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-            x: mouseX,
-            y: mouseY
-          });
-          var feature = this.getSelectedFeature();
-          if (this.checkIfFeatureIsBox(feature)) {
-            return false;
-          }
-          var featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-          if (featureCoords === undefined) {
-            return false;
-          }
-          featureCoords.splice(this.selectedEdge + 1, 0, [this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.featureHasChanged('insert vertex into line');
-          this.mouseMove(event);
-          return false;
-        }
-      }
-      if (this.myDrawMode === DRAWMODE.LINESTRING) {
-        if (this.selectedEdge !== EDGE.NONE && this.myEditMode !== EDITMODE.DELETE_FEATURES) {
-          this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-            x: mouseX,
-            y: mouseY
-          });
-          var _feature = this.getSelectedFeature();
-          if (this.checkIfFeatureIsBox(_feature)) {
-            return false;
-          }
-          var _featureCoords4 = _feature.geometry.coordinates;
-          if (_featureCoords4 === undefined) {
-            return false;
-          }
-          _featureCoords4.splice(this.selectedEdge + 1, 0, [this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.featureHasChanged('insert vertex into line');
-          this.mouseMove(event);
-          return false;
-        }
-      }
-      return true;
-    }
-    /**
-     * This creates a new feature in the geojson features array at the selectedFeatureIndex location
-     * @param event
-     * @returns if a new feature is made
-     */
-  }, {
-    key: "createNewFeature",
-    value: function createNewFeature(event) {
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var _this$props5 = this.props,
-        mapId = _this$props5.mapId,
-        selectedFeatureIndex = _this$props5.selectedFeatureIndex;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return false;
-      }
-      if (this.myEditMode === EDITMODE.EMPTY) {
-        this.myEditMode = EDITMODE.ADD_FEATURE;
-        if (!this.geojson.features[selectedFeatureIndex]) {
-          this.geojson.features[selectedFeatureIndex] = getNewFeature(this.myDrawMode);
-        }
-        var feature = this.getSelectedFeature();
-        this.initializeFeatureCoordinates(feature, this.myDrawMode);
-        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-          x: mouseX,
-          y: mouseY
-        });
-        if (this.myDrawMode === DRAWMODE.POINT || this.myDrawMode === DRAWMODE.MULTIPOINT) {
-          /* Create points */
-          var pointGeometry = feature.geometry;
-          if ((pointGeometry === null || pointGeometry === void 0 ? void 0 : pointGeometry.coordinates) === undefined) {
-            pointGeometry.coordinates = [];
-          }
-          var multiPointGeometry = feature.geometry;
-          if ((multiPointGeometry === null || multiPointGeometry === void 0 ? void 0 : multiPointGeometry.coordinates) === undefined) {
-            multiPointGeometry.coordinates = [[]];
-          }
-          if (this.myDrawMode === DRAWMODE.POINT) {
-            var featureCoords = pointGeometry.coordinates;
-            featureCoords[0] = this.mouseGeoCoord.x;
-            featureCoords[1] = this.mouseGeoCoord.y;
-            this.snappedPolygonIndex = pointGeometry.coordinates.length - 1;
-            /* For type POINT it is not possible to add multiple points to the same feature */
-            this.myEditMode = EDITMODE.EMPTY;
-            this.featureHasChanged(NEW_POINT_CREATED);
-          }
-          if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
-            this.myEditMode = EDITMODE.EMPTY;
-            var _featureCoords5 = multiPointGeometry.coordinates;
-            if (_featureCoords5 === undefined) {
-              _featureCoords5 = [];
-            }
-            if (_featureCoords5[0] === undefined || _featureCoords5[0].length === 0) {
-              _featureCoords5[0] = []; /* Used to create the first polygon */
-            } else {
-              _featureCoords5.push([]); /* Used to create extra polygons in the same feature */
-            }
-            // featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-            _featureCoords5[_featureCoords5.length - 1] = [this.mouseGeoCoord.x, this.mouseGeoCoord.y];
-            this.snappedPolygonIndex = multiPointGeometry.coordinates.length - 1;
-            this.featureHasChanged('new point in multipoint created');
-          }
-        }
-        if (this.myDrawMode === DRAWMODE.POLYGON || this.myDrawMode === DRAWMODE.BOX) {
-          /* Create poly's and boxes */
-          this.myEditMode = EDITMODE.ADD_FEATURE;
-          var polygonGeometry = feature.geometry;
-          if ((polygonGeometry === null || polygonGeometry === void 0 ? void 0 : polygonGeometry.coordinates) === undefined) {
-            polygonGeometry.coordinates = [[]];
-          }
-          if (polygonGeometry.coordinates[0] === undefined || polygonGeometry.coordinates[0].length === 0) {
-            polygonGeometry.coordinates[0] = []; /* Used to create the first polygon */
-          } else {
-            this.myEditMode = EDITMODE.EMPTY;
-            return false;
-          }
-          this.snappedPolygonIndex = polygonGeometry.coordinates.length - 1;
-          var _featureCoords6 = polygonGeometry.coordinates[this.snappedPolygonIndex];
-          _featureCoords6.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          _featureCoords6.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          /* This is triggered when a bounding box is created. Five points are added at once */
-          if (this.myDrawMode === DRAWMODE.BOX) {
-            _featureCoords6.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-            _featureCoords6.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-            _featureCoords6.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          }
-          if (this.myDrawMode === DRAWMODE.BOX) {
-            this.mouseIsOverVertexNr = 3;
-          } else {
-            this.mouseIsOverVertexNr = _featureCoords6.length - 1;
-          }
-          this.featureHasChanged(NEW_FEATURE_CREATED);
-        }
-        if (this.myDrawMode === DRAWMODE.LINESTRING) {
-          this.myEditMode = EDITMODE.EMPTY;
-          /* Create linestring */
-          this.myEditMode = EDITMODE.ADD_FEATURE;
-          var _featureCoords7 = feature.geometry.coordinates;
-          if (_featureCoords7 === undefined || _featureCoords7.length === 0) {
-            _featureCoords7 = [[this.mouseGeoCoord.x, this.mouseGeoCoord.y]];
-          }
-          if (_featureCoords7[0].length === 0) {
-            _featureCoords7[0] = [this.mouseGeoCoord.x, this.mouseGeoCoord.y];
-          }
-          _featureCoords7.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.snappedPolygonIndex = 0;
-          this.featureHasChanged(NEW_LINESTRING_CREATED);
-          this.mouseIsOverVertexNr = _featureCoords7.length - 1;
-        }
-        webmapjs.draw('MapDraw::mouseDown');
-        return true;
-      }
-      return false;
-    }
-    /* This is triggered when new points are added during the addmultipoint mode. One point is added per time */
-  }, {
-    key: "addPointToMultiPointFeature",
-    value: function addPointToMultiPointFeature(event) {
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return false;
-      }
-      if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
-        if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
-          this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-            x: mouseX,
-            y: mouseY
-          });
-          var feature = this.getSelectedFeature();
-          if (feature.geometry.type === 'MultiPoint') {
-            var featureCoords = feature.geometry.coordinates;
-            featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-            this.featureHasChanged('point added to multipoint');
-            this.mouseIsOverVertexNr = VERTEX.NONE;
-            this.mouseMove(event);
-          }
-          return false;
-        }
-      }
-      return true;
-    }
-  }, {
-    key: "addVerticesToPolygonFeature",
-    value: function addVerticesToPolygonFeature(event) {
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return false;
-      }
-      if (this.myDrawMode === DRAWMODE.POLYGON) {
-        if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
-          this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-            x: mouseX,
-            y: mouseY
-          });
-          var feature = this.getSelectedFeature();
-          if (feature.geometry.type === 'Polygon') {
-            var featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-            // "featureCoords" is our polygon represented as a list of coordinates. The last element in the list is the ghost node following our cursor.
-            // We therefore extract the last two nodes, which will tell us the distance between the last placed node and the ghost node
-            var _featureCoords$slice = featureCoords.slice(-2),
-              _featureCoords$slice2 = _slicedToArray(_featureCoords$slice, 2),
-              coordA = _featureCoords$slice2[0],
-              coordB = _featureCoords$slice2[1];
-            var coordDistance = distance({
-              x: coordA[0],
-              y: coordA[1]
-            }, {
-              x: coordB[0],
-              y: coordB[1]
-            });
-            if (coordDistance > 0.005) {
-              featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-              this.featureHasChanged('vertex added to polygon');
-              this.mouseIsOverVertexNr = featureCoords.length - 1;
-              this.mouseMove(event);
-            }
-          }
-          return false;
-        }
-      }
-      return undefined;
-    }
-  }, {
-    key: "addPointToLineStringFeature",
-    value: function addPointToLineStringFeature(event) {
-      var mouseX = event.mouseX,
-        mouseY = event.mouseY;
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return false;
-      }
-      if (this.myDrawMode === DRAWMODE.LINESTRING) {
-        if (this.myEditMode === EDITMODE.ADD_FEATURE) {
-          this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
-            x: mouseX,
-            y: mouseY
-          });
-          var feature = this.getSelectedFeature();
-          var featureCoords = feature.geometry.coordinates;
-          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.featureHasChanged('vertex added to LineString');
-          this.mouseIsOverVertexNr = featureCoords.length - 1;
-          this.mouseMove(event);
-          return false;
-        }
-      }
-      return true;
-    }
-  }, {
-    key: "mouseDown",
-    value: function mouseDown(event) {
-      var isInEditMode = this.props.isInEditMode;
-      if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
-        return;
-      }
-      if (isInEditMode === false) {
-        return;
-      }
-      if (this.triggerMouseDownTimer(event)) {
-        // eslint-disable-next-line consistent-return
-        return this.mouseDoubleClick();
-      }
-      if (this.myEditMode === EDITMODE.ADD_FEATURE && this.myDrawMode === DRAWMODE.BOX) {
-        // eslint-disable-next-line consistent-return
-        return this.mouseDoubleClick();
-      }
-      this.somethingWasDragged = DRAGMODE.NONE;
-      if (this.mouseIsOverVertexNr !== VERTEX.NONE && this.myEditMode === EDITMODE.EMPTY) {
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      /* Insert a new vertex into an edge, e.g a line is clicked and a point is added */
-      // eslint-disable-next-line consistent-return
-      if (this.insertVertexInEdge(event) === false) {
-        return false;
-      }
-      /* This checks if a new feature should be created.  */
-      if (this.createNewFeature(event)) {
-        /* Start with mouse move from this mouse down location,  enables sizing the box while moving the mouse */
-        this.mouseMove(event);
-        return false;
-      }
-      /* This is triggered when new points are added during the addmultipoint mode. One point is added per time */
-      if (this.addPointToMultiPointFeature(event) === false) {
-        return false;
-      }
-      /* This is triggered when new points are added during the addpolygon mode. One point is added per time */
-      if (this.addVerticesToPolygonFeature(event) === false) {
-        return false;
-      }
-      /* This is triggered when new points are added to a linestring */
-      if (this.addPointToLineStringFeature(event) === false) {
-        return false;
-      }
-      return false; /* False means that this component will take over entire controll.
-                       True means that it is still possible to pan and drag the map while editing */
-    }
-  }, {
-    key: "deletePolygon",
-    value: function deletePolygon(index) {
-      var deletePolygonCallback = this.props.deletePolygonCallback;
-      var feature = this.getSelectedFeature();
-      if (feature.geometry.type !== 'GeometryCollection') {
-        feature.geometry.coordinates.splice(index, 1);
-        if (deletePolygonCallback) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          deletePolygonCallback();
-        }
-      }
-    }
-  }, {
-    key: "deleteFeature",
-    value: function deleteFeature() {
-      /* Deletes any features under the mousecursor */
-      var _this$props6 = this.props,
-        mapId = _this$props6.mapId,
-        selectedFeatureIndex = _this$props6.selectedFeatureIndex;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      var feature = this.geojson.features[selectedFeatureIndex]; // Not actually necessarily a polygon
-      var polygonIndex =
-      // This allows us to delete nodes even while not hovering them
-      (feature === null || feature === void 0 ? void 0 : feature.geometry.coordinates.length) === 1 ? 0 : this.snappedPolygonIndex;
-      var featureCoords = feature === null || feature === void 0 ? void 0 : feature.geometry.coordinates[polygonIndex];
-      if (featureCoords === undefined) {
-        return;
-      }
-      if (this.mouseIsOverVertexNr !== VERTEX.MIDDLE_POINT_OF_FEATURE && Array.isArray(featureCoords)) {
-        /* Remove edge of polygon */
-        if (featureCoords.length <= 4) {
-          /* Remove the polygon completely if it can not have an area */
-          this.deletePolygon(polygonIndex);
-        } else {
-          var closestCoords = findClosestCoords(convertGeoCoordsToScreenCoords(featureCoords, mapId), this.mouseX, this.mouseY);
-          var newLength = featureCoords.length - closestCoords.length;
-          /* Remove edge of polygon */
-          closestCoords.sort().reverse().forEach(function (index) {
-            featureCoords.splice(index, 1);
-          });
-          if (closestCoords.length > 1) {
-            featureCoords.push(cloneDeep(featureCoords[0]));
-          }
-          this.mouseIsOverVertexNr = newLength - 1;
-        }
-      } else {
-        /* Remove the polygon completely */
-        this.deletePolygon(polygonIndex);
-      }
-      this.featureHasChanged('deleteFeature');
-      webmapjs === null || webmapjs === void 0 || webmapjs.draw('MapDraw::deletefeatures');
-    }
-  }, {
-    key: "mouseUp",
-    value: function mouseUp(event) {
-      var _this$props7 = this.props,
-        isInEditMode = _this$props7.isInEditMode,
-        onClickFeature = _this$props7.onClickFeature,
-        mapId = _this$props7.mapId;
-      if ((event === null || event === void 0 ? void 0 : event.rightButton) === true) {
-        return;
-      }
-      if (onClickFeature) {
-        var mouseX = event.mouseX,
-          mouseY = event.mouseY;
-        var ignoreCoordinateIndexInFeature = true;
-        var result = checkHoverFeatures(this.geojson, mouseX, mouseY, function (coordinates) {
-          return convertGeoCoordsToScreenCoords(coordinates, mapId);
-        }, ignoreCoordinateIndexInFeature);
-        if (result) {
-          var featureEvent = {
-            coordinateIndexInFeature: result.coordinateIndexInFeature,
-            featureIndex: result.featureIndex,
-            mouseX: mouseX,
-            mouseY: mouseY,
-            isInEditMode: isInEditMode,
-            feature: result.feature,
-            screenCoords: _objectSpread2({}, result.screenCoords)
-          };
-          onClickFeature(featureEvent);
-        } else {
-          onClickFeature(null);
-        }
-      }
-      if (isInEditMode === false) {
-        return;
-      }
-      /* Keep the mouse down to drag a box */
-      if (this.myDrawMode === DRAWMODE.BOX && this.myEditMode === EDITMODE.ADD_FEATURE) {
-        this.cancelEdit(false);
-        return false;
-      }
-      if (this.somethingWasDragged !== DRAGMODE.NONE) {
-        this.featureHasChanged("A ".concat(this.somethingWasDragged.toString(), " was dragged"));
-      }
-      /* Delete a vertex or feature on mouseUp */
-      if (this.myEditMode === EDITMODE.DELETE_FEATURES) {
-        this.deleteFeature();
-        return false;
-      }
-      if (this.mouseIsOverVertexNr !== VERTEX.NONE || this.selectedEdge !== EDGE.NONE) {
-        return false;
-      }
-      if (this.myEditMode === EDITMODE.ADD_FEATURE) {
-        return false;
-      }
-    }
-  }, {
-    key: "cancelEdit",
-    value: function cancelEdit(cancelLastPoint) {
-      var _this$props8 = this.props,
-        isInEditMode = _this$props8.isInEditMode,
-        mapId = _this$props8.mapId;
-      if (isInEditMode === false) {
-        return;
-      }
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      /* When in addpolygon mode, finish the polygon */
-      if (this.myEditMode === EDITMODE.ADD_FEATURE) {
-        this.myEditMode = EDITMODE.EMPTY;
-        if (this.drawMode === DRAWMODE.POLYGON || this.drawMode === DRAWMODE.BOX) {
-          if (this.snappedPolygonIndex === SNAPPEDFEATURE.NONE) {
-            return;
-          }
-          var feature = this.getSelectedFeature();
-          var coordinates = feature.geometry.coordinates;
-          var polygon = coordinates[this.snappedPolygonIndex];
-          if (!polygon) {
-            coordinates[this.snappedPolygonIndex] = [];
-            return;
-          }
-          if (polygon.length === 0) {
-            return;
-          }
-          if (!this.checkIfFeatureIsBox(feature)) {
-            if (cancelLastPoint === true) {
-              polygon.pop();
-            }
-            if (polygon.length < 3) {
-              coordinates.pop();
-            }
-          }
-        }
-        if (this.myDrawMode === DRAWMODE.LINESTRING) {
-          var _feature2 = this.getSelectedFeature();
-          var featureCoords = _feature2.geometry.coordinates;
-          featureCoords.pop();
-        }
-        this.featureHasChanged('cancelEdit');
-        webmapjs === null || webmapjs === void 0 || webmapjs.draw('MapDraw::cancelEdit');
-      } else {
-        /* When in deletefeatures mode, remove any vertex under the mousecursor */
-        // eslint-disable-next-line no-lonely-if
-        if (this.myEditMode === EDITMODE.DELETE_FEATURES) {
-          this.deleteFeature();
-        }
-      }
-    }
-  }, {
-    key: "moveVertex",
-    value: function moveVertex(feature, mouseDown) {
-      var geometryType = feature.geometry.type;
-      if (geometryType === 'GeometryCollection') {
-        return undefined;
-      }
-      var featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-      if (geometryType === 'Point' || geometryType === 'MultiPoint' || geometryType === 'LineString') {
-        featureCoords = feature.geometry.coordinates;
-      }
-      if (!featureCoords) {
-        return undefined;
-      }
-      var vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
-      if (vertexSelected || this.myEditMode === EDITMODE.ADD_FEATURE) {
-        if (geometryType === 'LineString') {
-          this.transposeVertex(featureCoords);
-          // eslint-disable-next-line consistent-return
-          return false;
-        }
-        /* In case middle point is selected, transpose whole polygon */
-        if (this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && this.snappedGeoCoords) {
-          this.transposePolygon(featureCoords);
-        } else if (this.mouseIsOverVertexNr !== VERTEX.NONE) {
-          /* Transpose polygon vertex */
-          this.transposeVertex(featureCoords);
-        }
-        // eslint-disable-next-line consistent-return
-        return false;
-      }
-      return undefined;
-    }
-  }, {
-    key: "transposePolygon",
-    value: function transposePolygon(featureCoords) {
-      var incX = this.mouseGeoCoord.x - this.snappedGeoCoords.x;
-      var incY = this.mouseGeoCoord.y - this.snappedGeoCoords.y;
-      this.snappedGeoCoords.x = this.mouseGeoCoord.x;
-      this.snappedGeoCoords.y = this.mouseGeoCoord.y;
-      var _iterator = _createForOfIteratorHelper(featureCoords),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var featureCoord = _step.value;
-          featureCoord[0] += incX;
-          featureCoord[1] += incY;
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      if (this.myEditMode !== EDITMODE.ADD_FEATURE) {
-        this.somethingWasDragged = DRAGMODE.FEATURE;
-      }
-    }
-  }, {
-    key: "transposeVertex",
-    value: function transposeVertex(featureCoords) {
-      if (this.myEditMode !== EDITMODE.ADD_FEATURE) {
-        this.somethingWasDragged = DRAGMODE.VERTEX;
-      }
-      if (this.myDrawMode === DRAWMODE.POINT) {
-        /* eslint-disable-next-line no-param-reassign */
-        featureCoords[0] = this.mouseGeoCoord.x;
-        /* eslint-disable-next-line no-param-reassign */
-        featureCoords[1] = this.mouseGeoCoord.y;
-        return;
-      }
-      if (this.myDrawMode === DRAWMODE.LINESTRING) {
-        // eslint-disable-next-line no-param-reassign
-        featureCoords[this.mouseIsOverVertexNr][0] = this.mouseGeoCoord.x;
-        // eslint-disable-next-line no-param-reassign
-        featureCoords[this.mouseIsOverVertexNr][1] = this.mouseGeoCoord.y;
-        return;
-      }
-      if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
-        if (this.mouseIsOverVertexNr !== SNAPPEDFEATURE.NONE) {
-          // eslint-disable-next-line no-param-reassign
-          featureCoords[this.mouseIsOverVertexNr][0] = this.mouseGeoCoord.x;
-          // eslint-disable-next-line no-param-reassign
-          featureCoords[this.mouseIsOverVertexNr][1] = this.mouseGeoCoord.y;
-        }
-        return;
-      }
-      if (this.myDrawMode === DRAWMODE.BOX && (featureCoords.length === 4 || featureCoords.length === 5)) {
-        while (featureCoords.length < 4) {
-          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-        }
-        if (this.mouseIsOverVertexNr === 0) {
-          featureCoords[0][0] = this.mouseGeoCoord.x;
-          featureCoords[0][1] = this.mouseGeoCoord.y;
-          featureCoords[1][0] = this.mouseGeoCoord.x;
-          featureCoords[3][1] = this.mouseGeoCoord.y;
-        }
-        if (this.mouseIsOverVertexNr === 1) {
-          featureCoords[1][0] = this.mouseGeoCoord.x;
-          featureCoords[1][1] = this.mouseGeoCoord.y;
-          featureCoords[0][0] = this.mouseGeoCoord.x;
-          featureCoords[4][0] = this.mouseGeoCoord.x;
-          featureCoords[2][1] = this.mouseGeoCoord.y;
-        }
-        if (this.mouseIsOverVertexNr === 2) {
-          featureCoords[2][0] = this.mouseGeoCoord.x;
-          featureCoords[2][1] = this.mouseGeoCoord.y;
-          featureCoords[1][1] = this.mouseGeoCoord.y;
-          featureCoords[3][0] = this.mouseGeoCoord.x;
-        }
-        if (this.mouseIsOverVertexNr === 3) {
-          featureCoords[3][0] = this.mouseGeoCoord.x;
-          featureCoords[3][1] = this.mouseGeoCoord.y;
-          featureCoords[0][1] = this.mouseGeoCoord.y;
-          featureCoords[4][1] = this.mouseGeoCoord.y;
-          featureCoords[2][0] = this.mouseGeoCoord.x;
-        }
-        /* Ensure the box square shape */
-        /* A: Left edge should be vertical */
-        var _featureCoords8 = _slicedToArray(featureCoords, 4),
-          _featureCoords8$ = _slicedToArray(_featureCoords8[0], 2),
-          featureCoord0X = _featureCoords8$[0],
-          featureCoord0Y = _featureCoords8$[1],
-          _featureCoords8$2 = _slicedToArray(_featureCoords8[1], 1),
-          featureCoord1X = _featureCoords8$2[0],
-          _featureCoords8$3 = _slicedToArray(_featureCoords8[2], 2),
-          featureCoord2X = _featureCoords8$3[0],
-          featureCoord2Y = _featureCoords8$3[1],
-          _featureCoords8$4 = _slicedToArray(_featureCoords8[3], 2),
-          featureCoord3Y = _featureCoords8$4[1];
-        featureCoords[0][0] = featureCoord1X;
-        /* B: Top edge should be horizontal */
-        featureCoords[0][1] = featureCoord3Y;
-        /* C: Right edge should be vertical */
-        featureCoords[3][0] = featureCoord2X;
-        /* D: Bottom Edge should be horizontal */
-        featureCoords[1][1] = featureCoord2Y;
-        /* Close the box: Last point (point 5 of the box) should have the same coordinates as the starting point */
-        featureCoords[4][0] = featureCoord0X;
-        featureCoords[4][1] = featureCoord0Y;
-      }
-      if (this.myDrawMode === DRAWMODE.POLYGON) {
-        featureCoords[this.mouseIsOverVertexNr][0] = this.mouseGeoCoord.x;
-        featureCoords[this.mouseIsOverVertexNr][1] = this.mouseGeoCoord.y;
-        /* Transpose begin and end vertice */
-        if (this.mouseIsOverVertexNr === 0) {
-          featureCoords[featureCoords.length - 1][0] = this.mouseGeoCoord.x;
-          featureCoords[featureCoords.length - 1][1] = this.mouseGeoCoord.y;
-        }
-      }
-    }
-  }, {
-    key: "componentCleanup",
-    value: function componentCleanup() {
-      // this will hold the cleanup code
-      document.removeEventListener('keydown', this.handleKeyDown);
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (webmapjs !== undefined && this.listenersInitialized === true) {
-        this.listenersInitialized = undefined;
-        webmapjs.removeListener('beforecanvasdisplay', this.beforeDraw);
-        webmapjs.removeListener('beforemousemove', this.mouseMove);
-        webmapjs.removeListener('beforemousedown', this.mouseDown);
-        webmapjs.removeListener('beforemouseup', this.mouseUp);
-        webmapjs.draw();
-      }
-    }
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "initializeFeature",
-    value: function initializeFeature(feature) {
-      if (!feature.properties) {
-        feature.properties = {};
-      }
-      if (!feature.geometry) {
-        feature.geometry = {};
-      }
-      if (!feature.type) {
-        feature.type = 'Feature';
-      }
-      if (feature.geometry.type !== 'GeometryCollection' && !feature.geometry.coordinates) {
-        feature.geometry.coordinates = [];
-      }
-    }
-  }, {
-    key: "validatePolys",
-    value: function validatePolys(fixPolys) {
-      var _this$geojson2;
-      if (!((_this$geojson2 = this.geojson) !== null && _this$geojson2 !== void 0 && (_this$geojson2 = _this$geojson2.features) !== null && _this$geojson2 !== void 0 && _this$geojson2.length)) {
-        return;
-      }
-      var _iterator2 = _createForOfIteratorHelper(this.geojson.features),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var geoJsonFeature = _step2.value;
-          var feature = geoJsonFeature;
-          this.initializeFeature(feature);
-          var featureType = feature.geometry.type;
-          if (featureType === 'Polygon') {
-            /* Loop through all polygons of the same feature */
-            var polygonGeometry = feature.geometry;
-            var _iterator3 = _createForOfIteratorHelper(polygonGeometry.coordinates),
-              _step3;
-            try {
-              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                var polyCoordinates = _step3.value;
-                var featureCoords = polyCoordinates;
-                /* Sort clockwise */
-                if (fixPolys) {
-                  if (this.checkIfFeatureIsBox(feature)) {
-                    // A box should have:
-                    // - topleft index 0 and 4
-                    // - bottomleft index 1
-                    // - bottomright index 2
-                    // - topright index 3
-                    // This represents counter-clockwise ordering and represents an area (https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.6)
-                    // Make sure the coordinate order in a box is always the same
-                    var boxCoords = feature.geometry.coordinates[0];
-                    if (boxCoords.length === 5) {
-                      // Copy the first four coordinates and sort them according Y and then X
-                      var sortedYthenX = boxCoords.slice(0, 4).sort(function (a, b) {
-                        return b[1] - a[1]; // Sort on Y
-                      }).sort(function (a, b) {
-                        return a[0] - b[0]; // Sort on X
-                      });
-                      // Assign the ordered coordinates back to the geometry of the feature
-                      feature.geometry.coordinates[0] = [_toConsumableArray(sortedYthenX[0]), _toConsumableArray(sortedYthenX[1]), _toConsumableArray(sortedYthenX[3]), _toConsumableArray(sortedYthenX[2]), _toConsumableArray(sortedYthenX[0])];
-                    }
-                  } else {
-                    var checkClockwiseOrder = function checkClockwiseOrder(featureCoordinates) {
-                      var sum = 0;
-                      for (var j = 0; j < featureCoordinates.length - 1; j += 1) {
-                        var currentPoint = featureCoordinates[j];
-                        var nextPoint = featureCoordinates[(j + 1) % featureCoordinates.length];
-                        sum += (nextPoint[0] - currentPoint[0]) * (nextPoint[1] + currentPoint[1]);
-                      }
-                      return sum;
-                    };
-                    var sum = checkClockwiseOrder(featureCoords);
-                    if (sum < 0) {
-                      featureCoords = featureCoords.reverse();
-                      /* The lastly selected vertex is now aways the second in the array */
-                      if (this.mouseIsOverVertexNr !== VERTEX.NONE && this.mouseIsOverVertexNr !== VERTEX.MIDDLE_POINT_OF_FEATURE) {
-                        this.mouseIsOverVertexNr = 1;
-                      }
-                    }
-                  }
-                }
-              }
-            } catch (err) {
-              _iterator3.e(err);
-            } finally {
-              _iterator3.f();
-            }
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  }, {
-    key: "beforeDraw",
-    value: function beforeDraw(ctx) {
-      var _this$geojson3,
-        _this4 = this;
-      /* beforeDraw is an event callback function which is triggered
-       just before viewer will flip the back canvas buffer to the front.
-       You are free to draw anything you like on the canvas.
-      */
-      var _this$props9 = this.props,
-        selectedFeatureIndex = _this$props9.selectedFeatureIndex,
-        isInEditMode = _this$props9.isInEditMode,
-        mapId = _this$props9.mapId,
-        linkedFeatures = _this$props9.linkedFeatures;
-      if (!((_this$geojson3 = this.geojson) !== null && _this$geojson3 !== void 0 && (_this$geojson3 = _this$geojson3.features) !== null && _this$geojson3 !== void 0 && _this$geojson3.length)) {
-        return;
-      }
-      this.textPositions = [];
-      this.mouseOverPolygonCoordinates = [];
-      this.mouseOverPolygonFeatureIndex = -1;
-      var drawFeatureGeometry = function drawFeatureGeometry(feature, featureIndex) {
-        var geometry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : feature.geometry;
-        if (geometry.type === 'GeometryCollection') {
-          var _iterator4 = _createForOfIteratorHelper(geometry.geometries),
-            _step4;
-          try {
-            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              var geom = _step4.value;
-              drawFeatureGeometry(feature, featureIndex, geom);
-            }
-          } catch (err) {
-            _iterator4.e(err);
-          } finally {
-            _iterator4.f();
-          }
-        }
-        if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
-          var coordinates = geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates;
-          var XYCoords = getPixelCoordFromGeoCoord(coordinates, mapId);
-          if (XYCoords.length === 0) {
-            return;
-          }
-          for (var j = 0; j < XYCoords.length; j += 1) {
-            _this4.drawPoint(ctx, XYCoords[j], _this4.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
-          }
-        }
-        if (geometry.type === 'MultiPolygon') {
-          var totalMiddle = {
-            x: 0,
-            y: 0,
-            nr: 0
-          };
-          var _iterator5 = _createForOfIteratorHelper(geometry.coordinates),
-            _step5;
-          try {
-            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-              var multiPoly = _step5.value;
-              for (var polygonIndex = 0; polygonIndex < multiPoly.length; polygonIndex += 1) {
-                var ringCoordinates = multiPoly[polygonIndex];
-                var _XYCoords4 = getPixelCoordFromGeoCoord(ringCoordinates, mapId);
-                /* Only draw if there is stuff to show */
-                if (_XYCoords4.length === 0) {
-                  // eslint-disable-next-line no-continue
-                  continue;
-                }
-                var middle = _this4.drawPolygon(ctx, _XYCoords4, featureIndex, polygonIndex);
-                if (middle) {
-                  totalMiddle.x += middle.x * middle.nr;
-                  totalMiddle.y += middle.y * middle.nr;
-                  totalMiddle.nr += middle.nr;
-                }
-                if (isInEditMode) {
-                  /* Draw all vertices on the edges of the polygons */
-                  for (var _j2 = 0; _j2 < _XYCoords4.length; _j2 += 1) {
-                    _this4.drawVertice(ctx, _XYCoords4[_j2], _this4.snappedPolygonIndex === polygonIndex && _this4.mouseIsOverVertexNr === _j2 && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
-                  }
-                  if (middle && isInEditMode === true && _XYCoords4.length >= 3) {
-                    /* Draw middle vertice for the poly if poly covers an area, e.g. when it contains more than three points */
-                    _this4.drawVertice(ctx, middle, _this4.snappedPolygonIndex === polygonIndex && _this4.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && selectedFeatureIndex === featureIndex, true, isInEditMode && selectedFeatureIndex === featureIndex);
-                  }
-                }
-              }
-            }
-          } catch (err) {
-            _iterator5.e(err);
-          } finally {
-            _iterator5.f();
-          }
-          if (totalMiddle.nr > 0) {
-            var _feature$properties;
-            var mx = totalMiddle.x / totalMiddle.nr;
-            var my = totalMiddle.y / totalMiddle.nr;
-            if ((_feature$properties = feature.properties) !== null && _feature$properties !== void 0 && _feature$properties.text) {
-              _this4.textPositions.push({
-                x: mx,
-                y: my,
-                text: feature.properties.text
-              });
-            }
-          }
-        }
-        if (geometry.type === 'Polygon') {
-          /* Loop through all rings of the same polygon */
-          for (var _polygonIndex2 = 0; _polygonIndex2 < geometry.coordinates.length; _polygonIndex2 += 1) {
-            var _feature$properties2;
-            var featureCoords = geometry.coordinates[_polygonIndex2];
-            var _XYCoords5 = getPixelCoordFromGeoCoord(featureCoords, mapId);
-            /* Only draw if there is stuff to show */
-            if (_XYCoords5.length === 0) {
-              // eslint-disable-next-line no-continue
-              continue;
-            }
-            var _middle = _this4.drawPolygon(ctx, _XYCoords5, featureIndex, _polygonIndex2);
-            if (_middle && (_feature$properties2 = feature.properties) !== null && _feature$properties2 !== void 0 && _feature$properties2.text) {
-              _this4.textPositions.push({
-                x: _middle.x,
-                y: _middle.y,
-                text: feature.properties.text
-              });
-            }
-            if (isInEditMode) {
-              /* Draw all vertices on the edges of the polygons */
-              for (var _j3 = 0; _j3 < _XYCoords5.length; _j3 += 1) {
-                _this4.drawVertice(ctx, _XYCoords5[_j3], _this4.snappedPolygonIndex === _polygonIndex2 && _this4.mouseIsOverVertexNr === _j3 && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
-                // Enable the following to debug vertice numbers in the screen
-                // ctx.font = '20px Arial';
-                // ctx.fillText(j, XYCoords[j].x - 10, XYCoords[j].y - 10);
-              }
-              if (_middle && isInEditMode === true && _XYCoords5.length >= 3) {
-                /* Draw middle vertice for the poly if poly covers an area, e.g. when it contains more than three points */
-                _this4.drawVertice(ctx, _middle, _this4.snappedPolygonIndex === _polygonIndex2 && _this4.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && selectedFeatureIndex === featureIndex, true, isInEditMode && selectedFeatureIndex === featureIndex);
-              }
-            }
-          }
-        }
-        if (geometry.type === 'LineString') {
-          var _feature$properties3;
-          /* Loop through all line pints of the same feature */
-          var _featureCoords9 = geometry.coordinates;
-          if (!_featureCoords9 || !_featureCoords9.length) {
-            return;
-          }
-          var _XYCoords6 = getPixelCoordFromGeoCoord(_featureCoords9, mapId);
-          /* Only draw if there is stuff to show */
-          if (_XYCoords6.length === 0) {
-            return;
-          }
-          var _middle2 = _this4.drawLine(ctx, _XYCoords6, featureIndex, 0);
-          if (_middle2 && (_feature$properties3 = feature.properties) !== null && _feature$properties3 !== void 0 && _feature$properties3.text) {
-            _this4.textPositions.push({
-              x: _middle2.x,
-              y: _middle2.y,
-              text: feature.properties.text
-            });
-          }
-          if (isInEditMode) {
-            /* Draw all vertices on the edges of the polygons */
-            for (var _j4 = 0; _j4 < _XYCoords6.length; _j4 += 1) {
-              _this4.drawVertice(ctx, _XYCoords6[_j4], _this4.mouseIsOverVertexNr === _j4 && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
-            }
-          }
-        }
-      };
-      /* Draw all features */
-      for (var featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
-        var feature = this.geojson.features[featureIndex];
-        /* Do not draw selected feature here, should be done last */
-        if (featureIndex !== selectedFeatureIndex) {
-          drawFeatureGeometry(feature, featureIndex);
-        }
-      }
-      /* Draw selected feature to display it on top */
-      drawFeatureGeometry(this.getSelectedFeature(), selectedFeatureIndex);
-      /* Highlight polygon with mousehover */
-      if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === selectedFeatureIndex && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE || linkedFeatures !== null && linkedFeatures !== void 0 && linkedFeatures.features && linkedFeatures.features.length > 0) {
-        var _feature3$properties;
-        var _feature3 = this.getSelectedFeature();
-        var isLinkedFeature = linkedFeatures === null || linkedFeatures === void 0 ? void 0 : linkedFeatures.features.some(function (linkedFeature) {
-          return linkedFeature.id === _feature3.id;
-        });
-        var shouldHighlight = isLinkedFeature && ((_feature3$properties = _feature3.properties) === null || _feature3$properties === void 0 ? void 0 : _feature3$properties.selectionType) !== 'fir';
-        if (shouldHighlight && this.mouseOverPolygonCoordinates.length >= 2) {
-          var featureProperties = _feature3.properties;
-          ctx.beginPath();
-          ctx.moveTo(this.mouseOverPolygonCoordinates[0].x, this.mouseOverPolygonCoordinates[0].y);
-          for (var j = 1; j < this.mouseOverPolygonCoordinates.length; j += 1) {
-            var coord = this.mouseOverPolygonCoordinates[j];
-            ctx.lineTo(coord.x, coord.y);
-          }
-          var fillOpacity = featureProperties && featureProperties['fill-opacity'] || defaultGeoJSONStyleProperties && defaultGeoJSONStyleProperties['fill-opacity'];
-          ctx.closePath();
-          ctx.strokeStyle = (featureProperties === null || featureProperties === void 0 ? void 0 : featureProperties.stroke) || (defaultGeoJSONStyleProperties === null || defaultGeoJSONStyleProperties === void 0 ? void 0 : defaultGeoJSONStyleProperties.stroke);
-          ctx.lineWidth = defaultGeoJSONStyleProperties && defaultGeoJSONStyleProperties['stroke-width'];
-          ctx.fillStyle = (featureProperties === null || featureProperties === void 0 ? void 0 : featureProperties.fill) || (defaultGeoJSONStyleProperties === null || defaultGeoJSONStyleProperties === void 0 ? void 0 : defaultGeoJSONStyleProperties.fill);
-          ctx.globalAlpha = Number(fillOpacity) + 0.2; // Fill gets +0.2 opacity on hover
-          ctx.fill();
-          ctx.globalAlpha = defaultGeoJSONStyleProperties && defaultGeoJSONStyleProperties['stroke-opacity'];
-          ctx.stroke();
-        }
-      }
-      /* Draw labels */
-      var _iterator6 = _createForOfIteratorHelper(this.textPositions),
-        _step6;
-      try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          var textPosition = _step6.value;
-          var x = textPosition.x,
-            y = textPosition.y,
-            text = textPosition.text;
-          ctx.fillStyle = 'black';
-          ctx.font = '12px Arial';
-          ctx.fillText(text, x, y);
-        }
-        /* Draw hovered feature */
-      } catch (err) {
-        _iterator6.e(err);
-      } finally {
-        _iterator6.f();
-      }
-      if (this.featureEvent) {
-        var _feature4$properties;
-        var _this$featureEvent = this.featureEvent,
-          _feature4 = _this$featureEvent.feature,
-          _featureIndex = _this$featureEvent.featureIndex,
-          screenCoords = _this$featureEvent.screenCoords;
-        var drawFunctionId = _feature4 === null || _feature4 === void 0 || (_feature4$properties = _feature4.properties) === null || _feature4$properties === void 0 ? void 0 : _feature4$properties.hoverDrawFunctionId;
-        var drawFunction = getDrawFunctionFromStore(drawFunctionId);
-        if (drawFunction) {
-          drawFunction({
-            context: ctx,
-            featureIndex: _featureIndex,
-            isInEditMode: isInEditMode,
-            feature: _feature4,
-            isHovered: true,
-            coord: screenCoords,
-            selected: _featureIndex === selectedFeatureIndex,
-            mouseX: 0,
-            mouseY: 0
-          });
-        }
-      }
-    }
-    /* Checks if mouse is in proximity of given coordinate */
-  }, {
-    key: "checkDist",
-    value: function checkDist(coord, polygonIndex, mouseX, mouseY) {
-      var VERTEX = distance(coord, {
-        x: mouseX,
-        y: mouseY
-      });
-      if (VERTEX < 10) {
-        this.snappedGeoCoords = _objectSpread2({}, this.mouseGeoCoord);
-        this.snappedPolygonIndex = polygonIndex;
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "hoverEdge",
-    value: function hoverEdge(geometry, mouseX, mouseY) {
-      var mapId = this.props.mapId;
-      var geometryType = geometry.type;
-      if (geometryType === 'GeometryCollection') {
-        return {
-          selectedEdge: EDGE.NONE,
-          snappedPolygonIndex: SNAPPEDFEATURE.NONE
-        };
-      }
-      if (geometryType === 'Polygon') {
-        for (var polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-          var featureCoords = geometry.coordinates[polygonIndex];
-          if (featureCoords === undefined) {
-            // eslint-disable-next-line no-continue
-            continue;
-          }
-          /* Get all vertexes */
-          var XYCoords = convertGeoCoordsToScreenCoords(featureCoords, mapId);
-          for (var j = 0; j < XYCoords.length; j += 1) {
-            var startV = XYCoords[j];
-            var stopV = XYCoords[(j + 1) % XYCoords.length];
-            if (isBetween(startV, {
-              x: mouseX,
-              y: mouseY
-            }, stopV)) {
-              return {
-                selectedEdge: j,
-                snappedPolygonIndex: polygonIndex
-              };
-            }
-          }
-        }
-        return {
-          selectedEdge: EDGE.NONE,
-          snappedPolygonIndex: SNAPPEDFEATURE.NONE
-        };
-      }
-      if (geometryType === 'LineString') {
-        var _featureCoords10 = geometry.coordinates;
-        if (_featureCoords10 === undefined) {
-          return {
-            selectedEdge: EDGE.NONE,
-            snappedPolygonIndex: SNAPPEDFEATURE.NONE
-          };
-        }
-        /* Get all vertexes */
-        var _XYCoords7 = convertGeoCoordsToScreenCoords(_featureCoords10, mapId);
-        for (var _j5 = 0; _j5 < _XYCoords7.length - 1; _j5 += 1) {
-          var _startV = _XYCoords7[_j5];
-          var _stopV = _XYCoords7[(_j5 + 1) % _XYCoords7.length];
-          if (isBetween(_startV, {
-            x: mouseX,
-            y: mouseY
-          }, _stopV)) {
-            return {
-              selectedEdge: _j5,
-              snappedPolygonIndex: 0
-            };
-          }
-        }
-        return {
-          selectedEdge: EDGE.NONE,
-          snappedPolygonIndex: SNAPPEDFEATURE.NONE
-        };
-      }
-      return {
-        selectedEdge: EDGE.NONE,
-        snappedPolygonIndex: SNAPPEDFEATURE.NONE
-      };
-    }
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "drawVertice",
-    value: function drawVertice(ctx, _coord, selected, middle, isInEditMode) {
-      var w = 7;
-      var coord = {
-        x: parseInt(_coord.x, 10),
-        y: parseInt(_coord.y, 10)
-      };
-      if (isInEditMode === false) {
-        return;
-      }
-      if (selected === false) {
-        if (middle === true) {
-          /* Style for middle editable vertice */
-          ctx.strokeStyle = '#000';
-          ctx.fillStyle = '#D87502';
-          ctx.lineWidth = 1.0;
-        } else {
-          /* Style for standard editable vertice */
-          ctx.strokeStyle = '#000';
-          ctx.fillStyle = colors.vertice;
-          ctx.lineWidth = 1.0;
-        }
-      } else {
-        /* Style for selected editable vertice */
-        ctx.strokeStyle = '#000';
-        ctx.fillStyle = '#FF0';
-        ctx.lineWidth = 1.0;
-        w = 11;
-      }
-      ctx.globalAlpha = 1.0;
-      ctx.fillRect(coord.x - w / 2, coord.y - w / 2, w, w);
-      ctx.strokeRect(coord.x - w / 2, coord.y - w / 2, w, w);
-      if (isInEditMode) {
-        ctx.strokeRect(coord.x - 0.5, coord.y - 0.5, 1, 1);
-      }
-    }
-  }, {
-    key: "drawPoint",
-    value: function drawPoint(ctx, _coord, selected, middle, isInEditMode, feature, featureIndex) {
-      var featureProperties = feature.properties;
-      if (featureProperties !== null && featureProperties !== void 0 && featureProperties.imageURL) {
-        this.drawIcon(ctx, _coord, featureProperties);
-      }
-      var drawStyledMarker = featureProperties ? featureProperties.stroke || featureProperties['stroke-width'] || featureProperties.fill : null;
-      var drawMarkerByDefault = !featureProperties || !featureProperties.imageURL || !featureProperties.drawFunctionId;
-      if (featureProperties.drawFunctionId) {
-        var drawFunction = getDrawFunctionFromStore(featureProperties.drawFunctionId);
-        if (drawFunction) {
-          var isHovered = this.featureEvent && this.featureEvent.feature === feature;
-          drawFunction({
-            context: ctx,
-            featureIndex: featureIndex,
-            coord: _coord,
-            selected: selected,
-            isInEditMode: isInEditMode,
-            feature: feature,
-            mouseX: this.mouseX,
-            mouseY: this.mouseY,
-            isHovered: isHovered
-          });
-        }
-      } else if (drawStyledMarker || drawMarkerByDefault) {
-        this.drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties);
-      }
-    }
-  }, {
-    key: "drawIcon",
-    value: function drawIcon(ctx, _coord, featureProperties) {
-      var mapId = this.props.mapId;
-      var webmapjs = webmapUtils.getWMJSMapById(mapId);
-      if (!webmapjs) {
-        return undefined;
-      }
-      var image = webmapjs === null || webmapjs === void 0 ? void 0 : webmapjs.getMapImageStore.getImage(featureProperties.imageURL);
-      if (image.isLoaded() === false && image.hasError() === false && image.isLoading() === false) {
-        image.load();
-        /* After the image is loaded the canvas will be redrawn and drawIcon will be triggered again
-        via the beforecanvasdisplay listener. */
-        return undefined;
-      }
-      if (image.isLoaded()) {
-        var imageWidth = featureProperties && featureProperties.imageWidth || this.defaultIconProps.imageWidth;
-        var imageHeight = featureProperties && featureProperties.imageHeight || this.defaultIconProps.imageHeight;
-        ctx.drawImage(image.getElement(), parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
-        if (featureProperties.imageBorderWidth && featureProperties.imageBorderWidth > 0) {
-          ctx.lineWidth = featureProperties.imageBorderWidth;
-          ctx.strokeRect(parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
-        }
-      }
-      return undefined;
-    }
-  }, {
-    key: "drawMarker",
-    value: function drawMarker(ctx, _coord, selected, middle, isInEditMode, featureProperties) {
-      var strokeStyle = featureProperties && featureProperties.stroke || this.defaultPolyProps.stroke;
-      var lineWidth = featureProperties && featureProperties['stroke-width'] || this.defaultPolyProps['stroke-width'];
-      var fillStyle = featureProperties && featureProperties.fill || this.defaultPolyProps.fill;
-      if (isInEditMode === false) {
-        /* Standard style, no editing, just display location of vertices */
-        ctx.strokeStyle = strokeStyle;
-        ctx.fillStyle = fillStyle;
-        ctx.lineWidth = lineWidth;
-      } else if (selected === false) {
-        /* Style for standard editable vertice */
-        ctx.strokeStyle = '#000';
-        ctx.fillStyle = colors.main;
-        ctx.lineWidth = 1.0;
-      } else {
-        /* Style for selected editable vertice */
-        ctx.strokeStyle = '#000';
-        ctx.fillStyle = '#FF0';
-        ctx.lineWidth = 1.0;
-      }
-      var coord = {
-        x: parseInt(_coord.x, 10),
-        y: parseInt(_coord.y, 10)
-      };
-      ctx.globalAlpha = 1.0;
-      ctx.beginPath();
-      var topRadius = 9;
-      var topHeight = 2.5 * topRadius;
-      ctx.arc(coord.x, coord.y - topHeight, topRadius, Math.PI, Math.PI * 2);
-      ctx.bezierCurveTo(coord.x + topRadius, coord.y - topHeight, coord.x + topRadius / 1.6, coord.y - topRadius, coord.x, coord.y);
-      ctx.bezierCurveTo(coord.x, coord.y, coord.x - topRadius / 1.6, coord.y - topRadius, coord.x - topRadius, coord.y - topHeight);
-      ctx.stroke();
-      ctx.fill();
-      /* Fill center circle */
-      ctx.fillStyle = '#FFF';
-      ctx.beginPath();
-      ctx.arc(coord.x, coord.y - topHeight, topRadius / 2, Math.PI * 2, 0);
-      ctx.fill();
-      /* Fill marker exact location */
-      ctx.fillStyle = '#000';
-      ctx.beginPath();
-      ctx.arc(coord.x, coord.y, 2, Math.PI * 2, 0);
-      ctx.fill();
-    }
-  }, {
-    key: "drawLine",
-    value: function drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
-      var _this$props10 = this.props,
-        isInEditMode = _this$props10.isInEditMode,
-        selectedFeatureIndex = _this$props10.selectedFeatureIndex;
-      var feature = this.geojson.features[featureIndex];
-      if (!(feature !== null && feature !== void 0 && feature.geometry)) {
-        return;
-      }
-      if (feature.geometry.type !== 'LineString') {
-        return;
-      }
-      var lineProps = feature.properties;
-      if (!lineProps) {
-        lineProps = this.defaultLineStringProps;
-      }
-      /* Draw polygons and calculate center of poly */
-      var middle = {
-        x: 0,
-        y: 0,
-        nr: 0
-      };
-      ctx.beginPath();
-      ctx.strokeStyle = lineProps.stroke || this.defaultLineStringProps.stroke;
-      ctx.lineWidth = lineProps['stroke-width'] || this.defaultLineStringProps['stroke-width'];
-      ctx.fillStyle = lineProps.fill || this.defaultLineStringProps.fill;
-      var startCoord = XYCoords[0];
-      ctx.moveTo(startCoord.x, startCoord.y);
-      middle.x += startCoord.x;
-      middle.y += startCoord.y;
-      for (var j = 1; j < XYCoords.length; j += 1) {
-        var coord = XYCoords[j];
-        ctx.lineTo(coord.x, coord.y);
-        if (j < XYCoords.length - 1) {
-          middle.x += coord.x;
-          middle.y += coord.y;
-        }
-      }
-      ctx.globalAlpha = lineProps['fill-opacity'] || this.defaultLineStringProps['fill-opacity'];
-      if (lineProps['fill-opacity'] === 0) {
-        ctx.globalAlpha = 0;
-      }
-      // ctx.fill();
-      ctx.globalAlpha = lineProps['stroke-opacity'] || this.defaultLineStringProps['stroke-opacity'];
-      ctx.stroke();
-      // let test = ctx.isPointInPath(this.mouseX, this.mouseY);
-      // if (test) {
-      this.mouseOverPolygonCoordinates = 0;
-      this.mouseOverPolygonFeatureIndex = 0;
-      // }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      middle.x = parseInt(middle.x / (XYCoords.length - 1), 10);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      middle.y = parseInt(middle.y / (XYCoords.length - 1), 10);
-      if (isInEditMode === true && this.snappedPolygonIndex === lineStringIndex && this.selectedEdge !== EDGE.NONE && selectedFeatureIndex === featureIndex) {
-        /* Higlight selected edge of a LineString, previousely detected by mouseover event */
-        ctx.beginPath();
-        ctx.strokeStyle = '#FF0';
-        ctx.lineWidth = 5;
-        ctx.moveTo(XYCoords[this.selectedEdge].x, XYCoords[this.selectedEdge].y);
-        ctx.lineTo(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        XYCoords[(this.selectedEdge + 1) % XYCoords.length].x,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        XYCoords[(this.selectedEdge + 1) % XYCoords.length].y);
-        ctx.stroke();
-      }
-      middle.nr = XYCoords.length - 1;
-      return middle;
-    }
-  }, {
-    key: "drawPolygon",
-    value: function drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
-      var _this$props11 = this.props,
-        isInEditMode = _this$props11.isInEditMode,
-        selectedFeatureIndex = _this$props11.selectedFeatureIndex;
-      var feature = this.geojson.features[featureIndex];
-      if (!(feature !== null && feature !== void 0 && feature.geometry) || XYCoords.length === 0) {
-        return;
-      }
-      var polyProps = feature.properties;
-      if (!polyProps) {
-        polyProps = this.defaultPolyProps;
-      }
-      /* Draw polygons and calculate center of poly */
-      var middle = {
-        x: 0,
-        y: 0,
-        nr: 0
-      };
-      ctx.beginPath();
-      ctx.strokeStyle = polyProps.stroke || this.defaultPolyProps.stroke;
-      ctx.lineWidth = polyProps['stroke-width'] || this.defaultPolyProps['stroke-width'];
-      ctx.fillStyle = polyProps.fill || this.defaultPolyProps.fill;
-      var startCoord = XYCoords[0];
-      ctx.moveTo(startCoord.x, startCoord.y);
-      middle.x += startCoord.x;
-      middle.y += startCoord.y;
-      for (var j = 1; j < XYCoords.length; j += 1) {
-        var coord = XYCoords[j];
-        ctx.lineTo(coord.x, coord.y);
-        if (j < XYCoords.length - 1) {
-          middle.x += coord.x;
-          middle.y += coord.y;
-        }
-      }
-      ctx.closePath();
-      ctx.globalAlpha = polyProps['fill-opacity'] || this.defaultPolyProps['fill-opacity'];
-      if (polyProps['fill-opacity'] === 0) {
-        ctx.globalAlpha = 0;
-      }
-      ctx.fill();
-      ctx.globalAlpha = polyProps['stroke-opacity'] || this.defaultPolyProps['stroke-opacity'];
-      ctx.stroke();
-      var test = ctx.isPointInPath(this.mouseX, this.mouseY);
-      if (test) {
-        this.mouseOverPolygonCoordinates = XYCoords;
-        this.mouseOverPolygonFeatureIndex = featureIndex;
-      }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      middle.x = parseInt(middle.x / (XYCoords.length - 1), 10);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      middle.y = parseInt(middle.y / (XYCoords.length - 1), 10);
-      if (isInEditMode === true && this.snappedPolygonIndex === polygonIndex && this.selectedEdge !== EDGE.NONE && selectedFeatureIndex === featureIndex) {
-        /* Higlight selected edge of a polygon, previousely detected by mouseover event */
-        ctx.strokeStyle = '#FF0';
-        ctx.lineWidth = 5;
-        ctx.beginPath();
-        ctx.moveTo(XYCoords[this.selectedEdge].x, XYCoords[this.selectedEdge].y);
-        ctx.lineTo(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        XYCoords[(this.selectedEdge + 1) % XYCoords.length].x,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        XYCoords[(this.selectedEdge + 1) % XYCoords.length].y);
-        ctx.stroke();
-      }
-      middle.nr = XYCoords.length - 1;
-      return middle;
-    }
-  }, {
-    key: "initializeFeatureCoordinates",
-    value: function initializeFeatureCoordinates(feature, type) {
-      this.initializeFeature(feature);
-      // eslint-disable-next-line no-underscore-dangle
-      if (feature.properties._type) {
-        delete feature.properties._type;
-      }
-      // eslint-disable-next-line default-case
-      switch (type) {
-        case DRAWMODE.POINT:
-          feature.geometry.type = 'Point';
-          break;
-        case DRAWMODE.MULTIPOINT:
-          feature.geometry.type = 'MultiPoint';
-          break;
-        case DRAWMODE.BOX:
-          feature.geometry.type = 'Polygon';
-          feature.properties._type = 'box';
-          break;
-        case DRAWMODE.POLYGON:
-          feature.geometry.type = 'Polygon';
-          break;
-        case DRAWMODE.LINESTRING:
-          feature.geometry.type = 'LineString';
-          break;
-      }
-      // eslint-disable-next-line default-case
-      switch (feature.geometry.type) {
-        case 'MultiPoint':
-          if (feature.geometry.coordinates.length === 0) {
-            feature.geometry.coordinates.push([]);
-          }
-          break;
-        case 'Polygon':
-          if (feature.properties._type !== 'box' && feature.geometry.coordinates.length === 0) {
-            feature.geometry.coordinates.push([]);
-          }
-          break;
-        case 'LineString':
-          if (feature.geometry.coordinates.length === 0) {
-            feature.geometry.coordinates.push([]);
-          }
-          break;
-      }
-      return feature;
-    }
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "checkIfFeatureIsBox",
-    value: function checkIfFeatureIsBox(feature) {
-      var _feature$properties4;
-      if (!(feature !== null && feature !== void 0 && (_feature$properties4 = feature.properties) !== null && _feature$properties4 !== void 0 && _feature$properties4._type)) {
-        return false;
-      }
-      return feature.properties._type === 'box';
-    }
-  }, {
-    key: "featureHasChanged",
-    value: function featureHasChanged(text) {
-      var updateGeojson = this.props.updateGeojson;
-      if (text !== NEW_FEATURE_CREATED) {
-        this.validatePolys(text === 'cancelEdit');
-      }
-      if (updateGeojson && this.geojson) {
-        updateGeojson(cloneDeep(this.geojson), text);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return jsx("div", {});
-    }
-  }]);
-}(React.PureComponent); // eslint-disable-next-line react/static-property-placement
-MapDraw.defaultProps = {
-  isInEditMode: false,
-  isInDeleteMode: false,
-  webmapjs: undefined,
-  selectedFeatureIndex: 0
-};
-
-var MapDrawContainer = function MapDrawContainer(_ref) {
-  var featureLayers = _ref.featureLayers,
-    linkedFeatures = _ref.linkedFeatures,
-    mapId = _ref.mapId;
-  return jsx(Fragment, {
-    children: featureLayers.map(function (layer) {
-      return jsx("div", {
-        "data-testid": "featureLayer-".concat(layer.id),
-        style: {
-          display: 'none'
-        },
-        children: jsx(MapDraw, {
-          geojson: layer.geojson,
-          linkedFeatures: linkedFeatures,
-          isInEditMode: layer.isInEditMode,
-          isInDeleteMode: layer.isInDeleteMode,
-          drawMode: layer.drawMode,
-          mapId: mapId,
-          onHoverFeature: function onHoverFeature(hoverInfo) {
-            if (layer.onHoverFeature) {
-              layer.onHoverFeature(hoverInfo);
-            }
-          },
-          onClickFeature: function onClickFeature(hoverInfo) {
-            if (layer.onClickFeature) {
-              layer.onClickFeature(hoverInfo);
-            }
-          },
-          updateGeojson: function updateGeojson(geojson, reason) {
-            if (layer.updateGeojson) {
-              layer.updateGeojson(geojson, reason);
-            }
-          },
-          exitDrawModeCallback: function exitDrawModeCallback(reason, newGeoJSON) {
-            if (layer.exitDrawModeCallback) {
-              layer.exitDrawModeCallback(reason, newGeoJSON);
-            }
-          },
-          selectedFeatureIndex: parseInt(layer.selectedFeatureIndex || '0', 10)
-        })
-      }, layer.id);
-    })
-  });
-};
-
-var GeoJSONTextField = function GeoJSONTextField(_ref) {
-  var onChangeGeoJSON = _ref.onChangeGeoJSON,
-    geoJSON = _ref.geoJSON,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'GeoJSON text' : _ref$title,
-    sx = _ref.sx,
-    _ref$maxRows = _ref.maxRows,
-    maxRows = _ref$maxRows === void 0 ? 18 : _ref$maxRows;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isValid = _useState2[0],
-    setValidity = _useState2[1];
-  var onChange = function onChange(event) {
-    try {
-      onChangeGeoJSON(JSON.parse(event.target.value));
-      setValidity(true);
-    } catch (e) {
-      onChangeGeoJSON(null);
-      setValidity(false);
-    }
-  };
-  return jsx(Grid, {
-    size: {
-      xs: 12
-    },
-    sx: sx,
-    children: jsx(TextField, {
-      sx: {
-        padding: 0,
-        border: 'none',
-        width: '100%',
-        height: '100%',
-        fontSize: '10px',
-        '.MuiInputBase-root': {
-          height: '100%',
-          alignItems: 'baseline'
-        }
-      },
-      multiline: true,
-      error: !isValid,
-      maxRows: maxRows,
-      label: !isValid ? 'GeoJSON not valid' : title,
-      variant: "filled",
-      onChange: onChange,
-      value: JSON.stringify(geoJSON, null, 2),
-      disabled: !onChangeGeoJSON
-    })
-  });
-};
-
-var FeatureLayers = function FeatureLayers(_ref) {
-  var geojson = _ref.geojson,
-    onChangeLayerIndex = _ref.onChangeLayerIndex,
-    activeFeatureLayerIndex = _ref.activeFeatureLayerIndex,
-    getToolIcon = _ref.getToolIcon;
-  var featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(function (index) {
-    var _geojson$features$ind;
-    return {
-      index: index,
-      value: (_geojson$features$ind = geojson.features[index].properties) === null || _geojson$features$ind === void 0 ? void 0 : _geojson$features$ind.selectionType,
-      label: "".concat(index + 1, ": ").concat(geojson.features[index].geometry.type)
-    };
-  }) : [];
-  return jsx(Grid, {
-    size: {
-      sm: 12
-    },
-    children: jsxs(FormControl, {
-      disabled: !featureLayerList.length,
-      variant: "filled",
-      sx: {
-        width: '100%'
-      },
-      children: [jsx(InputLabel, {
-        id: "demo-feature-number",
-        children: "Features"
-      }), jsx(Select, {
-        labelId: "demo-feature-type",
-        value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
-        onChange: function onChange(event) {
-          var featureNr = parseInt(event.target.value, 10);
-          onChangeLayerIndex(featureNr, geojson.features[featureNr]);
-        },
-        sx: {
-          '.MuiSelect-select': {
-            display: 'flex'
+  }) : [];
+  return jsx(Grid, {
+    size: {
+      sm: 12
+    },
+    children: jsxs(FormControl, {
+      disabled: !featureLayerList.length,
+      variant: "filled",
+      sx: {
+        width: '100%'
+      },
+      children: [jsx(InputLabel, {
+        id: "demo-feature-number",
+        children: "Features"
+      }), jsx(Select, {
+        labelId: "demo-feature-type",
+        value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
+        onChange: function onChange(event) {
+          var featureNr = parseInt(event.target.value, 10);
+          onChangeLayerIndex(featureNr, geojson.features[featureNr]);
+        },
+        sx: {
+          '.MuiSelect-select': {
+            display: 'flex'
           }
         },
         children: featureLayerList.map(function (listItem) {
@@ -13192,6 +10854,32 @@ var getFeatureExtent = function getFeatureExtent(geoJSON) {
   };
 };
 
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var DRAWMODE;
+(function (DRAWMODE) {
+  DRAWMODE["POLYGON"] = "POLYGON";
+  DRAWMODE["BOX"] = "BOX";
+  DRAWMODE["MULTIPOINT"] = "MULTIPOINT";
+  DRAWMODE["POINT"] = "POINT";
+  DRAWMODE["LINESTRING"] = "LINESTRING";
+})(DRAWMODE || (DRAWMODE = {}));
+
 var defaultIntersectionStyleProperties = _objectSpread2(_objectSpread2({}, defaultGeoJSONStyleProperties), {}, {
   'fill-opacity': 0.5
 });
@@ -15148,26 +12836,6 @@ var radarGetCapabilities_spec = {
 	WMS_Capabilities: WMS_Capabilities
 };
 
-var ReactMapViewLayer = function ReactMapViewLayer(props) {
-  var id = props.id;
-  return jsx("div", {
-    style: {
-      width: '100%',
-      padding: '2px',
-      margin: 0,
-      wordWrap: 'break-word',
-      border: '1px solid rgba(0, 0, 0, 0.5)',
-      lineHeight: '14px',
-      fontSize: '10px',
-      background: 'rgba(255, 255, 255, 0.5)',
-      display: 'none'
-    },
-    children: jsx("div", {
-      children: id
-    })
-  });
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15194,14 +12862,6 @@ var getCurrentDimensionValue = function getCurrentDimensionValue(name) {
 };
 var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   var origin = 'ReactMapViewParseLayer';
-  var map = webmapUtils.getWMJSMapById(mapId);
-  var mapDimensions = map === null || map === void 0 ? void 0 : map.mapdimensions.map(function (mapdim) {
-    return {
-      units: mapdim.units,
-      currentValue: mapdim.currentValue,
-      name: mapdim.name
-    };
-  });
   var layerDimensions = wmLayer.dimensions.map(function (dim) {
     var name = dim.name,
       units = dim.units,
@@ -15228,7 +12888,7 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
     mapDimensions: {
       mapId: mapId,
       origin: origin,
-      dimensions: mapDimensions !== null && mapDimensions !== void 0 ? mapDimensions : []
+      dimensions: []
     },
     layerDimensions: {
       origin: origin,
@@ -15242,6 +12902,23 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
 /** Returns filtered list of props with geoJson
  * @param children React.ReactNode, layers with geoJson
  */
@@ -15259,900 +12936,35 @@ var getFeatureLayers = function getFeatureLayers(children) {
 };
 /**
  * Returns true if this is a maplayer and not a baselayer or overlayer
- * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
- */
-var isAMapLayer = function isAMapLayer(layer) {
-  return layer.layerType === LayerType.mapLayer;
-};
-/**
- * Returns true if this is a geojsonlayer (layer containing geojson field)
- * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
- */
-var isAGeoJSONLayer = function isAGeoJSONLayer(layer) {
-  return layer.geojson !== undefined;
-};
-function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layerDimensions) {
-  var _mapDimensions$find, _layerDimensions$find;
-  var mapCurrentTime = mapDimensions === null || mapDimensions === void 0 || (_mapDimensions$find = mapDimensions.find(function (dimension) {
-    return dimension.name === 'time';
-  })) === null || _mapDimensions$find === void 0 ? void 0 : _mapDimensions$find.currentValue;
-  var layerCurrentTime = layerDimensions === null || layerDimensions === void 0 || (_layerDimensions$find = layerDimensions.find(function (dimension) {
-    return dimension.name === 'time';
-  })) === null || _layerDimensions$find === void 0 ? void 0 : _layerDimensions$find.currentValue;
-  if (acceptanceTimeInMinutes === undefined || !mapCurrentTime || !layerCurrentTime) {
-    return true;
-  }
-  var minutesBetween = dateUtils.differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
-  if (Math.abs(minutesBetween) > acceptanceTimeInMinutes) {
-    return false;
-  }
-  return true;
-}
-var makeLayerPropListFromChildren = function makeLayerPropListFromChildren(children, mapId) {
-  var myChildren = [];
-  var takenIds = new Set();
-  var wmjsMap = getWMJSMapById(mapId);
-  React__default.Children.forEach(children, function (child) {
-    if (child) {
-      var childProps = child.props;
-      if (childProps && childProps.id) {
-        if (!takenIds.has(childProps.id)) {
-          myChildren.push(childProps);
-          takenIds.add(childProps.id);
-        } else {
-          var _childProps$onLayerEr;
-          (_childProps$onLayerEr = childProps.onLayerError) === null || _childProps$onLayerEr === void 0 || _childProps$onLayerEr.call(childProps, childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this mapTypes.WebMap")), wmjsMap);
-          console.warn('ReactWMJSLayer has a duplicate id', child);
-        }
-      } else {
-        debugLogger(DebugType.Warning, 'ReactElement child ignored: has no props or id', child);
-      }
-    }
-  });
-  myChildren.reverse();
-  return myChildren;
-};
-var parseWMJSLayer = function parseWMJSLayer(wmLayer, forceReload) {
-  return wmLayer.parseLayer(forceReload);
-};
-var setWMLayerPropsBasedOnChildProps = function setWMLayerPropsBasedOnChildProps(child, wmLayer, mapViewProps) {
-  var needsRedraw = false;
-  /* Set the name of the ADAGUC WMJSLayer */
-  /* Set the Opacity of the ADAGUC WMJSLayer */
-  if (child.opacity !== undefined && wmLayer.opacity !== child.opacity) {
-    wmLayer.setOpacity(child.opacity);
-    needsRedraw = false;
-  }
-  /* Set the Style of the ADAGUC WMJSLayer */
-  if (child.style !== undefined && wmLayer.currentStyle !== child.style) {
-    wmLayer.setStyle(child.style);
-    needsRedraw = true;
-  }
-  var enabled = child.enabled,
-    acceptanceTimeInMinutes = child.acceptanceTimeInMinutes,
-    layerDimensions = child.dimensions;
-  var isInsideAcceptanceTime = getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapViewProps.dimensions, layerDimensions);
-  if (enabled !== undefined) {
-    var wmLayerShouldBeShown = isInsideAcceptanceTime && enabled;
-    if (wmLayerShouldBeShown !== wmLayer.enabled) {
-      wmLayer.display(wmLayerShouldBeShown);
-      needsRedraw = true;
-    }
-  }
-  /* Set the dimensions of the ADAGUC WMJSLayer */
-  if (child.dimensions !== undefined) {
-    var _iterator = _createForOfIteratorHelper(child.dimensions),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var childDimension = _step.value;
-        var dim = childDimension;
-        var wmjsDim = wmLayer.getDimension(dim.name);
-        if (wmjsDim) {
-          if (wmjsDim.currentValue !== dim.currentValue) {
-            wmLayer.setDimension(dim.name, dim.currentValue, false);
-            needsRedraw = true;
-          }
-          if (wmjsDim.synced !== dim.synced) {
-            wmjsDim.synced = dim.synced;
-            needsRedraw = true;
-          }
-        } else {
-          debugLogger(DebugType.Warning, "MapView: Dimension does not exist, skipping ".concat(child.name, " :: ").concat(dim.name, " = ").concat(dim.currentValue));
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  }
-  return needsRedraw;
-};
-var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps(child, mapId, props, onUpdateLayerInformation) {
-  var wmjsMap = getWMJSMapById(mapId);
-  if (!wmjsMap || wmjsMap.isDestroyed) {
-    return;
-  }
-  var keepOnTop = child.layerType === LayerType.overLayer || false;
-  var newWMLayer = new WMLayer(_objectSpread2(_objectSpread2({}, child), {}, {
-    keepOnTop: keepOnTop
-  }));
-  registerWMLayer(newWMLayer, child.id);
-  newWMLayer.ReactWMJSLayerId = child.id;
-  var isBaselayer = !isAMapLayer(child) && !isAGeoJSONLayer(child);
-  if (isBaselayer) {
-    /* Add ADAGUC WebMapJS Baselayer */
-    var baseLayers = wmjsMap.getBaseLayers();
-    baseLayers.unshift(newWMLayer);
-    wmjsMap.setBaseLayers(baseLayers);
-    // If this layer has a tileserver configured, add it to the map.
-    if (child.tileServer) {
-      wmjsMap.addWMTileRendererTileSetting(child.tileServer);
-    }
-  } else {
-    /* Add ADAGUC WebMapJS Layer */
-    wmjsMap.addLayer(newWMLayer).then(function () {
-      if (newWMLayer.hasError === true) {
-        child.onLayerError && child.onLayerError(newWMLayer, new Error(newWMLayer.lastError));
-      }
-      // This ensures that MultiMapViewConnect works properly.
-      setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var wmjsMap, layerInfo;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              wmjsMap = getWMJSMapById(mapId);
-              if (!(!wmjsMap || wmjsMap.isDestroyed)) {
-                _context.next = 3;
-                break;
-              }
-              return _context.abrupt("return");
-            case 3:
-              setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
-              _context.next = 6;
-              return newWMLayer.parseLayer();
-            case 6:
-              layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
-              onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-              child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
-              wmjsMap.draw();
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      })), 1);
-    })["catch"](function (e) {
-      child.onLayerError && child.onLayerError(newWMLayer, e);
-    });
-  }
-};
-var ORIGIN_REACTMAPVIEW_UTILS_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_UTILS_ONUPDATELAYERINFO';
-var removeWMLayerFromMap = function removeWMLayerFromMap(wmLayer, mapId, onUpdateLayerInformation) {
-  // This will call the remove property of the WMJSLayer, which will adjust the layers array of WebMapJS */
-  wmLayer.remove();
-  /// Trigger update of all map dimensions
-  var wmjsMap = getWMJSMapById(mapId);
-  if (!wmjsMap) {
-    return;
-  }
-  onUpdateLayerInformation && onUpdateLayerInformation({
-    origin: ORIGIN_REACTMAPVIEW_UTILS_ONUPDATELAYERINFO,
-    layerStyle: null,
-    layerDimensions: null,
-    mapDimensions: {
-      origin: origin,
-      mapId: mapId,
-      dimensions: wmjsMap.mapdimensions.map(function (_ref2) {
-        var name = _ref2.name,
-          units = _ref2.units,
-          currentValue = _ref2.currentValue,
-          synced = _ref2.synced;
-        return {
-          name: name,
-          units: units,
-          currentValue: currentValue,
-          synced: synced
-        };
-      })
-    }
-  });
-};
-// TODO: Improve performance in https://gitlab.com/opengeoweb/opengeoweb/-/issues/4566
-var orderLayers = function orderLayers(wmjsMap, _reactMapViewLayers) {
-  var mapLayers = wmjsMap.getLayers();
-  var mapLayersIds = mapLayers.map(function (ml) {
-    return ml.id;
-  });
-  var filtered = _reactMapViewLayers.filter(function (_l) {
-    return mapLayersIds.includes(_l.id);
-  }).reverse();
-  var order = mapLayers.map(function (wmLayer) {
-    return filtered.findIndex(function (reactMapViewLayer) {
-      return reactMapViewLayer.id === wmLayer.id;
-    });
-  });
-  var wasReordered = wmjsMap.reorderLayers(order);
-  return wasReordered;
-};
-
-var getDisplayText = function getDisplayText(currentAdagucTime) {
-  var timeFormat = 'eee dd MMM yyyy HH:mm [UTC]';
-  var adagucTime = dateUtils.utc(currentAdagucTime);
-  var adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat) || '';
-  return adagucTimeFormatted;
-};
-var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
-var ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO';
-var MINUTE_TO_MILLISECOND = 60000;
-var ReactMapView = /*#__PURE__*/function (_React$Component) {
-  function ReactMapView(props) {
-    var _this;
-    _classCallCheck(this, ReactMapView);
-    _this = _callSuper(this, ReactMapView, [props]);
-    _this.adaguc = {
-      initialized: false,
-      baseLayers: [],
-      oldbbox: undefined,
-      currentWidth: -1,
-      currentHeight: -1,
-      currentChildren: []
-    };
-    _this.refetchTimer = null;
-    _this.lastRefetched = null;
-    _this.handleVisibilityChange = function () {
-      var shouldAutoFetch = _this.props.shouldAutoFetch;
-      var autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
-      var autoFetchIntervalMilliSeconds = Math.abs(autoFetchInterval) * MINUTE_TO_MILLISECOND;
-      if (document.visibilityState === 'visible') {
-        // Check if the last refetch time is not set or if the time since the last refetch exceeds the interval
-        if (!_this.lastRefetched || new Date().getTime() - _this.lastRefetched > autoFetchIntervalMilliSeconds) {
-          // Refetch immediately and restart the timer
-          _this.onStartRefetchTimer(true);
-        }
-      }
-    };
-    /**
-     * Start the refetch timer
-     * @param force - Force a fetch and wmLayer parse immediately
-     */
-    _this.onStartRefetchTimer = function (force) {
-      var shouldAutoFetch = _this.props.shouldAutoFetch;
-      _this.clearRefetchTimer();
-      var autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
-      var refetch = function refetch() {
-        var isVisible = document.visibilityState === 'visible';
-        if (isVisible) {
-          _this.lastRefetched = new Date().getTime();
-          var mapId = _this.props.mapId;
-          var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          var layers = wmjsMap === null || wmjsMap === void 0 ? void 0 : wmjsMap.getLayers();
-          layers === null || layers === void 0 || layers.forEach( /*#__PURE__*/function () {
-            var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(layer) {
-              var _this2, _props, _mapId, onUpdateLayerInformation, layerInfo;
-              return _regeneratorRuntime().wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    if (!(layer.enabled !== false)) {
-                      _context.next = 13;
-                      break;
-                    }
-                    _context.prev = 1;
-                    _context.next = 4;
-                    return layer.parseLayer();
-                  case 4:
-                    _this2 = _this, _props = _this2.props;
-                    _mapId = _props.mapId, onUpdateLayerInformation = _props.onUpdateLayerInformation;
-                    layerInfo = getLayerUpdateInfo(layer, _mapId);
-                    onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-                    _context.next = 13;
-                    break;
-                  case 10:
-                    _context.prev = 10;
-                    _context.t0 = _context["catch"](1);
-                    console.error(_context.t0);
-                  case 13:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee, null, [[1, 10]]);
-            }));
-            return function (_x) {
-              return _ref.apply(this, arguments);
-            };
-          }());
-        }
-      };
-      if (autoFetchInterval > 0) {
-        _this.refetchTimer = setInterval(refetch, Math.abs(autoFetchInterval) * MINUTE_TO_MILLISECOND);
-      }
-      if (force) {
-        refetch();
-      }
-    };
-    _this.clearRefetchTimer = function () {
-      if (_this.refetchTimer) {
-        clearInterval(_this.refetchTimer);
-      }
-    };
-    _this.state = {
-      adagucInitialised: false
-    };
-    _this.tileServerSettings = props.tileServerSettings || ReactMapView.defaultProps.tileServerSettings;
-    _this.resize = _this.resize.bind(_this);
-    _this.handleWindowResize = _this.handleWindowResize.bind(_this);
-    _this.drawDebounced = debounce(_this.drawDebounced, 600);
-    _this.updateWMJSMapProps = _this.updateWMJSMapProps.bind(_this);
-    _this.mountWMJSMap = _this.mountWMJSMap.bind(_this);
-    _this.handleVisibilityChange = _this.handleVisibilityChange.bind(_this);
-    _this.onAfterSetBBoxListener = _this.onAfterSetBBoxListener.bind(_this);
-    _this.onUpdateBBoxListener = _this.onUpdateBBoxListener.bind(_this);
-    _this.onDimChangeListener = _this.onDimChangeListener.bind(_this);
-    _this.adagucContainerRef = /*#__PURE__*/React.createRef();
-    _this.adagucWebMapJSRef = /*#__PURE__*/React.createRef();
-    return _this;
+ * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
+ */
+var isAMapLayer = function isAMapLayer(layer) {
+  return layer.layerType === LayerType.mapLayer;
+};
+/**
+ * Returns true if this is a geojsonlayer (layer containing geojson field)
+ * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
+ */
+var isAGeoJSONLayer = function isAGeoJSONLayer(layer) {
+  return layer.geojson !== undefined;
+};
+function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layerDimensions) {
+  var _mapDimensions$find, _layerDimensions$find;
+  var mapCurrentTime = mapDimensions === null || mapDimensions === void 0 || (_mapDimensions$find = mapDimensions.find(function (dimension) {
+    return dimension.name === 'time';
+  })) === null || _mapDimensions$find === void 0 ? void 0 : _mapDimensions$find.currentValue;
+  var layerCurrentTime = layerDimensions === null || layerDimensions === void 0 || (_layerDimensions$find = layerDimensions.find(function (dimension) {
+    return dimension.name === 'time';
+  })) === null || _layerDimensions$find === void 0 ? void 0 : _layerDimensions$find.currentValue;
+  if (acceptanceTimeInMinutes === undefined || !mapCurrentTime || !layerCurrentTime) {
+    return true;
   }
-  _inherits(ReactMapView, _React$Component);
-  return _createClass(ReactMapView, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        shouldAutoFetch = _this$props.shouldAutoFetch,
-        onWMJSMount = _this$props.onWMJSMount,
-        mapId = _this$props.mapId;
-      /* If this components re-mounts, make sure that the initialized state is set back to false */
-      this.setState({
-        adagucInitialised: false
-      });
-      window.addEventListener('resize', this.handleWindowResize);
-      this.mountWMJSMap();
-      if (shouldAutoFetch) {
-        this.onStartRefetchTimer();
-        document.addEventListener('visibilitychange', this.handleVisibilityChange);
-      }
-      onWMJSMount(mapId);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.updateWMJSMapProps(prevProps, this.props);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$props2 = this.props,
-        mapId = _this$props2.mapId,
-        onWMJSUnMount = _this$props2.onWMJSUnMount;
-      window.removeEventListener('resize', this.handleWindowResize);
-      this.clearRefetchTimer();
-      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
-      webmapUtils.unRegisterWMJSMap(mapId);
-      /* Reset adaguc properties */
-      this.adaguc.initialized = false;
-      this.adaguc.currentHeight = -1;
-      this.adaguc.currentWidth = -1;
-      this.adaguc.baseLayers = [];
-      this.adaguc.oldbbox = new WMBBOX();
-      this.adaguc.currentChildren = [];
-      onWMJSUnMount && onWMJSUnMount(mapId);
-    }
-  }, {
-    key: "handleWindowResize",
-    value: function handleWindowResize() {
-      this.resize();
-    }
-  }, {
-    key: "onDimChangeListener",
-    value: function onDimChangeListener() {
-      var _this$props3 = this.props,
-        mapId = _this$props3.mapId,
-        onMapChangeDimension = _this$props3.onMapChangeDimension;
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (wmjsMap) {
-        var timeDimension = wmjsMap.getDimension('time');
-        if (timeDimension) {
-          onMapChangeDimension({
-            mapId: mapId,
-            origin: ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION,
-            dimension: {
-              name: 'time',
-              currentValue: timeDimension.currentValue
-            }
-          });
-        }
-      }
-    }
-  }, {
-    key: "onAfterSetBBoxListener",
-    value: function onAfterSetBBoxListener() {
-      var _this3 = this;
-      /* Update the map after 100 ms */
-      window.setTimeout(function () {
-        var _this3$props = _this3.props,
-          MapViewBBOX = _this3$props.bbox,
-          mapId = _this3$props.mapId,
-          onMapZoomEnd = _this3$props.onMapZoomEnd;
-        var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        if (!wmjsMap) {
-          return;
-        }
-        var projectionInfo = wmjsMap.getProjection();
-        /* Trigger onMapZoomEnd callback */
-        var mapBBOX = projectionInfo.bbox;
-        if (MapViewBBOX.left !== mapBBOX.left || MapViewBBOX.right !== mapBBOX.right || MapViewBBOX.bottom !== mapBBOX.bottom || MapViewBBOX.top !== mapBBOX.top) {
-          onMapZoomEnd({
-            mapId: mapId,
-            bbox: {
-              left: projectionInfo.bbox.left,
-              bottom: projectionInfo.bbox.bottom,
-              right: projectionInfo.bbox.right,
-              top: projectionInfo.bbox.top
-            },
-            srs: projectionInfo.srs
-          });
-        }
-      }, 100);
-    }
-  }, {
-    key: "onUpdateBBoxListener",
-    value: function onUpdateBBoxListener(newBbox) {
-      var oldbbox = this.adaguc.oldbbox || new WMBBOX(ReactMapView.defaultProps.bbox);
-      if (oldbbox.left !== newBbox.left || oldbbox.right !== newBbox.right || oldbbox.top !== newBbox.top || oldbbox.bottom !== newBbox.bottom) {
-        oldbbox.left = newBbox.left;
-        oldbbox.right = newBbox.right;
-        oldbbox.top = newBbox.top;
-        oldbbox.bottom = newBbox.bottom;
-        this.adaguc.oldbbox = new WMBBOX(oldbbox);
-      }
-    }
-  }, {
-    key: "updateWMJSMapProps",
-    value: function updateWMJSMapProps(prevProps, props) {
-      if (!props) {
-        return;
-      }
-      var mapId = props.mapId,
-        children = props.children,
-        isTimeScrollingEnabled = props.isTimeScrollingEnabled;
-      if (isTimeScrollingEnabled) {
-        var _wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        _wmjsMap === null || _wmjsMap === void 0 || _wmjsMap.detachWheelEvent();
-      } else {
-        var _wmjsMap2 = webmapUtils.getWMJSMapById(mapId);
-        _wmjsMap2 === null || _wmjsMap2 === void 0 || _wmjsMap2.attachWheelEvent();
-      }
-      if (prevProps && prevProps.mapId !== props.mapId) {
-        console.warn('MapId has changed on an already mounted map!');
-        var prevWMJSMap = webmapUtils.getWMJSMapById(prevProps.mapId);
-        if (prevWMJSMap) {
-          webmapUtils.registerWMJSMap(prevWMJSMap, mapId);
-        }
-      }
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (!wmjsMap) {
-        console.warn("No wmjsMap ".concat(mapId));
-        return;
-      }
-      var needsRedraw = false;
-      /* Check map props */
-      if (!prevProps || prevProps.showLegend !== props.showLegend) {
-        wmjsMap.displayLegendInMap(props.showLegend !== false);
-      }
-      if (!prevProps || prevProps.showScaleBar !== props.showScaleBar) {
-        wmjsMap.displayScaleBarInMap(props.showScaleBar !== false);
-        needsRedraw = true;
-      }
-      if (!prevProps || prevProps.timestep !== props.timestep) {
-        wmjsMap.timestepInMinutes = props.timestep;
-      }
-      if (!prevProps || prevProps.holdShiftToScroll !== props.holdShiftToScroll) {
-        wmjsMap.holdShiftToScroll = !!props.holdShiftToScroll;
-      }
-      /* Check map dimensions */
-      if (!prevProps || prevProps.dimensions !== props.dimensions) {
-        if (props.dimensions) {
-          var _iterator = _createForOfIteratorHelper(props.dimensions),
-            _step;
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var propDimension = _step.value;
-              var mapDim = wmjsMap.getDimension(propDimension.name);
-              if (mapDim && mapDim.currentValue !== propDimension.currentValue || !mapDim) {
-                wmjsMap.setDimension(propDimension.name, propDimension.currentValue, false, false);
-              }
-              if (props.displayTimeInMap && propDimension.name === 'time' && propDimension.currentValue !== undefined) {
-                needsRedraw = true;
-                var displayText = getDisplayText(propDimension.currentValue);
-                wmjsMap.setTimeOffset(displayText);
-              }
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-        }
-      }
-      /* Check if srs and BBOX is updated */
-      if (!prevProps || prevProps.bbox !== props.bbox) {
-        if (props.bbox.left !== undefined) {
-          var projectionInfo = wmjsMap.getProjection();
-          var mapBBOX = projectionInfo.bbox;
-          if (props.bbox.left !== mapBBOX.left || props.bbox.right !== mapBBOX.right || props.bbox.bottom !== mapBBOX.bottom || props.bbox.top !== mapBBOX.top) {
-            wmjsMap.suspendEvent('onupdatebbox');
-            wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
-            wmjsMap.resumeEvent('onupdatebbox');
-            wmjsMap.draw();
-          }
-        }
-      }
-      /* Check if srs */
-      if (!prevProps || prevProps.srs !== props.srs) {
-        if (props.bbox.left !== undefined) {
-          wmjsMap.suspendEvent('onupdatebbox');
-          wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
-          wmjsMap.resumeEvent('onupdatebbox');
-          wmjsMap.draw();
-        }
-      }
-      /* Check display/hide map cursor */
-      if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
-        if (props.displayMapPin === true) {
-          wmjsMap.getMapPin().showMapPin();
-        } else if (props.displayMapPin === false) {
-          wmjsMap.getMapPin().hideMapPin();
-        }
-      }
-      /* Set map cursor location */
-      if (!prevProps || prevProps.mapPinLocation !== props.mapPinLocation) {
-        if (props.mapPinLocation) {
-          wmjsMap.getMapPin().positionMapPinByLatLon({
-            x: props.mapPinLocation.lon,
-            y: props.mapPinLocation.lat
-          });
-          wmjsMap.draw();
-        }
-      }
-      /* Set disable map pin */
-      if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-        if (props.disableMapPin === true) {
-          wmjsMap.getMapPin().setMapPinDisabled();
-        } else if (props.disableMapPin === false) {
-          wmjsMap.getMapPin().setMapPinEnabled();
-        }
-        wmjsMap.draw();
-      }
-      /* Change the animation delay */
-      if (!prevProps || prevProps.animationDelay !== props.animationDelay) {
-        if (props.animationDelay) {
-          if (typeof wmjsMap.setAnimationDelay === 'function') {
-            wmjsMap.setAnimationDelay(props.animationDelay);
-          }
-        }
-      }
-      /* Check if layer metadata should be shown */
-      if (!prevProps || prevProps.showLayerInfo !== props.showLayerInfo) {
-        if (props.showLayerInfo) {
-          wmjsMap.showLayerInfo = props.showLayerInfo;
-        }
-      }
-      var myChildren = makeLayerPropListFromChildren(children, mapId);
-      // Only enter this loop if there are changes.
-      if (!isEqual(myChildren, this.adaguc.currentChildren)) {
-        this.adaguc.currentChildren = myChildren;
-        // ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
-        var wmjsLayers = wmjsMap.getLayers();
-        var onUpdateLayerInformation = props.onUpdateLayerInformation,
-          _mapId2 = props.mapId;
-        wmjsLayers.forEach(function (wmLayer) {
-          var isWMLayerInReactMapViewChildren = myChildren.find(function (child) {
-            return child.id === wmLayer.ReactWMJSLayerId;
-          });
-          if (!isWMLayerInReactMapViewChildren) {
-            removeWMLayerFromMap(wmLayer, _mapId2, onUpdateLayerInformation);
-          }
-        });
-        // ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
-        var webmapJSBaselayers = wmjsMap.getBaseLayers();
-        var _loop = function _loop(l) {
-          var wmjsBaseLayers = wmjsMap.getBaseLayers();
-          if (myChildren.filter(function (child) {
-            return child.id === wmjsBaseLayers[l].ReactWMJSLayerId && child.name;
-          }).length === 0) {
-            /*  TODO (Maarten Plieger, 2020-03-19):The remove property for the baselayer is not working yet */
-            wmjsBaseLayers.splice(l, 1);
-            wmjsMap.setBaseLayers(wmjsBaseLayers);
-            wmjsBaseLayers = wmjsMap.getBaseLayers();
-          }
-        };
-        for (var l = 0; l < webmapJSBaselayers.length; l += 1) {
-          _loop(l);
-        }
-        // Loop through all React layers and update WMJSLayer properties where needed
-        myChildren.filter(function (child) {
-          return child.name;
-        }).forEach(function (child) {
-          var wmLayer = getWMLayerById(child.id);
-          var layerIsInThisMap = wmjsMap.hasLayer(wmLayer);
-          if (!layerIsInThisMap) {
-            // Add a new layer, it is not in the this map
-            addWMLayerPropsBasedOnChildProps(child, _mapId2, props, onUpdateLayerInformation);
-            needsRedraw = true;
-          } else {
-            // Handle existing layer
-            if (child.name !== undefined && wmLayer.name !== child.name) {
-              // Handle layer name change
-              wmLayer.setName(child.name).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-                var layerInfo;
-                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
-                    case 0:
-                      _context2.next = 2;
-                      return wmLayer.parseLayer();
-                    case 2:
-                      layerInfo = getLayerUpdateInfo(wmLayer, _mapId2);
-                      setWMLayerPropsBasedOnChildProps(child, wmLayer, props);
-                      onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-                      wmjsMap.draw();
-                    case 6:
-                    case "end":
-                      return _context2.stop();
-                  }
-                }, _callee2);
-              })))["catch"](function (e) {
-                child.onLayerError && child.onLayerError(wmLayer, e);
-              });
-              needsRedraw = true;
-            }
-            if (setWMLayerPropsBasedOnChildProps(child, wmLayer, props) === true) {
-              needsRedraw = true;
-            }
-          }
-        });
-        // Check if order of layers has changed
-        if (orderLayers(wmjsMap, myChildren)) {
-          needsRedraw = true;
-        }
-        if (needsRedraw) {
-          wmjsMap.draw();
-        }
-      }
-    }
-  }, {
-    key: "drawDebounced",
-    value: function drawDebounced() {
-      var mapId = this.props.mapId;
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-      if (!wmjsMap) {
-        return;
-      }
-      wmjsMap.getListener().suspendEvents();
-      wmjsMap.draw();
-      wmjsMap.getListener().resumeEvents();
-    }
-  }, {
-    key: "mountWMJSMap",
-    value: function mountWMJSMap() {
-      var _this4 = this;
-      var _this$props4 = this.props,
-        mapId = _this$props4.mapId,
-        listeners = _this$props4.listeners,
-        srs = _this$props4.srs,
-        bbox = _this$props4.bbox,
-        onMapPinChangeLocation = _this$props4.onMapPinChangeLocation,
-        shouldDisablePrefetching = _this$props4.shouldDisablePrefetching;
-      /* Check if we have something to mount IWMJSMap on */
-      if (this.adagucWebMapJSRef.current === null) {
-        console.warn('No this.adagucWebMapJSRef.current  yet ');
-        return null;
-      }
-      /* Check if webmapjs was not already initialized */
-      var existingWMJSMap = webmapUtils.getWMJSMapById(mapId);
-      if (existingWMJSMap) {
-        console.warn("Somehow ".concat(mapId, " already exists"));
-        webmapUtils.unRegisterWMJSMap(mapId);
-      }
-      var wmjsMap = new WMJSMap(this.adagucWebMapJSRef.current);
-      wmjsMap.shouldPrefetch = !shouldDisablePrefetching;
-      // pass translation function
-      var t = this.props.t;
-      wmjsMap.t = t;
-      this.adaguc.currentChildren = [];
-      this.adaguc.baseLayers = [];
-      webmapUtils.registerWMJSMap(wmjsMap, mapId);
-      this.adaguc.initialized = true;
-      /* Enable to show actual layer properties in the map */
-      wmjsMap.showLayerInfo = false;
-      wmjsMap.removeAllLayers();
-      if (srs) {
-        wmjsMap.setProjection(srs, new WMBBOX(bbox));
-      }
-      wmjsMap.setWMTileRendererTileSettings(this.tileServerSettings || tilesettings);
-      if (listeners) {
-        listeners.forEach(function (listener) {
-          wmjsMap.addListener(listener.name, function (data) {
-            listener.callbackfunction(wmjsMap, data);
-          }, listener.keep);
-        });
-      }
-      wmjsMap.addListener('ondimchange', function () {
-        _this4.onDimChangeListener();
-      }, true);
-      wmjsMap.addListener('onmapready', function () {
-        _this4.setState({
-          adagucInitialised: true
-        });
-      });
-      wmjsMap.addListener('aftersetbbox', function () {
-        _this4.onAfterSetBBoxListener();
-      }, true);
-      wmjsMap.addListener('onupdatebbox', function (newBbox) {
-        _this4.onUpdateBBoxListener(newBbox);
-      }, true);
-      wmjsMap.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        // only change location when mapPin is visible and enabled
-        if (onMapPinChangeLocation &&
-        // eslint-disable-next-line react/destructuring-assignment
-        _this4.props.displayMapPin &&
-        // eslint-disable-next-line react/destructuring-assignment
-        !_this4.props.disableMapPin) {
-          onMapPinChangeLocation({
-            mapPinLocation: {
-              lat: mapPinLatLonCoordinate.lat,
-              lon: mapPinLatLonCoordinate.lon,
-              projectionX: mapPinLatLonCoordinate.projectionX,
-              projectionY: mapPinLatLonCoordinate.projectionY,
-              screenOffsetX: mapPinLatLonCoordinate.screenOffsetX,
-              screenOffsetY: mapPinLatLonCoordinate.screenOffsetY,
-              srs: mapPinLatLonCoordinate.srs
-            },
-            mapId: mapId
-          });
-        }
-      }, true);
-      this.resize();
-      wmjsMap.draw();
-      this.updateWMJSMapProps(null, this.props);
-      return wmjsMap;
-    }
-  }, {
-    key: "resize",
-    value: function resize() {
-      var element = this.adagucContainerRef.current;
-      if (element) {
-        var newWidth = element.clientWidth;
-        var newHeight = element.clientHeight;
-        if (this.adaguc.currentWidth !== newWidth || this.adaguc.currentHeight !== newHeight) {
-          this.adaguc.currentWidth = newWidth;
-          this.adaguc.currentHeight = newHeight;
-          var mapId = this.props.mapId;
-          var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          if (!wmjsMap) {
-            return;
-          }
-          wmjsMap.setSize(newWidth, newHeight);
-        }
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-        passiveMap = _this$props5.passiveMap,
-        children = _this$props5.children,
-        onClick = _this$props5.onClick,
-        mapId = _this$props5.mapId,
-        linkedFeatures = _this$props5.linkedFeatures;
-      var adagucInitialised = this.state.adagucInitialised;
-      var featureLayers = getFeatureLayers(children);
-      featureLayers.forEach(function (featureLayer) {
-        var wmFeatureLayer = getWMLayerById(featureLayer.id);
-        if (!wmFeatureLayer) {
-          registerWMLayer(new WMLayer(_objectSpread2({
-            layerType: LayerType.featureLayer,
-            service: ''
-          }, featureLayer)), featureLayer.id);
-        } else if (featureLayer.geojson) {
-          wmFeatureLayer.geojson = featureLayer.geojson;
-        }
-      });
-      return jsx("div", {
-        className: "MapView",
-        style: {
-          height: '100%',
-          width: '100%',
-          border: 'none',
-          display: 'block',
-          overflow: 'hidden'
-        },
-        children: jsxs("div", {
-          ref: this.adagucContainerRef,
-          style: {
-            minWidth: 'inherit',
-            minHeight: 'inherit',
-            width: 'inherit',
-            height: 'inherit',
-            overflow: 'hidden',
-            display: 'block',
-            border: 'none'
-          },
-          children: [jsx("div", {
-            className: "MapViewComponent",
-            style: {
-              position: 'absolute',
-              overflow: 'hidden',
-              display: 'block',
-              padding: '0',
-              margin: '0',
-              zIndex: 10
-            },
-            children: jsx("div", {
-              role: "application",
-              "aria-label": "map",
-              ref: this.adagucWebMapJSRef
-            })
-          }), jsxs("div", {
-            style: {
-              position: 'absolute',
-              overflow: 'hidden',
-              display: 'block',
-              padding: '0',
-              margin: '0',
-              zIndex: 100
-            },
-            children: [jsx("div", {
-              children: children
-            }), adagucInitialised && featureLayers && featureLayers.length ? jsx(MapDrawContainer, {
-              featureLayers: featureLayers,
-              linkedFeatures: linkedFeatures,
-              mapId: mapId
-            }) : null]
-          }), passiveMap &&
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus
-          jsx("div", {
-            style: {
-              position: 'absolute',
-              overflow: 'hidden',
-              display: 'block',
-              padding: '0',
-              margin: '0',
-              zIndex: 100,
-              width: '100%',
-              height: '100%'
-            },
-            onClick: onClick,
-            role: "button"
-          })]
-        })
-      });
-    }
-  }]);
-}(React.Component);
-ReactMapView.defaultProps = {
-  srs: PROJECTION.EPSG_3857.value,
-  bbox: {
-    left: -2324980.5498391856,
-    bottom: 5890854.775012179,
-    right: 6393377.702660825,
-    top: 11652109.058827976
-  },
-  shouldAutoFetch: true,
-  displayMapPin: false,
-  disableMapPin: false,
-  tileServerSettings: tilesettings,
-  onWMJSMount: function onWMJSMount() {},
-  onWMJSUnMount: function onWMJSUnMount() {},
-  onMapChangeDimension: function onMapChangeDimension() {
-    /* nothing */
-  },
-  onUpdateLayerInformation: function onUpdateLayerInformation() {
-    /* nothing */
-  },
-  onMapZoomEnd: function onMapZoomEnd() {
-    /* nothing */
+  var minutesBetween = dateUtils.differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
+  if (Math.abs(minutesBetween) > acceptanceTimeInMinutes) {
+    return false;
   }
-};
+  return true;
+}
 
 var getTimeDimension = function getTimeDimension(dimensions) {
   return dimensions.find(function (dimension) {
@@ -16192,339 +13004,6 @@ var MapTime = function MapTime(_ref) {
   });
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var MS_IN_HOUR = 3600 * 1000;
-// The following is necessary to allow to assign to the CanvasRenderingContext2D ctx property
-/* eslint-disable no-param-reassign */
-/**
- * This component registers to a webmap instance and draws axis for height and time in the map using the Map Canvas.
- */
-var ProfileAxis = function ProfileAxis(_ref) {
-  var mapId = _ref.mapId;
-  var drawAxisOnMapDisplay = function drawAxisOnMapDisplay(ctx, webMap, axisStyle) {
-    var bbox = webMap.getDrawBBOX();
-    var _webMap$getSize = webMap.getSize(),
-      width = _webMap$getSize.width,
-      height = _webMap$getSize.height;
-    var offY = height - 50;
-    var offX = 20;
-    try {
-      var startDate = new Date(bbox.left);
-      var endDate = new Date(bbox.right);
-      webMap.setMessage("".concat(startDate.toDateString(), ", ").concat(startDate.getUTCHours(), " to ").concat(endDate.getUTCHours(), " hours UTC"));
-    } catch (e) {
-      webMap.setMessage('');
-    }
-    // Draw the horizontal time axis
-    drawTimeAxis(ctx, bbox, offX, offY, width, height, axisStyle);
-    // Draw the vertical elevation axis
-    drawHeightAxis(ctx, bbox, offX, offY, width, height, axisStyle);
-    // Draw the mouse cursor
-    drawCursor(ctx, bbox, offX, offY, width, height, webMap, axisStyle);
-    // Draw the layer name
-    drawLayerName(ctx, bbox, offX, offY, width, height, webMap, axisStyle);
-  };
-  React__default.useEffect(function () {
-    var axisStyle = {
-      backgroundColor: 'white',
-      color: 'black',
-      fontStyleSmall: '10px Roboto, Helvetica, Arial',
-      fontStyleBig: '14px Roboto, Helvetica, Arial'
-    };
-    // Draw on map canvas callback function
-    var beforeCanvasDisplay = function beforeCanvasDisplay(ctx) {
-      var webmapjs = getWMJSMapById(mapId);
-      webmapjs && drawAxisOnMapDisplay(ctx, webmapjs, axisStyle);
-    };
-    // unMount logic
-    var unMount = function unMount() {
-      var webMap = getWMJSMapById(mapId);
-      if (webMap) {
-        webMap.removeListener('beforecanvasdisplay', beforeCanvasDisplay);
-      }
-    };
-    // Mount logic
-    var webMap = getWMJSMapById(mapId);
-    if (webMap && webMap.getProjection().srs === 'GFI:TIME_ELEVATION') {
-      webMap.displayScaleBarInMap(false);
-      webMap.hideMouseCursorProperties();
-      webMap.setTimeOffset('');
-      webMap.addListener('beforecanvasdisplay', beforeCanvasDisplay, true);
-      webMap.draw();
-    }
-    return unMount;
-  }, [mapId]);
-  return null;
-};
-/**
- * Calculates a time spacing. This is used to place labels on the X axis (time axis).
- * To make readable time labels, the time spacing is discretized to rounded times,
- * The time spacing changes according to zoom level.
- * @param bbox
- * @param width
- * @returns
- */
-var getTimeSpacingInMs = function getTimeSpacingInMs(bbox, width) {
-  var hoursInView = Math.abs(bbox.right - bbox.left) / (MS_IN_HOUR * width / 500);
-  return Math.pow(2, Math.round((Math.log10(hoursInView / 10) + 0.5) / Math.log10(2)) - 1) * MS_IN_HOUR;
-};
-var drawTimeAxis = function drawTimeAxis(ctx, bbox, offsetX, offsetY, width, height, axisStyle) {
-  var backgroundColor = axisStyle.backgroundColor,
-    color = axisStyle.color,
-    fontStyleSmall = axisStyle.fontStyleSmall,
-    fontStyleBig = axisStyle.fontStyleBig;
-  // Draw rectangle with backgroundColor for axis
-  ctx.textBaseline = 'middle';
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, offsetY, width, 50);
-  ctx.font = fontStyleSmall;
-  ctx.textAlign = 'left';
-  ctx.fillStyle = color;
-  ctx.strokeStyle = color;
-  var ticksMs = getTimeSpacingInMs(bbox, width);
-  var roundedTimeLeftMs = Math.round(bbox.left / ticksMs) * ticksMs;
-  var roundedTimeRightMs = Math.round(bbox.right / ticksMs) * ticksMs;
-  var numHoursInView = Math.min((roundedTimeRightMs - roundedTimeLeftMs) / ticksMs + 1, 100);
-  for (var hoursToPlot = 0; hoursToPlot < numHoursInView; hoursToPlot += 1) {
-    var timeMs = roundedTimeLeftMs + hoursToPlot * ticksMs;
-    var posX = Math.round((timeMs - bbox.left) / (bbox.right - bbox.left) * width) + 0.5;
-    ctx.beginPath();
-    ctx.moveTo(posX, offsetY + 0);
-    ctx.lineTo(posX, offsetY + 10);
-    var date = new Date(timeMs);
-    var hourString = "0".concat(date.getUTCHours()).slice(-2);
-    var minuteString = ":".concat("0".concat(date.getUTCMinutes()).slice(-2));
-    var txt = "".concat(hourString).concat(minuteString);
-    ctx.stroke();
-    ctx.fillText("".concat(txt), posX - 13, offsetY + 16);
-  }
-  // Draw units in map
-  ctx.font = fontStyleBig;
-  ctx.fillText('time UTC (h)', width / 2 - 10, offsetY + 38);
-};
-/**
- * Calculates a spacing for the height axis. This is used to place labels on the Y axis (height axis).
- * To make readable height labels, the height spacing is discretized to rounded elevations,
- * The spacing changes according to zoom level.
- * @param bbox
- * @param height
- * @returns
- */
-var getHeightSpacingInMs = function getHeightSpacingInMs(bbox, height) {
-  var numMeterInView = Math.abs(bbox.bottom - bbox.top) / height;
-  return Math.pow(10, Math.round(Math.log10(numMeterInView * 100) + 0.5) - 1);
-};
-var drawHeightAxis = function drawHeightAxis(ctx, bbox, offsetX, offsetY, width, height, axisStyle) {
-  var backgroundColor = axisStyle.backgroundColor,
-    color = axisStyle.color,
-    fontStyleSmall = axisStyle.fontStyleSmall,
-    fontStyleBig = axisStyle.fontStyleBig;
-  // Draw rectangle in backgroundColor for axis
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, 60 + offsetX, height);
-  ctx.font = fontStyleSmall;
-  ctx.textAlign = 'right';
-  ctx.fillStyle = color;
-  var ticksM = getHeightSpacingInMs(bbox, height);
-  var roundedElevBottomMeter = Math.round(bbox.bottom / ticksM) * ticksM;
-  var roundedElevTopMeter = Math.round(bbox.top / ticksM) * ticksM;
-  var numKmInView = Math.min((roundedElevTopMeter - roundedElevBottomMeter) / ticksM + 1, 100);
-  for (var kmToPlot = 0; kmToPlot < numKmInView; kmToPlot += 1) {
-    var valueInKm = roundedElevBottomMeter + kmToPlot * ticksM;
-    var posY = Math.round((bbox.top - valueInKm) / (bbox.top - bbox.bottom) * height) + 0.5;
-    ctx.beginPath();
-    ctx.moveTo(offsetX + 50, posY);
-    ctx.lineTo(offsetX + 60, posY);
-    ctx.stroke();
-    var txt = valueInKm;
-    ctx.fillText("".concat(txt), offsetX + 48, posY + 2);
-  }
-  // Draw height unit in axis
-  ctx.font = axisStyle.fontStyleBig;
-  ctx.save();
-  ctx.translate(5, height / 2 - 50);
-  ctx.rotate(-Math.PI / 2);
-  ctx.font = fontStyleBig;
-  ctx.fillText('height (m)', 5, 5);
-  ctx.restore();
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, height - 60, offsetX + 60, 60);
-  // Draw line border for map
-  ctx.moveTo(offsetX + 60, offsetY + 0.5);
-  ctx.lineTo(width, offsetY + 0.5);
-  ctx.moveTo(offsetX + 60.5, 0);
-  ctx.lineTo(offsetX + 60.5, height - 50);
-  ctx.stroke();
-};
-var drawCursor = function drawCursor(ctx, bbox, offsetX, offsetY, width, height, webMapJS, axisStyle) {
-  var _webMapJS$getMapMouse = webMapJS.getMapMouseCoordinates(),
-    mapMouseX = _webMapJS$getMapMouse.mouseX,
-    mapMouseY = _webMapJS$getMapMouse.mouseY;
-  // Do not draw if mouse is not in the map
-  if (mapMouseX < 5 && mapMouseY < 5) {
-    return;
-  }
-  /* Draw cursor line */
-  var mouseX = Math.round(mapMouseX) + 0.5;
-  var mouseY = Math.round(mapMouseY) + 0.5;
-  ctx.strokeStyle = '#303030';
-  ctx.setLineDash([15, 5]);
-  ctx.beginPath();
-  ctx.moveTo(0, mouseY);
-  ctx.lineTo(width, mouseY);
-  ctx.moveTo(mouseX, 0);
-  ctx.lineTo(mouseX, height);
-  ctx.stroke();
-  ctx.strokeStyle = axisStyle.color;
-  ctx.lineWidth = 1;
-  ctx.setLineDash([]);
-};
-var drawLayerName = function drawLayerName(ctx, bbox, offsetX, offsetY, width, height, webMapJS, axisStyle) {
-  // Draw layername
-  var layers = webMapJS.getLayers();
-  if (layers.length > 0) {
-    ctx.textBaseline = 'middle';
-    ctx.fillStyle = axisStyle.backgroundColor;
-    ctx.font = axisStyle.fontStyleBig;
-    ctx.textAlign = 'left';
-    ctx.fillStyle = axisStyle.color;
-    ctx.strokeStyle = axisStyle.color;
-    ctx.fillText("Layer: ".concat(layers[0].name), 10, offsetY + 38);
-  }
-};
-// Re-enable the previousely disabled eslint rule
-/* eslint-enable no-param-reassign */
-
-var _excluded$1 = ["children", "controls", "displayTimeInMap", "onWMJSMount", "isTimeScrollingEnabled"];
-var MapView = function MapView(_ref) {
-  var children = _ref.children,
-    _ref$controls = _ref.controls,
-    controls = _ref$controls === void 0 ? {
-      zoomControls: true
-    } : _ref$controls,
-    _ref$displayTimeInMap = _ref.displayTimeInMap,
-    displayTimeInMap = _ref$displayTimeInMap === void 0 ? true : _ref$displayTimeInMap,
-    _onWMJSMount = _ref.onWMJSMount,
-    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var dimensions = props.dimensions,
-    mapIdProp = props.mapId;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var wmjsMapRef = React.useRef(null);
-  var mapId = React.useRef(mapIdProp).current;
-  if (mapIdProp !== mapId) {
-    console.warn("Warning, MapId ".concat(mapId, " has been updated to ").concat(mapIdProp, " on an already mounted component. Keeping ").concat(mapId));
-  }
-  var _useResizeDetector = useResizeDetector(),
-    ref = _useResizeDetector.ref,
-    height = _useResizeDetector.height,
-    width = _useResizeDetector.width;
-  React.useEffect(function () {
-    if (wmjsMapRef.current && !!width && !!height) {
-      var _wmjsMapRef$current$g = wmjsMapRef.current.getSize(),
-        mapHeight = _wmjsMapRef$current$g.height,
-        mapWidth = _wmjsMapRef$current$g.width;
-      if (width !== mapWidth || height !== mapHeight) {
-        wmjsMapRef.current.setSize(Math.ceil(width), Math.ceil(height));
-      }
-    }
-  }, [width, height]);
-  var reactMapViewProps = _objectSpread2(_objectSpread2({}, props), {}, {
-    mapId: mapId,
-    isTimeScrollingEnabled: isTimeScrollingEnabled
-  });
-  return jsxs(Box, {
-    ref: ref,
-    sx: {
-      display: 'grid',
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    children: [controls && controls.zoomControls && jsxs(MapControls, {
-      style: {
-        top: 0,
-        position: 'absolute'
-      },
-      children: [jsx(ProfileAxis, {
-        mapId: mapId
-      }), jsx(ZoomControls, {
-        onZoomIn: function onZoomIn() {
-          var _webmapUtils$getWMJSM;
-          (_webmapUtils$getWMJSM = webmapUtils.getWMJSMapById(mapId)) === null || _webmapUtils$getWMJSM === void 0 || _webmapUtils$getWMJSM.zoomIn(undefined);
-        },
-        onZoomOut: function onZoomOut() {
-          var _webmapUtils$getWMJSM2;
-          (_webmapUtils$getWMJSM2 = webmapUtils.getWMJSMapById(mapId)) === null || _webmapUtils$getWMJSM2 === void 0 || _webmapUtils$getWMJSM2.zoomOut();
-        },
-        onZoomReset: function onZoomReset() {
-          var wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          if (!wmjsMap) {
-            return;
-          }
-          wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
-        }
-      })]
-    }), jsx(Box, {
-      sx: {
-        gridColumnStart: 1,
-        gridRowStart: 1
-      },
-      children: jsx(ReactMapView, _objectSpread2(_objectSpread2({}, reactMapViewProps), {}, {
-        showLegend: false,
-        displayTimeInMap: false,
-        shouldDisablePrefetching: props.shouldDisablePrefetching,
-        onWMJSMount: function onWMJSMount(id) {
-          var webMapJS = webmapUtils.getWMJSMapById(id);
-          if (!webMapJS) {
-            return;
-          }
-          wmjsMapRef.current = webMapJS;
-          if (_onWMJSMount) {
-            _onWMJSMount(id);
-          }
-        },
-        t: t,
-        children: children
-      }))
-    }), displayTimeInMap && dimensions && jsx(MapTime, {
-      dimensions: dimensions
-    })]
-  });
-};
-
-var MapViewLayer = function MapViewLayer(props) {
-  // TODO: This component should not do anything, but just return null: https://gitlab.com/opengeoweb/opengeoweb/-/issues/4579
-  var id = props.id;
-  return React.useMemo(function () {
-    return jsx("div", {
-      "data-testid": "mapViewLayer",
-      style: {
-        display: 'none'
-      },
-      children: id
-    });
-  }, [id]);
-};
-
 var MapWarningProperties = function MapWarningProperties(_ref) {
   var selectedFeatureProperties = _ref.selectedFeatureProperties,
     languageIndex = _ref.languageIndex,
@@ -17529,6 +14008,7 @@ var useIconStyle = function useIconStyle(_ref) {
 
 var OpenLayersGetFeatureInfo = function OpenLayersGetFeatureInfo(_ref) {
   var displayMapPin = _ref.displayMapPin,
+    disableMapPin = _ref.disableMapPin,
     mapPinLocation = _ref.mapPinLocation,
     selectLocation = _ref.selectLocation;
   var _useContext = useContext(MapContext),
@@ -17538,6 +14018,9 @@ var OpenLayersGetFeatureInfo = function OpenLayersGetFeatureInfo(_ref) {
       options: {
         icon: {
           anchor: [0.5, 1]
+        },
+        render: {
+          fillStyle: disableMapPin ? '#808080' : '#000000'
         }
       }
     }),
@@ -18375,32 +14858,4 @@ var ClickOnMapTool = function ClickOnMapTool(_ref) {
   });
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-// wrap around webmap i18n exports so geoweb app
-// doesn't have to depend on webmap directly
-// eslint-disable-next-line @typescript-eslint/naming-convention
-var _useOpenLayers = true;
-var setOpenLayersEnabled = function setOpenLayersEnabled(openLayersOnOrOff) {
-  _useOpenLayers = openLayersOnOrOff;
-};
-var isOpenLayersEnabled = function isOpenLayersEnabled() {
-  return _useOpenLayers;
-};
-
-export { ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapFeatureClass, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, WEBMAP_REACT_NAMESPACE, WMSLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, colorMaps, convertGeoCoordsToScreenCoords, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isOpenLayersEnabled, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeLayerPropListFromChildren, makeLegendFromColorMap, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setOpenLayersEnabled, setViewFromExtent, setViewFromFeature, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRCollection, useEDRCollectionCube, useEDRCollectionLocation, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations, wowTemperatureLegendColors };
+export { ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, WEBMAP_REACT_NAMESPACE, WMSLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeLegendFromColorMap, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRCollection, useEDRCollectionCube, useEDRCollectionLocation, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations, wowTemperatureLegendColors };