@opengeoweb/webmap-react 8.4.1 → 9.0.0

package/index.esm.js

@@ -5,7 +5,7 @@ import { CustomTooltip, ToolContainerDraggable, dateUtils, CustomIconButton } fr
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode } from 'react-dom';
-import { Delete, Edit, DrawRegion, DrawPolygon, Location, Home, Add, Minus, Close } from '@opengeoweb/theme';
+import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus, Close } from '@opengeoweb/theme';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -490,10 +490,10 @@ var store$2 = sharedStore;
 (shared$4.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.0',
+  version: '3.33.2',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1811,13 +1811,12 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
 }, function () {
   var state = getInternalState$1(this);
   var target = state.target;
-  var kind = state.kind;
   var index = state.index++;
   if (!target || index >= target.length) {
     state.target = undefined;
     return createIterResultObject(undefined, true);
   }
-  switch (kind) {
+  switch (state.kind) {
     case 'keys': return createIterResultObject(index, false);
     case 'values': return createIterResultObject(target[index], false);
   } return createIterResultObject([index, target[index]], false);
@@ -3912,10 +3911,10 @@ function useEventCallback(fn) {
   useEnhancedEffect$1(() => {
     ref.current = fn;
   });
-  return React.useCallback((...args) =>
+  return React.useRef((...args) =>
   // @ts-expect-error hide `this`
   // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args), []);
+  (0, ref.current)(...args)).current;
 }
 
 function useForkRef(...refs) {
@@ -7179,7 +7178,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
 } : void 0;
 
 /**
- * @mui/styled-engine v5.14.14
+ * @mui/styled-engine v5.14.16
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -40520,9 +40519,6 @@ function nadgrid(key, data) {
   var view = new DataView(data);
   var isLittleEndian = detectLittleEndian(view);
   var header = readHeader(view, isLittleEndian);
-  if (header.nSubgrids > 1) {
-    console.log('Only single NTv2 subgrids are currently supported, subsequent sub grids are ignored');
-  }
   var subgrids = readSubgrids(view, header, isLittleEndian);
   var nadgrid = {header: header, subgrids: subgrids};
   loadedNadgrids[key] = nadgrid;
@@ -40609,6 +40605,7 @@ function readSubgrids(view, header, isLittleEndian) {
       count: subHeader.gridNodeCount,
       cvs: mapNodes(nodes)
     });
+    gridOffset += 176 + subHeader.gridNodeCount * 16;
   }
   return grids;
 }
@@ -41028,6 +41025,7 @@ function applyGridShift(source, inverse, point) {
   var input = {x: -point.x, y: point.y};
   var output = {x: Number.NaN, y: Number.NaN};
   var attemptedGrids = [];
+  outer:
   for (var i = 0; i < source.grids.length; i++) {
     var grid = source.grids[i];
     attemptedGrids.push(grid.name);
@@ -41043,19 +41041,22 @@ function applyGridShift(source, inverse, point) {
       }
       continue;
     }
-    var subgrid = grid.grid.subgrids[0];
-    // skip tables that don't match our point at all
-    var epsilon = (Math.abs(subgrid.del[1]) + Math.abs(subgrid.del[0])) / 10000.0;
-    var minX = subgrid.ll[0] - epsilon;
-    var minY = subgrid.ll[1] - epsilon;
-    var maxX = subgrid.ll[0] + (subgrid.lim[0] - 1) * subgrid.del[0] + epsilon;
-    var maxY = subgrid.ll[1] + (subgrid.lim[1] - 1) * subgrid.del[1] + epsilon;
-    if (minY > input.y || minX > input.x || maxY < input.y || maxX < input.x ) {
-      continue;
-    }
-    output = applySubgridShift(input, inverse, subgrid);
-    if (!isNaN(output.x)) {
-      break;
+    var subgrids = grid.grid.subgrids;
+    for (var j = 0, jj = subgrids.length; j < jj; j++) {
+      var subgrid = subgrids[j];
+      // skip tables that don't match our point at all
+      var epsilon = (Math.abs(subgrid.del[1]) + Math.abs(subgrid.del[0])) / 10000.0;
+      var minX = subgrid.ll[0] - epsilon;
+      var minY = subgrid.ll[1] - epsilon;
+      var maxX = subgrid.ll[0] + (subgrid.lim[0] - 1) * subgrid.del[0] + epsilon;
+      var maxY = subgrid.ll[1] + (subgrid.lim[1] - 1) * subgrid.del[1] + epsilon;
+      if (minY > input.y || minX > input.x || maxY < input.y || maxX < input.x ) {
+        continue;
+      }
+      output = applySubgridShift(input, inverse, subgrid);
+      if (!isNaN(output.x)) {
+        break outer;
+      }
     }
   }
   if (isNaN(output.x)) {
@@ -46498,6 +46499,93 @@ function polygon(coordinates, properties, options) {
     };
     return feature(geom, properties, options);
 }
+/**
+ * Creates a {@link LineString} {@link Feature} from an Array of Positions.
+ *
+ * @name lineString
+ * @param {Array<Array<number>>} coordinates an array of Positions
+ * @param {Object} [properties={}] an Object of key-value pairs to add as properties
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {Feature<LineString>} LineString Feature
+ * @example
+ * var linestring1 = turf.lineString([[-24, 63], [-23, 60], [-25, 65], [-20, 69]], {name: 'line 1'});
+ * var linestring2 = turf.lineString([[-14, 43], [-13, 40], [-15, 45], [-10, 49]], {name: 'line 2'});
+ *
+ * //=linestring1
+ * //=linestring2
+ */
+function lineString$1(coordinates, properties, options) {
+    if (options === void 0) { options = {}; }
+    if (coordinates.length < 2) {
+        throw new Error("coordinates must be an array of two or more positions");
+    }
+    var geom = {
+        type: "LineString",
+        coordinates: coordinates,
+    };
+    return feature(geom, properties, options);
+}
+/**
+ * Takes one or more {@link Feature|Features} and creates a {@link FeatureCollection}.
+ *
+ * @name featureCollection
+ * @param {Feature[]} features input features
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {FeatureCollection} FeatureCollection of Features
+ * @example
+ * var locationA = turf.point([-75.343, 39.984], {name: 'Location A'});
+ * var locationB = turf.point([-75.833, 39.284], {name: 'Location B'});
+ * var locationC = turf.point([-75.534, 39.123], {name: 'Location C'});
+ *
+ * var collection = turf.featureCollection([
+ *   locationA,
+ *   locationB,
+ *   locationC
+ * ]);
+ *
+ * //=collection
+ */
+function featureCollection(features, options) {
+    if (options === void 0) { options = {}; }
+    var fc = { type: "FeatureCollection" };
+    if (options.id) {
+        fc.id = options.id;
+    }
+    if (options.bbox) {
+        fc.bbox = options.bbox;
+    }
+    fc.features = features;
+    return fc;
+}
+/**
+ * Creates a {@link Feature<MultiLineString>} based on a
+ * coordinate array. Properties can be added optionally.
+ *
+ * @name multiLineString
+ * @param {Array<Array<Array<number>>>} coordinates an array of LineStrings
+ * @param {Object} [properties={}] an Object of key-value pairs to add as properties
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {Feature<MultiLineString>} a MultiLineString feature
+ * @throws {Error} if no coordinates are passed
+ * @example
+ * var multiLine = turf.multiLineString([[[0,0],[10,10]]]);
+ *
+ * //=multiLine
+ */
+function multiLineString(coordinates, properties, options) {
+    if (options === void 0) { options = {}; }
+    var geom = {
+        type: "MultiLineString",
+        coordinates: coordinates,
+    };
+    return feature(geom, properties, options);
+}
 /**
  * Creates a {@link Feature<MultiPolygon>} based on a
  * coordinate array. Properties can be added optionally.
@@ -46553,6 +46641,43 @@ function isObject$4(input) {
     return !!input && input.constructor === Object;
 }
 
+/**
+ * Callback for featureEach
+ *
+ * @callback featureEachCallback
+ * @param {Feature<any>} currentFeature The current Feature being processed.
+ * @param {number} featureIndex The current index of the Feature being processed.
+ */
+
+/**
+ * Iterate over features in any GeoJSON object, similar to
+ * Array.forEach.
+ *
+ * @name featureEach
+ * @param {FeatureCollection|Feature|Geometry} geojson any GeoJSON object
+ * @param {Function} callback a method that takes (currentFeature, featureIndex)
+ * @returns {void}
+ * @example
+ * var features = turf.featureCollection([
+ *   turf.point([26, 37], {foo: 'bar'}),
+ *   turf.point([36, 53], {hello: 'world'})
+ * ]);
+ *
+ * turf.featureEach(features, function (currentFeature, featureIndex) {
+ *   //=currentFeature
+ *   //=featureIndex
+ * });
+ */
+function featureEach(geojson, callback) {
+  if (geojson.type === "Feature") {
+    callback(geojson, 0);
+  } else if (geojson.type === "FeatureCollection") {
+    for (var i = 0; i < geojson.features.length; i++) {
+      if (callback(geojson.features[i], i) === false) break;
+    }
+  }
+}
+
 /**
  * Callback for geomEach
  *
@@ -47545,6 +47670,237 @@ function checkValidity(ring) {
   );
 }
 
+/**
+ * Converts a {@link Polygon} to {@link LineString|(Multi)LineString} or {@link MultiPolygon} to a
+ * {@link FeatureCollection} of {@link LineString|(Multi)LineString}.
+ *
+ * @name polygonToLine
+ * @param {Feature<Polygon|MultiPolygon>} poly Feature to convert
+ * @param {Object} [options={}] Optional parameters
+ * @param {Object} [options.properties={}] translates GeoJSON properties to Feature
+ * @returns {FeatureCollection|Feature<LineString|MultiLinestring>} converted (Multi)Polygon to (Multi)LineString
+ * @example
+ * var poly = turf.polygon([[[125, -30], [145, -30], [145, -20], [125, -20], [125, -30]]]);
+ *
+ * var line = turf.polygonToLine(poly);
+ *
+ * //addToMap
+ * var addToMap = [line];
+ */
+function polygonToLineString (poly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(poly);
+    if (!options.properties && poly.type === "Feature") {
+        options.properties = poly.properties;
+    }
+    switch (geom.type) {
+        case "Polygon":
+            return polygonToLine(geom, options);
+        case "MultiPolygon":
+            return multiPolygonToLine(geom, options);
+        default:
+            throw new Error("invalid poly");
+    }
+}
+/**
+ * @private
+ */
+function polygonToLine(poly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(poly);
+    var coords = geom.coordinates;
+    var properties = options.properties
+        ? options.properties
+        : poly.type === "Feature"
+            ? poly.properties
+            : {};
+    return coordsToLine(coords, properties);
+}
+/**
+ * @private
+ */
+function multiPolygonToLine(multiPoly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(multiPoly);
+    var coords = geom.coordinates;
+    var properties = options.properties
+        ? options.properties
+        : multiPoly.type === "Feature"
+            ? multiPoly.properties
+            : {};
+    var lines = [];
+    coords.forEach(function (coord) {
+        lines.push(coordsToLine(coord, properties));
+    });
+    return featureCollection(lines);
+}
+/**
+ * @private
+ */
+function coordsToLine(coords, properties) {
+    if (coords.length > 1) {
+        return multiLineString(coords, properties);
+    }
+    return lineString$1(coords[0], properties);
+}
+
+/**
+ * Takes a ring and return true or false whether or not the ring is clockwise or counter-clockwise.
+ *
+ * @name booleanClockwise
+ * @param {Feature<LineString>|LineString|Array<Array<number>>} line to be evaluated
+ * @returns {boolean} true/false
+ * @example
+ * var clockwiseRing = turf.lineString([[0,0],[1,1],[1,0],[0,0]]);
+ * var counterClockwiseRing = turf.lineString([[0,0],[1,0],[1,1],[0,0]]);
+ *
+ * turf.booleanClockwise(clockwiseRing)
+ * //=true
+ * turf.booleanClockwise(counterClockwiseRing)
+ * //=false
+ */
+function booleanClockwise(line) {
+    var ring = getCoords(line);
+    var sum = 0;
+    var i = 1;
+    var prev;
+    var cur;
+    while (i < ring.length) {
+        prev = cur || ring[0];
+        cur = ring[i];
+        sum += (cur[0] - prev[0]) * (cur[1] + prev[1]);
+        i++;
+    }
+    return sum > 0;
+}
+
+/**
+ * Rewind {@link LineString|(Multi)LineString} or {@link Polygon|(Multi)Polygon} outer ring counterclockwise and inner rings clockwise (Uses {@link http://en.wikipedia.org/wiki/Shoelace_formula|Shoelace Formula}).
+ *
+ * @name rewind
+ * @param {GeoJSON} geojson input GeoJSON Polygon
+ * @param {Object} [options={}] Optional parameters
+ * @param {boolean} [options.reverse=false] enable reverse winding
+ * @param {boolean} [options.mutate=false] allows GeoJSON input to be mutated (significant performance increase if true)
+ * @returns {GeoJSON} rewind Polygon
+ * @example
+ * var polygon = turf.polygon([[[121, -29], [138, -29], [138, -18], [121, -18], [121, -29]]]);
+ *
+ * var rewind = turf.rewind(polygon);
+ *
+ * //addToMap
+ * var addToMap = [rewind];
+ */
+function rewind(geojson, options) {
+  // Optional parameters
+  options = options || {};
+  if (!isObject$4(options)) throw new Error("options is invalid");
+  var reverse = options.reverse || false;
+  var mutate = options.mutate || false;
+
+  // validation
+  if (!geojson) throw new Error("<geojson> is required");
+  if (typeof reverse !== "boolean")
+    throw new Error("<reverse> must be a boolean");
+  if (typeof mutate !== "boolean")
+    throw new Error("<mutate> must be a boolean");
+
+  // prevent input mutation
+  if (mutate === false) geojson = clone(geojson);
+
+  // Support Feature Collection or Geometry Collection
+  var results = [];
+  switch (geojson.type) {
+    case "GeometryCollection":
+      geomEach(geojson, function (geometry) {
+        rewindFeature(geometry, reverse);
+      });
+      return geojson;
+    case "FeatureCollection":
+      featureEach(geojson, function (feature) {
+        featureEach(rewindFeature(feature, reverse), function (result) {
+          results.push(result);
+        });
+      });
+      return featureCollection(results);
+  }
+  // Support Feature or Geometry Objects
+  return rewindFeature(geojson, reverse);
+}
+
+/**
+ * Rewind
+ *
+ * @private
+ * @param {Geometry|Feature<any>} geojson Geometry or Feature
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {Geometry|Feature<any>} rewind Geometry or Feature
+ */
+function rewindFeature(geojson, reverse) {
+  var type = geojson.type === "Feature" ? geojson.geometry.type : geojson.type;
+
+  // Support all GeoJSON Geometry Objects
+  switch (type) {
+    case "GeometryCollection":
+      geomEach(geojson, function (geometry) {
+        rewindFeature(geometry, reverse);
+      });
+      return geojson;
+    case "LineString":
+      rewindLineString(getCoords(geojson), reverse);
+      return geojson;
+    case "Polygon":
+      rewindPolygon(getCoords(geojson), reverse);
+      return geojson;
+    case "MultiLineString":
+      getCoords(geojson).forEach(function (lineCoords) {
+        rewindLineString(lineCoords, reverse);
+      });
+      return geojson;
+    case "MultiPolygon":
+      getCoords(geojson).forEach(function (lineCoords) {
+        rewindPolygon(lineCoords, reverse);
+      });
+      return geojson;
+    case "Point":
+    case "MultiPoint":
+      return geojson;
+  }
+}
+
+/**
+ * Rewind LineString - outer ring clockwise
+ *
+ * @private
+ * @param {Array<Array<number>>} coords GeoJSON LineString geometry coordinates
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {void} mutates coordinates
+ */
+function rewindLineString(coords, reverse) {
+  if (booleanClockwise(coords) === reverse) coords.reverse();
+}
+
+/**
+ * Rewind Polygon - outer ring counterclockwise and inner rings clockwise.
+ *
+ * @private
+ * @param {Array<Array<Array<number>>>} coords GeoJSON Polygon geometry coordinates
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {void} mutates coordinates
+ */
+function rewindPolygon(coords, reverse) {
+  // outer ring
+  if (booleanClockwise(coords[0]) !== reverse) {
+    coords[0].reverse();
+  }
+  // inner rings
+  for (var i = 1; i < coords.length; i++) {
+    if (booleanClockwise(coords[i]) === reverse) {
+      coords[i].reverse();
+    }
+  }
+}
+
 /**
  * splaytree v3.1.2
  * Fast Splay tree for Node and browser
@@ -52814,6 +53170,37 @@ const SelectField = ({
   }) : getLabel(value.toString())))));
 };
 
+const IntersectionSelect = ({
+  intersections,
+  onChangeIntersection
+}) => {
+  const [activeIntersection, setActiveIntersection] = React__default.useState(0);
+  return /*#__PURE__*/React__default.createElement(Grid$1, {
+    item: true,
+    sm: 12
+  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
+    variant: "filled",
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(InputLabel$1, {
+    id: "demo-intersection"
+  }, "Intersection shapes"), /*#__PURE__*/React__default.createElement(Select$1, {
+    labelId: "demo-intersection",
+    value: activeIntersection.toString(),
+    onChange: event => {
+      const featureIndex = parseInt(event.target.value, 10);
+      setActiveIntersection(featureIndex);
+      onChangeIntersection(intersections[featureIndex].geojson);
+    }
+  }, intersections.map((listItem, index) => {
+    return /*#__PURE__*/React__default.createElement(MenuItem$1, {
+      key: listItem.title,
+      value: index
+    }, listItem.title);
+  }))));
+};
+
 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;
 
 /**
@@ -52987,6 +53374,20 @@ const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
   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 rewindGeometry = geoJSON => {
+  return produce(geoJSON, geoJSONDraft => {
+    if (geoJSONDraft && geoJSONDraft.features.length > 0 && geoJSONDraft.features[0].geometry.type === 'Polygon' && geoJSONDraft.features[0].geometry.coordinates[0].length > 1) {
+      const {
+        geometry
+      } = geoJSON.features[0];
+      const lineString = polygonToLineString(geometry);
+      if (booleanClockwise(lineString.geometry.coordinates)) {
+        // eslint-disable-next-line no-param-reassign
+        geoJSONDraft.features[0].geometry = rewind(geoJSONDraft.features[0].geometry);
+      }
+    }
+  });
+};
 
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
@@ -53074,7 +53475,10 @@ const useMapDrawTool = ({
   defaultGeoJSON: _defaultGeoJSON = emptyGeoJSON,
   defaultGeoJSONIntersection: _defaultGeoJSONIntersection = emptyIntersectionShape,
   defaultGeoJSONIntersectionBounds,
-  defaultGeoJSONIntersectionProperties: _defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties
+  defaultGeoJSONIntersectionProperties: _defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties,
+  geoJSONLayerId: _geoJSONLayerId = 'draw-layer',
+  geoJSONIntersectionLayerId: _geoJSONIntersectionLayerId = 'intersection-layer',
+  geoJSONIntersectionBoundsLayerId: _geoJSONIntersectionBoundsLayerId = 'static-layer'
 }) => {
   // geoJSON feature collections
   const [geoJSON, setGeoJSON] = React__default.useState(_defaultGeoJSON);
@@ -53114,7 +53518,7 @@ const useMapDrawTool = ({
       reset(shouldDeleteShape);
       return;
     }
-    setActiveTool(newMode.drawModeId);
+    setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
     // updates shape
     const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
     const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleShapes || isNewSelectedTool;
@@ -53124,7 +53528,7 @@ const useMapDrawTool = ({
     }
     // handle modes and update feature layer index
     setDrawMode(newMode.value);
-    setEditMode(!!newMode.value);
+    setEditMode(!!newMode.value && newMode.isSelectable);
   };
   const changeGeoJSON = (updatedGeoJSON, reason = '') => {
     const geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, _shouldAllowMultipleShapes, geoJSON);
@@ -53186,7 +53590,7 @@ const useMapDrawTool = ({
       isInEditMode: false
     };
   };
-  const layers = [...(geoJSONIntersectionBounds ? [getLayer('geoJSONIntersectionBounds', 'static-layer'), getLayer('geoJSONIntersection', 'intersection-layer')] : []), getLayer('geoJSON', 'draw-layer')];
+  const layers = [...(geoJSONIntersectionBounds ? [getLayer('geoJSONIntersectionBounds', _geoJSONIntersectionBoundsLayerId), getLayer('geoJSONIntersection', _geoJSONIntersectionLayerId)] : []), getLayer('geoJSON', _geoJSONLayerId)];
   return {
     geoJSON,
     geoJSONIntersection,
@@ -53211,8 +53615,24 @@ const useMapDrawTool = ({
   };
 };
 
+const opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
+const fillOptions = [defaultGeoJSONStyleProperties.fill, '#6e1e91', '#FF00FF', '#33ccFF', '#8F8'];
+const strokeWidthOptions = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
+const getToolIcon = id => {
+  const defaultIcon = getIcon(id);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (id === 'tool-fir') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  }
+  if (id === 'tool-custom-line') {
+    return /*#__PURE__*/React__default.createElement(ArrowUp, null);
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
 // custom buttons
-const shapeButtonNL = {
+const shapeButtonNL$2 = {
   drawModeId: 'tool-fir',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
@@ -53233,8 +53653,8 @@ const customLineButton = {
   },
   isSelectable: false
 };
-// example options
 const basicExampleDrawOptions = {
+  defaultDrawModes: [...defaultModes, shapeButtonNL$2, customLineButton],
   defaultGeoJSON: {
     type: 'FeatureCollection',
     features: [{
@@ -53252,7 +53672,7 @@ const basicExampleDrawOptions = {
 const basicExampleMultipleShapeDrawOptions = {
   shouldAllowMultipleShapes: true,
   // add multiple tools, and update all with custom color
-  defaultDrawModes: [...defaultModes, shapeButtonNL, customLineButton].map(mode => Object.assign(Object.assign({}, mode), {
+  defaultDrawModes: [...defaultModes, shapeButtonNL$2, 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',
@@ -53265,6 +53685,295 @@ const basicExampleMultipleShapeDrawOptions = {
   }))
 };
 
+const getIntersectionToolIcon = id => {
+  const defaultIcon = getIcon(id);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (id === 'fir-nl') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  }
+  if (id === 'fir-be') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+      sx: {
+        transform: `scaleY(-1)`
+      }
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
+// custom buttons
+const shapeButtonNL$1 = {
+  drawModeId: 'tool-fir',
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR NL polygon',
+  shape: intersectionFeatureNL,
+  isSelectable: false
+};
+const shapeButtonBE$1 = {
+  drawModeId: 'fir-be',
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR BE polygon',
+  shape: intersectionFeatureBE,
+  isSelectable: false
+};
+const geoJSONIntersectionBoundsStyle$1 = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#0075a9',
+  'fill-opacity': 0.0
+};
+const featurePropsIntersectionEnd = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#6e1e91',
+  'fill-opacity': 0.5
+};
+const intersectionShapeNL$1 = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+    properties: geoJSONIntersectionBoundsStyle$1
+  })]
+};
+const intersectionShapeBE$1 = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
+    properties: geoJSONIntersectionBoundsStyle$1
+  })]
+};
+const exampleIntersections = [{
+  title: 'NL',
+  geojson: intersectionShapeNL$1
+}, {
+  title: 'BE',
+  geojson: intersectionShapeBE$1
+}];
+const exampleIntersectionOptions = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL$1,
+  defaultDrawModes: [defaultPoint, defaultPolygon, defaultBox, shapeButtonNL$1, shapeButtonBE$1, defaultDelete]
+};
+const exampleIntersectionWithShapeOptions = {
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropsIntersectionEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[5.711880814773656, 55.12656218004421], [7.663910745234145, 55.970965630799725], [10.075241835802988, 52.35182632872327], [6.673542618750517, 51.77828698943017], [4.506215269489237, 53.442721496909385], [5.711880814773656, 55.12656218004421]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropsIntersectionEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[4.506215269489237, 53.442721496909385], [6.515104876543458, 51.89996184648691], [7.053095, 52.237764], [7.031389, 52.268885], [7.063612, 52.346109], [7.065557, 52.385828], [7.133055, 52.888887], [7.14218, 52.898244], [7.191667, 53.3], [6.5, 53.666667], [6.500002, 55.000002], [5.621260209964854, 55.00000082834584], [4.506215269489237, 53.442721496909385]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL$1,
+  defaultDrawModes: [Object.assign(Object.assign({}, defaultPoint), {
+    shape: Object.assign(Object.assign({}, defaultPoint.shape), {
+      properties: Object.assign(Object.assign({}, defaultPoint.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, defaultPolygon), {
+    shape: Object.assign(Object.assign({}, defaultPolygon.shape), {
+      properties: Object.assign(Object.assign({}, defaultPolygon.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, defaultBox), {
+    shape: Object.assign(Object.assign({}, defaultBox.shape), {
+      properties: Object.assign(Object.assign({}, defaultBox.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, shapeButtonNL$1), {
+    shape: Object.assign(Object.assign({}, shapeButtonNL$1.shape), {
+      properties: Object.assign(Object.assign({}, shapeButtonNL$1.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, shapeButtonBE$1), {
+    shape: Object.assign(Object.assign({}, shapeButtonBE$1.shape), {
+      properties: Object.assign(Object.assign({}, shapeButtonBE$1.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), defaultDelete],
+  defaultGeoJSONIntersectionProperties: featurePropsIntersectionEnd
+};
+
+const firButtonDrawId = 'fir-button';
+// styles and shapes
+const featurePropertiesStart = defaultGeoJSONStyleProperties;
+const featurePropertiesEnd = {
+  stroke: '#6e1e91',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#6e1e91',
+  'fill-opacity': 0.25
+};
+const geoJSONIntersectionBoundsStyle = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#0075a9',
+  'fill-opacity': 0.0
+};
+const intersectionShapeNL = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
+      selectionType: 'fir'
+    })
+  })]
+};
+const intersectionShapeBE = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
+    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
+      selectionType: 'fir'
+    })
+  })]
+};
+// custom buttons
+const shapeButtonNL = {
+  drawModeId: firButtonDrawId,
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR NL polygon',
+  shape: intersectionShapeNL,
+  isSelectable: false
+};
+const shapeButtonBE = {
+  drawModeId: firButtonDrawId,
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR BE polygon',
+  shape: intersectionShapeBE,
+  isSelectable: false
+};
+const exampleIntersectionsMultiDrawTool = [{
+  title: 'NL',
+  geojson: shapeButtonNL.shape
+}, {
+  title: 'BE',
+  geojson: shapeButtonBE.shape
+}];
+const getDoubleControlToolIcon = drawMode => {
+  const {
+    drawModeId
+  } = drawMode;
+  const defaultIcon = getIcon(drawModeId);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (drawModeId === firButtonDrawId) {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+      sx: Object.assign({}, drawMode.title === shapeButtonBE.title && {
+        transform: `scaleY(-1)`
+      })
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
+const getEditModes = geoJSONProperties => [Object.assign(Object.assign({}, defaultPoint), {
+  shape: Object.assign(Object.assign({}, defaultPoint.shape), {
+    properties: Object.assign(Object.assign({}, defaultPoint.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, defaultPolygon), {
+  shape: Object.assign(Object.assign({}, defaultPolygon.shape), {
+    properties: Object.assign(Object.assign({}, defaultPolygon.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, defaultBox), {
+  shape: Object.assign(Object.assign({}, defaultBox.shape), {
+    properties: Object.assign(Object.assign({}, defaultBox.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, shapeButtonNL), {
+  shape: Object.assign(Object.assign({}, shapeButtonNL.shape), {
+    features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+      properties: Object.assign(Object.assign({}, intersectionShapeNL.features[0].properties), geoJSONProperties)
+    })]
+  })
+}), defaultDelete];
+const getUpdatedFirShape = isNL => isNL ? intersectionShapeNL : intersectionShapeBE;
+const getFirTitle = isNL => isNL ? shapeButtonNL.title : shapeButtonBE.title;
+const updateEditModeButtonsWithFir = (drawModes, newFirGeoJSON) => {
+  const isNL = newFirGeoJSON === intersectionShapeNL;
+  return drawModes.map(mode => {
+    if (mode.drawModeId === firButtonDrawId) {
+      return Object.assign(Object.assign({}, mode), {
+        shape: getUpdatedFirShape(isNL),
+        title: getFirTitle(isNL)
+      });
+    }
+    return mode;
+  });
+};
+// example configs
+const startToolExampleConfig = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL,
+  defaultDrawModes: getEditModes(featurePropertiesStart),
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesStart), {
+        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]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, defaultIntersectionStyleProperties), {
+        selectionType: 'box'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[4.734608638338736, 53.21804334226515], [7.181571844927457, 53.21804334226515], [7.191667, 53.3], [6.5, 53.666667], [6.500001364755953, 54.57650543915101], [4.734608638338736, 54.57650543915101], [4.734608638338736, 53.21804334226515]]]
+      }
+    }]
+  }
+};
+const endToolExampleConfig = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL,
+  defaultDrawModes: getEditModes(featurePropertiesEnd),
+  defaultGeoJSONIntersectionProperties: featurePropertiesEnd,
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[2.3408785046353606, 52.57033268070152], [8.870833501723242, 51.74975701659361], [-0.088053542798945, 50.72496422996941], [2.3408785046353606, 52.57033268070152]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[2.000002, 51.500002], [3.370001, 51.369722], [3.362223, 51.320002], [3.36389, 51.313608], [3.373613, 51.309999], [3.952501, 51.214441], [4.397501, 51.452776], [5.078611, 51.391665], [5.249839243115953, 51.335557264081125], [6.173465572431757, 51.44120940537001], [5.94639, 51.811663], [6.405001, 51.830828], [6.708618091513499, 52.02146813052448], [2.8253551673020594, 52.50945174669971], [2.000002, 51.500002]]]
+      }
+    }]
+  }
+};
+
 var fails$5 = fails$j;
 var global$4 = global$h;
 
@@ -54010,6 +54719,30 @@ function debounce$2 (delay, callback, options) {
 const setLayerInfo = (wmLayer, mapId, onUpdateLayerInformation) => {
   const origin = 'ReactMapViewParseLayer';
   const map = webmapUtils.getWMJSMapById(mapId);
+  const mapDimensions = map === null || map === void 0 ? void 0 : map.mapdimensions.map(mapdim => {
+    return {
+      units: mapdim.units,
+      currentValue: mapdim.currentValue,
+      name: mapdim.name
+    };
+  });
+  const layerDimensions = wmLayer.dimensions.map(dim => {
+    const {
+      name,
+      units,
+      synced
+    } = dim;
+    return {
+      name,
+      units,
+      currentValue: dim.getValue(),
+      minValue: dim.getFirstValue(),
+      maxValue: dim.getLastValue(),
+      timeInterval: dim.getDimInterval(),
+      values: dim.getValues(),
+      synced
+    };
+  });
   /* Update list of layers for service */
   const updateObject = {
     origin,
@@ -54021,34 +54754,12 @@ const setLayerInfo = (wmLayer, mapId, onUpdateLayerInformation) => {
     mapDimensions: {
       mapId,
       origin,
-      dimensions: map && map.mapdimensions.map(mapdim => {
-        return {
-          units: mapdim.units,
-          currentValue: mapdim.currentValue,
-          name: mapdim.name
-        };
-      }) || []
+      dimensions: mapDimensions !== null && mapDimensions !== void 0 ? mapDimensions : []
     },
     layerDimensions: {
       origin,
       layerId: wmLayer.id,
-      dimensions: wmLayer.dimensions.map(dim => {
-        const {
-          name,
-          units,
-          synced
-        } = dim;
-        return {
-          name,
-          units,
-          currentValue: dim.getValue(),
-          minValue: dim.getFirstValue(),
-          maxValue: dim.getLastValue(),
-          timeInterval: dim.getDimInterval(),
-          values: dim.getValues(),
-          synced
-        };
-      })
+      dimensions: layerDimensions
     }
   };
   onUpdateLayerInformation === null || onUpdateLayerInformation === void 0 ? void 0 : onUpdateLayerInformation(updateObject);
@@ -54638,6 +55349,15 @@ class ReactMapView extends React.Component {
         }
       }
     }
+    /* Check if srs */
+    if (!prevProps || prevProps.srs !== props.srs) {
+      if (props.bbox.left !== undefined) {
+        wmjsMap.suspendEvent('onupdatebbox');
+        wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
+        wmjsMap.resumeEvent('onupdatebbox');
+        wmjsMap.draw();
+      }
+    }
     /* Check display/hide map cursor */
     if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
       if (props.displayMapPin === true) {
@@ -56890,4 +57610,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, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SearchDialog, 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 };
+export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, 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, SearchDialog, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getTimeDimension, getToolIcon, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };

package/package.json

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

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

@@ -5,3 +5,4 @@ export * from './geojsonExamples';
 export * from './storyUtils';
 export * from './StoryLayoutGrid';
 export * from './SelectField';
+export * from './IntersectionSelect';

package/src/lib/components/MapDrawTool/{MapDrawToolDoubleControls.stories.d.ts → MapDrawToolMultipleDrawTools.stories.d.ts}

@@ -3,4 +3,4 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const DoubleMapControlsDemo: () => React.ReactElement;
+export declare const MultipleDrawToolsDemo: () => React.ReactElement;

package/src/lib/components/MapDrawTool/index.d.ts

@@ -2,4 +2,6 @@ export * from './types';
 export { useMapDrawTool, defaultPoint, defaultDelete, defaultPolygon, defaultBox, defaultIntersectionStyleProperties, getIcon, currentlySupportedDrawModes, defaultModes, } from './useMapDrawTool';
 export type { MapDrawToolOptions } from './useMapDrawTool';
 export * from './utils';
-export * from './storyUtils';
+export * from './storyExamplesMapDrawTool';
+export * from './storyExamplesMapDrawToolIntersection';
+export * from './storyExamplesMapDrawToolMultipleDrawTools';

package/src/lib/components/MapDrawTool/storyExamplesMapDrawTool.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MapDrawToolOptions } from './useMapDrawTool';
+export declare const opacityOptions: number[];
+export declare const fillOptions: any[];
+export declare const strokeWidthOptions: number[];
+export declare const getToolIcon: (id: string) => React.ReactElement;
+export declare const basicExampleDrawOptions: MapDrawToolOptions;
+export declare const basicExampleMultipleShapeDrawOptions: MapDrawToolOptions;

package/src/lib/components/MapDrawTool/storyExamplesMapDrawToolIntersection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MapDrawToolOptions } from './useMapDrawTool';
+export declare const getIntersectionToolIcon: (id: string) => React.ReactElement;
+export declare const exampleIntersections: {
+    title: string;
+    geojson: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
+}[];
+export declare const exampleIntersectionOptions: MapDrawToolOptions;
+export declare const exampleIntersectionWithShapeOptions: MapDrawToolOptions;

package/src/lib/components/MapDrawTool/storyExamplesMapDrawToolMultipleDrawTools.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DrawMode } from './types';
+import { MapDrawToolOptions } from './useMapDrawTool';
+export declare const exampleIntersectionsMultiDrawTool: {
+    title: string;
+    geojson: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
+}[];
+export declare const getDoubleControlToolIcon: (drawMode: DrawMode) => React.ReactElement;
+export declare const updateEditModeButtonsWithFir: (drawModes: DrawMode[], newFirGeoJSON: GeoJSON.FeatureCollection) => DrawMode[];
+export declare const startToolExampleConfig: MapDrawToolOptions;
+export declare const endToolExampleConfig: MapDrawToolOptions;

package/src/lib/components/MapDrawTool/useMapDrawTool.d.ts

@@ -38,6 +38,9 @@ export interface MapDrawToolOptions {
     defaultGeoJSONIntersection?: GeoJSON.FeatureCollection;
     defaultGeoJSONIntersectionBounds?: GeoJSON.FeatureCollection;
     defaultGeoJSONIntersectionProperties?: GeoJSON.GeoJsonProperties;
+    geoJSONLayerId?: string;
+    geoJSONIntersectionLayerId?: string;
+    geoJSONIntersectionBoundsLayerId?: string;
 }
 export declare const getIcon: (drawModeId: string) => React.ReactElement | null;
 export declare const defaultPoint: {
@@ -101,5 +104,5 @@ export declare const currentlySupportedDrawModes: ({
     shape: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
     isSelectable: boolean;
 })[];
-export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, }: MapDrawToolOptions) => MapDrawToolProps;
+export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, }: MapDrawToolOptions) => MapDrawToolProps;
 export {};

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

