@opengeoweb/sigmet-airmet 5.2.0 → 6.0.0

package/index.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import React__default, { createContext, version, useContext, useRef, useCallback, useDebugValue, forwardRef, createElement, Fragment } from 'react';
-import { Box as Box$2, Button, FormControlLabel, Radio, Grid, Typography, Checkbox, MenuItem, FormHelperText, useTheme as useTheme$2, Dialog, DialogTitle, DialogContent, Card, LinearProgress, List, ListItemButton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid, Typography, Box as Box$2, Button, Checkbox, MenuItem, FormHelperText, useTheme as useTheme$2, Dialog, DialogTitle, DialogContent, Card, LinearProgress, List, ListItemButton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useDraftFormHelpers, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, isLatitude, isNonOrBothCoordinates, isLongitude, ReactHookFormFormControl, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
-import * as turf from '@turf/turf';
-import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
+import { defaultStyleProperties, defaultIntersectionStyleProperties, defaultPoint, defaultBox, defaultPolygon, DRAWMODE, addFeatureProperties, defaultDelete, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect, LegendConnect, LayerManagerConnect, useMapDrawTool } from '@opengeoweb/core';
+import { CustomTooltip, ToggleMenu, useIsMounted, StatusTag, AlertBanner, ConfirmationServiceProvider, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import moment from 'moment';
-import { ToggleMenu, CustomTooltip, useIsMounted, StatusTag, AlertBanner, ConfirmationServiceProvider, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, usePoller, ErrorBoundary } from '@opengeoweb/shared';
-import { layerTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect, LegendConnect, LayerManagerConnect } from '@opengeoweb/core';
-import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Edit, Success, Clock } from '@opengeoweb/theme';
+import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
+import { layerTypes, mapSelectors, mapStoreUtils, syncGroupsActions, mapStoreActions, defaultLayers, syncConstants } from '@opengeoweb/store';
+import { DrawFIRLand, ChevronLeft, Edit, Success, Clock } from '@opengeoweb/theme';
 import { debounce } from 'lodash';
 import 'react-dom';
 import { jsx } from 'react/jsx-runtime';
@@ -414,8 +414,6 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-function n$5(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$5(n){return !!n&&!!n[Q]}function t$5(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$4(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$4(n)?3:0}function u$3(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$3(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c$3(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$4(n){return q$5&&n instanceof Set}function p$5(n){return n.o||n.t}function l$4(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$3(n,e){return void 0===e&&(e=!1),y$2(n)||r$5(n)||!t$5(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h$5),Object.freeze(n),e&&i(n,(function(n,r){return d$3(r,!0)}),!0)),n}function h$5(){n$5(2);}function y$2(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b$3(r){var t=tn[r];return t||n$5(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n$5(0),U}function j(n,r){r&&(b$3("Patches"),n.u=[],n.s=[],n.v=r);}function g$3(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w$3(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$3("ES5").S(e,r,o),o?(i[Q].P&&(g$3(e),n$5(4)),t$5(r)&&(r=M(e,r),e.l||x$2(e,r)),e.u&&b$3("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g$3(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y$2(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A$2(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x$2(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$4(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$2(n,e,o,r,i,t,a)})),x$2(n,o,!1),t&&n.u&&b$3("Patches").N(e,t,n.u,n.s);}return e.o}function A$2(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n$5(5),r$5(c)){var p=M(e,c,s&&i&&3!==i.i&&!u$3(i.R,a)?s.concat(a):void 0);if(f$3(o,a,p),!r$5(p))return;e.m=!1;}else v&&o.add(c);if(t$5(c)&&!y$2(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x$2(e,c);}}function x$2(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d$3(r,t);}function z$2(n,r){var t=n[Q];return (t?p$5(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$4(n){n.P||(n.P=!0,n.l&&k$4(n.l));}function E(n){n.o||(n.o=l$4(n.t));}function N(n,r,t){var e=s(r)?b$3("MapSet").F(r,t):v$4(r)?b$3("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$3("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r$5(e)||n$5(22,e),function n(r){if(!t$5(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b$3("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$3(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$4(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q$5="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$5(n);if(!u$3(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$5(i)?i:i===z$2(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p$5(n)},ownKeys:function(n){return Reflect.ownKeys(p$5(n))},set:function(n,r,t){var e=I(p$5(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z$2(p$5(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$3(t,i)&&(void 0!==t||u$3(n.t,r)))return !0;E(n),k$4(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$2(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k$4(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p$5(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$5(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n$5(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$5(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$5(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$5(6),void 0!==o&&"function"!=typeof o&&n$5(7),t$5(r)){var c=w$3(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g$3(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$3(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$3(f,!0),o){var p=[],l=[];b$3("Patches").M(r,f,p,l),o(p,l);}return f}n$5(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$5(e)||n$5(8),r$5(e)&&(e=R(e));var i=w$3(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$5(9),e.I&&n$5(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$5(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$3("Patches").$;return r$5(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);
-
 /**
  * The possible phenomena for the sigmet
  */
@@ -551,224 +549,384 @@ var isInstanceOfSigmetOrAirmet = function isInstanceOfSigmetOrAirmet(obj) {
 var isInstanceOfCancelSigmetOrAirmet = function isInstanceOfCancelSigmetOrAirmet(obj) {
   return 'cancelsSigmetSequenceId' in obj || 'cancelsAirmetSequenceId' in obj;
 };
-var MapDrawMode;
-(function (MapDrawMode) {
-  MapDrawMode["POINT"] = "POINT";
-  MapDrawMode["BOX"] = "BOX";
-  MapDrawMode["POLYGON"] = "POLYGON";
-  MapDrawMode["FIR"] = "FIR";
-  MapDrawMode["DELETE"] = "DELETE";
-})(MapDrawMode || (MapDrawMode = {}));
 var StartOrEndDrawing;
 (function (StartOrEndDrawing) {
   StartOrEndDrawing["start"] = "start";
   StartOrEndDrawing["end"] = "end";
 })(StartOrEndDrawing || (StartOrEndDrawing = {}));
 
-var srsAndBboxDefault = {
-  bbox: {
-    left: -911501,
-    right: 3738819,
-    top: 11688874,
-    bottom: 5930186
+/* *
+ * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var styles$2 = {
+  label: {
+    fontSize: '0.875rem',
+    marginTop: 2,
+    textAlign: 'right'
   },
-  srs: 'EPSG:3857'
-};
-var featurePropsStart = {
-  stroke: '#f24a00',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#f24a00',
-  'fill-opacity': 0.25
-};
-var featurePropsEnd = {
-  stroke: '#6e1e91',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#6e1e91',
-  'fill-opacity': 0.25
-};
-var featurePropsIntersectionStart = {
-  stroke: '#f24a00',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#f24a00',
-  'fill-opacity': 0.5
-};
-var featurePropsIntersectionEnd = {
-  stroke: '#6e1e91',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#6e1e91',
-  'fill-opacity': 0.5
-};
-var featurePropsFIR = {
-  stroke: '#0075a9',
-  'stroke-width': 1.5,
-  'stroke-opacity': 1,
-  fill: '#0075a9',
-  'fill-opacity': 0.0
-};
-var featurePropsUnStyled = {
-  stroke: '#FF0000',
-  'stroke-width': 10.0,
-  'stroke-opacity': 1,
-  fill: '#0000FF',
-  'fill-opacity': 1.0
-};
-var emptyPolygonGeoJSONStart = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
-      selectionType: 'poly'
-    }),
-    geometry: {
-      type: 'Polygon',
-      coordinates: [[]]
-    }
-  }]
-};
-var emptyPolygonGeoJSONEnd = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
-      selectionType: 'poly'
-    }),
-    geometry: {
-      type: 'Polygon',
-      coordinates: [[]]
-    }
-  }]
-};
-var emptyBoxGeoJSONStart = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign({
-      _adaguctype: 'box',
-      selectionType: 'box'
-    }, featurePropsUnStyled),
-    geometry: {
-      type: 'Polygon',
-      coordinates: [[]]
-    }
-  }]
-};
-var emptyBoxGeoJSONEnd = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign({
-      _adaguctype: 'box',
-      selectionType: 'box'
-    }, featurePropsUnStyled),
-    geometry: {
-      type: 'Polygon',
-      coordinates: [[]]
-    }
-  }]
-};
-var emptyPointsGeojsonStart = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
-      selectionType: 'point'
-    }),
-    geometry: {
-      type: 'Point',
-      coordinates: []
-    }
-  }]
-};
-var emptyPointsGeojsonEnd = {
-  type: 'FeatureCollection',
-  features: [{
-    type: 'Feature',
-    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
-      selectionType: 'point'
-    }),
-    geometry: {
-      type: 'Point',
-      coordinates: []
+  body: {
+    paddingTop: '17px'
+  },
+  containerItem: {
+    ' .MuiTypography-subtitle1': {
+      marginTop: 1
     }
-  }]
-};
-var geoJSONTemplate = {
-  POINT: {
-    start: emptyPointsGeojsonStart,
-    end: emptyPointsGeojsonEnd
   },
-  BOX: {
-    start: emptyBoxGeoJSONStart,
-    end: emptyBoxGeoJSONEnd
+  volcanicField: {
+    marginBottom: 2
+  },
+  surfaceVisibility: {
+    marginBottom: 2
+  },
+  surfaceWind: {
+    marginBottom: 2
+  },
+  levelField: {
+    marginBottom: 2
+  },
+  movement: {
+    marginBottom: 2
+  },
+  latitude: {
+    width: '97%'
+  },
+  unit: {
+    width: '95%'
   },
-  POLYGON: {
-    start: emptyPolygonGeoJSONStart,
-    end: emptyPolygonGeoJSONEnd
+  quitDrawModeMessage: {
+    paddingBottom: '10px',
+    opacity: '1'
+  },
+  drawSection: {
+    '+ .MuiGrid-item': {
+      paddingTop: 5
+    },
+    ' .MuiTypography-subtitle1': {
+      marginTop: 1
+    }
   },
-  FIR: {
-    start: null,
-    end: null
+  helperText: {
+    ' .MuiFormHelperText-root': {
+      position: 'absolute',
+      top: 56,
+      '&.Mui-error': {
+        top: 'auto',
+        position: 'relative'
+      }
+    }
   }
 };
 
-var getHoursBeforeValidity = function getHoursBeforeValidity(phenomenon, fir, config) {
-  if (!fir) {
-    return 4;
-  }
-  var _config$fir_areas$fir = config.fir_areas[fir],
-    hours_before_validity = _config$fir_areas$fir.hours_before_validity,
-    va_hours_before_validity = _config$fir_areas$fir.va_hours_before_validity,
-    tc_hours_before_validity = _config$fir_areas$fir.tc_hours_before_validity;
-  switch (phenomenon) {
-    // Tropical Cyclone
-    case 'TC':
-      return tc_hours_before_validity;
-    // Volcanic ash cloud
-    case 'VA_CLD':
-      return va_hours_before_validity;
-    default:
-      return hours_before_validity;
-  }
-};
-var getMaxHoursOfValidity = function getMaxHoursOfValidity(phenomenon, fir, config) {
-  if (!fir) {
-    return 4;
-  }
-  var _config$fir_areas$fir2 = config.fir_areas[fir],
-    max_hours_of_validity = _config$fir_areas$fir2.max_hours_of_validity,
-    va_max_hours_of_validity = _config$fir_areas$fir2.va_max_hours_of_validity,
-    tc_max_hours_of_validity = _config$fir_areas$fir2.tc_max_hours_of_validity;
-  switch (phenomenon) {
-    // Tropical Cyclone
-    case 'TC':
-      return tc_max_hours_of_validity;
-    // Volcanic ash cloud
-    case 'VA_CLD':
-      return va_max_hours_of_validity;
-    default:
-      return max_hours_of_validity;
-  }
-};
-var getValidFromDelayTimeMinutesFromConfig = function getValidFromDelayTimeMinutesFromConfig(config) {
-  return config.valid_from_delay_minutes;
-};
-var getDefaultValidityMinutesFromConfig = function getDefaultValidityMinutesFromConfig(config) {
-  return config.default_validity_minutes;
-};
-var getFirArea = function getFirArea(selectedFIR, productConfig) {
-  // If no FIR selected or FIR doesn't exist in list, select first FIR
-  return selectedFIR && productConfig.fir_areas[selectedFIR] !== undefined ? selectedFIR : productConfig.active_firs[0];
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+// A version of a radio button with label where the label and surrounding white space is not clickable
+var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
+  var value = props.value,
+    label = props.label,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? true : _props$disabled,
+    restProps = __rest(props, ["value", "label", "disabled"]);
+  return /*#__PURE__*/React__default.createElement(FormControlLabel, Object.assign({
+    style: {
+      pointerEvents: 'none'
+    },
+    value: value,
+    control: /*#__PURE__*/React__default.createElement(Radio, {
+      style: {
+        pointerEvents: 'auto'
+      }
+    }),
+    label: label,
+    disabled: disabled
+  }, restProps));
 };
-var getActiveFIRArea = function getActiveFIRArea(selectedFIR, productConfig) {
-  var FIR = getFirArea(selectedFIR, productConfig);
-  return productConfig.fir_areas[FIR];
+
+var ProductFormFieldLayout = function ProductFormFieldLayout(_a) {
+  var title = _a.title,
+    children = _a.children,
+    props = __rest(_a, ["title", "children"]);
+  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+    item: true,
+    container: true,
+    spacing: 3
+  }, props), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 4,
+    container: true,
+    justifyContent: "flex-end"
+  }, title && /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "subtitle1",
+    sx: styles$2.label
+  }, title)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 8,
+    container: true,
+    justifyContent: "flex-start"
+  }, children));
 };
-var DEFAULT_MINIMUM_SURFACE_LEVEL = 0;
-var getMinCloudLevelValue = function getMinCloudLevelValue(unit, selectedFIR, productConfig) {
+
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var Change = function Change(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isReadOnly = _ref.isReadOnly;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+    isRequired = _useDraftFormHelpers.isRequired;
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Change",
+    sx: styles$2.containerItem
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(ReactHookFormRadioGroup, {
+    name: "change",
+    rules: {
+      validate: {
+        isRequired: isRequired
+      }
+    },
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    value: "WKN",
+    label: "Weakening",
+    disabled: isDisabled,
+    "data-testid": "change-WKN"
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    value: "NC",
+    label: "No change",
+    disabled: isDisabled,
+    "data-testid": "change-NC"
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    value: "INTSF",
+    label: "Intensifying",
+    disabled: isDisabled,
+    "data-testid": "change-INTSF"
+  }))));
+};
+
+/* *
+ * 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)
+ * */
+var styles$1 = {
+  radioInput: {
+    padding: 1,
+    borderRadius: '5px',
+    backgroundColor: 'geowebColors.buttons.tool.default.fill',
+    color: 'geowebColors.buttons.tool.default.color',
+    '&.Mui-checked': {
+      backgroundColor: 'geowebColors.buttons.primary.default.fill',
+      color: 'geowebColors.buttons.primary.default.color'
+    }
+  }
+};
+var DrawTools = function DrawTools(_ref) {
+  var activeTool = _ref.activeTool,
+    tools = _ref.tools,
+    onChangeTool = _ref.onChangeTool;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    container: true,
+    justifyContent: "space-between",
+    "data-testid": "drawtools",
+    spacing: 1
+  }, tools.map(function (tool) {
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      key: tool.id,
+      item: true
+    }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
+      title: tool.title
+    }, /*#__PURE__*/React__default.createElement(Radio, {
+      icon: tool.icon,
+      value: true,
+      checkedIcon: tool.icon,
+      checked: tool.isSelectable && activeTool === tool.id,
+      onChange: function onChange() {
+        onChangeTool(tool);
+      },
+      "data-testid": tool.id,
+      sx: styles$1.radioInput
+    })));
+  }));
+};
+
+function n$5(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$5(n){return !!n&&!!n[Q]}function t$5(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$4(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$4(n)?3:0}function u$3(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$3(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c$3(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$4(n){return q$5&&n instanceof Set}function p$5(n){return n.o||n.t}function l$4(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$3(n,e){return void 0===e&&(e=!1),y$2(n)||r$5(n)||!t$5(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h$5),Object.freeze(n),e&&i(n,(function(n,r){return d$3(r,!0)}),!0)),n}function h$5(){n$5(2);}function y$2(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b$3(r){var t=tn[r];return t||n$5(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n$5(0),U}function j(n,r){r&&(b$3("Patches"),n.u=[],n.s=[],n.v=r);}function g$3(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w$3(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$3("ES5").S(e,r,o),o?(i[Q].P&&(g$3(e),n$5(4)),t$5(r)&&(r=M(e,r),e.l||x$2(e,r)),e.u&&b$3("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g$3(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y$2(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A$2(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x$2(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$4(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$2(n,e,o,r,i,t,a)})),x$2(n,o,!1),t&&n.u&&b$3("Patches").N(e,t,n.u,n.s);}return e.o}function A$2(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n$5(5),r$5(c)){var p=M(e,c,s&&i&&3!==i.i&&!u$3(i.R,a)?s.concat(a):void 0);if(f$3(o,a,p),!r$5(p))return;e.m=!1;}else v&&o.add(c);if(t$5(c)&&!y$2(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x$2(e,c);}}function x$2(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d$3(r,t);}function z$2(n,r){var t=n[Q];return (t?p$5(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$4(n){n.P||(n.P=!0,n.l&&k$4(n.l));}function E(n){n.o||(n.o=l$4(n.t));}function N(n,r,t){var e=s(r)?b$3("MapSet").F(r,t):v$4(r)?b$3("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$3("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r$5(e)||n$5(22,e),function n(r){if(!t$5(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b$3("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$3(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$4(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q$5="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$5(n);if(!u$3(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$5(i)?i:i===z$2(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p$5(n)},ownKeys:function(n){return Reflect.ownKeys(p$5(n))},set:function(n,r,t){var e=I(p$5(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z$2(p$5(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$3(t,i)&&(void 0!==t||u$3(n.t,r)))return !0;E(n),k$4(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$2(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k$4(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p$5(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$5(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n$5(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$5(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$5(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$5(6),void 0!==o&&"function"!=typeof o&&n$5(7),t$5(r)){var c=w$3(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g$3(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$3(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$3(f,!0),o){var p=[],l=[];b$3("Patches").M(r,f,p,l),o(p,l);}return f}n$5(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$5(e)||n$5(8),r$5(e)&&(e=R(e));var i=w$3(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$5(9),e.I&&n$5(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$5(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$3("Patches").$;return r$5(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);
+
+/* *
+ * 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)
+ * */
+var srsAndBboxDefault = {
+  bbox: {
+    left: -911501,
+    right: 3738819,
+    top: 11688874,
+    bottom: 5930186
+  },
+  srs: 'EPSG:3857'
+};
+var featurePropsStart = defaultStyleProperties;
+var featurePropsEnd = {
+  stroke: '#6e1e91',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#6e1e91',
+  'fill-opacity': 0.25
+};
+var featurePropsIntersectionStart = defaultIntersectionStyleProperties;
+var featurePropsIntersectionEnd = Object.assign(Object.assign({}, featurePropsEnd), {
+  'fill-opacity': 0.5
+});
+var featurePropsFIR = {
+  stroke: '#0075a9',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#0075a9',
+  'fill-opacity': 0.0
+};
+
+var getHoursBeforeValidity = function getHoursBeforeValidity(phenomenon, fir, config) {
+  if (!fir) {
+    return 4;
+  }
+  var _config$fir_areas$fir = config.fir_areas[fir],
+    hours_before_validity = _config$fir_areas$fir.hours_before_validity,
+    va_hours_before_validity = _config$fir_areas$fir.va_hours_before_validity,
+    tc_hours_before_validity = _config$fir_areas$fir.tc_hours_before_validity;
+  switch (phenomenon) {
+    // Tropical Cyclone
+    case 'TC':
+      return tc_hours_before_validity;
+    // Volcanic ash cloud
+    case 'VA_CLD':
+      return va_hours_before_validity;
+    default:
+      return hours_before_validity;
+  }
+};
+var getMaxHoursOfValidity = function getMaxHoursOfValidity(phenomenon, fir, config) {
+  if (!fir) {
+    return 4;
+  }
+  var _config$fir_areas$fir2 = config.fir_areas[fir],
+    max_hours_of_validity = _config$fir_areas$fir2.max_hours_of_validity,
+    va_max_hours_of_validity = _config$fir_areas$fir2.va_max_hours_of_validity,
+    tc_max_hours_of_validity = _config$fir_areas$fir2.tc_max_hours_of_validity;
+  switch (phenomenon) {
+    // Tropical Cyclone
+    case 'TC':
+      return tc_max_hours_of_validity;
+    // Volcanic ash cloud
+    case 'VA_CLD':
+      return va_max_hours_of_validity;
+    default:
+      return max_hours_of_validity;
+  }
+};
+var getValidFromDelayTimeMinutesFromConfig = function getValidFromDelayTimeMinutesFromConfig(config) {
+  return config.valid_from_delay_minutes;
+};
+var getDefaultValidityMinutesFromConfig = function getDefaultValidityMinutesFromConfig(config) {
+  return config.default_validity_minutes;
+};
+var getFirArea = function getFirArea(selectedFIR, productConfig) {
+  // If no FIR selected or FIR doesn't exist in list, select first FIR
+  return selectedFIR && productConfig.fir_areas[selectedFIR] !== undefined ? selectedFIR : productConfig.active_firs[0];
+};
+var getActiveFIRArea = function getActiveFIRArea(selectedFIR, productConfig) {
+  var FIR = getFirArea(selectedFIR, productConfig);
+  return productConfig.fir_areas[FIR];
+};
+var DEFAULT_MINIMUM_SURFACE_LEVEL = 0;
+var getMinCloudLevelValue = function getMinCloudLevelValue(unit, selectedFIR, productConfig) {
   // Use first FIR in list if no FIR selected
   var _getActiveFIRArea = getActiveFIRArea(selectedFIR, productConfig),
     cloud_level_min = _getActiveFIRArea.cloud_level_min;
@@ -982,10 +1140,10 @@ var prepareFormValues = function prepareFormValues(product) {
     }
     // remove geometry if empty coordinates
     if (key === 'endGeometry' || key === 'endGeometryIntersect' || key === 'startGeometry' || key === 'startGeometryIntersect') {
-      if ((value === null || value === void 0 ? void 0 : value.features[0].geometry.type) === 'Polygon' && (value === null || value === void 0 ? void 0 : value.features[0].geometry.coordinates[0].length)) {
+      if ((value === null || value === void 0 ? void 0 : value.features.length) > 0 && (value === null || value === void 0 ? void 0 : value.features[0].geometry.type) === 'Polygon' && (value === null || value === void 0 ? void 0 : value.features[0].geometry.coordinates[0].length)) {
         return Object.assign(Object.assign({}, list), _defineProperty({}, key, value));
       }
-      if ((value === null || value === void 0 ? void 0 : value.features[0].geometry.type) === 'Point' && (value === null || value === void 0 ? void 0 : value.features[0].geometry.coordinates.length)) {
+      if ((value === null || value === void 0 ? void 0 : value.features.length) > 0 && (value === null || value === void 0 ? void 0 : value.features[0].geometry.type) === 'Point' && (value === null || value === void 0 ? void 0 : value.features[0].geometry.coordinates.length)) {
         return Object.assign(Object.assign({}, list), _defineProperty({}, key, value));
       }
       return list;
@@ -1105,604 +1263,99 @@ var getAllowedUnits = function getAllowedUnits(selectedFIR, productConfig, confi
  */
 var getFir = function getFir(productConfig, firName) {
   var currentFIRName = firName || productConfig.active_firs[0];
-  return productConfig.fir_areas[currentFIRName].fir_location;
-};
-/**
- * Function to check if the given geojson object has 'fir' selectionType property
- */
-var isFir = function isFir(geojson) {
-  return geojson && geojson.features && geojson.features[0].properties['selectionType'] === 'fir';
-};
-var rewindGeometry = function rewindGeometry(geoJSON) {
-  return fn(geoJSON, function (geoJSONDraft) {
-    if (geoJSONDraft && geoJSONDraft.features[0].geometry.type === 'Polygon' && geoJSONDraft.features[0].geometry.coordinates[0].length > 1) {
-      var geometry = geoJSON.features[0].geometry;
-      var lineString = polygonToLineString(geometry);
-      if (booleanClockwise(lineString.geometry.coordinates)) {
-        // eslint-disable-next-line no-param-reassign
-        geoJSONDraft.features[0].geometry = rewind(geoJSONDraft.features[0].geometry);
-      }
-    }
-  });
-};
-var getFieldLabel = function getFieldLabel(title, isDisabled) {
-  var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Select';
-  return isDisabled ? title : "".concat(action, " ").concat(title.toLowerCase());
-};
-var getBaseLayers = function getBaseLayers(productConfig) {
-  var _a, _b;
-  return ((_b = (_a = productConfig.mapPreset) === null || _a === void 0 ? void 0 : _a.layers) === null || _b === void 0 ? void 0 : _b.filter(function (layer) {
-    return layer.layerType === layerTypes.LayerType.baseLayer || layer.layerType === layerTypes.LayerType.overLayer;
-  })) || [];
-};
-var getMaxMovementSpeedValue = function getMaxMovementSpeedValue(unit, selectedFIR, productConfig) {
-  var _getActiveFIRArea11 = getActiveFIRArea(selectedFIR, productConfig),
-    movement_max = _getActiveFIRArea11.movement_max;
-  // Return max value for selected unit - if not present in list, return null
-  return movement_max !== undefined && movement_max[unit] ? movement_max[unit] : null;
-};
-var DEFAULT_MIN_MOVEMENT_SPEED = 0;
-var getMinMovementSpeedValue = function getMinMovementSpeedValue(unit, selectedFIR, productConfig) {
-  var _getActiveFIRArea12 = getActiveFIRArea(selectedFIR, productConfig),
-    movement_min = _getActiveFIRArea12.movement_min;
-  // Return min value for selected unit - if not present in list, return DEFAULT_MIN_MOVEMENT_SPEED (zero, no negative speeds)
-  return movement_min !== undefined && movement_min[unit] ? movement_min[unit] : DEFAULT_MIN_MOVEMENT_SPEED;
-};
-/** Trigger form validations for given list of field names if field has a value */
-var triggerValidations = function triggerValidations(fieldNames, getValues, trigger) {
-  fieldNames.forEach(function (field) {
-    var value = getValues(field);
-    if (value || value === 0) {
-      trigger(field);
-    }
-  });
-};
-var getProjection = function getProjection(productConfig) {
-  var _a;
-  return ((_a = productConfig.mapPreset) === null || _a === void 0 ? void 0 : _a.proj) || undefined;
-};
-
-var getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
-  switch (selectionType) {
-    case 'point':
-      return MapDrawMode.POINT;
-    case 'box':
-      return MapDrawMode.BOX;
-    case 'fir':
-      return MapDrawMode.FIR;
-    case 'poly':
-    default:
-      return MapDrawMode.POLYGON;
-  }
-};
-/**
- * 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
- */
-var addFeatureProperties = function addFeatureProperties(geojson, featureProperties) {
-  if (!geojson) {
-    return null;
-  }
-  return fn(geojson, function (draft) {
-    if (draft.features && draft.features.length > 0 && draft.features[0].properties) {
-      Object.keys(featureProperties).forEach(function (key) {
-        draft.features[0].properties[key] = featureProperties[key];
-      });
-    }
-  });
-};
-var getInitialGeoJSONState = function getInitialGeoJSONState(productConfig, currentSelectedFIR, initialGeometry) {
-  var startGeometry = initialGeometry && initialGeometry.start ? initialGeometry.start : geoJSONTemplate['BOX']['start'];
-  var endGeometry = initialGeometry && initialGeometry.end ? initialGeometry.end : geoJSONTemplate['BOX']['end'];
-  return {
-    start: addFeatureProperties(startGeometry, featurePropsStart),
-    end: addFeatureProperties(endGeometry, featurePropsEnd),
-    intersectionStart: addFeatureProperties(initialGeometry === null || initialGeometry === void 0 ? void 0 : initialGeometry.intersectionStart, featurePropsIntersectionStart),
-    intersectionEnd: addFeatureProperties(initialGeometry === null || initialGeometry === void 0 ? void 0 : initialGeometry.intersectionEnd, featurePropsIntersectionEnd),
-    fir: addFeatureProperties(getFir(productConfig, currentSelectedFIR), featurePropsFIR)
-  };
-};
-var useDrawMode = function useDrawMode(productConfig, initialGeometry, currentSelectedFIR) {
-  var getInitialLayerDrawModes = function getInitialLayerDrawModes(startorEnd) {
-    return initialGeometry && initialGeometry[startorEnd] ? getDrawModeFromSelectionType(initialGeometry[startorEnd].features[0].properties.selectionType) : null;
-  };
-  /* For the radio buttons */
-  var _React$useState = React.useState({
-      start: null,
-      end: null
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    drawMode = _React$useState2[0],
-    setDrawMode = _React$useState2[1];
-  /* Drawmode for the layers */
-  var _React$useState3 = React.useState({
-      start: getInitialLayerDrawModes('start'),
-      end: getInitialLayerDrawModes('end')
-    }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    layerDrawModes = _React$useState4[0],
-    setLayersDrawModes = _React$useState4[1];
-  /* GeoJSONs for the layers */
-  var _React$useState5 = React.useState(function () {
-      return getInitialGeoJSONState(productConfig, currentSelectedFIR, initialGeometry);
-    }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    geoJSONs = _React$useState6[0],
-    setLayerGeoJSONs = _React$useState6[1];
-  /**
-   *
-   * @param mapDrawMode Can be 'POINT' | 'BOX' | 'POLYGON' |  'FIR' | 'DELETE'
-   * @param startOrEnd Can be 'start' | 'end'
-   */
-  var setDrawModeType = function setDrawModeType(mapDrawMode, startOrEnd, updateCallback) {
-    var newGeoJSONDrawMode = Object.assign({}, layerDrawModes);
-    var featureStyleProperties = startOrEnd === StartOrEndDrawing.start ? featurePropsStart : featurePropsEnd;
-    /* Switch on the mapdrawmode type for either start or end */
-    switch (mapDrawMode) {
-      /* Set draw modes point, box, polygon for either start or end layer */
-      case MapDrawMode.POINT:
-      case MapDrawMode.BOX:
-      case MapDrawMode.POLYGON:
-        {
-          if (newGeoJSONDrawMode[startOrEnd] !== mapDrawMode) {
-            /* Set for either start or end GeoJSON; key is the same as in the MapDrawMode ENUM */
-            var cleanGeoJSON = fn(geoJSONs, function (draft) {
-              draft[startOrEnd] = addFeatureProperties(geoJSONTemplate[mapDrawMode][startOrEnd], featureStyleProperties);
-            });
-            setLayerGeoJSONs(createInterSections(cleanGeoJSON));
-          }
-          newGeoJSONDrawMode[startOrEnd] = mapDrawMode;
-          setLayersDrawModes(newGeoJSONDrawMode);
-          setDrawMode(startOrEnd === StartOrEndDrawing.start ? {
-            start: mapDrawMode,
-            end: null
-          } : {
-            start: null,
-            end: mapDrawMode
-          });
-          break;
-        }
-      /* Set complete fir for either start or end layer */
-      case MapDrawMode.FIR:
-        {
-          newGeoJSONDrawMode[startOrEnd] = mapDrawMode;
-          var _cleanGeoJSON = fn(geoJSONs, function (draft) {
-            draft[startOrEnd] = addFeatureProperties(getFir(productConfig, currentSelectedFIR), Object.assign(Object.assign({}, featureStyleProperties), {
-              selectionType: 'fir'
-            }));
-          });
-          setDrawMode({
-            start: null,
-            end: null
-          });
-          setLayersDrawModes(newGeoJSONDrawMode);
-          var intersections = createInterSections(_cleanGeoJSON);
-          setLayerGeoJSONs(intersections);
-          if (updateCallback) {
-            updateCallback(intersections);
-          }
-          break;
-        }
-      /* Clear the map for either start or end layer */
-      case MapDrawMode.DELETE:
-        {
-          var newDrawMode = Object.assign({}, drawMode);
-          newDrawMode[startOrEnd] = null;
-          setDrawMode(newDrawMode);
-          switch (newGeoJSONDrawMode[startOrEnd]) {
-            case MapDrawMode.POINT:
-            case MapDrawMode.BOX:
-              {
-                var _cleanGeoJSON2 = fn(geoJSONs, function (draft) {
-                  draft[startOrEnd] = addFeatureProperties(geoJSONTemplate[newGeoJSONDrawMode[startOrEnd]][startOrEnd], featureStyleProperties);
-                });
-                var _intersections = createInterSections(_cleanGeoJSON2);
-                setLayerGeoJSONs(_intersections);
-                if (updateCallback) {
-                  updateCallback(_intersections);
-                }
-                break;
-              }
-            default:
-              {
-                var _cleanGeoJSON3 = fn(geoJSONs, function (draft) {
-                  draft[startOrEnd] = addFeatureProperties(geoJSONTemplate['POLYGON'][startOrEnd], featureStyleProperties);
-                });
-                var _intersections2 = createInterSections(_cleanGeoJSON3);
-                setLayerGeoJSONs(_intersections2);
-                if (updateCallback) {
-                  updateCallback(_intersections2);
-                }
-                break;
-              }
-          }
-          break;
-        }
-    }
-  };
-  return {
-    drawMode: drawMode,
-    setDrawMode: setDrawMode,
-    layerDrawModes: layerDrawModes,
-    setLayersDrawModes: setLayersDrawModes,
-    geoJSONs: geoJSONs,
-    setLayerGeoJSONs: setLayerGeoJSONs,
-    setDrawModeType: setDrawModeType
-  };
-};
-/**
- * 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.
- */
-var intersectGeoJSONS = function intersectGeoJSONS(a, b) {
-  var featureA = turf.feature(a.features[0].geometry);
-  var featureB = turf.feature(b.features[0].geometry);
-  var options = {
-    tolerance: 0.001,
-    highQuality: true
-  };
-  var simplifiedA = turf.simplify(featureA, options);
-  var simplifiedB = turf.simplify(featureB, options);
-  var intersection = turf.intersect(simplifiedA, simplifiedB);
-  return addFeatureProperties({
-    type: 'FeatureCollection',
-    features: intersection === null ? [{
-      type: 'Feature',
-      properties: {
-        selectionType: 'poly'
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [[]]
-      }
-    }] : [intersection]
-  }, featurePropsUnStyled);
-};
-/**
- * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
- * @param geoJSONs
- * @returns GeoJSONS extend with intersections
- */
-var createInterSections = function createInterSections(geoJSONs) {
-  var intersections = fn(geoJSONs, function (draft) {
-    try {
-      draft.intersectionStart = addFeatureProperties(intersectGeoJSONS(geoJSONs.start, geoJSONs.fir), featurePropsIntersectionStart);
-    } catch (e) {
-      draft.intersectionStart = addFeatureProperties(geoJSONs.start, featurePropsIntersectionStart);
-    }
-    try {
-      draft.intersectionEnd = addFeatureProperties(intersectGeoJSONS(geoJSONs.end, geoJSONs.fir), featurePropsIntersectionEnd);
-    } catch (e) {
-      draft.intersectionEnd = addFeatureProperties(geoJSONs.end, featurePropsIntersectionEnd);
-    }
-  });
-  return intersections;
-};
-
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var styles$2 = {
-  label: {
-    fontSize: '0.875rem',
-    marginTop: 2,
-    textAlign: 'right'
-  },
-  body: {
-    paddingTop: '17px'
-  },
-  containerItem: {
-    ' .MuiTypography-subtitle1': {
-      marginTop: 1
-    }
-  },
-  volcanicField: {
-    marginBottom: 2
-  },
-  surfaceVisibility: {
-    marginBottom: 2
-  },
-  surfaceWind: {
-    marginBottom: 2
-  },
-  levelField: {
-    marginBottom: 2
-  },
-  movement: {
-    marginBottom: 2
-  },
-  latitude: {
-    width: '97%'
-  },
-  unit: {
-    width: '95%'
-  },
-  quitDrawModeMessage: {
-    paddingBottom: '10px',
-    opacity: '1'
-  },
-  drawSection: {
-    '+ .MuiGrid-item': {
-      paddingTop: 5
-    },
-    ' .MuiTypography-subtitle1': {
-      marginTop: 1
-    }
-  },
-  helperText: {
-    ' .MuiFormHelperText-root': {
-      position: 'absolute',
-      top: 56,
-      '&.Mui-error': {
-        top: 'auto',
-        position: 'relative'
-      }
-    }
-  }
-};
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-// A version of a radio button with label where the label and surrounding white space is not clickable
-var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
-  var value = props.value,
-    label = props.label,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? true : _props$disabled,
-    restProps = __rest(props, ["value", "label", "disabled"]);
-  return /*#__PURE__*/React__default.createElement(FormControlLabel, Object.assign({
-    style: {
-      pointerEvents: 'none'
-    },
-    value: value,
-    control: /*#__PURE__*/React__default.createElement(Radio, {
-      style: {
-        pointerEvents: 'auto'
-      }
-    }),
-    label: label,
-    disabled: disabled
-  }, restProps));
-};
-
-var ProductFormFieldLayout = function ProductFormFieldLayout(_a) {
-  var title = _a.title,
-    children = _a.children,
-    props = __rest(_a, ["title", "children"]);
-  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
-    item: true,
-    container: true,
-    spacing: 3
-  }, props), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, title && /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$2.label
-  }, title)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
-  }, children));
+  return productConfig.fir_areas[currentFIRName].fir_location;
 };
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var Change = function Change(_ref) {
-  var isDisabled = _ref.isDisabled,
-    isReadOnly = _ref.isReadOnly;
-  var _useDraftFormHelpers = useDraftFormHelpers(),
-    isRequired = _useDraftFormHelpers.isRequired;
-  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
-    title: "Change",
-    sx: styles$2.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(ReactHookFormRadioGroup, {
-    name: "change",
-    rules: {
-      validate: {
-        isRequired: isRequired
+/**
+ * Function to check if the given geojson object has 'fir' selectionType property
+ */
+var isFir = function isFir(geojson) {
+  return geojson && geojson.features && geojson.features.length > 0 && geojson.features[0].properties['selectionType'] === 'fir';
+};
+var rewindGeometry = function rewindGeometry(geoJSON) {
+  return fn(geoJSON, function (geoJSONDraft) {
+    if (geoJSONDraft && geoJSONDraft.features.length > 0 && geoJSONDraft.features[0].geometry.type === 'Polygon' && geoJSONDraft.features[0].geometry.coordinates[0].length > 1) {
+      var geometry = geoJSON.features[0].geometry;
+      var lineString = polygonToLineString(geometry);
+      if (booleanClockwise(lineString.geometry.coordinates)) {
+        // eslint-disable-next-line no-param-reassign
+        geoJSONDraft.features[0].geometry = rewind(geoJSONDraft.features[0].geometry);
       }
-    },
-    disabled: isDisabled,
-    isReadOnly: isReadOnly
-  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
-    value: "WKN",
-    label: "Weakening",
-    disabled: isDisabled,
-    "data-testid": "change-WKN"
-  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
-    value: "NC",
-    label: "No change",
-    disabled: isDisabled,
-    "data-testid": "change-NC"
-  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
-    value: "INTSF",
-    label: "Intensifying",
-    disabled: isDisabled,
-    "data-testid": "change-INTSF"
-  }))));
+    }
+  });
 };
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var styles$1 = {
-  radioInput: {
-    padding: 1,
-    borderRadius: '5px',
-    backgroundColor: 'geowebColors.buttons.tool.default.fill',
-    color: 'geowebColors.buttons.tool.default.color',
-    '&.Mui-checked': {
-      backgroundColor: 'geowebColors.buttons.primary.default.fill',
-      color: 'geowebColors.buttons.primary.default.color'
+var getFieldLabel = function getFieldLabel(title, isDisabled) {
+  var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Select';
+  return isDisabled ? title : "".concat(action, " ").concat(title.toLowerCase());
+};
+var getBaseLayers = function getBaseLayers(productConfig) {
+  var _a, _b;
+  return ((_b = (_a = productConfig.mapPreset) === null || _a === void 0 ? void 0 : _a.layers) === null || _b === void 0 ? void 0 : _b.filter(function (layer) {
+    return layer.layerType === layerTypes.LayerType.baseLayer || layer.layerType === layerTypes.LayerType.overLayer;
+  })) || [];
+};
+var getMaxMovementSpeedValue = function getMaxMovementSpeedValue(unit, selectedFIR, productConfig) {
+  var _getActiveFIRArea11 = getActiveFIRArea(selectedFIR, productConfig),
+    movement_max = _getActiveFIRArea11.movement_max;
+  // Return max value for selected unit - if not present in list, return null
+  return movement_max !== undefined && movement_max[unit] ? movement_max[unit] : null;
+};
+var DEFAULT_MIN_MOVEMENT_SPEED = 0;
+var getMinMovementSpeedValue = function getMinMovementSpeedValue(unit, selectedFIR, productConfig) {
+  var _getActiveFIRArea12 = getActiveFIRArea(selectedFIR, productConfig),
+    movement_min = _getActiveFIRArea12.movement_min;
+  // Return min value for selected unit - if not present in list, return DEFAULT_MIN_MOVEMENT_SPEED (zero, no negative speeds)
+  return movement_min !== undefined && movement_min[unit] ? movement_min[unit] : DEFAULT_MIN_MOVEMENT_SPEED;
+};
+/** Trigger form validations for given list of field names if field has a value */
+var triggerValidations = function triggerValidations(fieldNames, getValues, trigger) {
+  fieldNames.forEach(function (field) {
+    var value = getValues(field);
+    if (value || value === 0) {
+      trigger(field);
     }
-  }
+  });
 };
-var DrawTools = function DrawTools(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? '' : _ref$type,
-    drawMode = _ref.drawMode,
-    setDrawMode = _ref.setDrawMode;
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    container: true,
-    justifyContent: "space-between",
-    "data-testid": "drawtools",
-    spacing: 1
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Drop a point as ".concat(type, " position")
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(Location, null),
-    value: true,
-    checkedIcon: /*#__PURE__*/React__default.createElement(Location, null),
-    checked: drawMode === MapDrawMode.POINT,
-    onChange: function onChange() {
-      setDrawMode(MapDrawMode.POINT);
-    },
-    "data-testid": "drawtools-point",
-    sx: styles$1.radioInput
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Draw a box as ".concat(type, " position")
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
-    checked: drawMode === MapDrawMode.BOX,
-    onChange: function onChange() {
-      setDrawMode(MapDrawMode.BOX);
-    },
-    "data-testid": "drawtools-box",
-    sx: styles$1.radioInput
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Draw a shape as ".concat(type, " position")
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
-    checked: drawMode === MapDrawMode.POLYGON,
-    onChange: function onChange() {
-      setDrawMode(MapDrawMode.POLYGON);
-    },
-    "data-testid": "drawtools-polygon",
-    sx: styles$1.radioInput
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Set FIR as ".concat(type, " position")
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawFIRLand, null),
-    checked: drawMode === MapDrawMode.FIR,
-    onChange: function onChange() {
-      setDrawMode(MapDrawMode.FIR);
-    },
-    "data-testid": "drawtools-fir",
-    sx: styles$1.radioInput
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: "Remove geometry"
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(Delete, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(Delete, null),
-    checked: drawMode === MapDrawMode.DELETE,
-    onChange: function onChange() {
-      setDrawMode(MapDrawMode.DELETE);
-    },
-    "data-testid": "drawtools-delete",
-    sx: styles$1.radioInput
-  }))));
+var getProjection = function getProjection(productConfig) {
+  var _a;
+  return ((_a = productConfig.mapPreset) === null || _a === void 0 ? void 0 : _a.proj) || undefined;
+};
+var getShapeWithProperties = function getShapeWithProperties(shape, properties) {
+  return Object.assign(Object.assign({}, shape), {
+    properties: Object.assign(Object.assign({}, shape.properties), properties)
+  });
+};
+var firID = 'drawtools-fir';
+var getDrawTools = function getDrawTools(type, firShape) {
+  var defaultStyleProperties = type === StartOrEndDrawing.start ? featurePropsStart : featurePropsEnd;
+  return [Object.assign(Object.assign({}, defaultPoint), {
+    title: "Drop a point as ".concat(type, " position"),
+    shape: getShapeWithProperties(defaultPoint.shape, defaultStyleProperties)
+  }), Object.assign(Object.assign({}, defaultBox), {
+    title: "Draw a box as ".concat(type, " position"),
+    shape: getShapeWithProperties(defaultBox.shape, defaultStyleProperties)
+  }), Object.assign(Object.assign({}, defaultPolygon), {
+    title: "Draw a shape as ".concat(type, " position"),
+    shape: getShapeWithProperties(defaultPolygon.shape, defaultStyleProperties)
+  }), {
+    id: firID,
+    title: "Set FIR as ".concat(type, " position"),
+    isSelectable: false,
+    value: DRAWMODE.POLYGON,
+    icon: /*#__PURE__*/React.createElement(DrawFIRLand, null),
+    shape: addFeatureProperties(firShape, defaultStyleProperties)
+  }, Object.assign(Object.assign({}, defaultDelete), {
+    title: 'Remove geometry'
+  })];
+};
+var updateDrawToolsWithFir = function updateDrawToolsWithFir(drawTools, newFirShape) {
+  return drawTools.map(function (mode) {
+    if (mode.id === firID) {
+      return Object.assign(Object.assign({}, mode), {
+        shape: newFirShape
+      });
+    }
+    return mode;
+  });
 };
 
 /* *
@@ -2370,9 +2023,11 @@ var multiIntersectionsMessage = 'The drawn polygon has multiple intersections wi
 var StartGeometry = function StartGeometry(_ref) {
   var _ref$isReadOnly = _ref.isReadOnly,
     isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    drawMode = _ref.drawMode,
-    geoJSONs = _ref.geoJSONs,
-    setDrawModeType = _ref.setDrawModeType;
+    activeTool = _ref.activeTool,
+    tools = _ref.tools,
+    onChangeTool = _ref.onChangeTool,
+    geoJSON = _ref.geoJSON,
+    geoJSONIntersection = _ref.geoJSONIntersection;
   var _useFormContext = useFormContext(),
     errors = _useFormContext.formState.errors,
     watch = _useFormContext.watch;
@@ -2383,21 +2038,19 @@ var StartGeometry = function StartGeometry(_ref) {
     sx: styles$2.drawSection,
     "data-testid": "startGeometry"
   }, /*#__PURE__*/React__default.createElement(DrawTools, {
-    type: StartOrEndDrawing.start,
-    drawMode: drawMode[StartOrEndDrawing.start],
-    setDrawMode: function setDrawMode(mapDrawMode) {
-      setDrawModeType(mapDrawMode, StartOrEndDrawing.start);
-    }
-  }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default.createElement(FormHelperText, {
+    activeTool: activeTool,
+    tools: tools,
+    onChangeTool: onChangeTool
+  }), activeTool && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
     sx: styles$2.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
   }, errors.startGeometry.message), /* non-blocking warnings */
-  hasMaxFeaturePoints(geoJSONs.intersectionStart) && !drawMode[StartOrEndDrawing.start] && !errors.startGeometry && !isFir(geoJSONs.start) && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  hasMaxFeaturePoints(geoJSONIntersection) && !activeTool && !errors.startGeometry && !isFir(geoJSON) && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled"
-  }, maxFeaturePointsMessage), hasMulitpleIntersections(geoJSONs.intersectionStart) && !drawMode[StartOrEndDrawing.start] && !errors.startGeometry && !isFir(geoJSONs.start) && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  }, maxFeaturePointsMessage), hasMulitpleIntersections(geoJSONIntersection) && !activeTool && !errors.startGeometry && !isFir(geoJSON) && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled"
   }, multiIntersectionsMessage), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "startGeometry",
@@ -2473,15 +2126,19 @@ var _validateMovementSteps = function validateMovementSteps(value, unit, product
 var Progress = function Progress(_ref) {
   var productType = _ref.productType,
     productConfig = _ref.productConfig,
-    drawMode = _ref.drawMode,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isReadOnly = _ref.isReadOnly,
     isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    geoJSONs = _ref.geoJSONs,
-    setDrawModeType = _ref.setDrawModeType,
     _ref$onChange = _ref.onChange,
-    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$tools = _ref.tools,
+    tools = _ref$tools === void 0 ? [] : _ref$tools,
+    activeTool = _ref.activeTool,
+    _ref$onChangeTool = _ref.onChangeTool,
+    onChangeTool = _ref$onChangeTool === void 0 ? function () {} : _ref$onChangeTool,
+    geoJSON = _ref.geoJSON,
+    geoJSONIntersection = _ref.geoJSONIntersection;
   var _useFormContext = useFormContext(),
     watch = _useFormContext.watch,
     getValues = _useFormContext.getValues,
@@ -2522,10 +2179,15 @@ var Progress = function Progress(_ref) {
         isRequired: isRequired
       }
     },
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
-      return setDrawModeType ? setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end) : null;
-    },
-    isReadOnly: isReadOnly
+      var deleteTool = tools === null || tools === void 0 ? void 0 : tools.find(function (tool) {
+        return tool.value === 'DELETE';
+      });
+      if (deleteTool) {
+        onChangeTool(deleteTool);
+      }
+    }
   }, watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NO_VA_EXP",
     label: "No volcanic ash expected",
@@ -2640,21 +2302,19 @@ var Progress = function Progress(_ref) {
     sx: styles$2.drawSection
   }, !isReadOnly && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DrawTools, {
     "data-testid": "endGeometry-drawTools",
-    type: StartOrEndDrawing.end,
-    drawMode: drawMode[StartOrEndDrawing.end],
-    setDrawMode: function setDrawMode(mapDrawMode) {
-      setDrawModeType(mapDrawMode, StartOrEndDrawing.end);
-    }
-  }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default.createElement(FormHelperText, {
+    tools: tools,
+    activeTool: activeTool,
+    onChangeTool: onChangeTool
+  }), activeTool && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
     sx: styles$2.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
   }, errors.endGeometry.message), /* non-blocking warnings */
-  hasMaxFeaturePoints(geoJSONs.intersectionEnd) && !drawMode[StartOrEndDrawing.end] && !errors.endGeometry && !isFir(geoJSONs.end) && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  hasMaxFeaturePoints(geoJSONIntersection) && !activeTool && !errors.endGeometry && !isFir(geoJSON) && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled"
-  }, maxFeaturePointsMessage), hasMulitpleIntersections(geoJSONs.intersectionEnd) && !drawMode[StartOrEndDrawing.end] && !errors.endGeometry && !isFir(geoJSONs.end) && /*#__PURE__*/React__default.createElement(FormHelperText, {
+  }, maxFeaturePointsMessage), hasMulitpleIntersections(geoJSONIntersection) && !activeTool && !errors.endGeometry && !isFir(geoJSON) && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled"
   }, multiIntersectionsMessage)), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "endGeometry",
