@opengeoweb/core 5.1.0 → 5.2.0

package/index.js

@@ -3,13 +3,13 @@ import { createSelector } from 'reselect';
 import _, { isEqual as isEqual$1, compact, debounce, groupBy, throttle as throttle$2, range } from 'lodash';
 import moment from 'moment';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
+import { WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug as debug$3, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
 import * as React from 'react';
-import React__default, { Component, useRef, useState as useState$1, useEffect as useEffect$1, useCallback, createElement, PureComponent, forwardRef, useContext, createContext, Fragment, cloneElement, isValidElement, createRef, useLayoutEffect as useLayoutEffect$1 } from 'react';
-import { useDispatch, useSelector, connect, Provider } from 'react-redux';
-import { Paper, Box as Box$2, Typography, Grid, MenuItem, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
-import { CustomTooltip, ToolContainerDraggable, CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
-import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug as debug$3, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
+import React__default, { useCallback, useEffect as useEffect$1, createElement, PureComponent, useState as useState$1, Component, forwardRef, useContext, createContext, Fragment, cloneElement, useRef, isValidElement, createRef, useLayoutEffect as useLayoutEffect$1 } from 'react';
+import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
+import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, Location, DrawPolygon, DrawRegion, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Box$3 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
@@ -2140,6 +2140,7 @@ var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
 var defaultTimeStep = 60;
 var defaultSecondsPerPx = 80;
+var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
 var createMap = function createMap(_ref) {
   var id = _ref.id,
@@ -7310,29 +7311,9 @@ function replaceLayerIds(layers, autoLayerIdOld, autoLayerIdNew) {
  * 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)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var isValidService = function isValidService(service) {
-  return Object.prototype.hasOwnProperty.call(service, 'url');
-};
-var parseBoolean = function parseBoolean(value) {
-  return typeof value === 'boolean' ? value : value === 'true';
-};
-var parseLayer = function parseLayer(layer) {
-  return Object.assign(Object.assign(Object.assign({}, layer), !layer.id && {
-    id: generateLayerId()
-  }), layer.enabled && {
-    enabled: parseBoolean(layer.enabled)
-  });
-};
-var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
-  return {
-    mapLayers: existingList,
-    baseLayers: existingList,
-    overLayers: existingList
-  };
-};
 var filterLayers = function filterLayers() {
   var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var layerParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (layer) {
@@ -7367,175 +7348,24 @@ var filterLayers = function filterLayers() {
     return layers;
   }, createEmtpyFilteredList([]));
 };
-var filterServices = function filterServices(presetArray) {
-  var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var validServices = hasServices ? presetArray.filter(function (preset) {
-    return isValidService(preset);
-  }) : null;
-  var hasValidServices = validServices && validServices.length > 0;
-  var services = hasValidServices ? validServices : undefined;
-  return services;
-};
-var filterMapPresets = function filterMapPresets(initialAppPreset) {
-  var preset = initialAppPreset && initialAppPreset.preset || {};
-  var layers = preset.layers,
-    services = preset.services,
-    baseServices = preset.baseServices;
-  var _ref = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
-    baseLayers = _ref.baseLayers,
-    mapLayers = _ref.mapLayers;
-  var filterredServices = services ? filterServices(services) : undefined;
-  var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
-  var filteredPreset = {
-    services: filterredServices,
-    baseServices: filteredBaseServices,
-    baseLayers: baseLayers,
-    mapLayers: mapLayers
+var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
+  return {
+    mapLayers: existingList,
+    baseLayers: existingList,
+    overLayers: existingList
   };
-  return filteredPreset;
-};
-
-/* *
- * 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 DWD = {
-  name: 'DWD',
-  url: 'https://maps.dwd.de/geoserver/ows?',
-  id: 'dwd'
-};
-var nationaalgeoregister = {
-  name: 'nationaalgeoregister.nl',
-  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
-  id: 'nationaalgeoregister'
-};
-var KNMImsgcpp = {
-  name: 'KNMImsgcpp',
-  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
-  id: 'msgcpp-ogc-realtime'
-};
-var HeiGit = {
-  name: 'HeiGit',
-  url: 'https://maps.heigit.org/osm-wms/service',
-  id: 'HeiGit-osm-wms'
-};
-var ArcGisCanvas = {
-  name: 'ArcGisCanvas',
-  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
-  id: 'ArcGisCanvas'
-};
-var KNMIgeoservicesBaselayers = {
-  name: 'KNMIgeoservicesBaselayers',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
-  id: 'KNMIgeoservicesBaselayers'
-};
-var KNMIgeoservicesRadar = {
-  name: 'KNMIgeoservicesRadar',
-  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
-  id: 'KNMIgeoservicesRadar'
-};
-var KNMIgeoservicesObs = {
-  name: 'KNMIgeoservicesObs',
-  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
-  id: 'KNMIgeoservicesObs'
-};
-var KNMIgeoservicesKlimaatAtlas = {
-  name: 'KNMIgeoservicesKlimaatAtlas',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
-  id: 'KNMIgeoservicesKlimaatAtlas'
-};
-var KNMIgeoservicesHarmonie = {
-  name: 'KNMIgeoservicesHarmonie',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
-  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
-};
-var KNMIgeoservicesHarmonieMLService = {
-  name: 'KNMI Harmonie ML',
-  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
-  id: 'harmonieML'
-};
-var MetNorwayService = {
-  name: 'MetNorwayService',
-  url: 'https://wms-e1.geoweb.met.no/wms?',
-  id: 'MetNorwayService'
-};
-var FMIopenwms = {
-  name: 'FMIopenwms',
-  url: 'https://openwms.fmi.fi/geoserver/wms?',
-  id: 'FMIopenwms'
-};
-var DWDObservations = {
-  name: 'DWDObservations',
-  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
-  id: 'DWDObservations'
-};
-var DWDWarnings = {
-  name: 'DWDWarnings',
-  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
-  id: 'DWDWarnings'
-};
-var DWDWXProdukt = {
-  name: 'DWDWXProdukt',
-  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
-  id: 'DWDWXProdukt'
-};
-var EUMETSAT = {
-  name: 'EUMETSAT',
-  url: 'https://view.eumetsat.int/geoserver/wms?',
-  id: 'EUMETSAT'
-};
-var eumetviewEUMETSAT = {
-  name: 'eumetviewEUMETSAT',
-  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
-  id: 'eumetviewEUMETSAT'
 };
-var ECMWFPublicService = {
-  name: 'ECMWF',
-  url: 'https://eccharts.ecmwf.int/wms/?token=public',
-  id: 'ecmwf'
+var parseBoolean = function parseBoolean(value) {
+  return typeof value === 'boolean' ? value : value === 'true';
 };
-var MeteoCanada = {
-  name: 'Meteo Canada',
-  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
-  id: 'MeteoCanada'
+var parseLayer = function parseLayer(layer) {
+  return Object.assign(Object.assign(Object.assign({}, layer), !layer.id && {
+    id: generateLayerId()
+  }), layer.enabled && {
+    enabled: parseBoolean(layer.enabled)
+  });
 };
 
-var publicServices = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    DWD: DWD,
-    nationaalgeoregister: nationaalgeoregister,
-    KNMImsgcpp: KNMImsgcpp,
-    HeiGit: HeiGit,
-    ArcGisCanvas: ArcGisCanvas,
-    KNMIgeoservicesBaselayers: KNMIgeoservicesBaselayers,
-    KNMIgeoservicesRadar: KNMIgeoservicesRadar,
-    KNMIgeoservicesObs: KNMIgeoservicesObs,
-    KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
-    KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
-    KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
-    MetNorwayService: MetNorwayService,
-    FMIopenwms: FMIopenwms,
-    DWDObservations: DWDObservations,
-    DWDWarnings: DWDWarnings,
-    DWDWXProdukt: DWDWXProdukt,
-    EUMETSAT: EUMETSAT,
-    eumetviewEUMETSAT: eumetviewEUMETSAT,
-    ECMWFPublicService: ECMWFPublicService,
-    MeteoCanada: MeteoCanada
-});
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7549,53 +7379,21 @@ var publicServices = /*#__PURE__*/Object.freeze({
  * 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)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var baseLayer$1 = {
-  name: 'arcGisSat',
-  title: 'arcGisSat',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true,
-  id: generateLayerId()
-};
-// Base Layers List
 var baseLayerGrey$1 = {
   id: generateLayerId(),
   name: 'WorldMap_Light_Grey_Canvas',
   type: 'twms',
   layerType: LayerType.baseLayer
 };
-var baseLayerOpenStreetMapNL$1 = {
-  id: 'base-layer-2',
-  name: 'OpenStreetMap_NL',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerArcGisCanvas$1 = {
-  service: ArcGisCanvas.url,
-  id: generateLayerId(),
-  name: 'arcGisCanvas',
-  type: 'twms',
-  enabled: true,
-  layerType: LayerType.baseLayer
-};
-var baseLayerWorldMap$1 = {
-  id: generateLayerId(),
-  name: 'WorldMap',
-  type: 'twms',
-  layerType: LayerType.baseLayer,
-  enabled: true
-};
-var baseLayerHeiGit = {
-  service: HeiGit.url,
-  id: generateLayerId(),
-  name: 'osm_auto:all',
-  layerType: LayerType.baseLayer
-};
 // Over Layers List
+var KNMIgeoservicesBaselayers = {
+  name: 'KNMIgeoservicesBaselayers',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
+  id: 'KNMIgeoservicesBaselayers'
+};
 var overLayer$1 = {
   service: KNMIgeoservicesBaselayers.url,
   name: 'countryborders',
@@ -7604,1109 +7402,39 @@ var overLayer$1 = {
   id: generateLayerId(),
   layerType: LayerType.overLayer
 };
-// KNMI msgcpp List
-var msgCppLayer = {
-  // doesn't work with https
-  service: KNMImsgcpp.url,
-  name: 'lwe_precipitation_rate',
-  format: 'image/png',
-  enabled: true,
-  style: 'precip-transparent/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// Nederlandse Nationaal Georegister Layers list
-var veiligheidsRegiosGebiedsIndelingenLabels = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
-  style: 'CBS_Label',
-  enabled: false,
-  layerType: LayerType.mapLayer
-};
-var veiligheidsRegiosGebiedsIndelingen = {
-  service: nationaalgeoregister.url,
-  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
-  style: 'CBS_Gebiedsindeling',
-  enabled: false,
-  layerType: LayerType.mapLayer
-};
-// KNMI Geoservices Layers List
-var radarLayer$1 = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'RAD_NL25_PCP_CM',
-  format: 'image/png',
-  enabled: true,
-  style: 'radar/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var radarLayerWithError = {
-  service: KNMIgeoservicesRadar.url,
-  name: 'radarLayer',
-  format: 'image/png',
-  enabled: true,
-  style: 'knmiradar/nearest',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirTemperature = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/ta',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsWind = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/wind',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsAirPressureAtSeaLevel = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pp',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsRelativeHumidity = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/rh',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsGlobalSolarRadiation = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/qg',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var obsPrecipitationIntensityPWS = {
-  service: KNMIgeoservicesObs.url,
-  name: '10M/pg',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var harmonieRelativeHumidityPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'relative_humidity__at_pl',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindPl = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_pl',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieAirTemperature = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_temperature__at_2m',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePrecipitation = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'precipitation_flux',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmoniePressure = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'air_pressure_at_sea_level',
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  enabled: true
-};
-var harmonieWindFlags = {
-  service: KNMIgeoservicesHarmonie.url,
-  name: 'wind__at_10m',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var klimaatAtlasTG3 = {
-  service: KNMIgeoservicesKlimaatAtlas.url,
-  name: 'TG3',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// DWD Layers List
-var dwdWarningLayer = {
-  service: DWDWarnings.url,
-  name: 'Warnungen_Gemeinden_vereinigt',
-  format: 'image/png',
-  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var dwdRadarLayer = {
-  service: DWDWXProdukt.url,
-  name: 'WX-Produkt',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// this needs authentication to work
-var dwdObservationsWetterLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-  // headers: [{ name: 'Authorization', value: 'Basic ...' }]
-};
 
-var dwdObservationsWetterLayerWithHeader = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Symbole',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer,
-  headers: [{
-    name: 'authorization',
-    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
-  }]
-};
-// this needs authentication to work
-var dwdObservationsWindLayer = {
-  service: DWDObservations.url,
-  name: 'Wetter_Beobachtungen',
-  style: 'Wetter_Wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// FMI open wms Layers List
-var FMITemp = {
-  service: FMIopenwms.url,
-  name: 'temperature-forecast',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-// Met Norway Layers List
-var MetNoTemp = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwayWind1 = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_wind',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
+var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
+  _marked2$4 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
+  _marked3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
+// Expects start, end time as moment object and interval in minutes
+var generateTimeList = function generateTimeList(start, end, interval) {
+  var timeList = [];
+  var unixStart = moment(start).utc().unix();
+  var unixEnd = moment(end).utc().unix();
+  var intervalSeconds = interval * 60;
+  for (var j = unixStart; j <= unixEnd; j += intervalSeconds) {
+    timeList.push({
+      name: 'time',
+      value: moment.unix(j).toISOString()
+    });
+  }
+  return timeList;
 };
-var metNorwayWind2 = {
-  service: MetNorwayService.url,
-  name: 'thredds_aromearctic_extracted_t',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
+var getAnimationEndTime = function getAnimationEndTime(animationEndTime) {
+  var calculateFromNow = animationEndTime.split(/[-+]/)[0] === 'NOW';
+  var isAddingTime = animationEndTime.indexOf('+') !== -1;
+  var timeInMinutes = moment.duration(animationEndTime.split(/[-+]/)[1]).asMinutes();
+  var startingTime = calculateFromNow ? moment().utc() : moment().utc().startOf('day');
+  var newAnimationEndTime = isAddingTime ? moment(startingTime).add(timeInMinutes, 'minutes').toISOString() : moment(startingTime).subtract(timeInMinutes, 'minutes').toISOString();
+  return newAnimationEndTime;
 };
-var metNorwayWind3 = {
-  service: MetNorwayService.url,
-  name: 'thredds_nk800_temperature',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
+var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime) {
+  var hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
+  var hasValidDate = moment.isDuration(moment.duration(animationEndTime.split(/[-+]/)[1]));
+  return hasValidPrefix && hasValidDate;
 };
-var metNorwayLatestT = {
-  service: MetNorwayService.url,
-  name: 'thredds_meps_latest_t',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var metNorwaySalinaty = {
-  service: MetNorwayService.url,
-  name: 'thredds_barents_2_5km_1h_salinity',
-  format: 'image/png',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFesEUMETSAT = {
-  service: EUMETSAT.url,
-  name: 'msg_fes:rgb_eview',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalenhncdEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_naturalenhncd',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgAshEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_ash',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgCthEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_cth',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgFogEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_fog',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-var msgNaturalEUMETSAT = {
-  service: eumetviewEUMETSAT.url,
-  name: 'meteosat:msg_natural',
-  enabled: true,
-  id: generateLayerId(),
-  layerType: LayerType.mapLayer
-};
-
-var publicLayers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    baseLayer: baseLayer$1,
-    baseLayerGrey: baseLayerGrey$1,
-    baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL$1,
-    baseLayerArcGisCanvas: baseLayerArcGisCanvas$1,
-    baseLayerWorldMap: baseLayerWorldMap$1,
-    baseLayerHeiGit: baseLayerHeiGit,
-    overLayer: overLayer$1,
-    msgCppLayer: msgCppLayer,
-    veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
-    veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
-    radarLayer: radarLayer$1,
-    radarLayerWithError: radarLayerWithError,
-    obsAirTemperature: obsAirTemperature,
-    obsWind: obsWind,
-    obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
-    obsRelativeHumidity: obsRelativeHumidity,
-    obsGlobalSolarRadiation: obsGlobalSolarRadiation,
-    obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
-    harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
-    harmonieWindPl: harmonieWindPl,
-    harmonieAirTemperature: harmonieAirTemperature,
-    harmoniePrecipitation: harmoniePrecipitation,
-    harmoniePressure: harmoniePressure,
-    harmonieWindFlags: harmonieWindFlags,
-    klimaatAtlasTG3: klimaatAtlasTG3,
-    dwdWarningLayer: dwdWarningLayer,
-    dwdRadarLayer: dwdRadarLayer,
-    dwdObservationsWetterLayer: dwdObservationsWetterLayer,
-    dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
-    dwdObservationsWindLayer: dwdObservationsWindLayer,
-    FMITemp: FMITemp,
-    MetNoTemp: MetNoTemp,
-    metNorwayWind1: metNorwayWind1,
-    metNorwayWind2: metNorwayWind2,
-    metNorwayWind3: metNorwayWind3,
-    metNorwayLatestT: metNorwayLatestT,
-    metNorwaySalinaty: metNorwaySalinaty,
-    msgFesEUMETSAT: msgFesEUMETSAT,
-    msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
-    msgAshEUMETSAT: msgAshEUMETSAT,
-    msgCthEUMETSAT: msgCthEUMETSAT,
-    msgFogEUMETSAT: msgFogEUMETSAT,
-    msgNaturalEUMETSAT: msgNaturalEUMETSAT
-});
-
-var CanvasComponent = /*#__PURE__*/function (_Component) {
-  _inherits(CanvasComponent, _Component);
-  var _super = _createSuper(CanvasComponent);
-  function CanvasComponent(props) {
-    var _this;
-    _classCallCheck$1(this, CanvasComponent);
-    _this = _super.call(this, props);
-    _this.canvas = null;
-    _this.ctx = null;
-    _this.currentWidth = 1;
-    _this.currentHeight = 1;
-    _this.canvascontaineroutside = null;
-    _this.canvascontainer = null;
-    _this.timer = null;
-    _this.redrawTimer = null;
-    _this.loopHasStarted = false;
-    _this.mounted = false;
-    _this.updateCanvas = _this.updateCanvas.bind(_assertThisInitialized$1(_this));
-    _this.handleMouseMoveEvent = _this.handleMouseMoveEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleMouseUpEvent = _this.handleMouseUpEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleMouseDownEvent = _this.handleMouseDownEvent.bind(_assertThisInitialized$1(_this));
-    _this.resize = _this.resize.bind(_assertThisInitialized$1(_this));
-    _this._handleWindowResize = _this._handleWindowResize.bind(_assertThisInitialized$1(_this));
-    _this.handleClickEvent = _this.handleClickEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleWheelEvent = _this.handleWheelEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleTouchStartEvent = _this.handleTouchStartEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleTouchEndEvent = _this.handleTouchEndEvent.bind(_assertThisInitialized$1(_this));
-    _this.handleTouchMoveEvent = _this.handleTouchMoveEvent.bind(_assertThisInitialized$1(_this));
-    _this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized$1(_this));
-    _this.onBlur = _this.onBlur.bind(_assertThisInitialized$1(_this));
-    _this.onFocus = _this.onFocus.bind(_assertThisInitialized$1(_this));
-    _this.startLoop = _this.startLoop.bind(_assertThisInitialized$1(_this));
-    _this._documentKeyDown = _this._documentKeyDown.bind(_assertThisInitialized$1(_this));
-    _this._isFocussed = false;
-    _this.canvas = null;
-    _this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
-    _this.canvascontainer = /*#__PURE__*/React__default.createRef();
-    return _this;
-  }
-  _createClass$1(CanvasComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      this.mounted = true;
-      if (this.canvas) {
-        this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
-        this.canvas.addEventListener('mouseup', this.handleMouseUpEvent);
-        this.canvas.addEventListener('mousedown', this.handleMouseDownEvent);
-        this.canvas.addEventListener('touchstart', this.handleTouchStartEvent);
-        this.canvas.addEventListener('touchend', this.handleTouchEndEvent);
-        this.canvas.addEventListener('touchmove', this.handleTouchMoveEvent);
-        this.canvas.addEventListener('wheel', this.handleWheelEvent);
-        this.canvas.addEventListener('click', this.handleClickEvent);
-        document.addEventListener('keydown', this._documentKeyDown, false);
-        this.resize();
-        this.updateCanvas();
-      }
-      var _this$props = this.props,
-        onKeyUp = _this$props.onKeyUp,
-        loopInterval = _this$props.redrawInterval;
-      if (onKeyUp) {
-        window.addEventListener('keyup', this.onKeyUp);
-      }
-      window.addEventListener('resize', this._handleWindowResize);
-      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
-        this.canvascontaineroutside.current.focus();
-      }
-      this.timer = setInterval(function () {
-        _this2.resize();
-      }, 1000);
-      if (loopInterval) {
-        this.redrawTimer = setInterval(function () {
-          _this2.updateCanvas();
-        }, loopInterval);
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate() {
-      var _this3 = this;
-      window.requestAnimationFrame(function () {
-        _this3.updateCanvas();
-      });
-      return false;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-      window.removeEventListener('resize', this._handleWindowResize);
-      var onKeyUp = this.props.onKeyUp;
-      if (onKeyUp) {
-        window.removeEventListener('keyup', this.onKeyUp);
-      }
-      if (this.canvas) {
-        this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
-        this.canvas.removeEventListener('mouseup', this.handleMouseUpEvent);
-        this.canvas.removeEventListener('mousemove', this.handleMouseMoveEvent);
-        this.canvas.removeEventListener('touchstart', this.handleTouchStartEvent);
-        this.canvas.removeEventListener('touchend', this.handleTouchEndEvent);
-        this.canvas.removeEventListener('touchmove', this.handleTouchMoveEvent);
-        this.canvas.removeEventListener('wheel', this.handleWheelEvent);
-        this.canvas.removeEventListener('click', this.handleClickEvent);
-        document.removeEventListener('keydown', this._documentKeyDown);
-      }
-      clearInterval(this.timer);
-      clearInterval(this.redrawTimer);
-    }
-  }, {
-    key: "onFocus",
-    value: function onFocus() {
-      var isFocussed = this.props.isFocussed;
-      this._isFocussed = true;
-      if (isFocussed) {
-        isFocussed(true);
-      }
-    }
-  }, {
-    key: "onBlur",
-    value: function onBlur() {
-      var isFocussed = this.props.isFocussed;
-      this._isFocussed = false;
-      if (isFocussed) {
-        isFocussed(false);
-      }
-    }
-  }, {
-    key: "onKeyUp",
-    value: function onKeyUp(event) {
-      var onKeyUp = this.props.onKeyUp;
-      if (onKeyUp) {
-        onKeyUp(event);
-      }
-      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
-        if (event.code === 'Escape') {
-          this.canvascontaineroutside.current.focus();
-        }
-      }
-    }
-  }, {
-    key: "_documentKeyDown",
-    value: function _documentKeyDown(event) {
-      if (this._isFocussed) {
-        var onKeyDown = this.props.onKeyDown;
-        if (onKeyDown) {
-          onKeyDown(event);
-        }
-      }
-    }
-  }, {
-    key: "_handleWindowResize",
-    value: function _handleWindowResize() {
-      this.resize();
-    }
-  }, {
-    key: "startLoop",
-    value: function startLoop() {
-      var onRenderCanvas = this.props.onRenderCanvas;
-      if (this.mounted === false || this.loopHasStarted === false) {
-        return;
-      }
-      if (this.canvas) {
-        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
-      }
-      requestAnimationFrame(this.startLoop);
-    }
-  }, {
-    key: "updateCanvas",
-    value: function updateCanvas() {
-      if (!this.canvas) {
-        return;
-      }
-      var _this$props2 = this.props,
-        onRenderCanvas = _this$props2.onRenderCanvas,
-        loop = _this$props2.loop;
-      this.ctx = this.canvas.getContext('2d');
-      if (!this.ctx) {
-        return;
-      }
-      if (this.ctx.canvas.height !== this.currentHeight) {
-        this.ctx.canvas.height = this.currentHeight;
-      }
-      if (this.ctx.canvas.width !== this.currentWidth) {
-        this.ctx.canvas.width = this.currentWidth;
-      }
-      if (loop !== true) {
-        this.loopHasStarted = false;
-        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
-      } else if (this.loopHasStarted === false) {
-        this.loopHasStarted = true;
-        this.startLoop();
-      }
-    }
-  }, {
-    key: "resize",
-    value: function resize() {
-      var canvascontainer = this.canvascontainer,
-        resizeCallback = this.props.resizeCallback;
-      if (canvascontainer && canvascontainer.current) {
-        var newWidth = canvascontainer.current.clientWidth;
-        var newHeight = canvascontainer.current.clientHeight;
-        if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
-          this.currentWidth = newWidth;
-          this.currentHeight = newHeight;
-          this.updateCanvas();
-          resizeCallback && resizeCallback(newWidth);
-        }
-      }
-    }
-  }, {
-    key: "handleMouseMoveEvent",
-    value: function handleMouseMoveEvent(event) {
-      var _this$props3 = this.props,
-        onMouseMove = _this$props3.onMouseMove,
-        onCanvasClick = _this$props3.onCanvasClick;
-      var x = event.offsetX;
-      var y = event.offsetY;
-      if (event.buttons === 1) {
-        onCanvasClick(x, y, this.currentWidth, this.currentHeight);
-      }
-      onMouseMove(x, y, event, this.currentWidth);
-    }
-  }, {
-    key: "handleMouseUpEvent",
-    value: function handleMouseUpEvent(event) {
-      var onMouseUp = this.props.onMouseUp;
-      var x = event.offsetX;
-      onMouseUp(x);
-    }
-  }, {
-    key: "handleMouseDownEvent",
-    value: function handleMouseDownEvent(event) {
-      var onMouseDown = this.props.onMouseDown;
-      var x = event.offsetX;
-      var y = event.offsetY;
-      onMouseDown(x, y, this.currentWidth);
-    }
-  }, {
-    key: "handleTouchStartEvent",
-    value: function handleTouchStartEvent(event) {
-      var onTouchStart = this.props.onTouchStart;
-      onTouchStart(event, this.currentWidth);
-    }
-  }, {
-    key: "handleTouchEndEvent",
-    value: function handleTouchEndEvent() {
-      var onTouchEnd = this.props.onTouchEnd;
-      onTouchEnd();
-    }
-  }, {
-    key: "handleTouchMoveEvent",
-    value: function handleTouchMoveEvent(event) {
-      var _this$props4 = this.props,
-        onTouchMove = _this$props4.onTouchMove,
-        onCanvasClick = _this$props4.onCanvasClick;
-      var touches = event && event.touches && event.touches[0];
-      if (touches && touches.clientX && touches.clientY) {
-        var x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
-        var y2 = event.touches[0].clientY;
-        onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
-      }
-      onTouchMove(event, this.currentWidth);
-    }
-  }, {
-    key: "handleClickEvent",
-    value: function handleClickEvent(event) {
-      var onCanvasClick = this.props.onCanvasClick;
-      var x = event.offsetX;
-      var y = event.offsetY;
-      onCanvasClick(x, y, this.currentWidth, this.currentHeight);
-    }
-  }, {
-    key: "handleWheelEvent",
-    value: function handleWheelEvent(event) {
-      var onWheel = this.props.onWheel;
-      onWheel({
-        event: event,
-        deltaY: event.deltaY,
-        deltaX: event.deltaX,
-        canvasWidth: event.srcElement.width,
-        mouseX: event.offsetX
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      this.updateCanvas();
-      this._handleWindowResize();
-      return /*#__PURE__*/React__default.createElement("div", {
-        role: "button",
-        ref: this.canvascontaineroutside,
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        style: {
-          height: '100%',
-          width: '100%',
-          border: 'none',
-          display: 'block',
-          overflow: 'hidden'
-        }
-      }, /*#__PURE__*/React__default.createElement("div", {
-        ref: this.canvascontainer,
-        style: {
-          minWidth: 'inherit',
-          minHeight: 'inherit',
-          width: 'inherit',
-          height: 'inherit',
-          overflow: 'hidden',
-          display: 'block',
-          border: 'none'
-        }
-      }, /*#__PURE__*/React__default.createElement("div", {
-        style: {
-          overflow: 'visible',
-          width: 0,
-          height: 0
-        }
-      }, /*#__PURE__*/React__default.createElement("canvas", {
-        ref: function ref(canvas) {
-          _this4.canvas = canvas;
-        }
-      }))));
-    }
-  }]);
-  return CanvasComponent;
-}(Component);
-CanvasComponent.defaultProps = {
-  onRenderCanvas: function onRenderCanvas() {
-    /* intentionally left blank */
-  },
-  onCanvasClick: function onCanvasClick() {
-    /* intentionally left blank */
-  },
-  onMouseMove: function onMouseMove() {
-    /* intentionally left blank */
-  },
-  onMouseUp: function onMouseUp() {
-    /* intentionally left blank */
-  },
-  onMouseDown: function onMouseDown() {
-    /* intentionally left blank */
-  },
-  onTouchStart: function onTouchStart() {
-    /* intentionally left blank */
-  },
-  onTouchEnd: function onTouchEnd() {
-    /* intentionally left blank */
-  },
-  onTouchMove: function onTouchMove() {
-    /* intentionally left blank */
-  },
-  onWheel: function onWheel() {
-    /* intentionally left blank */
-  }
-};
-
-/* *
- * 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 LegendLayout = function LegendLayout(_ref) {
-  var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
-    children = _ref.children,
-    height = _ref.height,
-    width = _ref.width,
-    minWidth = _ref.minWidth;
-  return /*#__PURE__*/React__default.createElement(Paper, {
-    "data-testid": "legend",
-    sx: {
-      padding: '10px',
-      border: '1px solid grey',
-      backgroundColor: '#FFF',
-      overflow: 'hidden',
-      marginBottom: 0.5
-    }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
-    "data-testid": "legend-title"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: '10px',
-      minWidth: '100%',
-      wordWrap: 'break-word',
-      color: 'common.black',
-      whiteSpace: 'nowrap'
-    },
-    variant: "h3"
-  }, title)), /*#__PURE__*/React__default.createElement(CustomTooltip, {
-    title: title || 'loading',
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
-    sx: {
-      margin: '10px 0px 10px 0px',
-      height: "".concat(height, "px"),
-      width: "".concat(width, "px")
-    }
-  }, children)), /*#__PURE__*/React__default.createElement(Box$2, {
-    "data-testid": "legend-info",
-    sx: Object.assign({
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: 10,
-      color: 'common.black',
-      overflowX: 'hidden',
-      wordWrap: 'break-word',
-      whiteSpace: 'nowrap'
-    }, minWidth && {
-      minWidth: "".concat(minWidth, "px")
-    })
-  }, dimensions && dimensions.map(function (dim) {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
-      key: name + dim.name
-    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
-      style: {
-        fontWeight: 500
-      }
-    }, dim.name, ":"), dim.currentValue, " ", dim.units));
-  })));
-};
-
-var defaultCanvasWidth = 150;
-var defaultCanvasHeight = 30;
-/**
- * Renders a legendgraphic image based on a WMImage.
- *
- * @param wmImage The wmImage element to render (from WMImage.js)
- * @param ctx The canvas to render the image on
- * @param width The width you want the image to have
- * @param height The height you want the image to have
- */
-var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, height) {
-  ctx.beginPath();
-  ctx.fillStyle = 'white';
-  ctx.rect(0, 0, width, height);
-  ctx.fill();
-  if (wmImage) {
-    if (wmImage.isLoading()) {
-      /* Legend image is loading */
-      ctx.fillStyle = 'blue';
-      ctx.fillText('... loading ...', 10, 10);
-    } else if (wmImage.hasError()) {
-      /* Legend image has an error */
-      ctx.fillStyle = 'red';
-      ctx.fillText('error :(', 10, 10);
-    } else {
-      /* All OK, just draw the legend image */
-      ctx.drawImage(wmImage.getElement(), 0, 0, Math.min(wmImage.getElement().width, width), Math.min(wmImage.getElement().height, height));
-    }
-  }
-};
-var Legend = function Legend(_ref) {
-  var layer = _ref.layer;
-  /* Variable to remember the previous image */
-  var previousLegendImage = useRef(null);
-  /* Function to force rerender of this component when legend image loads */
-  var _useState = useState$1(),
-    _useState2 = _slicedToArray(_useState, 2),
-    setState = _useState2[1];
-  var layerId = layer && layer.id;
-  /* The canvas listens to the size of its container. We will update it according to the image size. */
-  var _useState3 = useState$1(defaultCanvasWidth),
-    _useState4 = _slicedToArray(_useState3, 2),
-    canvasContainerWidth = _useState4[0],
-    setCanvasContainerWidth = _useState4[1];
-  var _useState5 = useState$1(defaultCanvasHeight),
-    _useState6 = _slicedToArray(_useState5, 2),
-    canvasContainerHeight = _useState6[0],
-    setCanvasContainerHeight = _useState6[1];
-  var imageWidth;
-  var imageHeight;
-  /* Register callback to legendImagestore to trigger rerender when image is loaded. */
-  useEffect$1(function () {
-    legendImageStore.addImageEventCallback(function (image, id, imageEventType) {
-      if (imageEventType === WMImageEventType.Loaded) {
-        setState(null);
-      }
-    }, "Legend_".concat(layerId));
-    return function () {
-      legendImageStore.removeEventCallback("Legend_".concat(layerId));
-    };
-  }, [layerId]);
-  /* Should not do anything if no layer is given */
-  if (!layer) {
-    return null;
-  }
-  var isLayerEnabled = layer.enabled;
-  if (!isLayerEnabled) {
-    return null;
-  }
-  var layerOpacity = layer.opacity ? layer.opacity : 1;
-  /* Get the wmLayer, it has more detailed info about the WMS service,
-  like a title and the WMS legendgraphic url */
-  var wmLayer = getWMLayerById(layer.id);
-  return /*#__PURE__*/React__default.createElement(LegendLayout, {
-    title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
-    name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
-    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
-    height: canvasContainerHeight,
-    width: canvasContainerWidth,
-    minWidth: defaultCanvasWidth
-  }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
-    redrawInterval: 500,
-    onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-      /*
-            Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
-            Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
-           */
-      var legendWmLayer = getWMLayerById(layer.id);
-      var legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
-      var image = legendImageStore.getImage(legendUrl);
-      /* If there is no image for the given URL, we do not want to display a legend image (e.g. outside range) */
-      if (!image) {
-        previousLegendImage.current = null;
-        setCanvasContainerWidth(defaultCanvasWidth);
-        setCanvasContainerHeight(defaultCanvasHeight);
-        ctx.beginPath();
-        ctx.fillStyle = '#fff';
-        ctx.rect(0, 0, width, height);
-        ctx.fill();
-        ctx.fillStyle = 'black';
-        if (!legendUrl) {
-          ctx.fillText('No legend graphic available', 5, 16);
-        }
-      } else {
-        /* If there is an image for the given url, and has no error, but it is not yet loading or loaded, start loading it! */
-        if (image && image.hasError() === false && image.isLoaded() === false && image.isLoading() === false) {
-          image.load(); /* Will eventually trigger the callback used in the useEffect */
-        }
-        /* If the image is ready, we can show it in the component, store it in our ref, otherwise we keep the previous image to prevent flickering */
-        if (image && image.isLoaded()) {
-          previousLegendImage.current = image;
-          /* Set the canvas container to the same size as the image */
-          imageHeight = image.getHeight();
-          setCanvasContainerHeight(imageHeight);
-          imageWidth = image.getWidth();
-          setCanvasContainerWidth(imageWidth);
-          /* Give the canvas a white background before adding the image */
-          ctx.fillStyle = '#fff';
-          ctx.rect(0, 0, width, height);
-          ctx.fill();
-          /* Set the opacity used in the layer */
-          ctx.globalAlpha = layerOpacity;
-        }
-        renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
-      }
-    }
-  }));
-};
-
-/* *
- * 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 LegendDialog = function LegendDialog(_ref) {
-  var layers = _ref.layers,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    _ref$onMouseDown = _ref.onMouseDown,
-    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    mapId = _ref.mapId,
-    _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startPosition: {
-      right: 20,
-      top: 50
-    },
-    minWidth: 100,
-    onClose: onClose,
-    title: showMapId ? "Legend ".concat(mapId) : 'Legend',
-    initialMaxHeight: 440,
-    isOpen: isOpen,
-    "data-testid": "moveable-legend",
-    bounds: "parent",
-    onMouseDown: onMouseDown,
-    order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement(Box$2, {
-    sx: {
-      padding: 0.5
-    }
-  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement(Box$2, {
-    "data-testid": "LegendList",
-    sx: {
-      display: 'flex',
-      flexDirection: 'column',
-      '&>div:last-child': {
-        marginBottom: 0
-      }
-    }
-  }, layers.map(function (layer) {
-    return /*#__PURE__*/React.createElement(Legend, {
-      key: layer.id,
-      layer: layer
-    });
-  })) : /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "NoLayers",
-    variant: "body1",
-    style: {
-      fontWeight: 500,
-      fontSize: 14
-    }
-  }, "No layers")));
-};
-
-var IS_LEGEND_OPEN_BY_DEFAULT = false;
-var LegendConnectComponent = function LegendConnectComponent(_ref) {
-  var _ref$showMapId = _ref.showMapId,
-    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    _ref$mapId = _ref.mapId,
-    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
-    _ref$multiLegend = _ref.multiLegend,
-    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-  var dispatch = useDispatch();
-  var legendType = multiLegend ? "legend-".concat(initialMapId) : "legend";
-  var mapIdStore = useSelector(function (store) {
-    return getDialogMapId(store, legendType);
-  });
-  var _React$useState = React.useState(initialMapId),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    mapId = _React$useState2[0],
-    setMapId = _React$useState2[1];
-  React.useEffect(function () {
-    setMapId(mapIdStore);
-  }, [mapIdStore]);
-  var mapLayers = useSelector(function (store) {
-    return getMapLayers(store, mapId);
-  });
-  var isDialogOpen = useSelector(function (store) {
-    return getisDialogOpen(store, legendType);
-  });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, legendType);
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, legendType);
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, legendType);
-  });
-  var onClose = function onClose() {
-    dispatch(uiActions.setToggleOpenDialog({
-      type: legendType,
-      setOpen: false,
-      origin: MapActionOrigin.map,
-      mapId: mapId
-    }));
-  };
-  var registerDialog = React.useCallback(function (setOpen) {
-    return dispatch(uiActions.registerDialog({
-      type: legendType,
-      mapId: mapId,
-      setOpen: setOpen,
-      source: source
-    }));
-  }, [dispatch, source, legendType, mapId]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: legendType
-    }));
-  }, [dispatch, legendType]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: legendType
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop, legendType]);
-  // Register this dialog in the store
-  React.useEffect(function () {
-    registerDialog(IS_LEGEND_OPEN_BY_DEFAULT);
-    return function () {
-      unregisterDialog();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(LegendDialog, {
-    layers: mapLayers,
-    isOpen: isDialogOpen,
-    onClose: onClose,
-    mapId: mapId,
-    showMapId: showMapId,
-    onMouseDown: onOrderDialog,
-    order: uiOrder,
-    source: uiSource
-  });
-};
-/**
- * Legend component connected to the store displaying a legend for every layer shown on the active map Id
- * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
- * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
- *
- * Expects the following props:
- * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
- * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
-
- * ``` <LegendConnect legendDialogId={legendDialogId} />```
- */
-var LegendConnect = function LegendConnect(_a) {
-  var _a$showMapId = _a.showMapId,
-    showMapId = _a$showMapId === void 0 ? false : _a$showMapId,
-    props = __rest$1(_a, ["showMapId"]);
-  return /*#__PURE__*/React.createElement(LegendConnectComponent, Object.assign({
-    showMapId: showMapId
-  }, props));
-};
-
-var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
-  _marked2$4 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
-  _marked3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
-// Expects start, end time as moment object and interval in minutes
-var generateTimeList = function generateTimeList(start, end, interval) {
-  var timeList = [];
-  var unixStart = moment(start).utc().unix();
-  var unixEnd = moment(end).utc().unix();
-  var intervalSeconds = interval * 60;
-  for (var j = unixStart; j <= unixEnd; j += intervalSeconds) {
-    timeList.push({
-      name: 'time',
-      value: moment.unix(j).toISOString()
-    });
-  }
-  return timeList;
-};
-var getAnimationEndTime = function getAnimationEndTime(animationEndTime) {
-  var calculateFromNow = animationEndTime.split(/[-+]/)[0] === 'NOW';
-  var isAddingTime = animationEndTime.indexOf('+') !== -1;
-  var timeInMinutes = moment.duration(animationEndTime.split(/[-+]/)[1]).asMinutes();
-  var startingTime = calculateFromNow ? moment().utc() : moment().utc().startOf('day');
-  var newAnimationEndTime = isAddingTime ? moment(startingTime).add(timeInMinutes, 'minutes').toISOString() : moment(startingTime).subtract(timeInMinutes, 'minutes').toISOString();
-  return newAnimationEndTime;
-};
-var isAnimationEndTimeValid = function isAnimationEndTimeValid(animationEndTime) {
-  var hasValidPrefix = animationEndTime.split(/[-+]/)[0] === 'NOW' || animationEndTime.split(/[-+]/)[0] === 'TODAY';
-  var hasValidDate = moment.isDuration(moment.duration(animationEndTime.split(/[-+]/)[1]));
-  return hasValidPrefix && hasValidDate;
-};
-var validInitialAnimationStep = function validInitialAnimationStep(initialAnimationStep, draw) {
-  return !!initialAnimationStep && !!(draw === null || draw === void 0 ? void 0 : draw.length) && initialAnimationStep >= 0 && draw.length > initialAnimationStep;
+var validInitialAnimationStep = function validInitialAnimationStep(initialAnimationStep, draw) {
+  return !!initialAnimationStep && !!(draw === null || draw === void 0 ? void 0 : draw.length) && initialAnimationStep >= 0 && draw.length > initialAnimationStep;
 };
 function updateMapDraw(mapId, draw, initialAnimationStep) {
   var webMap = getWMJSMapById(mapId);
@@ -15864,6 +14592,53 @@ var ConnectedTree = function ConnectedTree(_ref) {
 };
 var WMSLayerTreeConnect = connectRedux$3(ConnectedTree);
 
+/* *
+ * 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 isValidService = function isValidService(service) {
+  return Object.prototype.hasOwnProperty.call(service, 'url');
+};
+var filterServices = function filterServices(presetArray) {
+  var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
+  var validServices = hasServices ? presetArray.filter(function (preset) {
+    return isValidService(preset);
+  }) : null;
+  var hasValidServices = validServices && validServices.length > 0;
+  var services = hasValidServices ? validServices : undefined;
+  return services;
+};
+var filterMapPresets = function filterMapPresets(initialAppPreset) {
+  var preset = initialAppPreset && initialAppPreset.preset || {};
+  var layers = preset.layers,
+    services = preset.services,
+    baseServices = preset.baseServices;
+  var _ref = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+    baseLayers = _ref.baseLayers,
+    mapLayers = _ref.mapLayers;
+  var filterredServices = services ? filterServices(services) : undefined;
+  var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
+  var filteredPreset = {
+    services: filterredServices,
+    baseServices: filteredBaseServices,
+    baseLayers: baseLayers,
+    mapLayers: mapLayers
+  };
+  return filteredPreset;
+};
+
 var preset = {
 	presetType: "mapPreset",
 	presetId: "mapPreset-1",
@@ -16664,8 +15439,8 @@ var getDialogType = function getDialogType(mapId, isMultiMap, isDocked) {
  * a dialog should have the <LayerManagerMapButtonConnect/> which is used to focus the correct map and open the dialog
  *
  * Expects the following props:
- * @param {Service[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
- * @param {Service[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
+ * @param {layerSelectTypes.LayerSelectService[]} preloadedMapServices preloadedMapServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader for maplayers
+ * @param {layerSelectTypes.LayerSelectService[]} preloadedBaseServices preloadedBaseServices: array of Service objects - contains an array of Service objects that are preloaded into in the WMS Loader fpr baselayers
  * @param {Layer[]} preloadedAvailableBaseLayers preloadedAvailableBaseLayers: array of Layer objects - contains an array of Layer objects (consisting solely of type baseLayer) that are available to be shown as basemaps
  * ``` <LayerManagerConnect />```
  */
@@ -18019,6 +16794,83 @@ var LayerInfoList = function LayerInfoList(_ref) {
   })));
 };
 