@@ -1,3 +1,5 @@
+import { Feature } from '@turf/turf';
+import { FeatureCollection } from 'geojson';
 import { DrawMode } from './types';
 /**
  * Adds properties to the first geojson feature based on the given property object.
@@ -39,3 +41,4 @@ export declare const createInterSections: (geojson: GeoJSON.FeatureCollection, o
 export declare const getGeoJson: (geojson: GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean) => GeoJSON.FeatureCollection;
 export declare const getFeatureCollection: (geoJSONFeature: GeoJSON.Feature | GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean, geoJSONFeatureCollection?: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection;
 export declare const isGeoJSONFeatureCreatedByTool: (existingJSON: GeoJSON.FeatureCollection, newGeoJSON: GeoJSON.Feature | GeoJSON.FeatureCollection) => boolean;
+export declare const rewindGeometry: (geoJSON: FeatureCollection) => FeatureCollection;

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

@@ -10,7 +10,7 @@ export interface MapViewLayerProps extends LayerFoundation {
     updateGeojson?: (geoJson: GeoJSON.FeatureCollection, reason: string) => void;
     exitDrawModeCallback?: (reason: DrawModeExitCallback) => void;
     selectedFeatureIndex?: number;
-    onClickFeature?: (event: FeatureEvent) => void;
+    onClickFeature?: (event?: FeatureEvent) => void;
     onHoverFeature?: (event: FeatureEvent) => void;
 }
 export declare const MapViewLayer: React.FC<MapViewLayerProps>;

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

@@ -48,6 +48,7 @@ export interface SetBboxPayload {
     mapId: string;
     bbox: Bbox;
     srs?: string;
+    origin?: string;
 }
 export interface SetLayerDimensionsPayload {
     layerId: string;

package/src/lib/components/MapDrawTool/storyUtils.d.ts

@@ -1,3 +0,0 @@
-import { MapDrawToolOptions } from './useMapDrawTool';
-export declare const basicExampleDrawOptions: MapDrawToolOptions;
-export declare const basicExampleMultipleShapeDrawOptions: MapDrawToolOptions;