@opengeoweb/webmap-react 9.20.2 → 9.22.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect } from 'react';
-import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
+import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getPixelCoordFromLatLong, WMJSMAP_LONLAT_EPSGCODE, getLatLongFromPixelCoord, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
 import { CustomTooltip, CanvasComponent, ToolContainerDraggable, CustomIconButton, dateUtils } from '@opengeoweb/shared';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
@@ -175,24 +175,24 @@ var nl = {
 	"webmap-react-click-disconnect": "Klik om laag los te koppelen",
 	"webmap-react-click-connect": "Klik om laag te koppelen",
 	"webmap-react-layer-info": "Laag Informatie",
-	"webmap-react-vertical-level": "niet vertaald",
-	"webmap-react-hpa": "niet vertaald",
-	"webmap-react-ensemble-member": "niet vertaald",
-	"webmap-react-member": "niet vertaald",
-	"webmap-react-probability": "niet vertaald",
-	"webmap-react-percent": "niet vertaald",
-	"webmap-react-level": "niet vertaald",
-	"webmap-react-west": "niet vertaald",
-	"webmap-react-east": "niet vertaald",
-	"webmap-react-north": "niet vertaald",
-	"webmap-react-south": "niet vertaald",
-	"webmap-react-new-linestring-created": "niet vertaald",
-	"webmap-react-new-feature": "niet vertaald",
-	"webmap-react-new-point": "niet vertaald",
-	"webmap-react-point": "niet vertaald",
-	"webmap-react-polygon": "niet vertaald",
-	"webmap-react-box": "niet vertaald",
-	"webmap-react-linestring": "niet vertaald"
+	"webmap-react-vertical-level": "Verticaal niveau",
+	"webmap-react-hpa": "hPa",
+	"webmap-react-ensemble-member": "Ensemble lid",
+	"webmap-react-member": "lid",
+	"webmap-react-probability": "Waarschijnlijkheid",
+	"webmap-react-percent": "%",
+	"webmap-react-level": "Niveau",
+	"webmap-react-west": "west",
+	"webmap-react-east": "oost",
+	"webmap-react-north": "noord",
+	"webmap-react-south": "zuid",
+	"webmap-react-new-linestring-created": "nieuw punt in lijn gemaakt",
+	"webmap-react-new-feature": "nieuwe feature gemaakt",
+	"webmap-react-new-point": "nieuw punt gemaakt",
+	"webmap-react-point": "Punt",
+	"webmap-react-polygon": "Polygoon",
+	"webmap-react-box": "Rechthoek",
+	"webmap-react-linestring": "Lijn"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -2748,13 +2748,16 @@ const isBetween = (a, c, b) => {
 };
 const convertGeoCoordsToScreenCoords = (featureCoords, mapId) => {
   const webmapjs = webmapUtils.getWMJSMapById(mapId);
+  if (!webmapjs) {
+    return [];
+  }
   const XYCoords = [];
   for (const featureCoord of featureCoords) {
     if (featureCoord.length < 2) {
       // eslint-disable-next-line no-continue
       continue;
     }
-    const coord = webmapjs.getPixelCoordFromLatLong({
+    const coord = getPixelCoordFromLatLong(webmapjs, {
       x: featureCoord[0],
       y: featureCoord[1]
     });
@@ -2764,14 +2767,17 @@ const convertGeoCoordsToScreenCoords = (featureCoords, mapId) => {
 };
 const getPixelCoordFromGeoCoord = (featureCoords, mapId) => {
   const webmapjs = webmapUtils.getWMJSMapById(mapId);
+  if (!webmapjs) {
+    return [];
+  }
   const {
     width,
     height
   } = webmapjs.getSize();
-  const bbox = webmapjs.getBBOX();
+  const bbox = webmapjs.getDrawBBOX();
   const proj = webmapjs.getProj4();
   const XYCoords = [];
-  const from = getProj4(proj.lonlat);
+  const from = getProj4(WMJSMAP_LONLAT_EPSGCODE);
   const to = getProj4(proj.crs);
   for (const featureCoord of featureCoords) {
     if (featureCoord.length < 2) {
@@ -2822,12 +2828,15 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
     const featureCoords = feature.geometry.coordinates;
     /* Get all vertexes */
     const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-    if (XYCoords.length > 0 && distance(XYCoords[0], {
+    const calculatedDistance = XYCoords.length > 0 ? distance(XYCoords[0], {
       x: mouseX,
       y: mouseY
-    }) < maxDistance) {
+    }) : null;
+    if (calculatedDistance && calculatedDistance < maxDistance) {
       return {
-        coordinateIndexInFeature: 0
+        coordinateIndexInFeature: 0,
+        distance: calculatedDistance,
+        screenCoords: Object.assign({}, XYCoords[0])
       };
     }
   }
@@ -2840,12 +2849,15 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       }
       /* Get all vertexes */
       const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-      if (XYCoords.length > 0 && distance(XYCoords[0], {
+      const calculatedDistance = XYCoords.length > 0 && distance(XYCoords[0], {
         x: mouseX,
         y: mouseY
-      }) < maxDistance) {
+      });
+      if (calculatedDistance && calculatedDistance < maxDistance) {
         return {
-          coordinateIndexInFeature: polygonIndex
+          coordinateIndexInFeature: polygonIndex,
+          distance: calculatedDistance,
+          screenCoords: Object.assign({}, XYCoords[0])
         };
       }
     }
@@ -2867,11 +2879,21 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         if (isPointInPoly) {
           if (ignoreCoordinateIndexInFeature) {
             return {
-              coordinateIndexInFeature: 0
+              coordinateIndexInFeature: 0,
+              distance: 0,
+              screenCoords: {
+                x: mouseX,
+                y: mouseY
+              }
             };
           }
           return {
-            coordinateIndexInFeature: polygonIndex
+            coordinateIndexInFeature: polygonIndex,
+            distance: 0,
+            screenCoords: {
+              x: mouseX,
+              y: mouseY
+            }
           };
         }
       } catch (e) {
@@ -2894,7 +2916,12 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         const isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.polygon(poly));
         if (isPointInPoly) {
           return {
-            coordinateIndexInFeature: polygonIndex
+            coordinateIndexInFeature: polygonIndex,
+            distance: 0,
+            screenCoords: {
+              x: mouseX,
+              y: mouseY
+            }
           };
         }
       } catch (e) {
@@ -2914,7 +2941,9 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         y: mouseY
       }) < maxDistance) {
         return {
-          coordinateIndexInFeature: j
+          coordinateIndexInFeature: j,
+          distance: 0,
+          screenCoords: Object.assign({}, coord)
         };
       }
     }
@@ -2922,18 +2951,30 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
   return null;
 };
 const checkHoverFeatures = (geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) => {
+  const result = [];
   for (let j = 0; j < geojson.features.length; j += 1) {
     const feature = geojson.features[j];
     const hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature);
-    if (hoverResult != null) {
-      return {
+    if (hoverResult != null && hoverResult.distance != null) {
+      result.push({
         coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
         featureIndex: j,
-        feature
-      };
+        feature,
+        distance: hoverResult.distance,
+        screenCoords: Object.assign({}, hoverResult.screenCoords)
+      });
     }
   }
-  return null;
+  if (result.length === 0) {
+    return null;
+  }
+  /* Sort the list, closest distance on top */
+  result.sort((a, b) => {
+    const distanceA = a ? a.distance : 0;
+    const distanceB = b ? b.distance : 0;
+    return distanceA - distanceB;
+  }); // b - a for reverse sort
+  return result[0];
 };
 let generatedDrawFunctionIds = 0;
 const generateDrawFunctionId = () => {
@@ -3238,6 +3279,7 @@ class MapDraw extends React.PureComponent {
     }
   }
   componentDidUpdate(prevProps) {
+    var _a;
     const {
       geojson,
       isInEditMode,
@@ -3264,7 +3306,7 @@ class MapDraw extends React.PureComponent {
           return;
         }
       }
-      webmapUtils.getWMJSMapById(mapId).draw('MapDraw::componentDidUpdateIsInEditMode');
+      (_a = webmapUtils.getWMJSMapById(mapId)) === null || _a === void 0 ? void 0 : _a.draw('MapDraw::componentDidUpdateIsInEditMode');
     }
     /* Handle toggle delete */
     if (isInDeleteMode !== prevIsInDeleteMode) {
@@ -3454,7 +3496,8 @@ class MapDraw extends React.PureComponent {
             mouseX,
             mouseY,
             isInEditMode,
-            feature: result.feature
+            feature: result.feature,
+            screenCoords: result.screenCoords
           };
           onHoverFeature(this.featureEvent);
         } else {
@@ -3474,7 +3517,10 @@ class MapDraw extends React.PureComponent {
       return undefined;
     }
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
-    this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
+    if (!webmapjs) {
+      return undefined;
+    }
+    this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
       x: mouseX,
       y: mouseY
     });