+/* *
+ * 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 LegendLayout = function LegendLayout(_ref) {
+  var title = _ref.title,
+    name = _ref.name,
+    dimensions = _ref.dimensions,
+    children = _ref.children,
+    height = _ref.height,
+    width = _ref.width,
+    minWidth = _ref.minWidth;
+  return /*#__PURE__*/React__default.createElement(Paper, {
+    "data-testid": "legend",
+    sx: {
+      padding: '10px',
+      border: '1px solid grey',
+      backgroundColor: '#FFF',
+      overflow: 'hidden',
+      marginBottom: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    "data-testid": "legend-title"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: '10px',
+      minWidth: '100%',
+      wordWrap: 'break-word',
+      color: 'common.black',
+      whiteSpace: 'nowrap'
+    },
+    variant: "h3"
+  }, title)), /*#__PURE__*/React__default.createElement(CustomTooltip, {
+    title: title || 'loading',
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: {
+      margin: '10px 0px 10px 0px',
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    }
+  }, children)), /*#__PURE__*/React__default.createElement(Box$2, {
+    "data-testid": "legend-info",
+    sx: Object.assign({
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: 10,
+      color: 'common.black',
+      overflowX: 'hidden',
+      wordWrap: 'break-word',
+      whiteSpace: 'nowrap'
+    }, minWidth && {
+      minWidth: "".concat(minWidth, "px")
+    })
+  }, dimensions && dimensions.map(function (dim) {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
+      key: name + dim.name
+    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
+      style: {
+        fontWeight: 500
+      }
+    }, dim.name, ":"), dim.currentValue, " ", dim.units));
+  })));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19814,37 +18666,37 @@ var LayerInfoDialogConnect = function LayerInfoDialogConnect() {
   });
 };
 
