@opengeoweb/webmap-react 9.25.3 → 9.26.0

package/index.esm.js

@@ -2,7 +2,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, 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 { 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';
@@ -2826,10 +2826,18 @@ const findClosestCoords = (positions, mouseX, mouseY) => {
   });
   return closestIndexes;
 };
-const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) => {
+const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature, geometry = feature.geometry) => {
   const maxDistance = 20;
-  if (feature.geometry.type === 'Point') {
-    const featureCoords = feature.geometry.coordinates;
+  if (geometry.type === 'GeometryCollection') {
+    for (const geom of geometry.geometries) {
+      const result = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature, geom);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  if (geometry.type === 'Point') {
+    const featureCoords = geometry.coordinates;
     /* Get all vertexes */
     const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
     const calculatedDistance = XYCoords.length > 0 ? distance(XYCoords[0], {
@@ -2844,9 +2852,9 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       };
     }
   }
-  if (feature.geometry.type === 'MultiPoint') {
-    for (let polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-      const featureCoords = feature.geometry.coordinates[polygonIndex];
+  if (geometry.type === 'MultiPoint') {
+    for (let polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+      const featureCoords = geometry.coordinates[polygonIndex];
       if (featureCoords === undefined) {
         // eslint-disable-next-line no-continue
         continue;
@@ -2866,10 +2874,10 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       }
     }
   }
-  if (feature.geometry.type === 'Polygon') {
+  if (geometry.type === 'Polygon') {
     const point = [mouseX, mouseY];
-    for (let polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-      const featureCoords = feature.geometry.coordinates[polygonIndex];
+    for (let polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+      const featureCoords = geometry.coordinates[polygonIndex];
       if (featureCoords === undefined) {
         // eslint-disable-next-line no-continue
         continue;
@@ -2905,10 +2913,10 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       }
     }
   }
-  if (feature.geometry.type === 'MultiPolygon') {
+  if (geometry.type === 'MultiPolygon') {
     const point = [mouseX, mouseY];
-    for (let polygonIndex = feature.geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-      const featureCoords = feature.geometry.coordinates[polygonIndex][0];
+    for (let polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+      const featureCoords = geometry.coordinates[polygonIndex][0];
       if (featureCoords === undefined) {
         // eslint-disable-next-line no-continue
         continue;
@@ -2933,10 +2941,9 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       }
     }
   }
-  if (feature.geometry.type === 'LineString') {
-    const featureCoords = feature.geometry.coordinates;
+  if (geometry.type === 'LineString') {
     /* Get all vertexes */
-    const XYCoords = convertGeoCoordsToScreenCoords(featureCoords);
+    const XYCoords = convertGeoCoordsToScreenCoords(geometry.coordinates);
     /* Snap to the vertex closer than specified pixels */
     for (let j = 0; j < XYCoords.length; j += 1) {
       const coord = XYCoords[j];
@@ -3146,7 +3153,7 @@ class MapDraw extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleGeoJSONUpdate = newGeoJSON => {
-      var _a;
+      var _a, _b;
       const {
         selectedFeatureIndex,
         mapId
@@ -3155,13 +3162,15 @@ class MapDraw extends React.PureComponent {
       /* Ensure that this.snappedPolygonIndex is still within the coordinates array */
       if (((_a = this.geojson) === null || _a === void 0 ? void 0 : _a.features) && selectedFeatureIndex < this.geojson.features.length) {
         const feature = this.getSelectedFeature();
-        if (feature.geometry) {
+        if (((_b = feature.geometry) === null || _b === void 0 ? void 0 : _b.type) === 'Polygon') {
           const {
             coordinates
           } = feature.geometry;
           if (Number(this.snappedPolygonIndex) > coordinates.length - 1) {
             this.snappedPolygonIndex = coordinates.length - 1;
           }
+        } else {
+          this.snappedPolygonIndex = SNAPPEDFEATURE.NONE;
         }
       }
       const webmapjs = webmapUtils.getWMJSMapById(mapId);
@@ -3175,8 +3184,8 @@ class MapDraw extends React.PureComponent {
       if (this.myDrawMode === DRAWMODE.POLYGON && this.myEditMode === EDITMODE.ADD_FEATURE) {
         const currentFeature = this.getSelectedFeature();
         const currentGeometry = currentFeature.geometry;
-        const coordinates = currentGeometry.coordinates[0];
         if (currentGeometry.type === 'Polygon') {
+          const coordinates = currentGeometry.coordinates[0];
           const firstElement = coordinates[0];
           coordinates[this.mouseIsOverVertexNr] = cloneDeep(firstElement);
         }
@@ -3357,7 +3366,7 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const feature = this.getSelectedFeature();
-    if (feature) {
+    if (feature && feature.geometry.type !== 'GeometryCollection') {
       const featureCoords = feature.geometry.coordinates;
       this.mouseIsOverVertexNr = featureCoords.length - 1;
     }
@@ -3945,11 +3954,13 @@ class MapDraw extends React.PureComponent {
       deletePolygonCallback
     } = this.props;
     const feature = this.getSelectedFeature();
-    feature.geometry.coordinates.splice(index, 1);
-    if (deletePolygonCallback) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      deletePolygonCallback();
+    if (feature.geometry.type !== 'GeometryCollection') {
+      feature.geometry.coordinates.splice(index, 1);
+      if (deletePolygonCallback) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        deletePolygonCallback();
+      }
     }
   }
   deleteFeature() {
@@ -4100,9 +4111,12 @@ class MapDraw extends React.PureComponent {
     }
   }
   moveVertex(feature, mouseDown) {
-    const featureType = feature.geometry.type;
+    const geometryType = feature.geometry.type;
+    if (geometryType === 'GeometryCollection') {
+      return undefined;
+    }
     let featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-    if (featureType === 'Point' || featureType === 'MultiPoint' || featureType === 'LineString') {
+    if (geometryType === 'Point' || geometryType === 'MultiPoint' || geometryType === 'LineString') {
       featureCoords = feature.geometry.coordinates;
     }
     if (!featureCoords) {
@@ -4110,7 +4124,7 @@ class MapDraw extends React.PureComponent {
     }
     const vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
     if (vertexSelected || this.myEditMode === EDITMODE.ADD_FEATURE) {
-      if (featureType === 'LineString') {
+      if (geometryType === 'LineString') {
         this.transposeVertex(featureCoords);
         // eslint-disable-next-line consistent-return
         return false;
@@ -4238,7 +4252,7 @@ class MapDraw extends React.PureComponent {
     }
   }
   // eslint-disable-next-line class-methods-use-this
-  validateFeature(feature) {
+  initializeFeature(feature) {
     if (!feature.properties) {
       feature.properties = {};
     }
@@ -4248,7 +4262,7 @@ class MapDraw extends React.PureComponent {
     if (!feature.type) {
       feature.type = 'Feature';
     }
-    if (!feature.geometry.coordinates) {
+    if (feature.geometry.type !== 'GeometryCollection' && !feature.geometry.coordinates) {
       feature.geometry.coordinates = [];
     }
   }
@@ -4259,7 +4273,7 @@ class MapDraw extends React.PureComponent {
     }
     for (const geoJsonFeature of this.geojson.features) {
       const feature = geoJsonFeature;
-      this.validateFeature(feature);
+      this.initializeFeature(feature);
       const featureType = feature.geometry.type;
       if (featureType === 'Polygon') {
         /* Loop through all polygons of the same feature */
@@ -4328,28 +4342,16 @@ class MapDraw extends React.PureComponent {
     this.textPositions = [];
     this.mouseOverPolygonCoordinates = [];
     this.mouseOverPolygonFeatureIndex = -1;
-    const drawFeature = (feature, featureIndex) => {
+    const drawFeatureGeometry = (feature, featureIndex, geometry = feature.geometry) => {
       var _a, _b, _c;
-      const featureType = feature.geometry.type;
-      const totalmiddle = {
-        x: 0,
-        y: 0,
-        nr: 0
-      };
-      if (featureType === 'Point') {
-        const featureCoords = feature.geometry.coordinates;
-        const XYCoords = getPixelCoordFromGeoCoord([featureCoords], mapId);
-        if (XYCoords.length === 0) {
-          // eslint-disable-next-line no-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);
+      if (geometry.type === 'GeometryCollection') {
+        for (const geom of geometry.geometries) {
+          drawFeatureGeometry(feature, featureIndex, geom);
         }
       }
-      if (featureType === 'MultiPoint') {
-        const featureCoords = feature.geometry.coordinates;
-        const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
+      if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
+        const coordinates = geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates;
+        const XYCoords = getPixelCoordFromGeoCoord(coordinates, mapId);
         if (XYCoords.length === 0) {
           return;
         }
@@ -4357,12 +4359,16 @@ class MapDraw extends React.PureComponent {
           this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
         }
       }
-      if (featureType === 'MultiPolygon') {
-        const multiPolygonGeometry = feature.geometry;
-        for (const multiPoly of multiPolygonGeometry.coordinates) {
+      if (geometry.type === 'MultiPolygon') {
+        const totalMiddle = {
+          x: 0,
+          y: 0,
+          nr: 0
+        };
+        for (const multiPoly of geometry.coordinates) {
           for (let polygonIndex = 0; polygonIndex < multiPoly.length; polygonIndex += 1) {
-            const featureCoords = multiPoly[polygonIndex];
-            const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
+            const ringCoordinates = multiPoly[polygonIndex];
+            const XYCoords = getPixelCoordFromGeoCoord(ringCoordinates, mapId);
             /* Only draw if there is stuff to show */
             if (XYCoords.length === 0) {
               // eslint-disable-next-line no-continue
@@ -4370,9 +4376,9 @@ class MapDraw extends React.PureComponent {
             }
             const middle = this.drawPolygon(ctx, XYCoords, featureIndex, polygonIndex);
             if (middle) {
-              totalmiddle.x += middle.x * middle.nr;
-              totalmiddle.y += middle.y * middle.nr;
-              totalmiddle.nr += middle.nr;
+              totalMiddle.x += middle.x * middle.nr;
+              totalMiddle.y += middle.y * middle.nr;
+              totalMiddle.nr += middle.nr;
             }
             if (isInEditMode) {
               /* Draw all vertices on the edges of the polygons */
@@ -4386,9 +4392,9 @@ class MapDraw extends React.PureComponent {
             }
           }
         }
-        if (totalmiddle.nr > 0) {
-          const mx = totalmiddle.x / totalmiddle.nr;
-          const my = totalmiddle.y / totalmiddle.nr;
+        if (totalMiddle.nr > 0) {
+          const mx = totalMiddle.x / totalMiddle.nr;
+          const my = totalMiddle.y / totalMiddle.nr;
           if ((_a = feature.properties) === null || _a === void 0 ? void 0 : _a.text) {
             this.textPositions.push({
               x: mx,
@@ -4398,11 +4404,10 @@ class MapDraw extends React.PureComponent {
           }
         }
       }
-      if (featureType === 'Polygon') {
-        const polygonGeometry = feature.geometry;
-        /* Loop through all polygons of the same feature */
-        for (let polygonIndex = 0; polygonIndex < polygonGeometry.coordinates.length; polygonIndex += 1) {
-          const featureCoords = polygonGeometry.coordinates[polygonIndex];
+      if (geometry.type === 'Polygon') {
+        /* Loop through all rings of the same polygon */
+        for (let polygonIndex = 0; polygonIndex < geometry.coordinates.length; polygonIndex += 1) {
+          const featureCoords = geometry.coordinates[polygonIndex];
           const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
           /* Only draw if there is stuff to show */
           if (XYCoords.length === 0) {
@@ -4432,9 +4437,9 @@ class MapDraw extends React.PureComponent {
           }
         }
       }
-      if (featureType === 'LineString') {
+      if (geometry.type === 'LineString') {
         /* Loop through all line pints of the same feature */
-        const featureCoords = feature.geometry.coordinates;
+        const featureCoords = geometry.coordinates;
         if (!featureCoords || !featureCoords.length) {
           return;
         }
@@ -4464,11 +4469,11 @@ class MapDraw extends React.PureComponent {
       const feature = this.geojson.features[featureIndex];
       /* Do not draw selected feature here, should be done last */
       if (featureIndex !== selectedFeatureIndex) {
-        drawFeature(feature, featureIndex);
+        drawFeatureGeometry(feature, featureIndex);
       }
     }
     /* Draw selected feature to display it on top */
-    drawFeature(this.getSelectedFeature(), selectedFeatureIndex);
+    drawFeatureGeometry(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();
@@ -4544,12 +4549,17 @@ class MapDraw extends React.PureComponent {
       mapId
     } = this.props;
     const {
-      coordinates,
-      type
+      type: geometryType
     } = geometry;
-    if (type === 'Polygon') {
-      for (let polygonIndex = coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
-        const featureCoords = coordinates[polygonIndex];
+    if (geometryType === 'GeometryCollection') {
+      return {
+        selectedEdge: EDGE.NONE,
+        snappedPolygonIndex: SNAPPEDFEATURE.NONE
+      };
+    }
+    if (geometryType === 'Polygon') {
+      for (let polygonIndex = geometry.coordinates.length - 1; polygonIndex >= 0; polygonIndex -= 1) {
+        const featureCoords = geometry.coordinates[polygonIndex];
         if (featureCoords === undefined) {
           // eslint-disable-next-line no-continue
           continue;
@@ -4575,8 +4585,8 @@ class MapDraw extends React.PureComponent {
         snappedPolygonIndex: SNAPPEDFEATURE.NONE
       };
     }
-    if (type === 'LineString') {
-      const featureCoords = coordinates;
+    if (geometryType === 'LineString') {
+      const featureCoords = geometry.coordinates;
       if (featureCoords === undefined) {
         return {
           selectedEdge: EDGE.NONE,
@@ -4823,10 +4833,7 @@ class MapDraw extends React.PureComponent {
       selectedFeatureIndex
     } = this.props;
     const feature = this.geojson.features[featureIndex];
-    if (!(feature === null || feature === void 0 ? void 0 : feature.geometry)) {
-      return;
-    }
-    if (feature.geometry.type !== 'Polygon' && feature.geometry.type !== 'MultiPolygon') {
+    if (!(feature === null || feature === void 0 ? void 0 : feature.geometry) || XYCoords.length === 0) {
       return;
     }
     let polyProps = feature.properties;
@@ -4893,7 +4900,7 @@ class MapDraw extends React.PureComponent {
     return middle;
   }
   initializeFeatureCoordinates(feature, type) {
-    this.validateFeature(feature);
+    this.initializeFeature(feature);
     // eslint-disable-next-line no-underscore-dangle
     if (feature.properties._type) {
       delete feature.properties._type;
@@ -4905,27 +4912,32 @@ class MapDraw extends React.PureComponent {
         break;
       case DRAWMODE.MULTIPOINT:
         feature.geometry.type = 'MultiPoint';
-        if (feature.geometry.coordinates.length === 0) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          feature.geometry.coordinates.push([]);
-        }
         break;
       case DRAWMODE.BOX:
         feature.geometry.type = 'Polygon';
-        // eslint-disable-next-line no-underscore-dangle
         feature.properties._type = 'box';
         break;
       case DRAWMODE.POLYGON:
         feature.geometry.type = 'Polygon';
+        break;
+      case DRAWMODE.LINESTRING:
+        feature.geometry.type = 'LineString';
+        break;
+    }
+    // eslint-disable-next-line default-case
+    switch (feature.geometry.type) {
+      case 'MultiPoint':
         if (feature.geometry.coordinates.length === 0) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           feature.geometry.coordinates.push([]);
         }
         break;
-      case DRAWMODE.LINESTRING:
-        feature.geometry.type = 'LineString';
+      case 'Polygon':
+        if (feature.properties._type !== 'box' && feature.geometry.coordinates.length === 0) {
+          feature.geometry.coordinates.push([]);
+        }
+        break;
+      case 'LineString':
         if (feature.geometry.coordinates.length === 0) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           feature.geometry.coordinates.push([]);
         }
         break;
@@ -5592,6 +5604,65 @@ const intersectionFeatureBE = {
   },
   properties: defaultGeoJSONStyleProperties
 };
+const simpleGeometryCollectionGeoJSON = {
+  type: 'FeatureCollection',
+  features: [{
+    type: 'Feature',
+    properties: {
+      stroke: '#8F8',
+      'stroke-width': 4,
+      'stroke-opacity': 1,
+      fill: '#33ccFF',
+      'fill-opacity': 0.5,
+      country: 'Finland',
+      details: {
+        identifier: '2.49.0.0.246.0.FI.240410113246.jma418B852H2nBY1ntp3',
+        severity: 'Moderate',
+        certainty: 'Possible',
+        onset: '2024-04-11T12:00:00+03:00',
+        expires: '2024-04-11T18:00:00+03:00',
+        languages: [{
+          language: 'fi-FI',
+          event: 'Tuulivaroitus maa-alueille',
+          senderName: 'Ilmatieteen laitos',
+          headline: '',
+          description: 'Tuulivaroitus maa-alueille: Länsituuli on voimakasta iltapäivällä, tuulen nopeus puuskissa 20 m/s.',
+          areaDesc: 'Kainuu, Pudasjärvi, Taivalkoski, Kuusamo'
+        }, {
+          language: 'sv-SE',
+          event: 'Vindvarning för landområden',
+          senderName: 'Meteorologiska institutet',
+          headline: '',
+          description: 'Vindvarning för landområden: På eftermiddagen är den västliga vinden kraftigt, i vindbyarna 20 m/s.',
+          areaDesc: 'Kainuu, Pudasjärvi, Taivalkoski, Kuusamo'
+        }, {
+          language: 'en-GB',
+          event: 'Wind warning for land areas',
+          senderName: 'Finnish Meteorological Institute',
+          headline: '',
+          description: 'Wind warning for land areas: In the afternoon, strong winds from west may bring strong gusts of 20 m/s.',
+          areaDesc: 'Kainuu, Pudasjärvi, Taivalkoski, Kuusamo'
+        }]
+      }
+    },
+    geometry: {
+      type: 'GeometryCollection',
+      geometries: [{
+        type: 'MultiPolygon',
+        coordinates: [[[[29.758392564346536, 65.49273540846954], [29.71941427879389, 65.49638044528335], [29.21459755302349, 65.51209391081191], [29.170693731268035, 65.5197800533191], [29.147217916080326, 65.50275296777002], [28.633374093002843, 65.3721705402633], [28.18723681698394, 65.25672404742585], [28.14911332514444, 65.24984205608105], [28.111118852458272, 65.24063653209379], [27.693819807358636, 65.16109646665383], [27.33039713116483, 65.09068209391778], [27.332840574130387, 65.0387703089369], [27.326646217967365, 64.97976270671202], [27.157653690059732, 64.83986451042715], [27.126612443366312, 64.82736609485796], [26.916420458938006, 64.76188902343115], [26.886428080039778, 64.75000916898261], [26.467815769740625, 64.56827471246525], [26.334511209056984, 64.50150678855421], [26.305590843292137, 64.47468873954321], [26.339316861749918, 64.44776636198924], [26.504854495183764, 64.3399621504545], [26.526789567510534, 64.3210451684454], [26.64680093131525, 64.20565204411693], [26.805502956254468, 64.05176843450018], [26.822846233907782, 64.02833008717302], [26.866302819035326, 64.02149244583438], [27.25090982244751, 63.95456911474786], [27.63394361227682, 63.88676185094127], [28.01539289698782, 63.81807690948368], [28.336001020870327, 63.75944634860591], [28.36953495057645, 63.75291483074939], [28.38146960707695, 63.780308294502746], [28.453212390927888, 63.86320698957978], [28.488122426266656, 63.87072168747777], [29.061327279544, 63.87578318437369], [29.67289940508833, 63.87894724382795], [29.701281337390554, 63.87096916155944], [29.95452767634896, 63.762659061713634], [29.991551532456302, 63.74790651378042], [30.022558687101863, 63.76119168003561], [30.214883314310555, 63.81188283894816], [30.24646259407193, 63.8240131577964], [30.45743761263076, 63.98659320159419], [30.485808880817984, 64.00962934474863], [30.528497757656666, 64.05664110171924], [30.54104187728157, 64.08719012709481], [30.548808176296486, 64.12087568595071], [30.519336467341862, 64.20177024842253], [30.501794237261407, 64.23261663433796], [30.4770997493347, 64.25733643782799], [30.278855247194695, 64.32813156135076], [30.249923179452413, 64.34139133102182], [30.034923434023412, 64.50055888989162], [30.006675740312176, 64.52232084337746], [29.843095805108717, 64.6732364080745], [29.698703502979736, 64.8052603050698], [29.677920179868693, 64.82640388377037], [29.638540921311844, 64.88072887102366], [29.62541734471698, 64.90735364979494], [29.60157369391645, 64.9718516701184], [29.597607059999827, 64.9972352266183], [29.669945543777658, 65.23518451106732], [29.73413551222892, 65.44365355519507], [29.743985637492894, 65.469616744196], [29.758392564346536, 65.49273540846954]]]]
+      }, {
+        type: 'MultiPolygon',
+        coordinates: [[[[27.766520457815957, 65.8195160088791], [27.73085604057836, 65.83947485866196], [27.45820033758423, 65.9493211039968], [27.430865666979813, 65.9554713265499], [27.407432994387463, 65.93839022633652], [27.17343408151436, 65.79130783497929], [27.13700155265117, 65.7748045054381], [27.043143659347365, 65.74146868282556], [26.93212618070619, 65.72018457880594], [26.770113943520442, 65.70598902727579], [26.723301465692543, 65.70590768662042], [26.387054877123173, 65.71366432114496], [26.158116226051387, 65.7257708265435], [26.154050492787476, 65.48723563080719], [26.158292174759623, 65.41018287503542], [26.226082500593677, 65.28786857013642], [26.24918073602433, 65.26064963421615], [26.311435369016323, 65.20611737168086], [26.34746159341583, 65.19097379678617], [26.47064990531538, 65.14852904702708], [26.617354013993747, 65.10039082072402], [26.658172378514152, 65.09683493161036], [26.7850977917127, 65.09445840537802], [27.33039713116483, 65.09068209391778], [27.693819807358636, 65.16109646665383], [28.111118852458272, 65.24063653209379], [28.14911332514444, 65.24984205608105], [28.141796473873793, 65.28201842856463], [28.04237271730372, 65.42610665418935], [27.942039909829926, 65.57026895303783], [27.766520457815957, 65.8195160088791]]]]
+      }, {
+        type: 'MultiPolygon',
+        coordinates: [[[[29.170693731268035, 65.5197800533191], [29.130087050229307, 65.54237017185336], [28.793692264131735, 65.71359634271593], [28.549640756625106, 65.83637062837917], [28.52068592987659, 65.85585413976165], [28.48883706877227, 65.85421373746401], [28.124779448491477, 65.84111872142014], [27.79622169654993, 65.82862408942168], [27.766520457815957, 65.8195160088791], [27.942039909829926, 65.57026895303783], [28.04237271730372, 65.42610665418935], [28.141796473873793, 65.28201842856463], [28.14911332514444, 65.24984205608105], [28.18723681698394, 65.25672404742585], [28.633374093002843, 65.3721705402633], [29.147217916080326, 65.50275296777002], [29.170693731268035, 65.5197800533191]]]]
+      }, {
+        type: 'MultiPolygon',
+        coordinates: [[[[29.568191250285462, 66.43045265195359], [29.527651742524338, 66.42954425078428], [29.167149655693773, 66.45472209596944], [28.72266047369712, 66.48468310371933], [28.68788794031491, 66.4858456386077], [28.686129727583417, 66.45685684583327], [28.616947548792908, 66.21978395191063], [28.57140958210226, 66.06194633146768], [28.526330219060455, 65.90427238999632], [28.52068592987659, 65.85585413976165], [28.549640756625106, 65.83637062837917], [28.793692264131735, 65.71359634271593], [29.130087050229307, 65.54237017185336], [29.170693731268035, 65.5197800533191], [29.21459755302349, 65.51209391081191], [29.71941427879389, 65.49638044528335], [29.758392564346536, 65.49273540846954], [29.803357612639658, 65.51348157207968], [30.11053968124635, 65.65921283899507], [30.124309492013527, 65.69970034115639], [30.121904515243088, 65.75312552789165], [30.108659610722114, 65.8017236758968], [30.093512380951722, 65.84734580681476], [30.05919479177051, 65.92010170197672], [29.930537319625472, 66.1076962309863], [29.91149731454561, 66.13245763550866], [29.74544846833132, 66.28135761175152], [29.5988415801629, 66.41164508252187], [29.568191250285462, 66.43045265195359]]]]
+      }]
+    }
+  }]
+};
 
 const drawPolyStoryStyles = {
   MapDrawGeoJSONContainer: {
@@ -6003,13 +6074,13 @@ const getGeoJson = (geojson, shouldAllowMultipleShapes) => {
   const {
     geometry
   } = geojson.features[0];
-  if (geometry.type === 'Point' || geometry.type === 'LineString') {
-    return geojson;
+  if (geometry.type === 'Polygon' && geometry.coordinates.length > 1) {
+    return produce(geojson, draft => {
+      const draftFeature = draft.features[0];
+      draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
+    });
   }
-  return geometry.coordinates.length > 1 ? produce(geojson, draft => {
-    const draftFeature = draft.features[0];
-    draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
-  }) : geojson;
+  return geojson;
 };
 const hasFeatures = geometry => {
   if (geometry.type === 'Point') {
@@ -10392,7 +10463,7 @@ class ReactMapView extends React.Component {
   }
 }
 ReactMapView.defaultProps = {
-  srs: 'EPSG:3857',
+  srs: PROJECTION.EPSG_3857.value,
   bbox: {
     left: -2324980.5498391856,
     bottom: 5890854.775012179,
@@ -12399,4 +12470,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels
 });
 
-export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };
+export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, Proj4js, radarGetCapabilities_spec as RadarGetCapabilities, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, convertGeoCoordsToScreenCoords, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, findClosestCoords, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getPixelCoordFromGeoCoord, getProj4, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isBetween, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, lineStringCollection, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, projectorCache, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.25.3",
+  "version": "9.26.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FeatureCollection, GeoJsonProperties, GeometryObject, Position } from 'geojson';
-import { GeoJsonFeatureType, GeoJsonFeature, GeoFeatureStyle, Coordinate } from './geojsonShapes';
+import { GeoFeatureStyle, Coordinate } from './geojsonShapes';
 interface DrawStyle {
     x: number;
     y: number;
@@ -23,7 +23,7 @@ export interface FeatureEvent {
     mouseX: number;
     mouseY: number;
     isInEditMode: boolean;
-    feature: GeoJsonFeature;
+    feature: GeoJSON.Feature;
 }
 export interface MapDrawProps {
     mapId: string;
@@ -112,8 +112,8 @@ export default class MapDraw extends React.PureComponent<MapDrawProps> {
     handleDrawMode(_drawMode: string): void;
     handleGeoJSONUpdate: (newGeoJSON: GeoJSON.FeatureCollection) => void;
     handleExitDrawMode: (reason?: DrawModeExitCallback) => void;
-    getSelectedFeature: () => GeoJsonFeature;
-    hoverVertex(feature: GeoJsonFeature, mouseX: number, mouseY: number): void;
+    getSelectedFeature: () => GeoJSON.Feature;
+    hoverVertex(feature: GeoJSON.Feature, mouseX: number, mouseY: number): void;
     mouseMove(event: InputEvent): boolean;
     triggerMouseDownTimer(event: InputEvent): void | boolean;
     mouseDoubleClick(): void;
@@ -132,26 +132,26 @@ export default class MapDraw extends React.PureComponent<MapDrawProps> {
     deleteFeature(): void;
     mouseUp(event: InputEvent): void | boolean;
     cancelEdit(cancelLastPoint: boolean): void;
-    moveVertex(feature: GeoJsonFeature, mouseDown: boolean): boolean;
+    moveVertex(feature: GeoJSON.Feature, mouseDown: boolean): boolean;
     transposePolygon(featureCoords: Position[]): void;
     transposeVertex(featureCoords: Position[]): void;
     componentCleanup(): void;
-    validateFeature(feature: GeoJsonFeature): void;
+    initializeFeature(feature: GeoJSON.Feature): void;
     validatePolys(fixPolys: boolean): void;
     beforeDraw(ctx: CanvasRenderingContext2D): void;
     checkDist(coord: Coordinate, polygonIndex: SNAPPEDFEATURE | number, mouseX: number, mouseY: number): boolean;
-    hoverEdge(geometry: GeoJsonFeatureType, mouseX: number, mouseY: number): {
+    hoverEdge(geometry: GeoJSON.Geometry, mouseX: number, mouseY: number): {
         selectedEdge: EDGE | number;
         snappedPolygonIndex: SNAPPEDFEATURE | number;
     };
     drawVertice(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean): void;
-    drawPoint(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean, feature: GeoJsonFeature, featureIndex: number): void;
+    drawPoint(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean, feature: GeoJSON.Feature, featureIndex: number): void;
     drawIcon(ctx: CanvasRenderingContext2D, _coord: Coordinate, featureProperties: GeoJsonProperties): DrawStyle;
     drawMarker(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean, featureProperties: GeoFeatureStyle): void | DrawStyle;
     drawLine(ctx: CanvasRenderingContext2D, XYCoords: Coordinate[], featureIndex: number, lineStringIndex: number): void | DrawStyle;
     drawPolygon(ctx: CanvasRenderingContext2D, XYCoords: Coordinate[], featureIndex: number, polygonIndex: number): void | DrawStyle;
-    initializeFeatureCoordinates(feature: GeoJsonFeature, type: string): GeoJsonFeature;
-    checkIfFeatureIsBox(feature: GeoJsonFeature): boolean;
+    initializeFeatureCoordinates(feature: GeoJSON.Feature, type: string): GeoJSON.Feature;
+    checkIfFeatureIsBox(feature: GeoJSON.Feature): boolean;
     featureHasChanged(text: string): void;
     render(): React.ReactElement;
 }

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

@@ -31,3 +31,7 @@ export declare const Map7: {
     (): React.ReactElement;
     storyName: string;
 };
+export declare const Map8: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -6,8 +6,6 @@ export declare const featurePolygon: GeoJSON.Feature<GeoJSON.Polygon>;
 export declare const featureBox: GeoJSON.Feature<GeoJSON.Polygon>;
 export declare const lineString: GeoJSON.Feature<GeoJSON.LineString>;
 export declare const lineStringCollection: GeoJSON.FeatureCollection;
-export type GeoJsonFeatureType = GeoJSON.Polygon | GeoJSON.MultiPoint | GeoJSON.Point | GeoJSON.LineString | GeoJSON.MultiPolygon;
-export type GeoJsonFeature = GeoJSON.Feature<GeoJsonFeatureType>;
 export interface GeoFeatureStyle {
     stroke?: string;
     fill?: string;

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

@@ -1,10 +1,10 @@
 import proj4, { InterfaceProjection } from 'proj4';
 import { Position } from 'geojson';
-import { Coordinate, GeoJsonFeature } from './geojsonShapes';
+import { Coordinate } from './geojsonShapes';
 export type CheckHoverFeaturesResult = {
     coordinateIndexInFeature: number;
     featureIndex: number;
-    feature: GeoJsonFeature;
+    feature: GeoJSON.Feature;
     distance: number;
     screenCoords: {
         x: number;
@@ -27,7 +27,7 @@ export interface MapDrawDrawFunctionArgs {
     coord: Coordinate;
     selected: boolean;
     isInEditMode: boolean;
-    feature: GeoJsonFeature;
+    feature: GeoJSON.Feature;
     mouseX: number;
     mouseY: number;
     isHovered: boolean;

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

@@ -1,11 +1,12 @@
-export declare const simplePolygonGeoJSON: GeoJSON.FeatureCollection;
-export declare const simplePointsGeojson: GeoJSON.FeatureCollection;
-export declare const simpleSmallLineStringGeoJSON: GeoJSON.FeatureCollection;
-export declare const simpleFlightRoutePointsGeoJSON: GeoJSON.FeatureCollection;
-export declare const simpleLineStringGeoJSON: GeoJSON.FeatureCollection;
-export declare const simpleBoxGeoJSON: GeoJSON.FeatureCollection;
-export declare const simpleBoxGeoJSONWrongOrder: GeoJSON.FeatureCollection;
-export declare const simpleFlightRouteLineStringGeoJSON: GeoJSON.FeatureCollection;
-export declare const simpleMultiPolygon: GeoJSON.FeatureCollection;
-export declare const intersectionFeatureNL: GeoJSON.Feature;
-export declare const intersectionFeatureBE: GeoJSON.Feature;
+export declare const simplePolygonGeoJSON: GeoJSON.FeatureCollection<GeoJSON.Polygon>;
+export declare const simplePointsGeojson: GeoJSON.FeatureCollection<GeoJSON.Point>;
+export declare const simpleSmallLineStringGeoJSON: GeoJSON.FeatureCollection<GeoJSON.LineString>;
+export declare const simpleFlightRoutePointsGeoJSON: GeoJSON.FeatureCollection<GeoJSON.Point>;
+export declare const simpleLineStringGeoJSON: GeoJSON.FeatureCollection<GeoJSON.LineString>;
+export declare const simpleBoxGeoJSON: GeoJSON.FeatureCollection<GeoJSON.Polygon>;
+export declare const simpleBoxGeoJSONWrongOrder: GeoJSON.FeatureCollection<GeoJSON.Polygon>;
+export declare const simpleFlightRouteLineStringGeoJSON: GeoJSON.FeatureCollection<GeoJSON.LineString>;
+export declare const simpleMultiPolygon: GeoJSON.FeatureCollection<GeoJSON.MultiPolygon>;
+export declare const intersectionFeatureNL: GeoJSON.Feature<GeoJSON.Polygon>;
+export declare const intersectionFeatureBE: GeoJSON.Feature<GeoJSON.Polygon>;
+export declare const simpleGeometryCollectionGeoJSON: GeoJSON.FeatureCollection<GeoJSON.GeometryCollection<GeoJSON.MultiPolygon>>;

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

@@ -27,7 +27,7 @@ export declare class ReactMapView extends React.Component<ReactMapViewProps, Rea
      */
     lastVisible: number | null;
     static defaultProps: {
-        srs: string;
+        srs: "EPSG:3857";
         bbox: {
             left: number;
             bottom: number;

package/src/lib/layers/defaultStorybookSettings.d.ts

@@ -1,5 +1,5 @@
 export declare const initialBbox: {
-    srs: string;
+    srs: "EPSG:3857";
     bbox: {
         left: number;
         bottom: number;