@@ -3570,9 +3616,12 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const 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 = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
@@ -3592,7 +3641,7 @@ class MapDraw extends React.PureComponent {
     }
     if (this.myDrawMode === DRAWMODE.LINESTRING) {
       if (this.selectedEdge !== EDGE.NONE && this.myEditMode !== EDITMODE.DELETE_FEATURES) {
-        this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
@@ -3627,6 +3676,9 @@ class MapDraw extends React.PureComponent {
       selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
+    if (!webmapjs) {
+      return;
+    }
     if (this.myEditMode === EDITMODE.EMPTY) {
       this.myEditMode = EDITMODE.ADD_FEATURE;
       if (!this.geojson.features[selectedFeatureIndex]) {
@@ -3634,7 +3686,7 @@ class MapDraw extends React.PureComponent {
       }
       const feature = this.getSelectedFeature();
       this.initializeFeatureCoordinates(feature, this.myDrawMode);
-      this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
+      this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
         x: mouseX,
         y: mouseY
       });
@@ -3738,9 +3790,12 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const 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 = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
@@ -3766,19 +3821,34 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const 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 = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
         const feature = this.getSelectedFeature();
         if (feature.geometry.type === 'Polygon') {
           const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.featureHasChanged('vertex added to polygon');
-          this.mouseIsOverVertexNr = featureCoords.length - 1;
-          this.mouseMove(event);
+          // "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
+          const [coordA, coordB] = featureCoords.slice(-2);
+          const 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;
       }
@@ -3794,9 +3864,12 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
+    if (!webmapjs) {
+      return false;
+    }
     if (this.myDrawMode === DRAWMODE.LINESTRING) {
       if (this.myEditMode === EDITMODE.ADD_FEATURE) {
-        this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
@@ -3911,7 +3984,7 @@ class MapDraw extends React.PureComponent {
       this.deletePolygon(polygonIndex);
     }
     this.featureHasChanged('deleteFeature');
-    webmapjs.draw('MapDraw::deletefeatures');
+    webmapjs === null || webmapjs === void 0 ? void 0 : webmapjs.draw('MapDraw::deletefeatures');
   }
   mouseUp(event) {
     const {
@@ -3938,7 +4011,8 @@ class MapDraw extends React.PureComponent {
           mouseX,
           mouseY,
           isInEditMode,
-          feature: result.feature
+          feature: result.feature,
+          screenCoords: Object.assign({}, result.screenCoords)
         };
         onClickFeature(featureEvent);
       } else {
@@ -4011,7 +4085,7 @@ class MapDraw extends React.PureComponent {
         featureCoords.pop();
       }
       this.featureHasChanged('cancelEdit');
-      webmapjs.draw('MapDraw::cancelEdit');
+      webmapjs === null || webmapjs === void 0 ? void 0 : webmapjs.draw('MapDraw::cancelEdit');
     } else {
       /* When in deletefeatures mode, remove any vertex under the mousecursor */
       // eslint-disable-next-line no-lonely-if
@@ -4237,7 +4311,7 @@ class MapDraw extends React.PureComponent {
      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, _d, _e;
+    var _a, _b, _c;
     const {
       selectedFeatureIndex,
       isInEditMode,
@@ -4249,9 +4323,8 @@ class MapDraw extends React.PureComponent {
     this.textPositions = [];
     this.mouseOverPolygonCoordinates = [];
     this.mouseOverPolygonFeatureIndex = -1;
-    /* Current selected feature from GeoJSON */
-    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
-      const feature = this.geojson.features[featureIndex];
+    const drawFeature = (feature, featureIndex) => {
+      var _a, _b, _c;
       const featureType = feature.geometry.type;
       const totalmiddle = {
         x: 0,
@@ -4263,7 +4336,7 @@ class MapDraw extends React.PureComponent {
         const XYCoords = getPixelCoordFromGeoCoord([featureCoords], mapId);
         if (XYCoords.length === 0) {
           // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
           this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
@@ -4273,8 +4346,7 @@ class MapDraw extends React.PureComponent {
         const featureCoords = feature.geometry.coordinates;
         const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         if (XYCoords.length === 0) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
           this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
@@ -4312,7 +4384,7 @@ class MapDraw extends React.PureComponent {
         if (totalmiddle.nr > 0) {
           const mx = totalmiddle.x / totalmiddle.nr;
           const my = totalmiddle.y / totalmiddle.nr;
-          if ((_c = feature.properties) === null || _c === void 0 ? void 0 : _c.text) {
+          if ((_a = feature.properties) === null || _a === void 0 ? void 0 : _a.text) {
             this.textPositions.push({
               x: mx,
               y: my,
@@ -4333,7 +4405,7 @@ class MapDraw extends React.PureComponent {
             continue;
           }
           const middle = this.drawPolygon(ctx, XYCoords, featureIndex, polygonIndex);
-          if (middle && ((_d = feature.properties) === null || _d === void 0 ? void 0 : _d.text)) {
+          if (middle && ((_b = feature.properties) === null || _b === void 0 ? void 0 : _b.text)) {
             this.textPositions.push({
               x: middle.x,
               y: middle.y,
@@ -4359,17 +4431,15 @@ class MapDraw extends React.PureComponent {
         /* Loop through all line pints of the same feature */
         const featureCoords = feature.geometry.coordinates;
         if (!featureCoords || !featureCoords.length) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         /* Only draw if there is stuff to show */
         if (XYCoords.length === 0) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         const middle = this.drawLine(ctx, XYCoords, featureIndex, 0);
-        if (middle && ((_e = feature.properties) === null || _e === void 0 ? void 0 : _e.text)) {
+        if (middle && ((_c = feature.properties) === null || _c === void 0 ? void 0 : _c.text)) {
           this.textPositions.push({
             x: middle.x,
             y: middle.y,
@@ -4383,7 +4453,17 @@ class MapDraw extends React.PureComponent {
           }
         }
       }
+    };
+    /* Draw all features */
+    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
+      const feature = this.geojson.features[featureIndex];
+      /* Do not draw selected feature here, should be done last */
+      if (featureIndex !== selectedFeatureIndex) {
+        drawFeature(feature, featureIndex);
+      }
     }
+    /* Draw selected feature to display it on top */
+    drawFeature(this.getSelectedFeature(), selectedFeatureIndex);
     /* Higlight 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) {
       const feature = this.getSelectedFeature();
@@ -4417,6 +4497,29 @@ class MapDraw extends React.PureComponent {
       ctx.font = '12px Arial';
       ctx.fillText(text, x, y);
     }
+    /* Draw hovered feature */
+    if (this.featureEvent) {
+      const {
+        feature,
+        featureIndex,
+        screenCoords
+      } = this.featureEvent;
+      const drawFunctionId = (_c = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _c === void 0 ? void 0 : _c.hoverDrawFunctionId;
+      const drawFunction = getDrawFunctionFromStore(drawFunctionId);
+      if (drawFunction) {
+        drawFunction({
+          context: ctx,
+          featureIndex,
+          isInEditMode,
+          feature,
+          isHovered: true,
+          coord: screenCoords,
+          selected: featureIndex === selectedFeatureIndex,
+          mouseX: 0,
+          mouseY: 0
+        });
+      }
+    }
   }
   /* Checks if mouse is in proximity of given coordinate */
   checkDist(coord, polygonIndex, mouseX, mouseY) {
@@ -4570,7 +4673,10 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
-    const image = webmapjs.getMapImageStore.getImage(featureProperties.imageURL);
+    if (!webmapjs) {
+      return undefined;
+    }
+    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
@@ -9489,8 +9595,7 @@ const getLayerUpdateInfo = (wmLayer, mapId) => {
   return updateObject;
 };
 
-/**
- * Returns filtered list of props with geoJson
+/** Returns filtered list of props with geoJson
  * @param children React.ReactNode, layers with geoJson
  */
 const getFeatureLayers = children => children && Array.isArray(children) ? children
@@ -9607,6 +9712,9 @@ const setWMLayerPropsBasedOnChildProps = (child, wmLayer, mapViewProps) => {
 };
 const addWMLayerPropsBasedOnChildProps = (child, mapId, props, onUpdateLayerInformation) => {
   const wmjsMap = getWMJSMapById(mapId);
+  if (!wmjsMap) {
+    return;
+  }
   const keepOnTop = child.layerType === LayerType.overLayer || false;
   const newWMLayer = new WMLayer(Object.assign(Object.assign({}, child), {
     keepOnTop
@@ -9645,6 +9753,9 @@ const removeWMLayerFromMap = (wmLayer, mapId, onUpdateLayerInformation) => {
   wmLayer.remove();
   /// Trigger update of all map dimensions
   const wmjsMap = getWMJSMapById(mapId);
+  if (!wmjsMap) {
+    return;
+  }
   onUpdateLayerInformation && onUpdateLayerInformation({
     origin: ORIGIN_REACTMAPVIEW_UTILS_ONUPDATELAYERINFO,
     layerStyle: null,
@@ -9707,8 +9818,7 @@ class ReactMapView extends React.Component {
       const {
         shouldAutoFetch
       } = this.props;
-      /*
-        TODO, Maarten Plieger, 2021-09-02, https://gitlab.com/opengeoweb/opengeoweb/-/issues/1159:
+      /* TODO, Maarten Plieger, 2021-09-02, https://gitlab.com/opengeoweb/opengeoweb/-/issues/1159:
         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.
       */
@@ -9719,6 +9829,9 @@ class ReactMapView extends React.Component {
           mapId
         } = this.props;
         const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        if (!wmjsMap) {
+          return;
+        }
         const layers = wmjsMap.getLayers();
         layers.forEach(layer => {
           if (layer.enabled !== false) {
@@ -10040,6 +10153,9 @@ class ReactMapView extends React.Component {
       mapId
     } = this.props;
     const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+    if (!wmjsMap) {
+      return;
+    }
     wmjsMap.getListener().suspendEvents();
     wmjsMap.draw();
     wmjsMap.getListener().resumeEvents();
@@ -10052,7 +10168,7 @@ class ReactMapView extends React.Component {
       bbox,
       onMapPinChangeLocation
     } = this.props;
-    /* Check if we have something to mount WMJSMap on */
+    /* Check if we have something to mount IWMJSMap on */
     if (this.adagucWebMapJSRef.current === null) {
       console.warn('No this.adagucWebMapJSRef.current  yet ');
       return null;
@@ -10134,6 +10250,9 @@ class ReactMapView extends React.Component {
           mapId
         } = this.props;
         const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        if (!wmjsMap) {
+          return;
+        }
         wmjsMap.setSize(newWidth, newHeight);
       }
     }
@@ -10319,9 +10438,11 @@ const ProfileAxis = ({
   mapId
 }) => {
   const drawAxisOnMapDisplay = (ctx, webMap, axisStyle) => {
-    const bbox = webMap.getBBOX();
-    const width = webMap.getWidth();
-    const height = webMap.getHeight();
+    const bbox = webMap.getDrawBBOX();
+    const {
+      width,
+      height
+    } = webMap.getSize();
     const offY = height - 50;
     const offX = 20;
     try {
@@ -10349,7 +10470,8 @@ const ProfileAxis = ({
     };
     // Draw on map canvas callback function
     const beforeCanvasDisplay = ctx => {
-      drawAxisOnMapDisplay(ctx, getWMJSMapById(mapId), axisStyle);
+      const webmapjs = getWMJSMapById(mapId);
+      webmapjs && drawAxisOnMapDisplay(ctx, webmapjs, axisStyle);
     };
     // unMount logic
     const unMount = () => {
@@ -10361,7 +10483,7 @@ const ProfileAxis = ({
     // Mount logic
     const webMap = getWMJSMapById(mapId);
     if (webMap && webMap.getProjection().srs === 'GFI:TIME_ELEVATION') {
-      webMap.hideScaleBar();
+      webMap.displayScaleBarInMap(false);
       webMap.hideMouseCursorProperties();
       webMap.setTimeOffset('');
       webMap.addListener('beforecanvasdisplay', beforeCanvasDisplay, true);
@@ -10476,13 +10598,17 @@ const drawHeightAxis = (ctx, bbox, offsetX, offsetY, width, height, axisStyle) =
   ctx.stroke();
 };
 const drawCursor = (ctx, bbox, offsetX, offsetY, width, height, webMapJS, axisStyle) => {
+  const {
+    mouseX: mapMouseX,
+    mouseY: mapMouseY
+  } = webMapJS.getMapMouseCoordinates();
   // Do not draw if mouse is not in the map
-  if (webMapJS.mouseX < 5 && webMapJS.mouseY < 5) {
+  if (mapMouseX < 5 && mapMouseY < 5) {
     return;
   }
   /* Draw cursor line */
-  const mouseX = Math.round(webMapJS.mouseX) + 0.5;
-  const mouseY = Math.round(webMapJS.mouseY) + 0.5;
+  const mouseX = Math.round(mapMouseX) + 0.5;
+  const mouseY = Math.round(mapMouseY) + 0.5;
   ctx.strokeStyle = '#303030';
   ctx.setLineDash([15, 5]);
   ctx.beginPath();
@@ -10570,15 +10696,18 @@ const MapView = _a => {
         mapId: mapId
       }), jsx(ZoomControls, {
         onZoomIn: () => {
-          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          wmjsMap.zoomIn(undefined);
+          var _a;
+          (_a = webmapUtils.getWMJSMapById(mapId)) === null || _a === void 0 ? void 0 : _a.zoomIn(undefined);
         },
         onZoomOut: () => {
-          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-          wmjsMap.zoomOut();
+          var _a;
+          (_a = webmapUtils.getWMJSMapById(mapId)) === null || _a === void 0 ? void 0 : _a.zoomOut();
         },
         onZoomReset: () => {
           const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          if (!wmjsMap) {
+            return;
+          }
           wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
         }
       })]
@@ -10592,7 +10721,11 @@ const MapView = _a => {
         showLegend: false,
         displayTimeInMap: false,
         onWMJSMount: id => {
-          wmjsMapRef.current = webmapUtils.getWMJSMapById(id);
+          const webMapJS = webmapUtils.getWMJSMapById(id);
+          if (!webMapJS) {
+            return;
+          }
+          wmjsMapRef.current = webMapJS;
           if (onWMJSMount) {
             onWMJSMount(id);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.20.2",
+  "version": "9.22.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -11,7 +11,7 @@
     "@opengeoweb/webmap": "*",
     "axios": "1.5.0",
     "@opengeoweb/theme": "*",
-    "@mui/material": "~5.15.11",
+    "@mui/material": "^5.16.0",
     "@opengeoweb/shared": "*",
     "lodash": "^4.17.21",
     "proj4": "^2.9.2",
@@ -19,8 +19,8 @@
     "immer": "^10.0.3",
     "react-resize-detector": "^9.1.0",
     "throttle-debounce": "^5.0.0",
-    "i18next": "^23.7.11",
-    "react-i18next": "^13.5.0"
+    "i18next": "^23.11.5",
+    "react-i18next": "^14.1.2"
   },
   "peerDependencies": {
     "react": "18"

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

@@ -16,6 +16,10 @@ interface InputEvent {
 export interface FeatureEvent {
     coordinateIndexInFeature: number;
     featureIndex: number;
+    screenCoords: {
+        x: number;
+        y: number;
+    };
     mouseX: number;
     mouseY: number;
     isInEditMode: boolean;

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

@@ -5,6 +5,11 @@ export type CheckHoverFeaturesResult = {
     coordinateIndexInFeature: number;
     featureIndex: number;
     feature: GeoJsonFeature;
+    distance: number;
+    screenCoords: {
+        x: number;
+        y: number;
+    };
 } | null;
 export type ProjectorCache = Record<string, InterfaceProjection>;
 export declare const Proj4js: typeof proj4;

package/src/lib/components/MapView/MapViewLayer.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { LayerFoundation, WMJSMap, WMLayer } from '@opengeoweb/webmap';
+import { LayerFoundation, IWMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { DrawModeExitCallback, FeatureEvent } from '../MapDraw';
 export interface MapViewLayerProps extends LayerFoundation {
     id: string;
-    onLayerReady?: (layer: WMLayer, webmap?: WMJSMap) => void;
+    onLayerReady?: (layer: WMLayer, webmap?: IWMJSMap) => void;
     onLayerError?: (layer: WMLayer, error?: Error) => void;
     isInEditMode?: boolean;
     drawMode?: string;

package/src/lib/components/ReactMapView/ReactMapView.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import * as React from 'react';
-import { WMJSMap, WMLayer, WMBBOX } from '@opengeoweb/webmap';
+import { IWMJSMap, WMLayer, WMBBOX } from '@opengeoweb/webmap';
 import { ReactMapViewProps } from './types';
 import type { MapViewLayerProps } from '../MapView';
 export declare const ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = "ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION";
@@ -51,7 +51,7 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
     clearRefetchTimer: () => void;
     updateWMJSMapProps(prevProps: ReactMapViewProps, props: ReactMapViewProps): void;
     drawDebounced(): void;
-    mountWMJSMap(): WMJSMap | null;
+    mountWMJSMap(): IWMJSMap | null;
     resize(): void;
     render(): React.ReactElement;
 }

package/src/lib/components/ReactMapView/types.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { Bbox, Dimension, WMJSMap } from '@opengeoweb/webmap';
+import { Bbox, Dimension, IWMJSMap } from '@opengeoweb/webmap';
 export interface ReactMapViewProps {
     listeners?: {
         name?: string;
         data: string;
         keep: boolean;
-        callbackfunction: (webMap: WMJSMap, value: string) => void;
+        callbackfunction: (webMap: IWMJSMap, value: string) => void;
     }[];
     srs?: string;
     bbox?: Bbox;

package/src/lib/components/ReactMapView/utils.d.ts

@@ -1,10 +1,9 @@
-import { Dimension, LayerFoundation, WMJSMap, WMLayer } from '@opengeoweb/webmap';
+import { Dimension, LayerFoundation, IWMJSMap, WMLayer } from '@opengeoweb/webmap';
 import React from 'react';
 import { FeatureLayer } from '../MapDraw';
 import type { MapViewLayerProps, MapViewProps } from '../MapView';
 import { ReactMapViewProps, UpdateLayerInfoPayload } from './types';
-/**
- * Returns filtered list of props with geoJson
+/** Returns filtered list of props with geoJson
  * @param children React.ReactNode, layers with geoJson
  */
 export declare const getFeatureLayers: (children: React.ReactNode) => FeatureLayer[];
@@ -24,4 +23,4 @@ export declare const parseWMJSLayer: (wmLayer: WMLayer, forceReload: boolean) =>
 export declare const setWMLayerPropsBasedOnChildProps: (child: MapViewLayerProps, wmLayer: WMLayer, mapViewProps: ReactMapViewProps) => boolean;
 export declare const addWMLayerPropsBasedOnChildProps: (child: MapViewLayerProps, mapId: string, props: MapViewProps, onUpdateLayerInformation?: ((payload: UpdateLayerInfoPayload) => void) | undefined) => void;
 export declare const removeWMLayerFromMap: (wmLayer: WMLayer, mapId: string, onUpdateLayerInformation?: ((payload: UpdateLayerInfoPayload) => void) | undefined) => void;
-export declare const orderLayers: (wmjsMap: WMJSMap, _reactMapViewLayers: MapViewLayerProps[]) => boolean;
+export declare const orderLayers: (wmjsMap: IWMJSMap, _reactMapViewLayers: MapViewLayerProps[]) => boolean;