-const HookFormContext = React__default.createContext(null);
-/**
- * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
- *
- * @remarks
- * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @returns return all useForm methods
- *
- * @example
- * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
- * ```
- */
+const HookFormContext = React__default.createContext(null);
+/**
+ * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
 const useFormContext = () => React__default.useContext(HookFormContext);
 
 var style$2 = {
@@ -22888,6 +21740,364 @@ var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasW
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
 };
 
+var CanvasComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CanvasComponent, _Component);
+  var _super = _createSuper(CanvasComponent);
+  function CanvasComponent(props) {
+    var _this;
+    _classCallCheck$1(this, CanvasComponent);
+    _this = _super.call(this, props);
+    _this.canvas = null;
+    _this.ctx = null;
+    _this.currentWidth = 1;
+    _this.currentHeight = 1;
+    _this.canvascontaineroutside = null;
+    _this.canvascontainer = null;
+    _this.timer = null;
+    _this.redrawTimer = null;
+    _this.loopHasStarted = false;
+    _this.mounted = false;
+    _this.updateCanvas = _this.updateCanvas.bind(_assertThisInitialized$1(_this));
+    _this.handleMouseMoveEvent = _this.handleMouseMoveEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleMouseUpEvent = _this.handleMouseUpEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleMouseDownEvent = _this.handleMouseDownEvent.bind(_assertThisInitialized$1(_this));
+    _this.resize = _this.resize.bind(_assertThisInitialized$1(_this));
+    _this._handleWindowResize = _this._handleWindowResize.bind(_assertThisInitialized$1(_this));
+    _this.handleClickEvent = _this.handleClickEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleWheelEvent = _this.handleWheelEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleTouchStartEvent = _this.handleTouchStartEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleTouchEndEvent = _this.handleTouchEndEvent.bind(_assertThisInitialized$1(_this));
+    _this.handleTouchMoveEvent = _this.handleTouchMoveEvent.bind(_assertThisInitialized$1(_this));
+    _this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized$1(_this));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized$1(_this));
+    _this.onFocus = _this.onFocus.bind(_assertThisInitialized$1(_this));
+    _this.startLoop = _this.startLoop.bind(_assertThisInitialized$1(_this));
+    _this._documentKeyDown = _this._documentKeyDown.bind(_assertThisInitialized$1(_this));
+    _this._isFocussed = false;
+    _this.canvas = null;
+    _this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
+    _this.canvascontainer = /*#__PURE__*/React__default.createRef();
+    return _this;
+  }
+  _createClass$1(CanvasComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.mounted = true;
+      if (this.canvas) {
+        this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.addEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.addEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.addEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.addEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.addEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.addEventListener('wheel', this.handleWheelEvent);
+        this.canvas.addEventListener('click', this.handleClickEvent);
+        document.addEventListener('keydown', this._documentKeyDown, false);
+        this.resize();
+        this.updateCanvas();
+      }
+      var _this$props = this.props,
+        onKeyUp = _this$props.onKeyUp,
+        loopInterval = _this$props.redrawInterval;
+      if (onKeyUp) {
+        window.addEventListener('keyup', this.onKeyUp);
+      }
+      window.addEventListener('resize', this._handleWindowResize);
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        this.canvascontaineroutside.current.focus();
+      }
+      this.timer = setInterval(function () {
+        _this2.resize();
+      }, 1000);
+      if (loopInterval) {
+        this.redrawTimer = setInterval(function () {
+          _this2.updateCanvas();
+        }, loopInterval);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      var _this3 = this;
+      window.requestAnimationFrame(function () {
+        _this3.updateCanvas();
+      });
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+      window.removeEventListener('resize', this._handleWindowResize);
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        window.removeEventListener('keyup', this.onKeyUp);
+      }
+      if (this.canvas) {
+        this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.removeEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.removeEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.removeEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.removeEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.removeEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.removeEventListener('wheel', this.handleWheelEvent);
+        this.canvas.removeEventListener('click', this.handleClickEvent);
+        document.removeEventListener('keydown', this._documentKeyDown);
+      }
+      clearInterval(this.timer);
+      clearInterval(this.redrawTimer);
+    }
+  }, {
+    key: "onFocus",
+    value: function onFocus() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = true;
+      if (isFocussed) {
+        isFocussed(true);
+      }
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = false;
+      if (isFocussed) {
+        isFocussed(false);
+      }
+    }
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(event) {
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        onKeyUp(event);
+      }
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        if (event.code === 'Escape') {
+          this.canvascontaineroutside.current.focus();
+        }
+      }
+    }
+  }, {
+    key: "_documentKeyDown",
+    value: function _documentKeyDown(event) {
+      if (this._isFocussed) {
+        var onKeyDown = this.props.onKeyDown;
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+      }
+    }
+  }, {
+    key: "_handleWindowResize",
+    value: function _handleWindowResize() {
+      this.resize();
+    }
+  }, {
+    key: "startLoop",
+    value: function startLoop() {
+      var onRenderCanvas = this.props.onRenderCanvas;
+      if (this.mounted === false || this.loopHasStarted === false) {
+        return;
+      }
+      if (this.canvas) {
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      }
+      requestAnimationFrame(this.startLoop);
+    }
+  }, {
+    key: "updateCanvas",
+    value: function updateCanvas() {
+      if (!this.canvas) {
+        return;
+      }
+      var _this$props2 = this.props,
+        onRenderCanvas = _this$props2.onRenderCanvas,
+        loop = _this$props2.loop;
+      this.ctx = this.canvas.getContext('2d');
+      if (!this.ctx) {
+        return;
+      }
+      if (this.ctx.canvas.height !== this.currentHeight) {
+        this.ctx.canvas.height = this.currentHeight;
+      }
+      if (this.ctx.canvas.width !== this.currentWidth) {
+        this.ctx.canvas.width = this.currentWidth;
+      }
+      if (loop !== true) {
+        this.loopHasStarted = false;
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      } else if (this.loopHasStarted === false) {
+        this.loopHasStarted = true;
+        this.startLoop();
+      }
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      var canvascontainer = this.canvascontainer,
+        resizeCallback = this.props.resizeCallback;
+      if (canvascontainer && canvascontainer.current) {
+        var newWidth = canvascontainer.current.clientWidth;
+        var newHeight = canvascontainer.current.clientHeight;
+        if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
+          this.currentWidth = newWidth;
+          this.currentHeight = newHeight;
+          this.updateCanvas();
+          resizeCallback && resizeCallback(newWidth);
+        }
+      }
+    }
+  }, {
+    key: "handleMouseMoveEvent",
+    value: function handleMouseMoveEvent(event) {
+      var _this$props3 = this.props,
+        onMouseMove = _this$props3.onMouseMove,
+        onCanvasClick = _this$props3.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      if (event.buttons === 1) {
+        onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+      }
+      onMouseMove(x, y, event, this.currentWidth);
+    }
+  }, {
+    key: "handleMouseUpEvent",
+    value: function handleMouseUpEvent(event) {
+      var onMouseUp = this.props.onMouseUp;
+      var x = event.offsetX;
+      onMouseUp(x);
+    }
+  }, {
+    key: "handleMouseDownEvent",
+    value: function handleMouseDownEvent(event) {
+      var onMouseDown = this.props.onMouseDown;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onMouseDown(x, y, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchStartEvent",
+    value: function handleTouchStartEvent(event) {
+      var onTouchStart = this.props.onTouchStart;
+      onTouchStart(event, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchEndEvent",
+    value: function handleTouchEndEvent() {
+      var onTouchEnd = this.props.onTouchEnd;
+      onTouchEnd();
+    }
+  }, {
+    key: "handleTouchMoveEvent",
+    value: function handleTouchMoveEvent(event) {
+      var _this$props4 = this.props,
+        onTouchMove = _this$props4.onTouchMove,
+        onCanvasClick = _this$props4.onCanvasClick;
+      var touches = event && event.touches && event.touches[0];
+      if (touches && touches.clientX && touches.clientY) {
+        var x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
+        var y2 = event.touches[0].clientY;
+        onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
+      }
+      onTouchMove(event, this.currentWidth);
+    }
+  }, {
+    key: "handleClickEvent",
+    value: function handleClickEvent(event) {
+      var onCanvasClick = this.props.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+    }
+  }, {
+    key: "handleWheelEvent",
+    value: function handleWheelEvent(event) {
+      var onWheel = this.props.onWheel;
+      onWheel({
+        event: event,
+        deltaY: event.deltaY,
+        deltaX: event.deltaX,
+        canvasWidth: event.srcElement.width,
+        mouseX: event.offsetX
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      this.updateCanvas();
+      this._handleWindowResize();
+      return /*#__PURE__*/React__default.createElement("div", {
+        role: "button",
+        ref: this.canvascontaineroutside,
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        style: {
+          height: '100%',
+          width: '100%',
+          border: 'none',
+          display: 'block',
+          overflow: 'hidden'
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        ref: this.canvascontainer,
+        style: {
+          minWidth: 'inherit',
+          minHeight: 'inherit',
+          width: 'inherit',
+          height: 'inherit',
+          overflow: 'hidden',
+          display: 'block',
+          border: 'none'
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          overflow: 'visible',
+          width: 0,
+          height: 0
+        }
+      }, /*#__PURE__*/React__default.createElement("canvas", {
+        ref: function ref(canvas) {
+          _this4.canvas = canvas;
+        }
+      }))));
+    }
+  }]);
+  return CanvasComponent;
+}(Component);
+CanvasComponent.defaultProps = {
+  onRenderCanvas: function onRenderCanvas() {
+    /* intentionally left blank */
+  },
+  onCanvasClick: function onCanvasClick() {
+    /* intentionally left blank */
+  },
+  onMouseMove: function onMouseMove() {
+    /* intentionally left blank */
+  },
+  onMouseUp: function onMouseUp() {
+    /* intentionally left blank */
+  },
+  onMouseDown: function onMouseDown() {
+    /* intentionally left blank */
+  },
+  onTouchStart: function onTouchStart() {
+    /* intentionally left blank */
+  },
+  onTouchEnd: function onTouchEnd() {
+    /* intentionally left blank */
+  },
+  onTouchMove: function onTouchMove() {
+    /* intentionally left blank */
+  },
+  onWheel: function onWheel() {
+    /* intentionally left blank */
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -34206,6 +33416,16 @@ var getFeatureCollection = function getFeatureCollection(geoJSONFeature, shouldA
     features: [geoJSONFeature]
   });
 };
+// compares 2 geoJSONs and returns true if both have properties.selectionType with the same value
+var isGeoJSONFeatureCreatedByTool = function isGeoJSONFeatureCreatedByTool(existingJSON, newGeoJSON) {
+  var _a, _b, _c;
+  if (!existingJSON.features.length) {
+    return false;
+  }
+  var lastUsedTool = (_a = existingJSON.features[0].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
+  var newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
+  return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
+};
 
 var Proj4js = proj4;
 // Cache for for storing and reusing Proj4 instances
@@ -36144,13 +35364,24 @@ var defaultIntersectionStyleProperties = {
   'fill-opacity': 0.5
 };
 var emptyLineString = Object.assign(Object.assign({}, lineString.features[0]), {
-  properties: Object.assign({}, defaultStyleProperties)
+  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
+    selectionType: 'linestring'
+  })
 });
 var emptyPoint = Object.assign(Object.assign({}, featurePoint), {
-  properties: {}
-}); // markers currently don't have style
+  properties: {
+    selectionType: 'point'
+  }
+});
 var emptyPolygon = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign({}, defaultStyleProperties)