@@ -5071,39 +4731,11 @@ initializeUseSelector(withSelector.exports.useSyncExternalStoreWithSelector);
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
-  switch (mode) {
-    case MapDrawMode.BOX:
-    case MapDrawMode.POLYGON:
-      return geojson.features[0].geometry.coordinates.length > 1 ? fn(geojson, function (draft) {
-        draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
-      }) : geojson;
-    default:
-      return geojson;
-  }
-};
 var MapViewGeoJson = function MapViewGeoJson(_ref) {
-  var geoJSONs = _ref.geoJSONs,
-    initialBaseLayers = _ref.baseLayers,
+  var initialBaseLayers = _ref.baseLayers,
     initialProjection = _ref.projection,
-    _ref$setLayerGeoJSONs = _ref.setLayerGeoJSONs,
-    setLayerGeoJSONs = _ref$setLayerGeoJSONs === void 0 ? function () {} : _ref$setLayerGeoJSONs,
-    _ref$layerDrawModes = _ref.layerDrawModes,
-    layerDrawModes = _ref$layerDrawModes === void 0 ? {
-      start: null,
-      end: null
-    } : _ref$layerDrawModes,
-    _ref$drawMode = _ref.drawMode,
-    drawMode = _ref$drawMode === void 0 ? {
-      start: null,
-      end: null
-    } : _ref$drawMode,
-    _ref$setDrawMode = _ref.setDrawMode,
-    setDrawMode = _ref$setDrawMode === void 0 ? function () {} : _ref$setDrawMode,
-    _ref$exitDrawModeCall = _ref.exitDrawModeCallbackStart,
-    exitDrawModeCallbackStart = _ref$exitDrawModeCall === void 0 ? function () {} : _ref$exitDrawModeCall,
-    _ref$exitDrawModeCall2 = _ref.exitDrawModeCallbackEnd,
-    exitDrawModeCallbackEnd = _ref$exitDrawModeCall2 === void 0 ? function () {} : _ref$exitDrawModeCall2;
+    _ref$geoJSONLayers = _ref.geoJSONLayers,
+    geoJSONLayers = _ref$geoJSONLayers === void 0 ? [] : _ref$geoJSONLayers;
   var dispatch = useDispatch();
   var firstMap = useSelector(function (store) {
     return mapSelectors.getFirstMap(store);
@@ -5115,44 +4747,44 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
   var mapDimensions = useSelector(function (store) {
     return mapSelectors.getMapDimensions(store, firstMapId);
   }, shallowEqual);
-  var mapId = React.useRef("sigmet-".concat(generateMapId())).current;
-  var timesliderId = React.useRef("sigmet-".concat(generateTimesliderId())).current;
+  var mapId = React.useRef("sigmet-".concat(mapStoreUtils.generateMapId())).current;
+  var timesliderId = React.useRef("sigmet-".concat(mapStoreUtils.generateTimesliderId())).current;
   var syncGroupAddGroup = React.useCallback(function (payload) {
-    dispatch(SyncGroups.actions.syncGroupAddGroup(payload));
+    dispatch(syncGroupsActions.syncGroupAddGroup(payload));
   }, [dispatch]);
   var syncGroupAddTarget = React.useCallback(function (payload) {
-    dispatch(SyncGroups.actions.syncGroupAddTarget(payload));
+    dispatch(syncGroupsActions.syncGroupAddTarget(payload));
   }, [dispatch]);
   React.useEffect(function () {
     if (mapLayers && mapLayers.length) {
       // use maplayers, but change layerId and current mapId
       var layers = mapLayers.map(function (layer) {
         return Object.assign(Object.assign({}, layer), {
-          id: generateLayerId(),
+          id: mapStoreUtils.generateLayerId(),
           mapId: mapId
         });
       });
-      dispatch(mapActions.setLayers({
+      dispatch(mapStoreActions.setLayers({
         mapId: mapId,
         layers: layers
       }));
     }
     if (mapDimensions && mapDimensions.length) {
-      dispatch(mapActions.mapChangeDimension({
+      dispatch(mapStoreActions.mapChangeDimension({
         mapId: mapId,
         dimension: mapDimensions[0],
         origin: 'MapViewGeoJson'
       }));
     }
-    var baseLayers = initialBaseLayers || [Object.assign(Object.assign({}, publicLayers.overLayer), {
+    var baseLayers = initialBaseLayers || [Object.assign(Object.assign({}, defaultLayers.overLayer), {
       id: "countryborders-".concat(mapId)
     })];
-    dispatch(mapActions.setBaseLayers({
+    dispatch(mapStoreActions.setBaseLayers({
       mapId: mapId,
       layers: baseLayers
     }));
     var projection = initialProjection || srsAndBboxDefault;
-    dispatch(mapActions.setBbox({
+    dispatch(mapStoreActions.setBbox({
       mapId: mapId,
       bbox: projection.bbox,
       srs: projection.srs
@@ -5160,7 +4792,7 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
     syncGroupAddGroup({
       groupId: 'Time_SigmetAirmet',
       title: 'Group 1 for sigmet/airmet map',
-      type: SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
+      type: syncConstants.SYNCGROUPS_TYPE_SETTIME
     });
     syncGroupAddTarget({
       groupId: 'Time_SigmetAirmet',
@@ -5189,56 +4821,10 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
     mapId: mapId
   })), /*#__PURE__*/React.createElement(MapViewConnect, {
     mapId: mapId
-  }, /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-fir-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.fir
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-end-".concat(mapId),
-    isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
-    geojson: geoJSONs.end,
-    drawMode: layerDrawModes.end,
-    updateGeojson: function updateGeojson(geojson) {
-      var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
-      setLayerGeoJSONs(Object.assign(Object.assign({}, geoJSONs), {
-        end: end
-      }));
-    },
-    exitDrawModeCallback: function exitDrawModeCallback() {
-      setDrawMode({
-        start: null,
-        end: null
-      });
-      exitDrawModeCallbackEnd();
-    },
-    featureNrToEdit: 0
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-start-".concat(mapId),
-    isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
-    geojson: geoJSONs.start,
-    drawMode: layerDrawModes.start,
-    updateGeojson: function updateGeojson(geojson) {
-      var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
-      setLayerGeoJSONs(Object.assign(Object.assign({}, geoJSONs), {
-        start: start
-      }));
-    },
-    exitDrawModeCallback: function exitDrawModeCallback() {
-      setDrawMode({
-        start: null,
-        end: null
-      });
-      exitDrawModeCallbackStart();
-    },
-    featureNrToEdit: 0
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-end-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.intersectionEnd
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-start-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.intersectionStart
+  }, geoJSONLayers.map(function (layer) {
+    return /*#__PURE__*/React.createElement(MapViewLayer, Object.assign({
+      key: layer.id
+    }, layer));
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
@@ -5261,10 +4847,11 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
   }));
 };
 
-var ProductFormLayout = function ProductFormLayout(_a) {
-  var children = _a.children,
-    productConfig = _a.productConfig,
-    geojsonProps = __rest(_a, ["children", "productConfig"]);
+var ProductFormLayout = function ProductFormLayout(_ref) {
+  var children = _ref.children,
+    productConfig = _ref.productConfig,
+    _ref$geoJSONLayers = _ref.geoJSONLayers,
+    geoJSONLayers = _ref$geoJSONLayers === void 0 ? [] : _ref$geoJSONLayers;
   var theme = useTheme$2();
   var baseLayers = getBaseLayers(productConfig);
   var projection = getProjection(productConfig);
@@ -5288,10 +4875,11 @@ var ProductFormLayout = function ProductFormLayout(_a) {
       height: '100%',
       padding: 0
     })
-  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
     baseLayers: baseLayers,
-    projection: projection
-  }, geojsonProps))), /*#__PURE__*/React__default.createElement(Grid, {
+    projection: projection,
+    geoJSONLayers: geoJSONLayers
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 6,
@@ -8453,11 +8041,96 @@ var SigmetForm = function SigmetForm(_ref) {
     productConfig = _ref$productConfig === void 0 ? sigmetConfig : _ref$productConfig;
   var _useApiContext = useApiContext(),
     api = _useApiContext.api;
+  var _useMapDrawTool = useMapDrawTool({
+      defaultEditModes: getDrawTools(StartOrEndDrawing.start, getFir(productConfig)),
+      defaultGeoJSON: !isCancelSigmet && initialSigmet ? addFeatureProperties(initialSigmet.startGeometry, featurePropsStart) : undefined,
+      defaultGeoJSONIntersection: !isCancelSigmet && initialSigmet ? addFeatureProperties(initialSigmet.startGeometryIntersect, featurePropsIntersectionStart) : undefined,
+      defaultGeoJSONIntersectionBounds: addFeatureProperties(getFir(productConfig), featurePropsFIR)
+    }),
+    startGeoJSON = _useMapDrawTool.geoJSON,
+    startGeoJSONIntersection = _useMapDrawTool.geoJSONIntersection,
+    getStartLayer = _useMapDrawTool.getLayer,
+    startEditModes = _useMapDrawTool.editModes,
+    activeStartTool = _useMapDrawTool.activeTool,
+    changeActiveStartTool = _useMapDrawTool.changeActiveTool,
+    deactivateStartTool = _useMapDrawTool.deactivateTool,
+    setStartGeoJSONIntersectionBounds = _useMapDrawTool.setGeoJSONIntersectionBounds,
+    setStartEditModes = _useMapDrawTool.setEditModes;
+  var _useMapDrawTool2 = useMapDrawTool({
+      defaultEditModes: getDrawTools(StartOrEndDrawing.end, getFir(productConfig)),
+      defaultGeoJSON: !isCancelSigmet && initialSigmet ? addFeatureProperties(initialSigmet.endGeometry, featurePropsEnd) : undefined,
+      defaultGeoJSONIntersection: !isCancelSigmet && initialSigmet ? addFeatureProperties(initialSigmet.endGeometryIntersect, featurePropsIntersectionEnd) : undefined,
+      defaultGeoJSONIntersectionBounds: addFeatureProperties(getFir(productConfig), featurePropsFIR),
+      defaultGeoJSONIntersectionProperties: featurePropsIntersectionEnd
+    }),
+    endGeoJSON = _useMapDrawTool2.geoJSON,
+    endGeoJSONIntersection = _useMapDrawTool2.geoJSONIntersection,
+    getEndLayer = _useMapDrawTool2.getLayer,
+    endEditModes = _useMapDrawTool2.editModes,
+    activeEndTool = _useMapDrawTool2.activeTool,
+    changeActiveEndTool = _useMapDrawTool2.changeActiveTool,
+    deactivateEndTool = _useMapDrawTool2.deactivateTool,
+    setEndGeoJSONIntersectionBounds = _useMapDrawTool2.setGeoJSONIntersectionBounds,
+    setEndEditModes = _useMapDrawTool2.setEditModes;
+  var onUpdateStartgeoJSON = function onUpdateStartgeoJSON(updatedStartGeoJSON, updateStartGeoJSONIntersection) {
+    setValue('startGeometry', updatedStartGeoJSON, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('startGeometry'), updatedStartGeoJSON)
+    });
+    setValue('startGeometryIntersect', updateStartGeoJSONIntersection, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('startGeometryIntersect'), updateStartGeoJSONIntersection)
+    });
+    onChangeForm();
+  };
+  var onUpdateEndGeoJson = function onUpdateEndGeoJson(updatedEndGeoJSON, updateEndGeoJSONIntersection) {
+    setValue('endGeometry', updatedEndGeoJSON, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('endGeometry'), updatedEndGeoJSON)
+    });
+    setValue('endGeometryIntersect', updateEndGeoJSONIntersection, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('endGeometryIntersect'), updateEndGeoJSONIntersection)
+    });
+    onChangeForm();
+  };
+  var onChangeStartTool = function onChangeStartTool(newTool) {
+    deactivateEndTool();
+    changeActiveStartTool(newTool);
+    if (!newTool.isSelectable) {
+      deactivateStartTool();
+      onUpdateStartgeoJSON(newTool.shape, newTool.shape);
+    }
+  };
+  var onChangeEndTool = function onChangeEndTool(newTool) {
+    deactivateStartTool();
+    changeActiveEndTool(newTool);
+    if (!newTool.isSelectable) {
+      deactivateEndTool();
+      onUpdateEndGeoJson(newTool.shape, newTool.shape);
+    }
+  };
+  var onExitDrawMode = function onExitDrawMode() {
+    deactivateStartTool();
+    var newGeoStart = rewindGeometry(startGeoJSON);
+    var newGeoStartIntersect = rewindGeometry(startGeoJSONIntersection);
+    onUpdateStartgeoJSON(newGeoStart, newGeoStartIntersect);
+  };
+  var onExitDrawModeEnd = function onExitDrawModeEnd() {
+    deactivateEndTool();
+    var newGeoEnd = rewindGeometry(endGeoJSON);
+    var newGeoEndIntersect = rewindGeometry(endGeoJSONIntersection);
+    onUpdateEndGeoJson(newGeoEnd, newGeoEndIntersect);
+  };
+  var layers = [getStartLayer('geoJSONIntersectionBounds', 'geojsonlayer-fir'), Object.assign(Object.assign({}, getEndLayer('geoJSON', 'geojsonlayer-end')), {
+    exitDrawModeCallback: onExitDrawModeEnd
+  }), Object.assign(Object.assign({}, getStartLayer('geoJSON', 'geojsonlayer-start')), {
+    exitDrawModeCallback: onExitDrawMode
+  }), getEndLayer('geoJSONIntersection', 'geojsonlayer-intersection-end'), getStartLayer('geoJSONIntersection', 'geojsonlayer-intersection-start')];
   var _useFormContext2 = useFormContext(),
     watch = _useFormContext2.watch,
     setValue = _useFormContext2.setValue,
-    handleSubmit = _useFormContext2.handleSubmit,
-    getValues = _useFormContext2.getValues;
+    handleSubmit = _useFormContext2.handleSubmit;
   var _React$useState = React__default.useState(mode === 'view'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDisabled = _React$useState2[0],
@@ -8471,65 +8144,31 @@ var SigmetForm = function SigmetForm(_ref) {
   var onChangeForm = function onChangeForm() {
     updateTac(watch);
   };
-  // TODO: [Loes Cornelis]: fix this whole mess of if statements for isCancelSigmet and hidden fields if disabled throughout the form
-  var initialGeometry = initialSigmet && !isCancelSigmet ? {
-    start: initialSigmet.startGeometry,
-    end: initialSigmet.endGeometry,
-    intersectionStart: initialSigmet.startGeometryIntersect,
-    intersectionEnd: initialSigmet.endGeometryIntersect
-  } : undefined;
-  var currentSelectedFIR = getValues('locationIndicatorATSR');
-  var _useDrawMode = useDrawMode(productConfig, initialGeometry, currentSelectedFIR),
-    drawMode = _useDrawMode.drawMode,
-    setDrawMode = _useDrawMode.setDrawMode,
-    layerDrawModes = _useDrawMode.layerDrawModes,
-    geoJSONs = _useDrawMode.geoJSONs,
-    _setLayerGeoJSONs = _useDrawMode.setLayerGeoJSONs,
-    _setDrawModeType = _useDrawMode.setDrawModeType;
-  var updateStartDrawing = function updateStartDrawing(mapGeoJSONS) {
-    var baseGeoJSON = mapGeoJSONS || geoJSONs;
-    var newGeoJSON = fn(baseGeoJSON, function (draftGeoJSON) {
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.start = rewindGeometry(baseGeoJSON.start);
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.intersectionStart = rewindGeometry(baseGeoJSON.intersectionStart);
-    });
-    setValue('startGeometry', newGeoJSON.start, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('startGeometry'), newGeoJSON.start)
-    });
-    setValue('startGeometryIntersect', newGeoJSON.intersectionStart, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('startGeometryIntersect'), newGeoJSON.intersectionStart)
-    });
-    onChangeForm();
-  };
-  var updateEndDrawing = function updateEndDrawing(mapGeoJSONS) {
-    var baseGeoJSON = mapGeoJSONS || geoJSONs;
-    var newGeoJSON = fn(baseGeoJSON, function (draftGeoJSON) {
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.end = rewindGeometry(baseGeoJSON.end);
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.intersectionEnd = rewindGeometry(baseGeoJSON.intersectionEnd);
-    });
-    setValue('endGeometry', newGeoJSON.end, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('endGeometry'), newGeoJSON.end)
-    });
-    setValue('endGeometryIntersect', newGeoJSON.intersectionEnd, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('endGeometryIntersect'), newGeoJSON.intersectionEnd)
-    });
-    onChangeForm();
-  };
   React__default.useEffect(function () {
-    var isInDrawMode = drawMode.start !== null || drawMode.end !== null;
+    var isInDrawMode = activeStartTool !== '' || activeEndTool !== '';
     if (!isReadOnly && isInDrawMode !== isDisabled) {
       setIsDisabled(isInDrawMode);
     }
-  }, [drawMode.start, drawMode.end, isReadOnly, isDisabled]);
+  }, [activeStartTool, activeEndTool, isReadOnly, isDisabled]);
   var _useConditionalFields = useConditionalFields$1(),
     hasVolcanicAshes = _useConditionalFields.hasVolcanicAshes;
+  var onChangeFir = function onChangeFir(event) {
+    var newFIRValue = event === null || event === void 0 ? void 0 : event.target.value;
+    var newFirGeoJSON = addFeatureProperties(getFir(productConfig, newFIRValue), featurePropsFIR);
+    // delete shape
+    onChangeStartTool(startEditModes.find(function (mode) {
+      return mode.value === 'DELETE';
+    }));
+    onChangeEndTool(endEditModes.find(function (mode) {
+      return mode.value === 'DELETE';
+    }));
+    // update instersection bounds
+    setStartGeoJSONIntersectionBounds(newFirGeoJSON);
+    setEndGeoJSONIntersectionBounds(newFirGeoJSON);
+    // update tool buttons with new fir geoJSON
+    setStartEditModes(updateDrawToolsWithFir(startEditModes, newFirGeoJSON));
+    setEndEditModes(updateDrawToolsWithFir(endEditModes, newFirGeoJSON));
+  };
   var renderForm = function renderForm() {
     return /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
@@ -8566,24 +8205,14 @@ var SigmetForm = function SigmetForm(_ref) {
       productConfig: productConfig,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
-      onChange: function onChange(event) {
-        var newFIRValue = event === null || event === void 0 ? void 0 : event.target.value;
-        var updatedGeoJson = getInitialGeoJSONState(productConfig, newFIRValue);
-        _setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.start, function () {
-          return updateStartDrawing(updatedGeoJson);
-        });
-        _setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end, function () {
-          return updateEndDrawing(updatedGeoJson);
-        });
-        _setLayerGeoJSONs(updatedGeoJson);
-      }
+      onChange: onChangeFir
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
-      drawMode: drawMode,
-      geoJSONs: geoJSONs,
-      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
-      }
+      geoJSON: startGeoJSON,
+      geoJSONIntersection: startGeoJSONIntersection,
+      tools: startEditModes,
+      onChangeTool: onChangeStartTool,
+      activeTool: activeStartTool
     }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Levels, {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -8595,12 +8224,12 @@ var SigmetForm = function SigmetForm(_ref) {
       productConfig: productConfig,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
-      drawMode: drawMode,
-      geoJSONs: geoJSONs,
-      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateEndDrawing);
-      },
-      onChange: onChangeForm
+      onChange: onChangeForm,
+      geoJSON: endGeoJSON,
+      geoJSONIntersection: endGeoJSONIntersection,
+      tools: endEditModes,
+      onChangeTool: onChangeEndTool,
+      activeTool: activeEndTool
     }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Change, {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly
@@ -8644,15 +8273,7 @@ var SigmetForm = function SigmetForm(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(ProductFormLayout, {
     productConfig: productConfig,
-    geoJSONs: geoJSONs,
-    setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
-      return _setLayerGeoJSONs(createInterSections(geoJSONs));
-    },
-    layerDrawModes: layerDrawModes,
-    drawMode: drawMode,
-    setDrawMode: setDrawMode,
-    exitDrawModeCallbackStart: updateStartDrawing,
-    exitDrawModeCallbackEnd: updateEndDrawing
+    geoJSONLayers: layers
   }, renderForm()));
 };
 
