@opengeoweb/webmap-react 9.21.0 → 9.23.1

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';
@@ -63,48 +63,48 @@ var en = {
 	"webmap-react-linestring": "LineString"
 };
 var fi = {
-	"webmap-react-event": "ei käännetty",
-	"webmap-react-sent": "ei käännetty",
-	"webmap-react-utc": "ei käännetty",
-	"webmap-react-expires": "ei käännetty",
-	"webmap-react-sender": "ei käännetty",
-	"webmap-react-identifier": "ei käännetty",
-	"webmap-react-no-layers": "ei käännetty",
-	"webmap-react-legend": "ei käännetty",
-	"webmap-react-title": "ei käännetty",
-	"webmap-react-name": "ei käännetty",
-	"webmap-react-service": "ei käännetty",
-	"webmap-react-abstract": "ei käännetty",
-	"webmap-react-dimensions": "ei käännetty",
-	"webmap-react-styles": "ei käännetty",
-	"webmap-react-bounding-box": "ei käännetty",
-	"webmap-react-groups": "ei käännetty",
-	"webmap-react-keywords": "ei käännetty",
-	"webmap-react-zoom-reset": "ei käännetty",
-	"webmap-react-zoom-in": "ei käännetty",
-	"webmap-react-zoom-out": "ei käännetty",
-	"webmap-react-show": "ei käännetty",
-	"webmap-react-click-disconnect": "ei käännetty",
-	"webmap-react-click-connect": "ei käännetty",
-	"webmap-react-layer-info": "ei käännetty",
-	"webmap-react-vertical-level": "ei käännetty",
-	"webmap-react-hpa": "ei käännetty",
-	"webmap-react-ensemble-member": "ei käännetty",
-	"webmap-react-member": "ei käännetty",
-	"webmap-react-probability": "ei käännetty",
-	"webmap-react-percent": "ei käännetty",
-	"webmap-react-level": "ei käännetty",
-	"webmap-react-west": "ei käännetty",
-	"webmap-react-east": "ei käännetty",
-	"webmap-react-north": "ei käännetty",
-	"webmap-react-south": "ei käännetty",
-	"webmap-react-new-linestring-created": "ei käännetty",
-	"webmap-react-new-feature": "ei käännetty",
-	"webmap-react-new-point": "ei käännetty",
-	"webmap-react-point": "ei käännetty",
-	"webmap-react-polygon": "ei käännetty",
-	"webmap-react-box": "ei käännetty",
-	"webmap-react-linestring": "ei käännetty"
+	"webmap-react-event": "tapahtuma:",
+	"webmap-react-sent": "Lähetetty:",
+	"webmap-react-utc": "UTC",
+	"webmap-react-expires": "Vanhentunut",
+	"webmap-react-sender": "Lähettäjä:",
+	"webmap-react-identifier": "Tunniste",
+	"webmap-react-no-layers": "Ei karttatasoja",
+	"webmap-react-legend": "Selite",
+	"webmap-react-title": "Titteli",
+	"webmap-react-name": "Nimi",
+	"webmap-react-service": "Palvelu",
+	"webmap-react-abstract": "Tiivistelmä",
+	"webmap-react-dimensions": "Dimensiot",
+	"webmap-react-styles": "Tyylit",
+	"webmap-react-bounding-box": "Rajaava-alue",
+	"webmap-react-groups": "Ryhmät",
+	"webmap-react-keywords": "Avainsanat",
+	"webmap-react-zoom-reset": "Resetoi zoom",
+	"webmap-react-zoom-in": "Zoomaa sisään",
+	"webmap-react-zoom-out": "Zoomaa ulos",
+	"webmap-react-show": "Näytä",
+	"webmap-react-click-disconnect": "Irroita karttataso napsauttamalla",
+	"webmap-react-click-connect": "Yhdistä karttataso napsauttamalla",
+	"webmap-react-layer-info": "Karttatason tiedot",
+	"webmap-react-vertical-level": "pystytaso",
+	"webmap-react-hpa": "hPa",
+	"webmap-react-ensemble-member": "Yhdistelmämallijäsen",
+	"webmap-react-member": "jäsen",
+	"webmap-react-probability": "Todennäköisyys",
+	"webmap-react-percent": "%",
+	"webmap-react-level": "Taso",
+	"webmap-react-west": "länsi",
+	"webmap-react-east": "itä",
+	"webmap-react-north": "pohjoinen",
+	"webmap-react-south": "etelä",
+	"webmap-react-new-linestring-created": "Viivajonoon luotiin uusi piste",
+	"webmap-react-new-feature": "uusi kohde luotu",
+	"webmap-react-new-point": "uusi piste luotu",
+	"webmap-react-point": "Piste",
+	"webmap-react-polygon": "Monikulmio",
+	"webmap-react-box": "Laatikko",
+	"webmap-react-linestring": "Viivajono"
 };
 var no = {
 	"webmap-react-event": "hendelse:",
@@ -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) {
@@ -3273,6 +3279,7 @@ class MapDraw extends React.PureComponent {
     }
   }
   componentDidUpdate(prevProps) {
+    var _a;
     const {
       geojson,
       isInEditMode,
@@ -3299,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) {
@@ -3510,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
     });
@@ -3606,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
         });
@@ -3628,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
         });
@@ -3663,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]) {
@@ -3670,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
       });