+  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
+    selectionType: 'poly'
+  })
+});
+var emptyBox = Object.assign(Object.assign({}, featurePolygon), {
+  properties: Object.assign(Object.assign({}, defaultStyleProperties), {
+    selectionType: 'box'
+  })
 });
 // TODO: improve this: without a feature, the custom shape does not work on first click
 var emptyIntersectionShape = Object.assign(Object.assign({}, emptyGeoJSON), {
@@ -36177,7 +35408,7 @@ var defaultBox = {
   value: DRAWMODE.BOX,
   title: 'Box',
   icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
-  shape: emptyPolygon,
+  shape: emptyBox,
   isSelectable: true
 };
 var defaultLineString = {
@@ -36198,8 +35429,8 @@ var defaultDelete = {
 };
 var defaultModes = [defaultPoint, defaultPolygon, defaultBox, defaultLineString, defaultDelete];
 var useMapDrawTool = function useMapDrawTool(_ref) {
-  var _ref$editModes = _ref.editModes,
-    editModes = _ref$editModes === void 0 ? defaultModes : _ref$editModes,
+  var _ref$defaultEditModes = _ref.defaultEditModes,
+    defaultEditModes = _ref$defaultEditModes === void 0 ? defaultModes : _ref$defaultEditModes,
     _ref$shouldAllowMulti = _ref.shouldAllowMultipleshapes,
     shouldAllowMultipleshapes = _ref$shouldAllowMulti === void 0 ? true : _ref$shouldAllowMulti,
     _ref$defaultGeoJSON = _ref.defaultGeoJSON,
@@ -36208,9 +35439,7 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     defaultGeoJSONIntersection = _ref$defaultGeoJSONIn === void 0 ? emptyIntersectionShape : _ref$defaultGeoJSONIn,
     defaultGeoJSONIntersectionBounds = _ref.defaultGeoJSONIntersectionBounds,
     _ref$defaultGeoJSONIn2 = _ref.defaultGeoJSONIntersectionProperties,
-    defaultGeoJSONIntersectionProperties = _ref$defaultGeoJSONIn2 === void 0 ? defaultIntersectionStyleProperties : _ref$defaultGeoJSONIn2,
-    _ref$defaultActiveToo = _ref.defaultActiveTool,
-    defaultActiveTool = _ref$defaultActiveToo === void 0 ? '' : _ref$defaultActiveToo;
+    defaultGeoJSONIntersectionProperties = _ref$defaultGeoJSONIn2 === void 0 ? defaultIntersectionStyleProperties : _ref$defaultGeoJSONIn2;
   // geoJSON feature collections
   var _React$useState = React__default.useState(defaultGeoJSON),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -36225,14 +35454,14 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     geoJSONIntersectionBounds = _React$useState6[0],
     setGeoJSONIntersectionBounds = _React$useState6[1];
   // state
-  var _React$useState7 = React__default.useState(defaultActiveTool),
+  var _React$useState7 = React__default.useState(defaultEditModes),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    activeTool = _React$useState8[0],
-    setActiveTool = _React$useState8[1];
-  var _React$useState9 = React__default.useState(defaultActiveTool),
+    editModes = _React$useState8[0],
+    setEditModes = _React$useState8[1];
+  var _React$useState9 = React__default.useState(''),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    lastSelectedTool = _React$useState10[0],
-    setLastSelectedTool = _React$useState10[1];
+    activeTool = _React$useState10[0],
+    setActiveTool = _React$useState10[1];
   var _React$useState11 = React__default.useState(''),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
     drawMode = _React$useState12[0],
@@ -36254,15 +35483,15 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     }
     setActiveTool(newMode.id);
     // updates shape
-    var isNewSelectedTool = newMode.id !== '' && lastSelectedTool !== newMode.id;
-    if (!geoJSON.features.length || shouldAllowMultipleshapes || isNewSelectedTool) {
+    var isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
+    var shouldUpdateShape = !geoJSON.features.length || shouldAllowMultipleshapes || isNewSelectedTool;
+    if (shouldUpdateShape) {
       var updatedGeoJSON = changeGeoJSON(newMode.shape);
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
     }
     // handle modes and update feature layer index
     setDrawMode(newMode.value);
     setEditMode(!!newMode.value);
-    setLastSelectedTool(newMode.id);
   };
   var changeGeoJSON = function changeGeoJSON(updatedGeoJSON) {
     var geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, shouldAllowMultipleshapes, geoJSON);
@@ -36288,11 +35517,14 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
       setActiveTool(newActiveTool.id);
     }
   };
-  var reset = function reset() {
-    var shouldClearState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var deactivateTool = function deactivateTool() {
     setEditMode(false);
     setActiveTool('');
     setDrawMode('');
+  };
+  var reset = function reset() {
+    var shouldClearState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    deactivateTool();
     if (shouldClearState) {
       setGeoJSONIntersection(emptyIntersectionShape);
       setGeoJSON(emptyGeoJSON);
@@ -36327,7 +35559,6 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     setGeoJSONIntersectionBounds: onSetGeoJSONIntersectionBounds,
     editModes: editModes,
     isInEditMode: isInEditMode,
-    drawMode: drawMode,
     changeDrawMode: onSetDrawMode,
     setEditMode: setEditMode,
     featureLayerIndex: featureLayerIndex,
@@ -36336,7 +35567,9 @@ var useMapDrawTool = function useMapDrawTool(_ref) {
     changeActiveTool: changeActiveTool,
     setActiveTool: setActiveTool,
     layers: layers,
-    getLayer: getLayer
+    getLayer: getLayer,
+    deactivateTool: deactivateTool,
+    setEditModes: setEditModes
   };
 };
 
@@ -37583,6 +36816,310 @@ var MapViewConnect = function MapViewConnect(_a) {
   }), children));
 };
 
