@opengeoweb/webmap-react 8.2.0 → 8.3.0

package/index.esm.js

@@ -319,13 +319,16 @@ class CanvasComponent extends Component {
         overflow: 'hidden',
         display: 'block',
         border: 'none'
-      }
+      },
+      "data-testid": "canvas-container"
     }, /*#__PURE__*/React__default.createElement("div", {
       style: {
         overflow: 'visible',
         width: 0,
         height: 0
-      }
+      },
+      role: "presentation",
+      "aria-label": "canvas"
     }, /*#__PURE__*/React__default.createElement("canvas", {
       ref: canvas => {
         this.canvas = canvas;
@@ -49824,8 +49827,6 @@ function intersect(poly1, poly2, options) {
     return multiPolygon(intersection, options.properties);
 }
 
-function n(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=arguments[e];if("production"!==process.env.NODE_ENV){var i=Y[n],o=i?"function"==typeof i?i.apply(null,t):i:"unknown error nr: "+n;throw Error("[Immer] "+o)}throw Error("[Immer] minified error nr: "+n+(t.length?" "+t.map((function(n){return "'"+n+"'"})).join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function r(n){return !!n&&!!n[Q]}function t(n){var r;return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var r=Object.getPrototypeOf(n);if(null===r)return !0;var t=Object.hasOwnProperty.call(r,"constructor")&&r.constructor;return t===Object||"function"==typeof t&&Function.toString.call(t)===Z}(n)||Array.isArray(n)||!!n[L]||!!(null===(r=n.constructor)||void 0===r?void 0:r[L])||s(n)||v(n))}function i(n,r,t){void 0===t&&(t=!1),0===o(n)?(t?Object.keys:nn)(n).forEach((function(e){t&&"symbol"==typeof e||r(e,n[e],n);})):n.forEach((function(t,e){return r(e,t,n)}));}function o(n){var r=n[Q];return r?r.i>3?r.i-4:r.i:Array.isArray(n)?1:s(n)?2:v(n)?3:0}function u(n,r){return 2===o(n)?n.has(r):Object.prototype.hasOwnProperty.call(n,r)}function a(n,r){return 2===o(n)?n.get(r):n[r]}function f(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c(n,r){return n===r?0!==n||1/n==1/r:n!=n&&r!=r}function s(n){return X&&n instanceof Map}function v(n){return q&&n instanceof Set}function p(n){return n.o||n.t}function l(n){if(Array.isArray(n))return Array.prototype.slice.call(n);var r=rn(n);delete r[Q];for(var t=nn(r),e=0;e<t.length;e++){var i=t[e],o=r[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),r)}function d(n,e){return void 0===e&&(e=!1),y(n)||r(n)||!t(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h),Object.freeze(n),e&&i(n,(function(n,r){return d(r,!0)}),!0)),n}function h(){n(2);}function y(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b(r){var t=tn[r];return t||n(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n(0),U}function j(n,r){r&&(b("Patches"),n.u=[],n.s=[],n.v=r);}function g(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var r=n[Q];0===r.i||1===r.i?r.j():r.g=!0;}function P(r,e){e._=e.p.length;var i=e.p[0],o=void 0!==r&&r!==i;return e.h.O||b("ES5").S(e,r,o),o?(i[Q].P&&(g(e),n(4)),t(r)&&(r=M(e,r),e.l||x(e,r)),e.u&&b("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l(e.k):e.o,u=o,a=!1;3===e.i&&(u=new Set(o),o.clear(),a=!0),i(u,(function(r,i){return A(n,e,o,r,i,t,a)})),x(n,o,!1),t&&n.u&&b("Patches").N(e,t,n.u,n.s);}return e.o}function A(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n(5),r(c)){var p=M(e,c,s&&i&&3!==i.i&&!u(i.R,a)?s.concat(a):void 0);if(f(o,a,p),!r(p))return;e.m=!1;}else v&&o.add(c);if(t(c)&&!y(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x(e,c);}}function x(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d(r,t);}function z(n,r){var t=n[Q];return (t?p(t):n)[r]}function I(n,r){if(r in n)for(var t=Object.getPrototypeOf(n);t;){var e=Object.getOwnPropertyDescriptor(t,r);if(e)return e;t=Object.getPrototypeOf(t);}}function k(n){n.P||(n.P=!0,n.l&&k(n.l));}function E(n){n.o||(n.o=l(n.t));}function N(n,r,t){var e=s(r)?b("MapSet").F(r,t):v(r)?b("MapSet").T(r,t):n.O?function(n,r){var t=Array.isArray(n),e={i:t?1:0,A:r?r.A:_(),P:!1,I:!1,R:{},l:r,t:n,k:null,o:null,j:null,C:!1},i=e,o=en;t&&(i=[e],o=on);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(r,t):b("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r(e)||n(22,e),function n(r){if(!t(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b("ES5").K(u)))return u.t;u.I=!0,e=D(r,c),u.I=!1;}else e=D(r,c);return i(e,(function(r,t){u&&a(u.t,r)===t||f(e,r,n(t));})),3===c?new Set(e):e}(e)}function D(n,r){switch(r){case 2:return new Map(n);case 3:return Array.from(n)}return l(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q="undefined"!=typeof Set,B="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H=W?Symbol.for("immer-nothing"):((G={})["immer-nothing"]=!0,G),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Y={0:"Illegal state",1:"Immer drafts cannot have computed properties",2:"This object has been frozen and should not be mutated",3:function(n){return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+n},4:"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",5:"Immer forbids circular references",6:"The first or second argument to `produce` must be a function",7:"The third argument to `produce` must be a function or undefined",8:"First argument to `createDraft` must be a plain object, an array, or an immerable object",9:"First argument to `finishDraft` must be a draft returned by `createDraft`",10:"The given draft is already finalized",11:"Object.defineProperty() cannot be used on an Immer draft",12:"Object.setPrototypeOf() cannot be used on an Immer draft",13:"Immer only supports deleting array indices",14:"Immer only supports setting array indices and the 'length' property",15:function(n){return "Cannot apply patch, path doesn't resolve: "+n},16:'Sets cannot have "replace" patches.',17:function(n){return "Unsupported patch operation: "+n},18:function(n){return "The plugin for '"+n+"' has not been loaded into Immer. To enable the plugin, import and call `enable"+n+"()` when initializing your application."},20:"Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available",21:function(n){return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '"+n+"'"},22:function(n){return "'current' expects a draft, got: "+n},23:function(n){return "'original' expects a draft, got: "+n},24:"Patching reserved attributes like __proto__, prototype and constructor is not allowed"},Z=""+Object.prototype.constructor,nn="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,rn=Object.getOwnPropertyDescriptors||function(n){var r={};return nn(n).forEach((function(t){r[t]=Object.getOwnPropertyDescriptor(n,t);})),r},tn={},en={get:function(n,r){if(r===Q)return n;var e=p(n);if(!u(e,r))return function(n,r,t){var e,i=I(r,t);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,r);var i=e[r];return n.I||!t(i)?i:i===z(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p(n)},ownKeys:function(n){return Reflect.ownKeys(p(n))},set:function(n,r,t){var e=I(p(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z(p(n),r),o=null==i?void 0:i[Q];if(o&&o.t===t)return n.o[r]=t,n.R[r]=!1,!0;if(c(t,i)&&(void 0!==t||u(n.t,r)))return !0;E(n),k(n);}return n.o[r]===t&&(void 0!==t||r in n.o)||Number.isNaN(t)&&Number.isNaN(n.o[r])||(n.o[r]=t,n.R[r]=!0),!0},deleteProperty:function(n,r){return void 0!==z(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p(n),e=Reflect.getOwnPropertyDescriptor(t,r);return e?{writable:!0,configurable:1!==n.i||"length"!==r,enumerable:e.enumerable,value:t[r]}:e},defineProperty:function(){n(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n(12);}},on={};i(en,(function(n,r){on[n]=function(){return arguments[0]=arguments[0][0],r.apply(this,arguments)};})),on.deleteProperty=function(r,t){return "production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&n(13),on.set.call(this,r,t,void 0)},on.set=function(r,t,e){return "production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&n(14),en.set.call(this,r[0],t,e,r[0])};var un=function(){function e(r){var e=this;this.O=B,this.D=!0,this.produce=function(r,i,o){if("function"==typeof r&&"function"!=typeof i){var u=i;i=r;var a=e;return function(n){var r=this;void 0===n&&(n=u);for(var t=arguments.length,e=Array(t>1?t-1:0),o=1;o<t;o++)e[o-1]=arguments[o];return a.produce(n,(function(n){var t;return (t=i).call.apply(t,[r,n].concat(e))}))}}var f;if("function"!=typeof i&&n(6),void 0!==o&&"function"!=typeof o&&n(7),t(r)){var c=w(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g(c):O(c);}return "undefined"!=typeof Promise&&f instanceof Promise?f.then((function(n){return j(c,o),P(n,c)}),(function(n){throw g(c),n})):(j(c,o),P(f,c))}if(!r||"object"!=typeof r){if(void 0===(f=i(r))&&(f=r),f===H&&(f=void 0),e.D&&d(f,!0),o){var p=[],l=[];b("Patches").M(r,f,p,l),o(p,l);}return f}n(21,r);},this.produceWithPatches=function(n,r){if("function"==typeof n)return function(r){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o<t;o++)i[o-1]=arguments[o];return e.produceWithPatches(r,(function(r){return n.apply(void 0,[r].concat(i))}))};var t,i,o=e.produce(n,r,(function(n,r){t=n,i=r;}));return "undefined"!=typeof Promise&&o instanceof Promise?o.then((function(n){return [n,t,i]})):[o,t,i]},"boolean"==typeof(null==r?void 0:r.useProxies)&&this.setUseProxies(r.useProxies),"boolean"==typeof(null==r?void 0:r.autoFreeze)&&this.setAutoFreeze(r.autoFreeze);}var i=e.prototype;return i.createDraft=function(e){t(e)||n(8),r(e)&&(e=R(e));var i=w(this),o=N(this,e,void 0);return o[Q].C=!0,O(i),o},i.finishDraft=function(r,t){var e=r&&r[Q];"production"!==process.env.NODE_ENV&&(e&&e.C||n(9),e.I&&n(10));var i=e.A;return j(i,t),P(void 0,i)},i.setAutoFreeze=function(n){this.D=n;},i.setUseProxies=function(r){r&&!B&&n(20),this.O=r;},i.applyPatches=function(n,t){var e;for(e=t.length-1;e>=0;e--){var i=t[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}e>-1&&(t=t.slice(e+1));var o=b("Patches").$;return r(n)?o(n,t):this.produce(n,(function(n){return o(n,t)}))},e}(),an=new un,fn=an.produce;an.produceWithPatches.bind(an);an.setAutoFreeze.bind(an);an.setUseProxies.bind(an);an.applyPatches.bind(an);an.createDraft.bind(an);an.finishDraft.bind(an);var produce = fn;
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -49842,67 +49843,6 @@ function n(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=a
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-const defaultGeoJSONStyleProperties = {
-  fill: '#ff7800',
-  'fill-opacity': 0.2,
-  stroke: '#ff7800',
-  'stroke-width': 2,
-  'stroke-opacity': 1
-};
-const emptyGeoJSON = {
-  type: 'FeatureCollection',
-  features: []
-};
-const featurePoint = {
-  type: 'Feature',
-  properties: {},
-  geometry: {
-    type: 'Point',
-    coordinates: []
-  }
-};
-const featureMultiPoint = {
-  type: 'Feature',
-  properties: {},
-  geometry: {
-    type: 'MultiPoint',
-    coordinates: [[]]
-  }
-};
-const featurePolygon = {
-  type: 'Feature',
-  properties: {},
-  geometry: {
-    type: 'Polygon',
-    coordinates: [[]]
-  }
-};
-const featureBox = {
-  type: 'Feature',
-  properties: {
-    _type: 'box'
-  },
-  geometry: {
-    type: 'Polygon',
-    coordinates: [[]]
-  }
-};
-const lineString = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: {
-      stroke: '#66F',
-      'stroke-width': 5,
-      'stroke-opacity': '1'
-    },
-    geometry: {
-      type: 'LineString',
-      coordinates: [[]]
-    }
-  }]
-};
-
 /* Function which calculates the distance between two points */
 const distance = (a, b) => {
   return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
@@ -50048,119 +49988,85 @@ const registerDrawFunction = (drawFunction = () => {}) => {
   drawFunctionStore.push(newFunction);
   return id;
 };
-/**
- * Adds properties to the first geojson feature based on the given property object.
- * It only extends or changes the properties which are defined in styleConfig,
- * all other properties in the geojson are left unchanged.
- * @param geojson
- * @param featureProperties
- */
-const addFeatureProperties = (geojson, featureProperties, featureIndex = 0) => {
-  if (!geojson) {
-    return null;
-  }
-  return produce(geojson, draft => {
-    if (draft.features && draft.features.length > 0 && draft.features[featureIndex] !== undefined && draft.features[featureIndex].properties) {
-      Object.keys(featureProperties).forEach(key => {
-        draft.features[featureIndex].properties[key] = featureProperties[key];
-      });
-    }
-  });
-};
-/**
- * Returns the intersection of two features. In case of a polygon, only the first feature is used.
- * @param a Feature A
- * @param b Feature B
- * @returns The intersection of the two features.
- */
-const intersectGeoJSONS = (a, b, geoJSONProperties = {
-  stroke: '#FF0000',
-  'stroke-width': 10.0,
-  'stroke-opacity': 1,
-  fill: '#0000FF',
-  'fill-opacity': 1.0
-}) => {
-  const featureA = feature(a.features[0].geometry);
-  const featureB = feature(b.features[0].geometry);
-  const options = {
-    tolerance: 0.001,
-    highQuality: true
-  };
-  const simplifiedA = simplify$1(featureA, options);
-  const simplifiedB = simplify$1(featureB, options);
-  const intersection = intersect(simplifiedA, simplifiedB);
-  return addFeatureProperties({
-    type: 'FeatureCollection',
-    features: intersection === null ? [{
-      type: 'Feature',
-      properties: {
-        selectionType: 'poly'
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [[]]
-      }
-    }] : [intersection]
-  }, geoJSONProperties);
+const NEW_LINESTRING_CREATED = 'new point in LineString created';
+const NEW_FEATURE_CREATED = 'new feature created';
+const NEW_POINT_CREATED = 'new point created';
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+const defaultGeoJSONStyleProperties = {
+  fill: '#ff7800',
+  'fill-opacity': 0.2,
+  stroke: '#ff7800',
+  'stroke-width': 2,
+  'stroke-opacity': 1
 };
-/**
- * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
- * @param geoJSONs
- * @returns GeoJSONS extend with intersections
- */
-const createInterSections = (geojson, otherGeoJSON, geoJSONproperties = {
-  stroke: '#f24a00',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#f24a00',
-  'fill-opacity': 0.5
-}) => {
-  const intersections = produce(geojson, () => {
-    try {
-      return addFeatureProperties(intersectGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
-    } catch (error) {
-      return addFeatureProperties(geojson, geoJSONproperties);
-    }
-  });
-  return intersections;
+const emptyGeoJSON = {
+  type: 'FeatureCollection',
+  features: []
 };
-const getGeoJson = (geojson, shouldAllowMultipleshapes) => {
-  if (shouldAllowMultipleshapes) {
-    return geojson;
-  }
-  const {
-    geometry
-  } = geojson.features[0];
-  if (geometry.type === 'Point' || geometry.type === 'LineString') {
-    return geojson;
+const featurePoint = {
+  type: 'Feature',
+  properties: {},
+  geometry: {
+    type: 'Point',
+    coordinates: []
   }
-  return geometry.coordinates.length > 1 ? produce(geojson, draft => {
-    const draftFeature = draft.features[0];
-    draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
-  }) : geojson;
 };
-const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleshapes, geoJSONFeatureCollection = emptyGeoJSON) => {
-  if (geoJSONFeature.type === 'FeatureCollection') {
-    return geoJSONFeature;
+const featureMultiPoint = {
+  type: 'Feature',
+  properties: {},
+  geometry: {
+    type: 'MultiPoint',
+    coordinates: [[]]
   }
-  if (shouldAllowMultipleshapes) {
-    return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
-      features: geoJSONFeatureCollection.features.concat(geoJSONFeature)
-    });
+};
+const featurePolygon = {
+  type: 'Feature',
+  properties: {},
+  geometry: {
+    type: 'Polygon',
+    coordinates: [[]]
   }
-  return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
-    features: [geoJSONFeature]
-  });
 };
-// compares 2 geoJSONs and returns true if both have properties.selectionType with the same value
-const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
-  var _a, _b, _c;
-  if (!existingJSON.features.length) {
-    return false;
+const featureBox = {
+  type: 'Feature',
+  properties: {
+    _type: 'box'
+  },
+  geometry: {
+    type: 'Polygon',
+    coordinates: [[]]
   }
-  const lastUsedTool = (_a = existingJSON.features[0].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
-  const newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
-  return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
+};
+const lineString = {
+  type: 'FeatureCollection',
+  features: [{
+    type: 'Feature',
+    properties: {
+      stroke: '#66F',
+      'stroke-width': 5,
+      'stroke-opacity': '1'
+    },
+    geometry: {
+      type: 'LineString',
+      coordinates: [[]]
+    }
+  }]
 };
 
 const colors = {
@@ -50221,12 +50127,12 @@ class MapDraw extends React.PureComponent {
     super(props);
     this.handleGeoJSONUpdate = newGeoJSON => {
       const {
-        featureNrToEdit
+        selectedFeatureIndex
       } = this.props;
       this.geojson = lodash.exports.cloneDeep(newGeoJSON);
       /* Ensure that this.snappedPolygonIndex is still within the coordinates array */
-      if (this.geojson && this.geojson.features && featureNrToEdit < this.geojson.features.length) {
-        const feature = this.geojson.features[featureNrToEdit];
+      if (this.geojson && this.geojson.features && selectedFeatureIndex < this.geojson.features.length) {
+        const feature = this.geojson.features[selectedFeatureIndex];
         if (feature.geometry) {
           const {
             coordinates
@@ -50529,7 +50435,7 @@ class MapDraw extends React.PureComponent {
   mouseMove(event) {
     const {
       isInEditMode,
-      featureNrToEdit,
+      selectedFeatureIndex,
       onHoverFeature
     } = this.props;
     if (event && event.rightButton === true) {
@@ -50576,7 +50482,7 @@ class MapDraw extends React.PureComponent {
     if (isInEditMode === false) {
       return undefined;
     }
-    const feature = this.geojson.features[featureNrToEdit];
+    const feature = this.geojson.features[selectedFeatureIndex];
     if (!feature) {
       return undefined;
     }
@@ -50679,7 +50585,7 @@ class MapDraw extends React.PureComponent {
     } = event;
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.POLYGON) {
@@ -50688,7 +50594,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         if (this.checkIfFeatureIsBox(feature)) {
           return false;
         }
@@ -50708,7 +50614,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         if (this.checkIfFeatureIsBox(feature)) {
           return false;
         }
@@ -50732,14 +50638,14 @@ class MapDraw extends React.PureComponent {
     } = event;
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myEditMode === EDITMODE.EMPTY) {
       this.myEditMode = EDITMODE.ADD_FEATURE;
-      let feature = this.geojson.features[featureNrToEdit];
+      let feature = this.geojson.features[selectedFeatureIndex];
       // eslint-disable-next-line no-multi-assign
-      feature = this.geojson.features[featureNrToEdit] = this.initializeFeature(feature, this.myDrawMode);
+      feature = this.geojson.features[selectedFeatureIndex] = this.initializeFeature(feature, this.myDrawMode);
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
         y: mouseY
@@ -50765,7 +50671,7 @@ class MapDraw extends React.PureComponent {
           this.snappedPolygonIndex = pointGeometry.coordinates.length - 1;
           /* For type POINT it is not possible to add multiple points to the same feature */
           this.myEditMode = EDITMODE.EMPTY;
-          this.featureHasChanged('new point created');
+          this.featureHasChanged(NEW_POINT_CREATED);
         }
         if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
           this.myEditMode = EDITMODE.EMPTY;
@@ -50813,7 +50719,7 @@ class MapDraw extends React.PureComponent {
         } else {
           this.mouseIsOverVertexNr = featureCoords.length - 1;
         }
-        this.featureHasChanged('new feature created');
+        this.featureHasChanged(NEW_FEATURE_CREATED);
       }
       if (this.myDrawMode === DRAWMODE.LINESTRING) {
         this.myEditMode = EDITMODE.EMPTY;
@@ -50828,7 +50734,7 @@ class MapDraw extends React.PureComponent {
         }
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         this.snappedPolygonIndex = 0;
-        this.featureHasChanged('new point in LineString created');
+        this.featureHasChanged(NEW_LINESTRING_CREATED);
         this.mouseIsOverVertexNr = featureCoords.length - 1;
       }
       webmapjs.draw('MapDraw::mouseDown');
@@ -50848,7 +50754,7 @@ class MapDraw extends React.PureComponent {
     } = event;
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
@@ -50857,7 +50763,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         const featureCoords = feature.geometry.coordinates;
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         this.featureHasChanged('point added to multipoint');
@@ -50875,7 +50781,7 @@ class MapDraw extends React.PureComponent {
     } = event;
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.POLYGON) {
@@ -50884,7 +50790,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         this.featureHasChanged('vertex added to polygon');
@@ -50902,7 +50808,7 @@ class MapDraw extends React.PureComponent {
     } = event;
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.myDrawMode === DRAWMODE.LINESTRING) {
@@ -50911,7 +50817,7 @@ class MapDraw extends React.PureComponent {
           x: mouseX,
           y: mouseY
         });
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         const featureCoords = feature.geometry.coordinates;
         featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
         this.featureHasChanged('vertex added to LineString');
@@ -50976,10 +50882,10 @@ class MapDraw extends React.PureComponent {
 
   deletePolygon(index) {
     const {
-      featureNrToEdit,
+      selectedFeatureIndex,
       deletePolygonCallback
     } = this.props;
-    const feature = this.geojson.features[featureNrToEdit];
+    const feature = this.geojson.features[selectedFeatureIndex];
     feature.geometry.coordinates.splice(index, 1);
     if (deletePolygonCallback) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -50991,13 +50897,13 @@ class MapDraw extends React.PureComponent {
     /* Deletes any features under the mousecursor */
     const {
       mapId,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     if (this.mouseIsOverVertexNr === VERTEX.NONE) {
       return;
     }
-    const feature = this.geojson.features[featureNrToEdit];
+    const feature = this.geojson.features[selectedFeatureIndex];
     const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
     if (featureCoords === undefined) {
       return;
@@ -51082,7 +50988,7 @@ class MapDraw extends React.PureComponent {
   cancelEdit(cancelLastPoint) {
     const {
       isInEditMode,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     if (isInEditMode === false) {
       return;
@@ -51098,7 +51004,7 @@ class MapDraw extends React.PureComponent {
         if (this.snappedPolygonIndex === SNAPPEDFEATURE.NONE) {
           return;
         }
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         const {
           coordinates
         } = feature.geometry;
@@ -51120,7 +51026,7 @@ class MapDraw extends React.PureComponent {
         }
       }
       if (this.myDrawMode === DRAWMODE.LINESTRING) {
-        const feature = this.geojson.features[featureNrToEdit];
+        const feature = this.geojson.features[selectedFeatureIndex];
         const featureCoords = feature.geometry.coordinates;
         featureCoords.pop();
       }
@@ -51359,7 +51265,7 @@ class MapDraw extends React.PureComponent {
      You are free to draw anything you like on the canvas.
     */
     const {
-      featureNrToEdit,
+      selectedFeatureIndex,
       isInEditMode
     } = this.props;
     if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
@@ -51385,7 +51291,7 @@ class MapDraw extends React.PureComponent {
           continue;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
-          this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && featureNrToEdit === featureIndex, false, isInEditMode && featureNrToEdit === featureIndex, feature, featureIndex);
+          this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
         }
       }
       if (featureType === 'MultiPoint') {
@@ -51396,7 +51302,7 @@ class MapDraw extends React.PureComponent {
           continue;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
-          this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && featureNrToEdit === featureIndex, false, isInEditMode && featureNrToEdit === featureIndex, feature, featureIndex);
+          this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
         }
       }
       if (featureType === 'MultiPolygon') {
@@ -51420,11 +51326,11 @@ class MapDraw extends React.PureComponent {
             if (isInEditMode) {
               /* Draw all vertices on the edges of the polygons */
               for (let j = 0; j < XYCoords.length; j += 1) {
-                this.drawVertice(ctx, XYCoords[j], this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === j && featureNrToEdit === featureIndex, false, isInEditMode && featureNrToEdit === featureIndex);
+                this.drawVertice(ctx, XYCoords[j], this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
               }
               if (middle && isInEditMode === true && XYCoords.length >= 3) {
                 /* Draw middle vertice for the poly if poly covers an area, e.g. when it contains more than three points */
-                this.drawVertice(ctx, middle, this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && featureNrToEdit === featureIndex, true, isInEditMode && featureNrToEdit === featureIndex);
+                this.drawVertice(ctx, middle, this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && selectedFeatureIndex === featureIndex, true, isInEditMode && selectedFeatureIndex === featureIndex);
               }
             }
           }
@@ -51463,11 +51369,11 @@ class MapDraw extends React.PureComponent {
           if (isInEditMode) {
             /* Draw all vertices on the edges of the polygons */
             for (let j = 0; j < XYCoords.length; j += 1) {
-              this.drawVertice(ctx, XYCoords[j], this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === j && featureNrToEdit === featureIndex, false, isInEditMode && featureNrToEdit === featureIndex);
+              this.drawVertice(ctx, XYCoords[j], this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
             }
             if (middle && isInEditMode === true && XYCoords.length >= 3) {
               /* Draw middle vertice for the poly if poly covers an area, e.g. when it contains more than three points */
-              this.drawVertice(ctx, middle, this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && featureNrToEdit === featureIndex, true, isInEditMode && featureNrToEdit === featureIndex);
+              this.drawVertice(ctx, middle, this.snappedPolygonIndex === polygonIndex && this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE && selectedFeatureIndex === featureIndex, true, isInEditMode && selectedFeatureIndex === featureIndex);
             }
           }
         }
@@ -51496,14 +51402,14 @@ class MapDraw extends React.PureComponent {
         if (isInEditMode) {
           /* Draw all vertices on the edges of the polygons */
           for (let j = 0; j < XYCoords.length; j += 1) {
-            this.drawVertice(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && featureNrToEdit === featureIndex, false, isInEditMode && featureNrToEdit === featureIndex);
+            this.drawVertice(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex);
           }
         }
       }
     }
     /* Higlight polygon with mousehover */
-    if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === featureNrToEdit && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE) {
-      const feature = this.geojson.features[featureNrToEdit];
+    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.geojson.features[selectedFeatureIndex];
       const featureProperties = feature.properties;
       if (this.mouseOverPolygonCoordinates.length >= 2) {
         ctx.beginPath();
@@ -51756,7 +51662,7 @@ class MapDraw extends React.PureComponent {
   drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
     const {
       isInEditMode,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const feature = this.geojson.features[featureIndex];
     if (!feature || !feature.geometry) {
@@ -51809,7 +51715,7 @@ class MapDraw extends React.PureComponent {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     middle.y = parseInt(middle.y / (XYCoords.length - 1), 10);
-    if (isInEditMode === true && this.snappedPolygonIndex === lineStringIndex && this.selectedEdge !== EDGE.NONE && featureNrToEdit === featureIndex) {
+    if (isInEditMode === true && this.snappedPolygonIndex === lineStringIndex && this.selectedEdge !== EDGE.NONE && selectedFeatureIndex === featureIndex) {
       /* Higlight selected edge of a LineString, previousely detected by mouseover event */
       ctx.beginPath();
       ctx.strokeStyle = '#FF0';
@@ -51830,7 +51736,7 @@ class MapDraw extends React.PureComponent {
   drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
     const {
       isInEditMode,
-      featureNrToEdit
+      selectedFeatureIndex
     } = this.props;
     const feature = this.geojson.features[featureIndex];
     if (!feature || !feature.geometry) {
@@ -51884,7 +51790,7 @@ class MapDraw extends React.PureComponent {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     middle.y = parseInt(middle.y / (XYCoords.length - 1), 10);
-    if (isInEditMode === true && this.snappedPolygonIndex === polygonIndex && this.selectedEdge !== EDGE.NONE && featureNrToEdit === featureIndex) {
+    if (isInEditMode === true && this.snappedPolygonIndex === polygonIndex && this.selectedEdge !== EDGE.NONE && selectedFeatureIndex === featureIndex) {
       /* Higlight selected edge of a polygon, previousely detected by mouseover event */
       ctx.strokeStyle = '#FF0';
       ctx.lineWidth = 5;
@@ -51987,7 +51893,7 @@ class MapDraw extends React.PureComponent {
     const {
       updateGeojson
     } = this.props;
-    if (text !== 'new feature created') {
+    if (text !== NEW_FEATURE_CREATED) {
       this.validatePolys(text === 'cancelEdit');
     }
     if (updateGeojson && this.geojson) {
@@ -52003,7 +51909,7 @@ MapDraw.defaultProps = {
   isInEditMode: false,
   isInDeleteMode: false,
   webmapjs: undefined,
-  featureNrToEdit: 0
+  selectedFeatureIndex: 0
 };
 
 const MapDrawContainer = ({
@@ -52032,9 +51938,9 @@ const MapDrawContainer = ({
         layer.onClickFeature(hoverInfo);
       }
     },
-    updateGeojson: geojson => {
+    updateGeojson: (geojson, reason) => {
       if (layer.updateGeojson) {
-        layer.updateGeojson(geojson);
+        layer.updateGeojson(geojson, reason);
       }
     },
     exitDrawModeCallback: reason => {
@@ -52042,7 +51948,7 @@ const MapDrawContainer = ({
         layer.exitDrawModeCallback(reason);
       }
     },
-    featureNrToEdit: parseInt(layer.featureNrToEdit || '0', 10)
+    selectedFeatureIndex: parseInt(layer.selectedFeatureIndex || '0', 10)
   }));
 }));
 
@@ -52097,7 +52003,7 @@ const FeatureLayers = ({
 }) => {
   const featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(index => ({
     key: index,
-    value: `layer ${index + 1}: ${geojson.features[index].geometry.type}`
+    value: `feature ${index + 1}: ${geojson.features[index].geometry.type}`
   })) : [];
   return /*#__PURE__*/React__default.createElement(Grid$1, {
     item: true,
@@ -52110,7 +52016,7 @@ const FeatureLayers = ({
     }
   }, /*#__PURE__*/React__default.createElement(InputLabel$1, {
     id: "demo-feature-number"
-  }, "Feature layers"), /*#__PURE__*/React__default.createElement(Select$1, {
+  }, "Features"), /*#__PURE__*/React__default.createElement(Select$1, {
     labelId: "demo-feature-type",
     value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
     onChange: event => {
@@ -52555,6 +52461,264 @@ const useGeoJSON = () => {
   };
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+const StoryLayoutGrid = ({
+  mapComponent,
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(Paper$1, null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: '70% 30%',
+      gridTemplateRows: '150px 1fr',
+      gridTemplateAreas: "'map controls'\n'map textarea'",
+      width: '100%',
+      height: '100vh'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      gridArea: 'map',
+      width: '100%',
+      height: '100%'
+    }
+  }, mapComponent), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      gridArea: 'controls',
+      width: '100%',
+      height: '100%',
+      padding: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid$1, {
+    spacing: 2,
+    container: true
+  }, children))));
+};
+
+const SelectField = ({
+  label,
+  value,
+  onChangeValue,
+  options: _options = [],
+  width: _width = '50%',
+  showValueAsColor: _showValueAsColor = false,
+  labelSuffix: _labelSuffix = ''
+}) => {
+  const onChange = event => {
+    const {
+      value
+    } = event.target;
+    onChangeValue(value);
+  };
+  const getLabel = currentValue => `${currentValue}${_labelSuffix}`;
+  return /*#__PURE__*/React__default.createElement(FormControl$1, {
+    variant: "filled",
+    sx: {
+      width: _width
+    }
+  }, /*#__PURE__*/React__default.createElement(InputLabel$1, null, label), /*#__PURE__*/React__default.createElement(Select$1, {
+    value: value,
+    onChange: onChange
+  }, _options.map(value => /*#__PURE__*/React__default.createElement(MenuItem$1, {
+    value: value,
+    key: value
+  }, _showValueAsColor ? /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      backgroundColor: value,
+      width: 20,
+      height: 20
+    }
+  }) : getLabel(value.toString())))));
+};
+
+function n(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=arguments[e];if("production"!==process.env.NODE_ENV){var i=Y[n],o=i?"function"==typeof i?i.apply(null,t):i:"unknown error nr: "+n;throw Error("[Immer] "+o)}throw Error("[Immer] minified error nr: "+n+(t.length?" "+t.map((function(n){return "'"+n+"'"})).join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function r(n){return !!n&&!!n[Q]}function t(n){var r;return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var r=Object.getPrototypeOf(n);if(null===r)return !0;var t=Object.hasOwnProperty.call(r,"constructor")&&r.constructor;return t===Object||"function"==typeof t&&Function.toString.call(t)===Z}(n)||Array.isArray(n)||!!n[L]||!!(null===(r=n.constructor)||void 0===r?void 0:r[L])||s(n)||v(n))}function i(n,r,t){void 0===t&&(t=!1),0===o(n)?(t?Object.keys:nn)(n).forEach((function(e){t&&"symbol"==typeof e||r(e,n[e],n);})):n.forEach((function(t,e){return r(e,t,n)}));}function o(n){var r=n[Q];return r?r.i>3?r.i-4:r.i:Array.isArray(n)?1:s(n)?2:v(n)?3:0}function u(n,r){return 2===o(n)?n.has(r):Object.prototype.hasOwnProperty.call(n,r)}function a(n,r){return 2===o(n)?n.get(r):n[r]}function f(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c(n,r){return n===r?0!==n||1/n==1/r:n!=n&&r!=r}function s(n){return X&&n instanceof Map}function v(n){return q&&n instanceof Set}function p(n){return n.o||n.t}function l(n){if(Array.isArray(n))return Array.prototype.slice.call(n);var r=rn(n);delete r[Q];for(var t=nn(r),e=0;e<t.length;e++){var i=t[e],o=r[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),r)}function d(n,e){return void 0===e&&(e=!1),y(n)||r(n)||!t(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h),Object.freeze(n),e&&i(n,(function(n,r){return d(r,!0)}),!0)),n}function h(){n(2);}function y(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b(r){var t=tn[r];return t||n(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n(0),U}function j(n,r){r&&(b("Patches"),n.u=[],n.s=[],n.v=r);}function g(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var r=n[Q];0===r.i||1===r.i?r.j():r.g=!0;}function P(r,e){e._=e.p.length;var i=e.p[0],o=void 0!==r&&r!==i;return e.h.O||b("ES5").S(e,r,o),o?(i[Q].P&&(g(e),n(4)),t(r)&&(r=M(e,r),e.l||x(e,r)),e.u&&b("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l(e.k):e.o,u=o,a=!1;3===e.i&&(u=new Set(o),o.clear(),a=!0),i(u,(function(r,i){return A(n,e,o,r,i,t,a)})),x(n,o,!1),t&&n.u&&b("Patches").N(e,t,n.u,n.s);}return e.o}function A(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n(5),r(c)){var p=M(e,c,s&&i&&3!==i.i&&!u(i.R,a)?s.concat(a):void 0);if(f(o,a,p),!r(p))return;e.m=!1;}else v&&o.add(c);if(t(c)&&!y(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x(e,c);}}function x(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d(r,t);}function z(n,r){var t=n[Q];return (t?p(t):n)[r]}function I(n,r){if(r in n)for(var t=Object.getPrototypeOf(n);t;){var e=Object.getOwnPropertyDescriptor(t,r);if(e)return e;t=Object.getPrototypeOf(t);}}function k(n){n.P||(n.P=!0,n.l&&k(n.l));}function E(n){n.o||(n.o=l(n.t));}function N(n,r,t){var e=s(r)?b("MapSet").F(r,t):v(r)?b("MapSet").T(r,t):n.O?function(n,r){var t=Array.isArray(n),e={i:t?1:0,A:r?r.A:_(),P:!1,I:!1,R:{},l:r,t:n,k:null,o:null,j:null,C:!1},i=e,o=en;t&&(i=[e],o=on);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(r,t):b("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r(e)||n(22,e),function n(r){if(!t(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b("ES5").K(u)))return u.t;u.I=!0,e=D(r,c),u.I=!1;}else e=D(r,c);return i(e,(function(r,t){u&&a(u.t,r)===t||f(e,r,n(t));})),3===c?new Set(e):e}(e)}function D(n,r){switch(r){case 2:return new Map(n);case 3:return Array.from(n)}return l(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q="undefined"!=typeof Set,B="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H=W?Symbol.for("immer-nothing"):((G={})["immer-nothing"]=!0,G),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Y={0:"Illegal state",1:"Immer drafts cannot have computed properties",2:"This object has been frozen and should not be mutated",3:function(n){return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+n},4:"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",5:"Immer forbids circular references",6:"The first or second argument to `produce` must be a function",7:"The third argument to `produce` must be a function or undefined",8:"First argument to `createDraft` must be a plain object, an array, or an immerable object",9:"First argument to `finishDraft` must be a draft returned by `createDraft`",10:"The given draft is already finalized",11:"Object.defineProperty() cannot be used on an Immer draft",12:"Object.setPrototypeOf() cannot be used on an Immer draft",13:"Immer only supports deleting array indices",14:"Immer only supports setting array indices and the 'length' property",15:function(n){return "Cannot apply patch, path doesn't resolve: "+n},16:'Sets cannot have "replace" patches.',17:function(n){return "Unsupported patch operation: "+n},18:function(n){return "The plugin for '"+n+"' has not been loaded into Immer. To enable the plugin, import and call `enable"+n+"()` when initializing your application."},20:"Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available",21:function(n){return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '"+n+"'"},22:function(n){return "'current' expects a draft, got: "+n},23:function(n){return "'original' expects a draft, got: "+n},24:"Patching reserved attributes like __proto__, prototype and constructor is not allowed"},Z=""+Object.prototype.constructor,nn="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,rn=Object.getOwnPropertyDescriptors||function(n){var r={};return nn(n).forEach((function(t){r[t]=Object.getOwnPropertyDescriptor(n,t);})),r},tn={},en={get:function(n,r){if(r===Q)return n;var e=p(n);if(!u(e,r))return function(n,r,t){var e,i=I(r,t);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,r);var i=e[r];return n.I||!t(i)?i:i===z(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p(n)},ownKeys:function(n){return Reflect.ownKeys(p(n))},set:function(n,r,t){var e=I(p(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z(p(n),r),o=null==i?void 0:i[Q];if(o&&o.t===t)return n.o[r]=t,n.R[r]=!1,!0;if(c(t,i)&&(void 0!==t||u(n.t,r)))return !0;E(n),k(n);}return n.o[r]===t&&(void 0!==t||r in n.o)||Number.isNaN(t)&&Number.isNaN(n.o[r])||(n.o[r]=t,n.R[r]=!0),!0},deleteProperty:function(n,r){return void 0!==z(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p(n),e=Reflect.getOwnPropertyDescriptor(t,r);return e?{writable:!0,configurable:1!==n.i||"length"!==r,enumerable:e.enumerable,value:t[r]}:e},defineProperty:function(){n(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n(12);}},on={};i(en,(function(n,r){on[n]=function(){return arguments[0]=arguments[0][0],r.apply(this,arguments)};})),on.deleteProperty=function(r,t){return "production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&n(13),on.set.call(this,r,t,void 0)},on.set=function(r,t,e){return "production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&n(14),en.set.call(this,r[0],t,e,r[0])};var un=function(){function e(r){var e=this;this.O=B,this.D=!0,this.produce=function(r,i,o){if("function"==typeof r&&"function"!=typeof i){var u=i;i=r;var a=e;return function(n){var r=this;void 0===n&&(n=u);for(var t=arguments.length,e=Array(t>1?t-1:0),o=1;o<t;o++)e[o-1]=arguments[o];return a.produce(n,(function(n){var t;return (t=i).call.apply(t,[r,n].concat(e))}))}}var f;if("function"!=typeof i&&n(6),void 0!==o&&"function"!=typeof o&&n(7),t(r)){var c=w(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g(c):O(c);}return "undefined"!=typeof Promise&&f instanceof Promise?f.then((function(n){return j(c,o),P(n,c)}),(function(n){throw g(c),n})):(j(c,o),P(f,c))}if(!r||"object"!=typeof r){if(void 0===(f=i(r))&&(f=r),f===H&&(f=void 0),e.D&&d(f,!0),o){var p=[],l=[];b("Patches").M(r,f,p,l),o(p,l);}return f}n(21,r);},this.produceWithPatches=function(n,r){if("function"==typeof n)return function(r){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o<t;o++)i[o-1]=arguments[o];return e.produceWithPatches(r,(function(r){return n.apply(void 0,[r].concat(i))}))};var t,i,o=e.produce(n,r,(function(n,r){t=n,i=r;}));return "undefined"!=typeof Promise&&o instanceof Promise?o.then((function(n){return [n,t,i]})):[o,t,i]},"boolean"==typeof(null==r?void 0:r.useProxies)&&this.setUseProxies(r.useProxies),"boolean"==typeof(null==r?void 0:r.autoFreeze)&&this.setAutoFreeze(r.autoFreeze);}var i=e.prototype;return i.createDraft=function(e){t(e)||n(8),r(e)&&(e=R(e));var i=w(this),o=N(this,e,void 0);return o[Q].C=!0,O(i),o},i.finishDraft=function(r,t){var e=r&&r[Q];"production"!==process.env.NODE_ENV&&(e&&e.C||n(9),e.I&&n(10));var i=e.A;return j(i,t),P(void 0,i)},i.setAutoFreeze=function(n){this.D=n;},i.setUseProxies=function(r){r&&!B&&n(20),this.O=r;},i.applyPatches=function(n,t){var e;for(e=t.length-1;e>=0;e--){var i=t[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}e>-1&&(t=t.slice(e+1));var o=b("Patches").$;return r(n)?o(n,t):this.produce(n,(function(n){return o(n,t)}))},e}(),an=new un,fn=an.produce;an.produceWithPatches.bind(an);an.setAutoFreeze.bind(an);an.setUseProxies.bind(an);an.applyPatches.bind(an);an.createDraft.bind(an);an.finishDraft.bind(an);var produce = fn;
+
+/**
+ * Adds properties to the first geojson feature based on the given property object.
+ * It only extends or changes the properties which are defined in styleConfig,
+ * all other properties in the geojson are left unchanged.
+ * @param geojson
+ * @param featureProperties
+ */
+const addFeatureProperties = (geojson, featureProperties, featureIndex = 0) => {
+  if (!geojson) {
+    return null;
+  }
+  return produce(geojson, draft => {
+    if (draft.features && draft.features.length > 0 && draft.features[featureIndex] !== undefined && draft.features[featureIndex].properties) {
+      Object.keys(featureProperties).forEach(key => {
+        draft.features[featureIndex].properties[key] = featureProperties[key];
+      });
+    }
+  });
+};
+const getGeoJSONPropertyValue = (property, properties, polygonDrawMode, defaultProperties = defaultGeoJSONStyleProperties) => {
+  // if a shape is set, extract the style from there
+  if (properties[property] !== undefined) {
+    return properties[property];
+  }
+  // if active polygon tool is preset, retreive style from there
+  if (polygonDrawMode) {
+    const polygonDrawModeProperty = polygonDrawMode.shape.type === 'Feature' && polygonDrawMode.shape.properties[property];
+    if (polygonDrawModeProperty !== undefined) {
+      return polygonDrawModeProperty;
+    }
+  }
+  // otherwise get values from defaultStyle
+  return defaultProperties[property];
+};
+/**
+ * moves geoJSON feature as new feature. Mutates newGeoJSON
+ * @constructor
+ * @param {GeoJSON.FeatureCollection} currentGeoJSON - current geoJSON
+ * @param {GeoJSON.FeatureCollection} newGeoJSON - new geoJSON
+ * @param {number} featureLayerIndex - feature layer index
+ * @param {string} text - reason of change
+ */
+const moveFeature = (currentGeoJSON, newGeoJSON, featureLayerIndex, reason) => {
+  const feature = newGeoJSON.features[featureLayerIndex];
+  const currentFeature = currentGeoJSON.features[featureLayerIndex];
+  if (feature) {
+    const {
+      geometry
+    } = feature;
+    if (geometry.type === 'Polygon' && geometry.coordinates.length > 1 && reason === NEW_FEATURE_CREATED) {
+      const lastCoordinate = geometry.coordinates.pop();
+      const copyFeature = Object.assign(Object.assign({}, feature), {
+        geometry: Object.assign(Object.assign({}, geometry), {
+          coordinates: [lastCoordinate]
+        })
+      });
+      newGeoJSON.features.push(copyFeature);
+      return newGeoJSON.features.length - 1;
+    }
+    if (geometry.type === 'LineString' && geometry.coordinates.length > 2 && reason === NEW_LINESTRING_CREATED) {
+      const lastCoordinate = geometry.coordinates.pop();
+      const copyFeature = Object.assign(Object.assign({}, feature), {
+        geometry: Object.assign(Object.assign({}, geometry), {
+          coordinates: [lastCoordinate, lastCoordinate]
+        })
+      });
+      newGeoJSON.features.push(copyFeature);
+      return newGeoJSON.features.length - 1;
+    }
+    if (geometry.type === 'Point' && currentFeature && currentFeature.geometry.type === 'Point' && currentFeature.geometry.coordinates.length > 0 && reason === NEW_POINT_CREATED) {
+      newGeoJSON.features.push(currentFeature);
+      return newGeoJSON.features.length - 1;
+    }
+  }
+  return undefined;
+};
+/**
+ * Returns the intersection of two features. In case of a polygon, only the first feature is used.
+ * @param a Feature A
+ * @param b Feature B
+ * @returns The intersection of the two features.
+ */
+const intersectGeoJSONS = (a, b, geoJSONProperties = {
+  stroke: '#FF0000',
+  'stroke-width': 10.0,
+  'stroke-opacity': 1,
+  fill: '#0000FF',
+  'fill-opacity': 1.0
+}) => {
+  const featureA = feature(a.features[0].geometry);
+  const featureB = feature(b.features[0].geometry);
+  const options = {
+    tolerance: 0.001,
+    highQuality: true
+  };
+  const simplifiedA = simplify$1(featureA, options);
+  const simplifiedB = simplify$1(featureB, options);
+  const intersection = intersect(simplifiedA, simplifiedB);
+  return addFeatureProperties({
+    type: 'FeatureCollection',
+    features: intersection === null ? [{
+      type: 'Feature',
+      properties: {
+        selectionType: 'poly'
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[]]
+      }
+    }] : [intersection]
+  }, geoJSONProperties);
+};
+/**
+ * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
+ * @param geoJSONs
+ * @returns GeoJSONS extend with intersections
+ */
+const createInterSections = (geojson, otherGeoJSON, geoJSONproperties = {
+  stroke: '#f24a00',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#f24a00',
+  'fill-opacity': 0.5
+}) => {
+  const intersections = produce(geojson, () => {
+    try {
+      return addFeatureProperties(intersectGeoJSONS(geojson, otherGeoJSON), geoJSONproperties);
+    } catch (error) {
+      return addFeatureProperties(geojson, geoJSONproperties);
+    }
+  });
+  return intersections;
+};
+const getGeoJson = (geojson, shouldAllowMultipleShapes) => {
+  if (shouldAllowMultipleShapes || !geojson.features.length) {
+    return geojson;
+  }
+  const {
+    geometry
+  } = geojson.features[0];
+  if (geometry.type === 'Point' || geometry.type === 'LineString') {
+    return geojson;
+  }
+  return geometry.coordinates.length > 1 ? produce(geojson, draft => {
+    const draftFeature = draft.features[0];
+    draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
+  }) : geojson;
+};
+const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleShapes, geoJSONFeatureCollection = emptyGeoJSON) => {
+  if (geoJSONFeature.type === 'FeatureCollection') {
+    return geoJSONFeature;
+  }
+  if (shouldAllowMultipleShapes) {
+    return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
+      features: geoJSONFeatureCollection.features.concat(geoJSONFeature)
+    });
+  }
+  return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
+    features: [geoJSONFeature]
+  });
+};
+// compares 2 geoJSONs and returns true if both have properties.selectionType with the same value
+const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
+  var _a, _b, _c;
+  if (!existingJSON.features.length) {
+    return false;
+  }
+  const lastUsedTool = (_a = existingJSON.features[0].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
+  const newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
+  return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
+};
+
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
 });
@@ -52636,8 +52800,8 @@ const defaultDelete = {
 const defaultModes = [defaultPoint, defaultPolygon, defaultBox, defaultLineString, defaultDelete];
 const currentlySupportedDrawModes = [defaultPolygon, defaultDelete];
 const useMapDrawTool = ({
-  defaultEditModes: _defaultEditModes = defaultModes,
-  shouldAllowMultipleshapes: _shouldAllowMultipleshapes = false,
+  defaultDrawModes: _defaultDrawModes = defaultModes,
+  shouldAllowMultipleShapes: _shouldAllowMultipleShapes = false,
   defaultGeoJSON: _defaultGeoJSON = emptyGeoJSON,
   defaultGeoJSONIntersection: _defaultGeoJSONIntersection = emptyIntersectionShape,
   defaultGeoJSONIntersectionBounds,
@@ -52648,14 +52812,14 @@ const useMapDrawTool = ({
   const [geoJSONIntersection, setGeoJSONIntersection] = React__default.useState(_defaultGeoJSONIntersection);
   const [geoJSONIntersectionBounds, setGeoJSONIntersectionBounds] = React__default.useState(defaultGeoJSONIntersectionBounds);
   // state
-  const [editModes, setEditModes] = React__default.useState(_defaultEditModes);
+  const [drawModes, setDrawModes] = React__default.useState(_defaultDrawModes);
   const [activeTool, setActiveTool] = React__default.useState('');
   const [drawMode, setDrawMode] = React__default.useState('');
   const [isInEditMode, setEditMode] = React__default.useState(false);
   const [featureLayerIndex, setFeatureLayerIndex] = React__default.useState(0);
   const changeProperties = styleProperties => {
     // update all modes with new properties
-    const newModes = editModes.map(mode => {
+    const newModes = drawModes.map(mode => {
       const shape = mode.shape.type === 'Feature' ? Object.assign(Object.assign({}, mode.shape), {
         properties: Object.assign(Object.assign({}, mode.shape.properties), styleProperties)
       }) : addFeatureProperties(mode.shape, styleProperties);
@@ -52663,7 +52827,7 @@ const useMapDrawTool = ({
         shape
       });
     });
-    setEditModes(newModes);
+    setDrawModes(newModes);
     // update current geoJSON with new properties
     const updateGeoJSON = addFeatureProperties(geoJSON, styleProperties, featureLayerIndex);
     setGeoJSON(updateGeoJSON);
@@ -52684,7 +52848,7 @@ const useMapDrawTool = ({
     setActiveTool(newMode.drawModeId);
     // updates shape
     const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
-    const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleshapes || isNewSelectedTool;
+    const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleShapes || isNewSelectedTool;
     if (shouldUpdateShape) {
       const updatedGeoJSON = changeGeoJSON(newMode.shape);
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
@@ -52693,9 +52857,15 @@ const useMapDrawTool = ({
     setDrawMode(newMode.value);
     setEditMode(!!newMode.value);
   };
-  const changeGeoJSON = updatedGeoJSON => {
-    const geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, _shouldAllowMultipleshapes, geoJSON);
-    const newGeoJSON = getGeoJson(geoJSONFeatureCollection, _shouldAllowMultipleshapes);
+  const changeGeoJSON = (updatedGeoJSON, reason = '') => {
+    const geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, _shouldAllowMultipleShapes, geoJSON);
+    const newGeoJSON = getGeoJson(geoJSONFeatureCollection, _shouldAllowMultipleShapes);
+    if (_shouldAllowMultipleShapes) {
+      const newFeatureIndex = moveFeature(geoJSON, newGeoJSON, featureLayerIndex, reason);
+      if (newFeatureIndex !== undefined) {
+        setFeatureLayerIndex(newFeatureIndex);
+      }
+    }
     setGeoJSON(newGeoJSON);
     if (geoJSONIntersectionBounds) {
       setGeoJSONIntersection(createInterSections(newGeoJSON, geoJSONIntersectionBounds, _defaultGeoJSONIntersectionProperties));
@@ -52710,7 +52880,7 @@ const useMapDrawTool = ({
   };
   const onSetDrawMode = drawMode => {
     setDrawMode(drawMode);
-    const newActiveTool = editModes.find(mode => mode.value === drawMode);
+    const newActiveTool = drawModes.find(mode => mode.value === drawMode);
     if (newActiveTool) {
       setActiveTool(newActiveTool.drawModeId);
     }
@@ -52737,7 +52907,7 @@ const useMapDrawTool = ({
         isInEditMode,
         drawMode,
         updateGeojson: changeGeoJSON,
-        featureNrToEdit: featureLayerIndex
+        selectedFeatureIndex: featureLayerIndex
       };
     }
     // intersections
@@ -52754,7 +52924,7 @@ const useMapDrawTool = ({
     geoJSONIntersectionBounds,
     setGeoJSON: changeGeoJSON,
     setGeoJSONIntersectionBounds: onSetGeoJSONIntersectionBounds,
-    editModes,
+    drawModes,
     isInEditMode,
     changeDrawMode: onSetDrawMode,
     setEditMode,
@@ -52766,12 +52936,66 @@ const useMapDrawTool = ({
     layers,
     getLayer,
     deactivateTool,
-    setEditModes,
+    setDrawModes,
     changeProperties,
     getProperties
   };
 };
 
+// custom buttons
+const shapeButtonNL = {
+  drawModeId: 'tool-fir',
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR NL polygon',
+  shape: intersectionFeatureNL,
+  isSelectable: false
+};
+const customLineButton = {
+  drawModeId: 'tool-custom-line',
+  value: DRAWMODE.LINESTRING,
+  title: 'Custom LineString',
+  shape: {
+    type: 'Feature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [[4.136829504703722, 50.944730810381465], [4.450134704406403, 53.81224530783831], [2.5703035061903217, 53.78911570560625], [5.252979278644519, 56.722490281934554], [8.758081200318252, 53.85846624679025], [6.290802752659646, 53.84691579421783], [6.623689527343743, 51.0556380592049], [4.136829504703722, 50.95706693142843]]
+    },
+    properties: defaultGeoJSONStyleProperties
+  },
+  isSelectable: false
+};
+// example options
+const basicExampleDrawOptions = {
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
+        selectionType: 'box'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[9.451665078283622, 53.21804334226515], [4.734608638338736, 53.21804334226515], [4.734608638338736, 54.57650543915101], [9.451665078283622, 54.57650543915101], [9.451665078283622, 53.21804334226515]]]
+      }
+    }]
+  }
+};
+const basicExampleMultipleShapeDrawOptions = {
+  shouldAllowMultipleShapes: true,
+  // add multiple tools, and update all with custom color
+  defaultDrawModes: [...defaultModes, shapeButtonNL, customLineButton].map(mode => Object.assign(Object.assign({}, mode), {
+    shape: Object.assign(Object.assign({}, mode.shape), {
+      properties: Object.assign(Object.assign({}, mode.shape.properties), {
+        stroke: '#8F8',
+        'stroke-width': 4,
+        'stroke-opacity': 1,
+        fill: '#33ccFF',
+        'fill-opacity': 0.5
+      })
+    })
+  }))
+};
+
 var fails$5 = fails$j;
 var global$4 = global$h;
 
@@ -54503,6 +54727,8 @@ class ReactMapView extends React.Component {
         zIndex: 10
       }
     }, /*#__PURE__*/React.createElement("div", {
+      role: "application",
+      "aria-label": "map",
       ref: this.adagucWebMapJSRef
     })), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -56348,4 +56574,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, ZoomControls, addFeatureProperties, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, formatTime, getDrawFunctionFromStore, getFeatureCollection, getGeoJson, getIcon, getTimeDimension, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, publicLayers, publicServices, registerDrawFunction, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, useGeoJSON, useMapDrawTool };
+export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, formatTime, getDrawFunctionFromStore, getFeatureCollection, getGeoJSONPropertyValue, getGeoJson, getIcon, getTimeDimension, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, publicLayers, publicServices, registerDrawFunction, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, useGeoJSON, useMapDrawTool };