@opengeoweb/webmap-react 9.28.1 → 9.29.1

package/index.esm.js

@@ -6,7 +6,7 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import { CustomTooltip, CanvasComponent, ToolContainerDraggable, CustomIconButton, dateUtils, PROJECTION } from '@opengeoweb/shared';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
-import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
+import { Paper, Box, Typography, Grid2, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
 import { Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime } from '@opengeoweb/theme';
 import _, { cloneDeep } from 'lodash';
 import * as turf from '@turf/turf';
@@ -17,7 +17,6 @@ import { debounce } from 'throttle-debounce';
 import { useResizeDetector } from 'react-resize-detector';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
-import Grid$1 from '@mui/material/Grid';
 
 var en = {
 	"webmap-react-event": "event:",
@@ -1933,13 +1932,13 @@ const LegendLayout = ({
 
 const defaultCanvasWidth = 150;
 const defaultCanvasHeight = 30;
-/**
- * Renders a legendgraphic image based on a WMImage.
- *
- * @param wmImage The wmImage element to render (from WMImage.js)
- * @param ctx The canvas to render the image on
- * @param width The width you want the image to have
- * @param height The height you want the image to have
+/**
+ * Renders a legendgraphic image based on a WMImage.
+ *
+ * @param wmImage The wmImage element to render (from WMImage.js)
+ * @param ctx The canvas to render the image on
+ * @param width The width you want the image to have
+ * @param height The height you want the image to have
  */
 const renderLegendGraphic = (wmImage, ctx, width, height) => {
   ctx.beginPath();
@@ -1998,7 +1997,7 @@ const Legend = ({
     return null;
   }
   const layerOpacity = layer.opacity ? layer.opacity : 1;
-  /* Get the wmLayer, it has more detailed info about the WMS service,
+  /* Get the wmLayer, it has more detailed info about the WMS service,
   like a title and the WMS legendgraphic url */
   const wmLayer = webmapUtils.getWMLayerById(layer.id);
   return jsx(LegendLayout, Object.assign({
@@ -2012,9 +2011,9 @@ const Legend = ({
     children: jsx(CanvasComponent, {
       redrawInterval: 500,
       onRenderCanvas: (ctx, width, height) => {
-        /*
-              Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
-              Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
+        /*
+              Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
+              Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
              */
         const legendWmLayer = webmapUtils.getWMLayerById(layer.id);
         const legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
@@ -2234,7 +2233,7 @@ const MapControls = _a => {
       userSelect: 'none'
     }
   }, props, {
-    children: jsx(Grid, Object.assign({
+    children: jsx(Grid2, Object.assign({
       sx: {
         '& > button': {
           marginBottom: 1
@@ -2997,8 +2996,8 @@ const generateDrawFunctionId = () => {
   generatedDrawFunctionIds += 1;
   return `drawFunctionId_${generatedDrawFunctionIds}`;
 };
-/**
- *  DrawFunction store for re-use of drawFunctions
+/**
+ *  DrawFunction store for re-use of drawFunctions
  */
 const drawFunctionStore = [];
 const getDrawFunctionFromStore = id => {
@@ -3018,22 +3017,22 @@ const NEW_LINESTRING_CREATED = translateKeyOutsideComponents('webmap-react-new-l
 const NEW_FEATURE_CREATED = translateKeyOutsideComponents('webmap-react-new-feature');
 const NEW_POINT_CREATED = translateKeyOutsideComponents('webmap-react-new-point');
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const defaultGeoJSONStyleProperties = {
   fill: '#ff7800',
@@ -3134,10 +3133,10 @@ var DRAGMODE;
   DRAGMODE["VERTEX"] = "VERTEX";
   DRAGMODE["FEATURE"] = "FEATURE";
 })(DRAGMODE || (DRAGMODE = {}));
-/**
- * Initializes a new feature for given type
- * @param type
- * @returns
+/**
+ * Initializes a new feature for given type
+ * @param type
+ * @returns
  */
 const getNewFeature = type => {
   switch (type) {
@@ -3356,8 +3355,7 @@ class MapDraw extends React.PureComponent {
     const {
       isInEditMode
     } = this.props;
-    const ESCAPE_KEY = 27;
-    if (event.keyCode === ESCAPE_KEY) {
+    if (event.key === 'Escape') {
       this.handleExitDrawMode('escaped');
     }
     if (isInEditMode && (event.key === 'Delete' || event.key === 'Backspace')) {
@@ -3492,9 +3490,9 @@ class MapDraw extends React.PureComponent {
     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
+    /* 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
     */
     const {
       mouseX,
@@ -3579,13 +3577,13 @@ class MapDraw extends React.PureComponent {
       // 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
+    /* 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.
+      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;
@@ -3680,10 +3678,10 @@ class MapDraw extends React.PureComponent {
     }
     return true;
   }
-  /**
-   * This creates a new feature in the geojson features array at the selectedFeatureIndex location
-   * @param event
-   * @returns
+  /**
+   * This creates a new feature in the geojson features array at the selectedFeatureIndex location
+   * @param event
+   * @returns if a new feature is made
    */
   createNewFeature(event) {
     const {
@@ -3696,7 +3694,7 @@ class MapDraw extends React.PureComponent {
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (!webmapjs) {
-      return;
+      return false;
     }
     if (this.myEditMode === EDITMODE.EMPTY) {
       this.myEditMode = EDITMODE.ADD_FEATURE;
@@ -3755,7 +3753,8 @@ class MapDraw extends React.PureComponent {
         if (polygonGeometry.coordinates[0] === undefined || polygonGeometry.coordinates[0].length === 0) {
           polygonGeometry.coordinates[0] = []; /* Used to create the first polygon */
         } else {
-          polygonGeometry.coordinates.push([]); /* Used to create extra polygons in the same feature */
+          this.myEditMode = EDITMODE.EMPTY;
+          return false;
         }
         this.snappedPolygonIndex = polygonGeometry.coordinates.length - 1;
         const featureCoords = polygonGeometry.coordinates[this.snappedPolygonIndex];
@@ -3791,13 +3790,9 @@ class MapDraw extends React.PureComponent {
         this.mouseIsOverVertexNr = featureCoords.length - 1;
       }
       webmapjs.draw('MapDraw::mouseDown');
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      return false;
+      return true;
     }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return true;
+    return false;
   }
   /* This is triggered when new points are added during the addmultipoint mode. One point is added per time */
   addPointToMultiPointFeature(event) {
@@ -3931,10 +3926,8 @@ class MapDraw extends React.PureComponent {
     if (this.insertVertexInEdge(event) === false) {
       return false;
     }
-    /* This is trigged when a new feature is created.  */
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (this.createNewFeature(event) === 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;
@@ -3951,7 +3944,7 @@ class MapDraw extends React.PureComponent {
     if (this.addPointToLineStringFeature(event) === false) {
       return false;
     }
-    return false; /* False means that this component will take over entire controll.
+    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 */
   }
   deletePolygon(index) {
@@ -4331,9 +4324,9 @@ class MapDraw extends React.PureComponent {
     }
   }
   beforeDraw(ctx) {
-    /* 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.
+    /* 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 _a, _b, _c;
     const {
@@ -4699,7 +4692,7 @@ class MapDraw extends React.PureComponent {
     const 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
+      /* After the image is loaded the canvas will be redrawn and drawIcon will be triggered again
       via the beforecanvasdisplay listener. */
       return undefined;
     }
@@ -5154,9 +5147,10 @@ const GeoJSONTextField = ({
       setValidity(false);
     }
   };
-  return jsx(Grid, Object.assign({
-    item: true,
-    xs: 12,
+  return jsx(Grid2, Object.assign({
+    size: {
+      xs: 12
+    },
     sx: sx
   }, {
     children: jsx(TextField, {
@@ -5197,9 +5191,10 @@ const FeatureLayers = ({
       label: `${index + 1}: ${geojson.features[index].geometry.type}`
     };
   }) : [];
-  return jsx(Grid, Object.assign({
-    item: true,
-    sm: 12
+  return jsx(Grid2, Object.assign({
+    size: {
+      sm: 12
+    }
   }, {
     children: jsxs(FormControl, Object.assign({
       disabled: !featureLayerList.length,
@@ -5248,9 +5243,10 @@ const EditModeButton = ({
   drawMode,
   onToggleEditMode
 }) => {
-  return jsx(Grid, Object.assign({
-    item: true,
-    xs: 12
+  return jsx(Grid2, Object.assign({
+    size: {
+      xs: 12
+    }
   }, {
     children: jsx(CustomTooltip, Object.assign({
       title: "Switch mode"
@@ -5281,22 +5277,22 @@ const EditModeButton = ({
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const simplePolygonGeoJSON = {
   type: 'FeatureCollection',
@@ -5785,7 +5781,7 @@ const StoryLayoutGrid = ({
           padding: 2
         }
       }, {
-        children: jsx(Grid, Object.assign({
+        children: jsx(Grid2, Object.assign({
           spacing: 2,
           container: true
         }, {
@@ -5845,9 +5841,10 @@ const IntersectionSelect = ({
   isDisabled: _isDisabled = false
 }) => {
   const [activeIntersection, setActiveIntersection] = React__default.useState(0);
-  return jsx(Grid, Object.assign({
-    item: true,
-    sm: 12
+  return jsx(Grid2, Object.assign({
+    size: {
+      sm: 12
+    }
   }, {
     children: jsxs(FormControl, Object.assign({
       variant: "filled",
@@ -5885,12 +5882,12 @@ const IntersectionSelect = ({
   }));
 };
 
-/**
- * Adds properties to the first geojson feature based on the given property object.
- * It only extends or changes the properties which are defined in styleConfig,
- * all other properties in the geojson are left unchanged.
- * @param geojson
- * @param featureProperties
+/**
+ * Adds properties to the first geojson feature based on the given property object.
+ * It only extends or changes the properties which are defined in styleConfig,
+ * all other properties in the geojson are left unchanged.
+ * @param geojson
+ * @param featureProperties
  */
 const addFeatureProperties = (geojson, featureProperties, featureIndex = 0) => {
   if (!geojson) {
@@ -5919,13 +5916,13 @@ const getGeoJSONPropertyValue = (property, properties, polygonDrawMode, defaultP
   // otherwise get values from defaultStyle
   return defaultProperties[property];
 };
-/**
- * moves geoJSON feature as new feature. Mutates newGeoJSON
- * @constructor
- * @param {GeoJSON.FeatureCollection} currentGeoJSON - current geoJSON
- * @param {GeoJSON.FeatureCollection} newGeoJSON - new geoJSON
- * @param {number} featureLayerIndex - feature layer index
- * @param {string} text - reason of change
+/**
+ * moves geoJSON feature as new feature. Mutates newGeoJSON
+ * @constructor
+ * @param {GeoJSON.FeatureCollection} currentGeoJSON - current geoJSON
+ * @param {GeoJSON.FeatureCollection} newGeoJSON - new geoJSON
+ * @param {number} featureLayerIndex - feature layer index
+ * @param {string} text - reason of change
  */
 const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason, selectionType) => {
   const feature = newGeoJSON.features[featureLayerIndex];
@@ -5974,11 +5971,11 @@ const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason, sele
   }
   return undefined;
 };
-/**
- * Returns the intersection of two point features. In case of a polygon, only the first feature is used.
- * @param a Feature A
- * @param b Feature B
- * @returns The intersection of the two features.
+/**
+ * Returns the intersection of two point features. In case of a polygon, only the first feature is used.
+ * @param a Feature A
+ * @param b Feature B
+ * @returns The intersection of the two features.
  */
 const intersectPointGeoJSONS = (a, b, geoJSONProperties = {
   stroke: '#FF0000',
@@ -6009,11 +6006,11 @@ const intersectPointGeoJSONS = (a, b, geoJSONProperties = {
     }] : [featureA]
   }, geoJSONProperties);
 };
-/**
- * Returns the intersection of two (multi) polygon features. In case of a polygon, only the first feature is used.
- * @param a Feature A
- * @param b Feature B
- * @returns The intersection of the two features.
+/**
+ * Returns the intersection of two (multi) polygon features. In case of a polygon, only the first feature is used.
+ * @param a Feature A
+ * @param b Feature B
+ * @returns The intersection of the two features.
  */
 const intersectPolygonGeoJSONS = (a, b, geoJSONProperties = {
   stroke: '#FF0000',
@@ -6048,10 +6045,10 @@ const intersectPolygonGeoJSONS = (a, b, geoJSONProperties = {
 const isPointFeatureCollection = geojson => {
   return geojson.features[0].geometry.type === 'Point';
 };
-/**
- * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
- * @param geoJSONs
- * @returns GeoJSONS extend with intersections
+/**
+ * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
+ * @param geoJSONs
+ * @returns GeoJSONS extend with intersections
  */
 const createInterSections = (geojson, otherGeoJSON, geoJSONproperties = {
   stroke: '#f24a00',
@@ -9608,22 +9605,22 @@ $$1({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }
   }
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const getCurrentDimensionValue = (name, dimensions = []) => {
   const currentDimension = dimensions.find(dim => dim.name === name);
@@ -9678,21 +9675,21 @@ const getLayerUpdateInfo = (wmLayer, mapId) => {
   return updateObject;
 };
 
-/** Returns filtered list of props with geoJson
- * @param children React.ReactNode, layers with geoJson
+/** Returns filtered list of props with geoJson
+ * @param children React.ReactNode, layers with geoJson
  */
 const getFeatureLayers = children => children && Array.isArray(children) ? children
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 .reduce((acc, val) => acc.concat(val), []).filter(c => c && c.props && c.props.geojson).map(c => c.props).reverse() : [];
-/**
- * Returns true if this is a maplayer and not a baselayer or overlayer
- * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
+/**
+ * Returns true if this is a maplayer and not a baselayer or overlayer
+ * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
  */
 const isAMapLayer = layer => 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
+/**
+ * Returns true if this is a geojsonlayer (layer containing geojson field)
+ * @param layer The LayerFoundation object, or the props from the ReactWMJSLayer
  */
 const isAGeoJSONLayer = layer => layer.geojson !== undefined;
 function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layerDimensions) {
@@ -9916,17 +9913,17 @@ class ReactMapView extends React.Component {
         this.clearRefetchTimer();
       }
     };
-    /**
-     * Start the refetch timer
-     * @param force - Force a fetch and wmLayer parse immediately
+    /**
+     * Start the refetch timer
+     * @param force - Force a fetch and wmLayer parse immediately
      */
     this.onStartRefetchTimer = force => {
       const {
         shouldAutoFetch
       } = this.props;
-      /* TODO, Maarten Plieger, 2021-09-02
-        This causes many issues, we should improve the update strategy.
-        Certain presets have >20 layers. This causes 20 times parsing the GetCapabilities for a minor update of the store.
+      /* TODO, Maarten Plieger, 2021-09-02
+        This causes many issues, we should improve the update strategy.
+        Certain presets have >20 layers. This causes 20 times parsing the GetCapabilities for a minor update of the store.
       */
       this.clearRefetchTimer();
       const autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
@@ -10293,6 +10290,11 @@ class ReactMapView extends React.Component {
     }
     const wmjsMap = new WMJSMap(this.adagucWebMapJSRef.current);
     wmjsMap.shouldPrefetch = !shouldDisablePrefetching;
+    // pass translation function
+    const {
+      t
+    } = this.props;
+    wmjsMap.t = t;
     this.adaguc.currentChildren = [];
     this.adaguc.baseLayers = [];
     webmapUtils.registerWMJSMap(wmjsMap, mapId);
@@ -10525,28 +10527,28 @@ const MapTime = ({
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const 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.
+/**
+ * This component registers to a webmap instance and draws axis for height and time in the map using the Map Canvas.
  */
 const ProfileAxis = ({
   mapId
@@ -10607,13 +10609,13 @@ const ProfileAxis = ({
   }, [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
+/**
+ * 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
  */
 const getTimeSpacingInMs = (bbox, width) => {
   const hoursInView = Math.abs(bbox.right - bbox.left) / (MS_IN_HOUR * width / 500);
@@ -10655,13 +10657,13 @@ const drawTimeAxis = (ctx, bbox, offsetX, offsetY, width, height, axisStyle) =>
   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
+/**
+ * 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
  */
 const getHeightSpacingInMs = (bbox, height) => {
   const numMeterInView = Math.abs(bbox.bottom - bbox.top) / height;
@@ -10766,6 +10768,9 @@ const MapView = _a => {
     dimensions,
     mapId: mapIdProp
   } = props;
+  const {
+    t
+  } = useTranslation();
   const wmjsMapRef = React.useRef(null);
   const mapId = React.useRef(mapIdProp).current;
   if (mapIdProp !== mapId) {
@@ -10844,7 +10849,8 @@ const MapView = _a => {
           if (onWMJSMount) {
             onWMJSMount(id);
           }
-        }
+        },
+        t: t
       }, {
         children: children
       }))
@@ -11036,7 +11042,7 @@ const DimensionSelectDialog = ({
         padding: 4
       }
     }, {
-      children: jsx(Grid, Object.assign({
+      children: jsx(Grid2, Object.assign({
         container: true,
         direction: "row"
       }, {
@@ -11094,7 +11100,9 @@ const DimensionSelectSlider = ({
     }, {
       children: jsx(Box, Object.assign({
         component: "span",
-        m: 1
+        sx: {
+          m: 1
+        }
       }, {
         children: jsx(SmallFontSlider, {
           "data-testid": "verticalSlider",
@@ -11167,9 +11175,10 @@ const MapDimensionSelect = ({
     t
   } = useWebmapReactTranslation();
   const tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
-  return jsxs(Grid, Object.assign({
-    item: true,
-    xs: "auto"
+  return jsxs(Grid2, Object.assign({
+    size: {
+      xs: 'auto'
+    }
   }, {
     children: [jsx(CustomIconButton, Object.assign({
       tooltipTitle: tooltipTitle,
@@ -11259,18 +11268,16 @@ const LayerInfoList = ({
       sx: textStyleWithMargin
     }, {
       children: "-"
-    })) : jsx(Grid$1, Object.assign({
+    })) : jsx(Grid2, Object.assign({
       container: true,
       direction: "column"
     }, {
       children: list.map(item => jsxs("div", {
-        children: [jsxs(Grid$1, Object.assign({
-          item: true,
+        children: [jsxs(Grid2, Object.assign({
           container: true,
           direction: "row"
         }, {
-          children: [item.icon, jsx(Grid$1, Object.assign({
-            item: true,
+          children: [item.icon, jsx(Grid2, Object.assign({
             sx: {
               marginLeft: '10px'
             }
@@ -11282,8 +11289,7 @@ const LayerInfoList = ({
               children: [item.label, ":"]
             }))
           }))]
-        })), jsx(Grid$1, Object.assign({
-          item: true,
+        })), jsx(Grid2, Object.assign({
           container: true,
           direction: "row",
           sx: {
@@ -11913,22 +11919,22 @@ const LayerInfoDialog = ({
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const baseLayerGrey = {
   id: webmapUtils.generateLayerId(),
@@ -11957,22 +11963,22 @@ var defaultLayers = /*#__PURE__*/Object.freeze({
   overLayer: overLayer
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const DWD = {
   name: 'DWD',
@@ -12087,22 +12093,22 @@ var publicServices = /*#__PURE__*/Object.freeze({
   nationaalgeoregister: nationaalgeoregister
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const baseLayer = {
   name: 'arcGisSat',
@@ -12245,7 +12251,7 @@ const harmonieAirTemperature = {
 };
 const harmoniePrecipitation = {
   service: KNMIgeoservicesHarmonie.url,
-  name: 'precipitation_flux',
+  name: 'rainfall_rate_hagl',
   id: webmapUtils.generateLayerId(),
   layerType: LayerType.mapLayer,
   enabled: true