@@ -3774,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
         });
@@ -3802,9 +3821,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.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
-        this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
+        this.mouseGeoCoord = getLatLongFromPixelCoord(webmapjs, {
           x: mouseX,
           y: mouseY
         });
@@ -3842,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
         });
@@ -3959,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 {
@@ -4060,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
@@ -4648,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
@@ -9567,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
@@ -9685,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
@@ -9723,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,
@@ -9781,24 +9814,49 @@ class ReactMapView extends React.Component {
       currentChildren: []
     };
     this.refetchTimer = null;
-    this.onStartRefetchTimer = () => {
+    /**
+     * Last epoch time the map was visible in millisecs. Null if the map is currently visible.
+     */
+    this.lastVisible = null;
+    this.handleVisibilityChange = () => {
       const {
         shouldAutoFetch
       } = this.props;
-      /*
-        TODO, Maarten Plieger, 2021-09-02, https://gitlab.com/opengeoweb/opengeoweb/-/issues/1159:
+      const autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
+      const autoFetchIntervalMilliSeconds = Math.abs(autoFetchInterval) * MINUTE_TO_MILLISECOND;
+      if (document.visibilityState === 'visible') {
+        if (this.lastVisible &&
+        // skip if last visibility change was within 1 minute (or the autoFetchInterval)
+        new Date().getTime() - this.lastVisible > autoFetchIntervalMilliSeconds) {
+          this.onStartRefetchTimer(true);
+        }
+        this.lastVisible = null;
+      } else {
+        this.lastVisible = new Date().getTime();
+        this.clearRefetchTimer();
+      }
+    };
+    /**
+     * 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.
       */
       this.clearRefetchTimer();
       const autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
-      this.refetchTimer = setInterval(() => {
+      const refetch = () => {
         const {
           mapId
         } = this.props;
         const wmjsMap = webmapUtils.getWMJSMapById(mapId);
-        const layers = wmjsMap.getLayers();
-        layers.forEach(layer => {
+        const layers = wmjsMap === null || wmjsMap === void 0 ? void 0 : wmjsMap.getLayers();
+        layers === null || layers === void 0 ? void 0 : layers.forEach(layer => {
           if (layer.enabled !== false) {
             parseWMJSLayer(layer, true).then(wmLayer => {
               const {
@@ -9815,7 +9873,11 @@ class ReactMapView extends React.Component {
             });
           }
         });
-      }, Math.abs(autoFetchInterval) * MINUTE_TO_MILLISECOND);
+      };
+      this.refetchTimer = setInterval(refetch, Math.abs(autoFetchInterval) * MINUTE_TO_MILLISECOND);
+      if (force) {
+        refetch();
+      }
     };
     this.clearRefetchTimer = () => {
       if (this.refetchTimer) {
@@ -9830,6 +9892,7 @@ class ReactMapView extends React.Component {
     this.drawDebounced = debounce(600, this.drawDebounced);
     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);
@@ -9850,6 +9913,7 @@ class ReactMapView extends React.Component {
     this.mountWMJSMap();
     if (shouldAutoFetch) {
       this.onStartRefetchTimer();
+      document.addEventListener('visibilitychange', this.handleVisibilityChange);
     }
     onWMJSMount(mapId);
   }
@@ -9863,6 +9927,7 @@ class ReactMapView extends React.Component {
     } = this.props;
     window.removeEventListener('resize', this.handleWindowResize);
     this.clearRefetchTimer();
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     webmapUtils.unRegisterWMJSMap(mapId);
     /* Reset adaguc properties */
     this.adaguc.initialized = false;
@@ -10118,6 +10183,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();
@@ -10130,7 +10198,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;
@@ -10212,6 +10280,9 @@ class ReactMapView extends React.Component {
           mapId
         } = this.props;
         const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+        if (!wmjsMap) {
+          return;
+        }
         wmjsMap.setSize(newWidth, newHeight);
       }
     }
@@ -10397,9 +10468,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 {
@@ -10427,7 +10500,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 = () => {
@@ -10439,7 +10513,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);
@@ -10554,13 +10628,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();
@@ -10648,15 +10726,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());
         }
       })]
@@ -10670,7 +10751,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.21.0",
+  "version": "9.23.1",
   "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",

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";
@@ -22,6 +22,10 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
     adagucContainerRef: React.RefObject<HTMLDivElement>;
     adagucWebMapJSRef: React.RefObject<HTMLDivElement>;
     refetchTimer: NodeJS.Timeout | number | null;
+    /**
+     * Last epoch time the map was visible in millisecs. Null if the map is currently visible.
+     */
+    lastVisible: number | null;
     static defaultProps: {
         srs: string;
         bbox: {
@@ -47,11 +51,16 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
     onDimChangeListener(): void;
     onAfterSetBBoxListener(): void;
     onUpdateBBoxListener(newBbox: WMBBOX): void;
-    onStartRefetchTimer: () => void;
+    handleVisibilityChange: () => void;
+    /**
+     * Start the refetch timer
+     * @param force - Force a fetch and wmLayer parse immediately
+     */
+    onStartRefetchTimer: (force?: boolean) => void;
     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/ReactMapView.spec.d.ts

@@ -1 +1,2 @@
+export declare const SECOND_TO_MILLISECOND = 1000;
 export declare const mockGeoJSON: GeoJSON.FeatureCollection;

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;