@@ -8710,6 +8331,48 @@ var AirmetForm = function AirmetForm(_ref) {
     productConfig = _ref$productConfig === void 0 ? airmetConfig : _ref$productConfig;
   var _useApiContext = useApiContext(),
     api = _useApiContext.api;
+  var _useMapDrawTool = useMapDrawTool({
+      defaultEditModes: getDrawTools(StartOrEndDrawing.start, getFir(productConfig)),
+      defaultGeoJSON: !isCancelAirmet && initialAirmet ? addFeatureProperties(initialAirmet.startGeometry, featurePropsStart) : undefined,
+      defaultGeoJSONIntersection: !isCancelAirmet && initialAirmet ? addFeatureProperties(initialAirmet.startGeometryIntersect, featurePropsIntersectionStart) : undefined,
+      defaultGeoJSONIntersectionBounds: addFeatureProperties(getFir(productConfig), featurePropsFIR)
+    }),
+    startGeoJSON = _useMapDrawTool.geoJSON,
+    startGeoJSONIntersection = _useMapDrawTool.geoJSONIntersection,
+    getStartLayer = _useMapDrawTool.getLayer,
+    startEditModes = _useMapDrawTool.editModes,
+    activeStartTool = _useMapDrawTool.activeTool,
+    changeActiveStartTool = _useMapDrawTool.changeActiveTool,
+    deactivateStartTool = _useMapDrawTool.deactivateTool,
+    setStartGeoJSONIntersectionBounds = _useMapDrawTool.setGeoJSONIntersectionBounds,
+    setStartEditModes = _useMapDrawTool.setEditModes;
+  var onUpdateStartgeoJSON = function onUpdateStartgeoJSON(updatedStartGeoJSON, updateStartGeoJSONIntersection) {
+    setValue('startGeometry', updatedStartGeoJSON, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('startGeometry'), updatedStartGeoJSON)
+    });
+    setValue('startGeometryIntersect', updateStartGeoJSONIntersection, {
+      shouldValidate: true,
+      shouldDirty: isGeometryDirty(watch('startGeometryIntersect'), updateStartGeoJSONIntersection)
+    });
+    onChangeForm();
+  };
+  var onChangeStartTool = function onChangeStartTool(newTool) {
+    changeActiveStartTool(newTool);
+    if (!newTool.isSelectable) {
+      deactivateStartTool();
+      onUpdateStartgeoJSON(newTool.shape, newTool.shape);
+    }
+  };
+  var onExitDrawMode = function onExitDrawMode() {
+    deactivateStartTool();
+    var newGeoStart = rewindGeometry(startGeoJSON);
+    var newGeoStartIntersect = rewindGeometry(startGeoJSONIntersection);
+    onUpdateStartgeoJSON(newGeoStart, newGeoStartIntersect);
+  };
+  var layers = [getStartLayer('geoJSONIntersectionBounds', 'geojsonlayer-fir'), Object.assign(Object.assign({}, getStartLayer('geoJSON', 'geojsonlayer-start')), {
+    exitDrawModeCallback: onExitDrawMode
+  }), getStartLayer('geoJSONIntersection', 'geojsonlayer-intersection-start')];
   var _useFormContext2 = useFormContext(),
     watch = _useFormContext2.watch,
     setValue = _useFormContext2.setValue,