+var defaultCanvasWidth = 150;
+var defaultCanvasHeight = 30;
+/**
+ * Renders a legendgraphic image based on a WMImage.
+ *
+ * @param wmImage The wmImage element to render (from WMImage.js)
+ * @param ctx The canvas to render the image on
+ * @param width The width you want the image to have
+ * @param height The height you want the image to have
+ */
+var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, height) {
+  ctx.beginPath();
+  ctx.fillStyle = 'white';
+  ctx.rect(0, 0, width, height);
+  ctx.fill();
+  if (wmImage) {
+    if (wmImage.isLoading()) {
+      /* Legend image is loading */
+      ctx.fillStyle = 'blue';
+      ctx.fillText('... loading ...', 10, 10);
+    } else if (wmImage.hasError()) {
+      /* Legend image has an error */
+      ctx.fillStyle = 'red';
+      ctx.fillText('error :(', 10, 10);
+    } else {
+      /* All OK, just draw the legend image */
+      ctx.drawImage(wmImage.getElement(), 0, 0, Math.min(wmImage.getElement().width, width), Math.min(wmImage.getElement().height, height));
+    }
+  }
+};
+var Legend = function Legend(_ref) {
+  var layer = _ref.layer;
+  /* Variable to remember the previous image */
+  var previousLegendImage = useRef(null);
+  /* Function to force rerender of this component when legend image loads */
+  var _useState = useState$1(),
+    _useState2 = _slicedToArray(_useState, 2),
+    setState = _useState2[1];
+  var layerId = layer && layer.id;
+  /* The canvas listens to the size of its container. We will update it according to the image size. */
+  var _useState3 = useState$1(defaultCanvasWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canvasContainerWidth = _useState4[0],
+    setCanvasContainerWidth = _useState4[1];
+  var _useState5 = useState$1(defaultCanvasHeight),
+    _useState6 = _slicedToArray(_useState5, 2),
+    canvasContainerHeight = _useState6[0],
+    setCanvasContainerHeight = _useState6[1];
+  var imageWidth;
+  var imageHeight;
+  /* Register callback to legendImagestore to trigger rerender when image is loaded. */
+  useEffect$1(function () {
+    legendImageStore.addImageEventCallback(function (image, id, imageEventType) {
+      if (imageEventType === WMImageEventType.Loaded) {
+        setState(null);
+      }
+    }, "Legend_".concat(layerId));
+    return function () {
+      legendImageStore.removeEventCallback("Legend_".concat(layerId));
+    };
+  }, [layerId]);
+  /* Should not do anything if no layer is given */
+  if (!layer) {
+    return null;
+  }
+  var isLayerEnabled = layer.enabled;
+  if (!isLayerEnabled) {
+    return null;
+  }
+  var layerOpacity = layer.opacity ? layer.opacity : 1;
+  /* Get the wmLayer, it has more detailed info about the WMS service,
+  like a title and the WMS legendgraphic url */
+  var wmLayer = getWMLayerById(layer.id);
+  return /*#__PURE__*/React__default.createElement(LegendLayout, {
+    title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
+    name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
+    height: canvasContainerHeight,
+    width: canvasContainerWidth,
+    minWidth: defaultCanvasWidth
+  }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
+    redrawInterval: 500,
+    onRenderCanvas: function onRenderCanvas(ctx, width, height) {
+      /*
+            Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
+            Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
+           */
+      var legendWmLayer = getWMLayerById(layer.id);
+      var legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
+      var image = legendImageStore.getImage(legendUrl);
+      /* If there is no image for the given URL, we do not want to display a legend image (e.g. outside range) */
+      if (!image) {
+        previousLegendImage.current = null;
+        setCanvasContainerWidth(defaultCanvasWidth);
+        setCanvasContainerHeight(defaultCanvasHeight);
+        ctx.beginPath();
+        ctx.fillStyle = '#fff';
+        ctx.rect(0, 0, width, height);
+        ctx.fill();
+        ctx.fillStyle = 'black';
+        if (!legendUrl) {
+          ctx.fillText('No legend graphic available', 5, 16);
+        }
+      } else {
+        /* If there is an image for the given url, and has no error, but it is not yet loading or loaded, start loading it! */
+        if (image && image.hasError() === false && image.isLoaded() === false && image.isLoading() === false) {
+          image.load(); /* Will eventually trigger the callback used in the useEffect */
+        }
+        /* If the image is ready, we can show it in the component, store it in our ref, otherwise we keep the previous image to prevent flickering */
+        if (image && image.isLoaded()) {
+          previousLegendImage.current = image;
+          /* Set the canvas container to the same size as the image */
+          imageHeight = image.getHeight();
+          setCanvasContainerHeight(imageHeight);
+          imageWidth = image.getWidth();
+          setCanvasContainerWidth(imageWidth);
+          /* Give the canvas a white background before adding the image */
+          ctx.fillStyle = '#fff';
+          ctx.rect(0, 0, width, height);
+          ctx.fill();
+          /* Set the opacity used in the layer */
+          ctx.globalAlpha = layerOpacity;
+        }
+        renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
+      }
+    }
+  }));
+};
+
+/* *
+ * 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 LegendDialog = function LegendDialog(_ref) {
+  var layers = _ref.layers,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$onMouseDown = _ref.onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    mapId = _ref.mapId,
+    _ref$showMapId = _ref.showMapId,
+    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    startPosition: {
+      right: 20,
+      top: 50
+    },
+    minWidth: 100,
+    onClose: onClose,
+    title: showMapId ? "Legend ".concat(mapId) : 'Legend',
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-legend",
+    bounds: "parent",
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React.createElement(Box$2, {
+    sx: {
+      padding: 0.5
+    }
+  }, layers && layers.length > 0 ? /*#__PURE__*/React.createElement(Box$2, {
+    "data-testid": "LegendList",
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      '&>div:last-child': {
+        marginBottom: 0
+      }
+    }
+  }, layers.map(function (layer) {
+    return /*#__PURE__*/React.createElement(Legend, {
+      key: layer.id,
+      layer: layer
+    });
+  })) : /*#__PURE__*/React.createElement(Typography, {
+    "data-testid": "NoLayers",
+    variant: "body1",
+    style: {
+      fontWeight: 500,
+      fontSize: 14
+    }
+  }, "No layers")));
+};
+
+var LegendConnectComponent = function LegendConnectComponent(_ref) {
+  var _ref$showMapId = _ref.showMapId,
+    showMapId = _ref$showMapId === void 0 ? false : _ref$showMapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    _ref$mapId = _ref.mapId,
+    initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
+    _ref$multiLegend = _ref.multiLegend,
+    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+  var dispatch = useDispatch();
+  var legendType = multiLegend ? "legend-".concat(initialMapId) : "legend";
+  var mapIdStore = useSelector(function (store) {
+    return getDialogMapId(store, legendType);
+  });
+  var _React$useState = React.useState(initialMapId),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mapId = _React$useState2[0],
+    setMapId = _React$useState2[1];
+  React.useEffect(function () {
+    setMapId(mapIdStore);
+  }, [mapIdStore]);
+  var mapLayers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+  var isDialogOpen = useSelector(function (store) {
+    return getisDialogOpen(store, legendType);
+  });
+  var uiOrder = useSelector(function (store) {
+    return getDialogOrder(store, legendType);
+  });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, legendType);
+  });
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, legendType);
+  });
+  var onClose = function onClose() {
+    dispatch(uiActions.setToggleOpenDialog({
+      type: legendType,
+      setOpen: false,
+      origin: MapActionOrigin.map,
+      mapId: mapId
+    }));
+  };
+  var registerDialog = React.useCallback(function (setOpen) {
+    return dispatch(uiActions.registerDialog({
+      type: legendType,
+      mapId: mapId,
+      setOpen: setOpen,
+      source: source
+    }));
+  }, [dispatch, source, legendType, mapId]);
+  var unregisterDialog = React.useCallback(function () {
+    return dispatch(uiActions.unregisterDialog({
+      type: legendType
+    }));
+  }, [dispatch, legendType]);
+  var onOrderDialog = React.useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(uiActions.orderDialog({
+        type: legendType
+      }));
+    }
+  }, [dispatch, uiIsOrderedOnTop, legendType]);
+  // Register this dialog in the store
+  React.useEffect(function () {
+    registerDialog(IS_LEGEND_OPEN_BY_DEFAULT);
+    return function () {
+      unregisterDialog();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(LegendDialog, {
+    layers: mapLayers,
+    isOpen: isDialogOpen,
+    onClose: onClose,
+    mapId: mapId,
+    showMapId: showMapId,
+    onMouseDown: onOrderDialog,
+    order: uiOrder,
+    source: uiSource
+  });
+};
+/**
+ * Legend component connected to the store displaying a legend for every layer shown on the active map Id
+ * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
+ * a dialog should have the <LegendMapButtonConnect/> which is used to focus the correct map and open the dialog
+ *
+ * Expects the following props:
+ * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
+ * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
+
+ * ``` <LegendConnect legendDialogId={legendDialogId} />```
+ */
+var LegendConnect = function LegendConnect(_a) {
+  var _a$showMapId = _a.showMapId,
+    showMapId = _a$showMapId === void 0 ? false : _a$showMapId,
+    props = __rest$1(_a, ["showMapId"]);
+  return /*#__PURE__*/React.createElement(LegendConnectComponent, Object.assign({
+    showMapId: showMapId
+  }, props));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -58761,111 +58298,630 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var mapBoxStyle = function mapBoxStyle(theme) {
+  return {
+    boxSizing: 'border-box',
+    "float": 'left',
+    '& .MapViewComponent': {
+      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
+    }
+  };
+};
+var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
+  var maps = _ref.maps,
+    rows = _ref.rows,
+    cols = _ref.cols,
+    _ref$showTimeSlider = _ref.showTimeSlider,
+    showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
+    _ref$showZoomControls = _ref.showZoomControls,
+    showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
+    _ref$multiLegend = _ref.multiLegend,
+    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend,
+    _ref$showClock = _ref.showClock,
+    showClock = _ref$showClock === void 0 ? true : _ref$showClock;
+  var dispatch = useDispatch();
+  var syncGroupAddTarget = React__default.useCallback(function (payload) {
+    dispatch(genericActions.syncGroupAddTarget(payload));
+  }, [dispatch]);
+  var syncTargets = useSelector(function (store) {
+    return getSyncGroupTargets(store);
+  });
+  React__default.useEffect(function () {
+    maps.forEach(function (map) {
+      map.syncGroupsIds && map.syncGroupsIds.forEach(function (syncGroupsId) {
+        var alreadySyncedTargetIndex = syncTargets.findIndex(function (target) {
+          return target.targetId === map.id && target.groupId === syncGroupsId && target.linked === true;
+        });
+        // Only trigger an action if the target was not yet added to the group or was not linked.
+        if (alreadySyncedTargetIndex === -1) {
+          syncGroupAddTarget({
+            groupId: syncGroupsId,
+            targetId: map.id,
+            linked: true,
+            origin: 'system'
+          });
+        }
+      });
+    });
+  }, [maps, syncGroupAddTarget, syncTargets]);
+  var mapStyle = {
+    width: "".concat(Math.round(100 / cols), "%"),
+    height: "".concat(Math.round(100 / rows), "%")
+  };
+  var firstMapId = maps[0].id;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: '100%',
+      position: 'relative'
+    },
+    "data-testid": "MultiMapViewSliderConnect"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0px',
+      bottom: '0px',
+      zIndex: 1000,
+      width: '100%'
+    }
+  }, showTimeSlider && /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
+    sourceId: firstMapId,
+    mapId: firstMapId,
+    isAlwaysVisible: true
+  })), !multiLegend && /*#__PURE__*/React__default.createElement(LegendConnect, {
+    showMapId: true,
+    mapId: firstMapId,
+    multiLegend: multiLegend
+  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
+    mapId: firstMapId
+  }), maps.map(function (map, mapIndex) {
+    var mapId = map.id;
+    return /*#__PURE__*/React__default.createElement(Box$2, {
+      key: mapId,
+      style: mapStyle,
+      sx: mapBoxStyle
+    }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
+      title: map.title || mapId,
+      id: mapId,
+      layers: map.layers || [],
+      autoTimeStepLayerId: map.autoTimeStepLayerId,
+      autoUpdateLayerId: map.autoUpdateLayerId,
+      bbox: map.bbox,
+      srs: map.srs,
+      dimensions: map.dimensions || [],
+      displayTimeInMap: map.displayTimeInMap || false,
+      displayLayerManagerAndLegendButtonInMap: map.displayLayerManagerAndLegendButtonInMap,
+      displayDimensionSelectButtonInMap: map.displayDimensionSelectButtonInMap,
+      shouldShowZoomControls: showZoomControls && mapIndex === 0,
+      showTimeSlider: false,
+      disableTimeSlider: true,
+      showClock: false,
+      multiLegend: multiLegend
+    }));
+  }));
+};
+
+/* *
+ * 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 DWD = {
+  name: 'DWD',
+  url: 'https://maps.dwd.de/geoserver/ows?',
+  id: 'dwd'
+};
+var nationaalgeoregister = {
+  name: 'nationaalgeoregister.nl',
+  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
+  id: 'nationaalgeoregister'
+};
+var KNMImsgcpp = {
+  name: 'KNMImsgcpp',
+  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
+  id: 'msgcpp-ogc-realtime'
+};
+var HeiGit = {
+  name: 'HeiGit',
+  url: 'https://maps.heigit.org/osm-wms/service',
+  id: 'HeiGit-osm-wms'
+};
+var ArcGisCanvas = {
+  name: 'ArcGisCanvas',
+  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
+  id: 'ArcGisCanvas'
+};
+var KNMIgeoservicesRadar = {
+  name: 'KNMIgeoservicesRadar',
+  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
+  id: 'KNMIgeoservicesRadar'
+};
+var KNMIgeoservicesObs = {
+  name: 'KNMIgeoservicesObs',
+  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
+  id: 'KNMIgeoservicesObs'
+};
+var KNMIgeoservicesKlimaatAtlas = {
+  name: 'KNMIgeoservicesKlimaatAtlas',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
+  id: 'KNMIgeoservicesKlimaatAtlas'
+};
+var KNMIgeoservicesHarmonie = {
+  name: 'KNMIgeoservicesHarmonie',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
+  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
+};
+var KNMIgeoservicesHarmonieMLService = {
+  name: 'KNMI Harmonie ML',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
+  id: 'harmonieML'
+};
+var MetNorwayService = {
+  name: 'MetNorwayService',
+  url: 'https://wms-e1.geoweb.met.no/wms?',
+  id: 'MetNorwayService'
+};
+var FMIopenwms = {
+  name: 'FMIopenwms',
+  url: 'https://openwms.fmi.fi/geoserver/wms?',
+  id: 'FMIopenwms'
+};
+var DWDObservations = {
+  name: 'DWDObservations',
+  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
+  id: 'DWDObservations'
+};
+var DWDWarnings = {
+  name: 'DWDWarnings',
+  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
+  id: 'DWDWarnings'
+};
+var DWDWXProdukt = {
+  name: 'DWDWXProdukt',
+  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
+  id: 'DWDWXProdukt'
+};
+var EUMETSAT = {
+  name: 'EUMETSAT',
+  url: 'https://view.eumetsat.int/geoserver/wms?',
+  id: 'EUMETSAT'
+};
+var eumetviewEUMETSAT = {
+  name: 'eumetviewEUMETSAT',
+  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
+  id: 'eumetviewEUMETSAT'
+};
+var ECMWFPublicService = {
+  name: 'ECMWF',
+  url: 'https://eccharts.ecmwf.int/wms/?token=public',
+  id: 'ecmwf'
+};
+var MeteoCanada = {
+  name: 'Meteo Canada',
+  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
+  id: 'MeteoCanada'
+};
+
+var publicServices = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DWD: DWD,
+    nationaalgeoregister: nationaalgeoregister,
+    KNMImsgcpp: KNMImsgcpp,
+    HeiGit: HeiGit,
+    ArcGisCanvas: ArcGisCanvas,
+    KNMIgeoservicesRadar: KNMIgeoservicesRadar,
+    KNMIgeoservicesObs: KNMIgeoservicesObs,
+    KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
+    KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
+    KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
+    MetNorwayService: MetNorwayService,
+    FMIopenwms: FMIopenwms,
+    DWDObservations: DWDObservations,
+    DWDWarnings: DWDWarnings,
+    DWDWXProdukt: DWDWXProdukt,
+    EUMETSAT: EUMETSAT,
+    eumetviewEUMETSAT: eumetviewEUMETSAT,
+    ECMWFPublicService: ECMWFPublicService,
+    MeteoCanada: MeteoCanada
+});
+
+/* *
+ * 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 mapBoxStyle = function mapBoxStyle(theme) {
-  return {
-    boxSizing: 'border-box',
-    "float": 'left',
-    '& .MapViewComponent': {
-      border: "1px solid ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled)
-    }
-  };
+var baseLayer$1 = {
+  name: 'arcGisSat',
+  title: 'arcGisSat',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true,
+  id: generateLayerId()
 };
-var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
-  var maps = _ref.maps,
-    rows = _ref.rows,
-    cols = _ref.cols,
-    _ref$showTimeSlider = _ref.showTimeSlider,
-    showTimeSlider = _ref$showTimeSlider === void 0 ? true : _ref$showTimeSlider,
-    _ref$showZoomControls = _ref.showZoomControls,
-    showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
-    _ref$multiLegend = _ref.multiLegend,
-    multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend,
-    _ref$showClock = _ref.showClock,
-    showClock = _ref$showClock === void 0 ? true : _ref$showClock;
-  var dispatch = useDispatch();
-  var syncGroupAddTarget = React__default.useCallback(function (payload) {
-    dispatch(genericActions.syncGroupAddTarget(payload));
-  }, [dispatch]);
-  var syncTargets = useSelector(function (store) {
-    return getSyncGroupTargets(store);
-  });
-  React__default.useEffect(function () {
-    maps.forEach(function (map) {
-      map.syncGroupsIds && map.syncGroupsIds.forEach(function (syncGroupsId) {
-        var alreadySyncedTargetIndex = syncTargets.findIndex(function (target) {
-          return target.targetId === map.id && target.groupId === syncGroupsId && target.linked === true;
-        });
-        // Only trigger an action if the target was not yet added to the group or was not linked.
-        if (alreadySyncedTargetIndex === -1) {
-          syncGroupAddTarget({
-            groupId: syncGroupsId,
-            targetId: map.id,
-            linked: true,
-            origin: 'system'
-          });
-        }
-      });
-    });
-  }, [maps, syncGroupAddTarget, syncTargets]);
-  var mapStyle = {
-    width: "".concat(Math.round(100 / cols), "%"),
-    height: "".concat(Math.round(100 / rows), "%")
-  };
-  var firstMapId = maps[0].id;
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      height: '100%',
-      position: 'relative'
-    },
-    "data-testid": "MultiMapViewSliderConnect"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: '0px',
-      bottom: '0px',
-      zIndex: 1000,
-      width: '100%'
-    }
-  }, showTimeSlider && /*#__PURE__*/React__default.createElement(TimeSliderConnect, {
-    sourceId: firstMapId,
-    mapId: firstMapId,
-    isAlwaysVisible: true
-  })), !multiLegend && /*#__PURE__*/React__default.createElement(LegendConnect, {
-    showMapId: true,
-    mapId: firstMapId,
-    multiLegend: multiLegend
-  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
-    mapId: firstMapId
-  }), maps.map(function (map, mapIndex) {
-    var mapId = map.id;
-    return /*#__PURE__*/React__default.createElement(Box$2, {
-      key: mapId,
-      style: mapStyle,
-      sx: mapBoxStyle
-    }, /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, {
-      title: map.title || mapId,
-      id: mapId,
-      layers: map.layers || [],
-      autoTimeStepLayerId: map.autoTimeStepLayerId,
-      autoUpdateLayerId: map.autoUpdateLayerId,
-      bbox: map.bbox,
-      srs: map.srs,
-      dimensions: map.dimensions || [],
-      displayTimeInMap: map.displayTimeInMap || false,
-      displayLayerManagerAndLegendButtonInMap: map.displayLayerManagerAndLegendButtonInMap,
-      displayDimensionSelectButtonInMap: map.displayDimensionSelectButtonInMap,
-      shouldShowZoomControls: showZoomControls && mapIndex === 0,
-      showTimeSlider: false,
-      disableTimeSlider: true,
-      showClock: false,
-      multiLegend: multiLegend
-    }));
-  }));
+// Base Layers List
+var baseLayerOpenStreetMapNL$1 = {
+  id: 'base-layer-2',
+  name: 'OpenStreetMap_NL',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+var baseLayerArcGisCanvas$1 = {
+  service: ArcGisCanvas.url,
+  id: generateLayerId(),
+  name: 'arcGisCanvas',
+  type: 'twms',
+  enabled: true,
+  layerType: LayerType.baseLayer
+};
+var baseLayerWorldMap$1 = {
+  id: generateLayerId(),
+  name: 'WorldMap',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+var baseLayerHeiGit = {
+  service: HeiGit.url,
+  id: generateLayerId(),
+  name: 'osm_auto:all',
+  layerType: LayerType.baseLayer
+};
+// KNMI msgcpp List
+var msgCppLayer = {
+  // doesn't work with https
+  service: KNMImsgcpp.url,
+  name: 'lwe_precipitation_rate',
+  format: 'image/png',
+  enabled: true,
+  style: 'precip-transparent/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// Nederlandse Nationaal Georegister Layers list
+var veiligheidsRegiosGebiedsIndelingenLabels = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
+  style: 'CBS_Label',
+  enabled: false,
+  layerType: LayerType.mapLayer
+};
+var veiligheidsRegiosGebiedsIndelingen = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
+  style: 'CBS_Gebiedsindeling',
+  enabled: false,
+  layerType: LayerType.mapLayer
+};
+// KNMI Geoservices Layers List
+var radarLayer$1 = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'RAD_NL25_PCP_CM',
+  format: 'image/png',
+  enabled: true,
+  style: 'radar/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var radarLayerWithError = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'radarLayer',
+  format: 'image/png',
+  enabled: true,
+  style: 'knmiradar/nearest',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsAirTemperature = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/ta',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsWind = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/wind',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsAirPressureAtSeaLevel = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pp',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsRelativeHumidity = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/rh',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsGlobalSolarRadiation = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/qg',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var obsPrecipitationIntensityPWS = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pg',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var harmonieRelativeHumidityPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'relative_humidity__at_pl',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieWindPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_pl',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieAirTemperature = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_temperature__at_2m',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmoniePrecipitation = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'precipitation_flux',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmoniePressure = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_pressure_at_sea_level',
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+var harmonieWindFlags = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_10m',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var klimaatAtlasTG3 = {
+  service: KNMIgeoservicesKlimaatAtlas.url,
+  name: 'TG3',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// DWD Layers List
+var dwdWarningLayer = {
+  service: DWDWarnings.url,
+  name: 'Warnungen_Gemeinden_vereinigt',
+  format: 'image/png',
+  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var dwdRadarLayer = {
+  service: DWDWXProdukt.url,
+  name: 'WX-Produkt',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// this needs authentication to work
+var dwdObservationsWetterLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+  // headers: [{ name: 'Authorization', value: 'Basic ...' }]
+};
+
+var dwdObservationsWetterLayerWithHeader = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer,
+  headers: [{
+    name: 'authorization',
+    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
+  }]
+};
+// this needs authentication to work
+var dwdObservationsWindLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// FMI open wms Layers List
+var FMITemp = {
+  service: FMIopenwms.url,
+  name: 'temperature-forecast',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// Met Norway Layers List
+var MetNoTemp = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind1 = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind2 = {
+  service: MetNorwayService.url,
+  name: 'thredds_aromearctic_extracted_t',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayWind3 = {
+  service: MetNorwayService.url,
+  name: 'thredds_nk800_temperature',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwayLatestT = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_t',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var metNorwaySalinaty = {
+  service: MetNorwayService.url,
+  name: 'thredds_barents_2_5km_1h_salinity',
+  format: 'image/png',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgFesEUMETSAT = {
+  service: EUMETSAT.url,
+  name: 'msg_fes:rgb_eview',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgNaturalenhncdEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_naturalenhncd',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgAshEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_ash',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgCthEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_cth',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgFogEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_fog',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+var msgNaturalEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_natural',
+  enabled: true,
+  id: generateLayerId(),
+  layerType: LayerType.mapLayer
 };
 
+var publicLayers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    baseLayer: baseLayer$1,
+    baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL$1,
+    baseLayerArcGisCanvas: baseLayerArcGisCanvas$1,
+    baseLayerWorldMap: baseLayerWorldMap$1,
+    baseLayerHeiGit: baseLayerHeiGit,
+    msgCppLayer: msgCppLayer,
+    veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
+    veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
+    radarLayer: radarLayer$1,
+    radarLayerWithError: radarLayerWithError,
+    obsAirTemperature: obsAirTemperature,
+    obsWind: obsWind,
+    obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
+    obsRelativeHumidity: obsRelativeHumidity,
+    obsGlobalSolarRadiation: obsGlobalSolarRadiation,
+    obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
+    harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
+    harmonieWindPl: harmonieWindPl,
+    harmonieAirTemperature: harmonieAirTemperature,
+    harmoniePrecipitation: harmoniePrecipitation,
+    harmoniePressure: harmoniePressure,
+    harmonieWindFlags: harmonieWindFlags,
+    klimaatAtlasTG3: klimaatAtlasTG3,
+    dwdWarningLayer: dwdWarningLayer,
+    dwdRadarLayer: dwdRadarLayer,
+    dwdObservationsWetterLayer: dwdObservationsWetterLayer,
+    dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
+    dwdObservationsWindLayer: dwdObservationsWindLayer,
+    FMITemp: FMITemp,
+    MetNoTemp: MetNoTemp,
+    metNorwayWind1: metNorwayWind1,
+    metNorwayWind2: metNorwayWind2,
+    metNorwayWind3: metNorwayWind3,
+    metNorwayLatestT: metNorwayLatestT,
+    metNorwaySalinaty: metNorwaySalinaty,
+    msgFesEUMETSAT: msgFesEUMETSAT,
+    msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
+    msgAshEUMETSAT: msgAshEUMETSAT,
+    msgCthEUMETSAT: msgCthEUMETSAT,
+    msgFogEUMETSAT: msgFogEUMETSAT,
+    msgNaturalEUMETSAT: msgNaturalEUMETSAT,
+    overLayer: overLayer$1,
+    baseLayerGrey: baseLayerGrey$1
+});
+
 var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -61510,4 +61566,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DRAWMODE, EDITMODE, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControlButton, MapControls, MapDrawContainer, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index$2 as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, addFeatureProperties, appActions, checkHoverFeatures, componentsLookUp, coreModuleConfig, createInterSections, dateFormat, defaultBbox, defaultBox, defaultConfigurations, defaultDelete, defaultPoint, defaultPolygon, distance, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFeatureCollection, getFirstTimeStepForLayerId, getGeoJson, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, intersectGeoJSONS, layerActions, reducer$7 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, lineString, mapActions, enums as mapEnums, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils$1 as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, selectors$5 as serviceSelectors, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$3 as uiSelectors, types$1 as uiTypes, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, useFetchServices, useMapDrawTool, useSetupDialog, reducer$5 as webmapReducer };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DRAWMODE, EDITMODE, FilterType, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControlButton, MapControls, MapDrawContainer, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index$2 as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, addFeatureProperties, appActions, checkHoverFeatures, componentsLookUp, coreModuleConfig, createInterSections, dateFormat, defaultBbox, defaultBox, defaultConfigurations, defaultDelete, defaultPoint, defaultPolygon, distance, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFeatureCollection, getFirstTimeStepForLayerId, getGeoJson, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, intersectGeoJSONS, isGeoJSONFeatureCreatedByTool, layerActions, reducer$7 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, lineString, mapActions, enums as mapEnums, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils$1 as mapUtils, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, selectors$5 as serviceSelectors, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$3 as uiSelectors, types$1 as uiTypes, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, useFetchServices, useMapDrawTool, useSetupDialog, reducer$5 as webmapReducer };