@@ -8729,47 +8392,32 @@ var AirmetForm = function AirmetForm(_ref) {
   var onChangeForm = function onChangeForm() {
     updateTac(watch);
   };
-  var initialGeometry = initialAirmet && !isCancelAirmet ? {
-    start: initialAirmet.startGeometry,
-    intersectionStart: initialAirmet.startGeometryIntersect
-  } : undefined;
-  var currentSelectedFIR = getValues('locationIndicatorATSR');
-  var _useDrawMode = useDrawMode(productConfig, initialGeometry, currentSelectedFIR),
-    drawMode = _useDrawMode.drawMode,
-    setDrawMode = _useDrawMode.setDrawMode,
-    layerDrawModes = _useDrawMode.layerDrawModes,
-    geoJSONs = _useDrawMode.geoJSONs,
-    _setLayerGeoJSONs = _useDrawMode.setLayerGeoJSONs,
-    _setDrawModeType = _useDrawMode.setDrawModeType;
-  var updateStartDrawing = function updateStartDrawing(mapGeoJSONS) {
-    var baseGeoJSON = mapGeoJSONS || geoJSONs;
-    var newGeoJSON = fn(baseGeoJSON, function (draftGeoJSON) {
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.start = rewindGeometry(baseGeoJSON.start);
-      // eslint-disable-next-line no-param-reassign
-      draftGeoJSON.intersectionStart = rewindGeometry(baseGeoJSON.intersectionStart);
-    });
-    setValue('startGeometry', newGeoJSON.start, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('startGeometry'), newGeoJSON.start)
-    });
-    setValue('startGeometryIntersect', newGeoJSON.intersectionStart, {
-      shouldValidate: true,
-      shouldDirty: isGeometryDirty(watch('startGeometryIntersect'), newGeoJSON.intersectionStart)
-    });
-    onChangeForm();
-  };
   React__default.useEffect(function () {
-    var isInDrawMode = drawMode.start !== null;
+    var isInDrawMode = activeStartTool !== '';
     if (!isReadOnly && isInDrawMode !== isDisabled) {
       setIsDisabled(isInDrawMode);
     }
-  }, [drawMode.start, isReadOnly, isDisabled]);
+  }, [activeStartTool, isReadOnly, isDisabled]);
   var _useConditionalFields = useConditionalFields(),
     hasSurfaceVisiblity = _useConditionalFields.hasSurfaceVisiblity,
     hasSurfaceWind = _useConditionalFields.hasSurfaceWind,
     hasLevels = _useConditionalFields.hasLevels,
     hasCloudLevels = _useConditionalFields.hasCloudLevels;
+  var onChangeFir = function onChangeFir(event) {
+    var newFIRValue = event === null || event === void 0 ? void 0 : event.target.value;
+    var newFirGeoJSON = addFeatureProperties(getFir(productConfig, newFIRValue), featurePropsFIR);
+    // delete shape
+    onChangeStartTool(startEditModes.find(function (mode) {
+      return mode.value === 'DELETE';
+    }));
+    // update instersection bounds
+    setStartGeoJSONIntersectionBounds(newFirGeoJSON);
+    // update tool buttons with new fir geoJSON
+    setStartEditModes(updateDrawToolsWithFir(startEditModes, newFirGeoJSON));
+    // trigger validation for airmet specific fields that depend on FIR config
+    var fieldnames = ['windDirection', 'windSpeed', 'visibilityValue', 'cloudLevel.value', 'cloudLowerLevel.value'];
+    triggerValidations(fieldnames, getValues, trigger);
+  };
   var renderForm = function renderForm() {
     return /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
@@ -8812,24 +8460,14 @@ var AirmetForm = function AirmetForm(_ref) {
       isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       productConfig: productConfig,
-      onChange: function onChange(event) {
-        var newFIRValue = event === null || event === void 0 ? void 0 : event.target.value;
-        var updatedGeoJson = getInitialGeoJSONState(productConfig, newFIRValue);
-        _setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.start, function () {
-          return updateStartDrawing(updatedGeoJson);
-        });
-        _setLayerGeoJSONs(updatedGeoJson);
-        // trigger validation for airmet specific fields that depend on FIR config
-        var fieldnames = ['windDirection', 'windSpeed', 'visibilityValue', 'cloudLevel.value', 'cloudLowerLevel.value'];
-        triggerValidations(fieldnames, getValues, trigger);
-      }
+      onChange: onChangeFir
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
-      drawMode: drawMode,
-      geoJSONs: geoJSONs,
-      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
-      }
+      geoJSON: startGeoJSON,
+      geoJSONIntersection: startGeoJSONIntersection,
+      tools: startEditModes,
+      onChangeTool: onChangeStartTool,
+      activeTool: activeStartTool
     }), !isCancelAirmet && hasLevels && /*#__PURE__*/React__default.createElement(Levels, {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -8883,14 +8521,7 @@ var AirmetForm = function AirmetForm(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(ProductFormLayout, {
     productConfig: productConfig,
-    geoJSONs: geoJSONs,
-    setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
-      return _setLayerGeoJSONs(createInterSections(geoJSONs));
-    },
-    layerDrawModes: layerDrawModes,
-    drawMode: drawMode,
-    setDrawMode: setDrawMode,
-    exitDrawModeCallbackStart: updateStartDrawing
+    geoJSONLayers: layers
   }, renderForm()));
 };
 
@@ -17007,4 +16638,4 @@ var AirmetComponentsLookUp = function AirmetComponentsLookUp(payload, _ref) {
   }
 };
 
-export { AirmetComponentsLookUp, AirmetForm, AirmetPhenomena, CloudLevelUnits, ContentDialog, Direction, DownloadSigmetAirmetConfigWrapper, LevelUnits, MapDrawMode, MapViewGeoJson, MetInfoWrapper, MovementUnit, ProductList, ProductListRow, ProductStatusDescription, SigmetComponentsLookUp, SigmetForm, SigmetPhenomena, StartOrEndDrawing, VisibilityCause, WindUnit, airmetConfig, createApi$1 as createApi, createApi as createFakeApi, isInstanceOfAirmet, isInstanceOfCancelAirmet, isInstanceOfCancelSigmet, isInstanceOfCancelSigmetOrAirmet, isInstanceOfSigmet, isInstanceOfSigmetOrAirmet, sigmetConfig };
+export { AirmetComponentsLookUp, AirmetForm, AirmetPhenomena, CloudLevelUnits, ContentDialog, Direction, DownloadSigmetAirmetConfigWrapper, LevelUnits, MapViewGeoJson, MetInfoWrapper, MovementUnit, ProductList, ProductListRow, ProductStatusDescription, SigmetComponentsLookUp, SigmetForm, SigmetPhenomena, StartOrEndDrawing, VisibilityCause, WindUnit, airmetConfig, createApi$1 as createApi, createApi as createFakeApi, isInstanceOfAirmet, isInstanceOfCancelAirmet, isInstanceOfCancelSigmet, isInstanceOfCancelSigmetOrAirmet, isInstanceOfSigmet, isInstanceOfSigmetOrAirmet, sigmetConfig };