@mapcomponents/react-maplibre 1.0.8 → 1.0.10

package/dist/index.cjs.js

@@ -84,6 +84,8 @@ var SpeedDialAction = require('@mui/material/SpeedDialAction');
 var LayersIcon = require('@mui/icons-material/Layers');
 var DesignServicesIcon = require('@mui/icons-material/DesignServices');
 var PictureAsPdfIcon = require('@mui/icons-material/PictureAsPdf');
+var reactRedux = require('react-redux');
+var toolkit = require('@reduxjs/toolkit');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -2029,9 +2031,9 @@ function featureEditorStyle() {
                 ['!=', 'mode', 'static'],
             ],
             paint: {
-                'fill-color': '#3bb2d0',
-                'fill-outline-color': '#3bb2d0',
-                'fill-opacity': 0.1,
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
+                'fill-opacity': 0.3,
             },
         },
         {
@@ -2039,18 +2041,9 @@ function featureEditorStyle() {
             type: 'fill',
             filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
             paint: {
-                'fill-color': '#fbb03b',
-                'fill-outline-color': '#fbb03b',
-                'fill-opacity': 0.1,
-            },
-        },
-        {
-            id: 'gl-draw-polygon-midpoint',
-            type: 'circle',
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-            paint: {
-                'circle-radius': mediaIsMobile ? 7 : 5,
-                'circle-color': '#fbb03b',
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
+                'fill-opacity': 0.2,
             },
         },
         {
@@ -2067,8 +2060,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2080,7 +2073,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#fbb03b',
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2099,8 +2092,8 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#3bb2d0',
-                'line-width': 2,
+                'line-color': '#009EE0',
+                'line-width': 3,
             },
         },
         {
@@ -2112,11 +2105,22 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': '#fbb03b',
+                'line-color': "#009EE0",
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
         },
+        {
+            id: 'gl-draw-polygon-midpoint',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 5 : 4,
+                'circle-color': '#ffffff',
+                'circle-stroke-color': '#009EE0',
+                'circle-stroke-width': 1
+            },
+        },
         {
             id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
             type: 'circle',
@@ -2132,7 +2136,9 @@ function featureEditorStyle() {
             filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
             paint: {
                 'circle-radius': mediaIsMobile ? 7 : 5,
-                'circle-color': '#fbb03b',
+                'circle-color': '#ffffff',
+                'circle-stroke-color': '#009EE0',
+                'circle-stroke-width': 1
             },
         },
         {
@@ -2148,7 +2154,7 @@ function featureEditorStyle() {
             paint: {
                 'circle-radius': mediaIsMobile ? 10 : 9,
                 'circle-opacity': 1,
-                'circle-color': '#fff',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2163,7 +2169,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 7.5 : 6.5,
-                'circle-color': '#3bb2d0',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2191,7 +2197,7 @@ function featureEditorStyle() {
             ],
             paint: {
                 'circle-radius': mediaIsMobile ? 8.5 : 7.5,
-                'circle-color': '#fbb03b',
+                'circle-color': '#009EE0',
             },
         },
         {
@@ -2930,7 +2936,7 @@ var MlFollowGps = function (props) {
             ];
             var accurancyBounds = turf.bbox(accuracyGeoJson);
             var contained = turf.booleanContains(turf.bboxPolygon(actualBounds), turf.bboxPolygon(accurancyBounds));
-            if (contained === false) {
+            if (!contained) {
                 (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.fitBounds(accurancyBounds, {
                     padding: { top: 25, bottom: 25 },
                 });
@@ -3009,46 +3015,93 @@ var MlImageMarkerLayer = function (props) {
     return React.createElement(React.Fragment, null);
 };
 
-//const unitSquareConvert = {
-//	kilometers: 1,
-//	miles: 1 / 2.58998811,
-//};
-function getUnitSquareMultiplier(measureType) {
-    return measureType === 'miles' ? 1 / 2.58998811 : 1;
+function unitMultiplier(unit) {
+    switch (unit) {
+        case 'meters':
+            return 1;
+        case 'millimeters':
+            return 1000;
+        case 'centimeters':
+            return 100;
+        case 'kilometers':
+            return 0.001;
+        case 'miles':
+            return 1 / 1609.344; // Meters in Miles
+        case 'nauticalmiles':
+            return 1 / 1852; // Meters in Nautical Miles
+        case 'inches':
+            return 39.3701; // Meters in Inches
+        case 'yards':
+            return 1.09361; // Meters in Yards
+        case 'feet':
+            return 3.28084; // Meters in Feet
+        // case 'acres':
+        // 	return 1 / 4046.8564224; // Square meters in an acre
+        // case 'hectares':
+        // 	return 1 / 10000; // Square meters in a hectare
+        default:
+            return 1;
+    }
 }
-function getUnitLabel(measureType) {
-    return measureType === 'miles' ? 'mi' : 'km';
+function unitLabel(unit) {
+    switch (unit) {
+        case 'miles':
+            return 'mi';
+        case 'acres':
+            return 'ac';
+        case 'kilometers':
+            return 'km';
+        case 'meters':
+            return 'm';
+        case 'millimeters':
+            return 'mm';
+        case 'centimeters':
+            return 'cm';
+        case 'nauticalmiles':
+            return 'nm';
+        case 'inches':
+            return 'in';
+        case 'yards':
+            return 'yd';
+        case 'feet':
+            return 'ft';
+        case 'hectares':
+            return 'ha';
+        default:
+            return 'm';
+    }
 }
 var MlMeasureTool = function (props) {
     var _a = React.useState({ value: 0, label: '' }), displayValue = _a[0], setDisplayValue = _a[1];
     var _b = React.useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
     React.useEffect(function () {
         if (currentFeatures[0]) {
-            var result = props.measureType === 'polygon'
-                ? // for "polyong" mode calculate km²
-                    (turf__namespace.area(currentFeatures[0]) / 1000000) *
-                        getUnitSquareMultiplier(props.unit)
-                : turf__namespace.length(currentFeatures[0], { units: props.unit });
+            var result = 0;
+            if (props.measureType === 'polygon') {
+                // Calculate area in square meters
+                result = turf__namespace.area(currentFeatures[0]);
+                // Convert area depending on the unit (square meters -> selected area unit)
+                if (props.unit) {
+                    var unit = props.unit;
+                    if (unit === 'acres') {
+                        result = result / 4046.8564224;
+                    }
+                    else if (unit === 'hectares') {
+                        result = result / 10000;
+                    }
+                    else {
+                        result = result * Math.pow(unitMultiplier(props.unit), 2);
+                    }
+                }
+            }
+            else {
+                result = turf__namespace.length(currentFeatures[0], { units: props.unit });
+            }
             if (typeof props.onChange === 'function') {
                 props.onChange({ value: result, unit: props.unit, geojson: currentFeatures[0] });
             }
             if (result >= 0.1) {
-                setDisplayValue({ value: result, label: getUnitLabel(props.unit) });
-            }
-            else {
-                var label = 'm';
-                var value = result * 1000;
-                if (props.measureType === 'polygon') {
-                    value = result * 1000000;
-                }
-                if (getUnitLabel(props.unit) === 'mi') {
-                    label = 'Yard';
-                    value = result * 1760;
-                    if (props.measureType === 'polygon') {
-                        value = result * 3097600;
-                    }
-                }
-                setDisplayValue({ value: value, label: label });
+                setDisplayValue({ value: result, label: unitLabel(props.unit) });
             }
         }
     }, [props.unit, currentFeatures]);
@@ -3056,35 +3109,41 @@ var MlMeasureTool = function (props) {
         React.createElement(MlFeatureEditor, { onChange: function (features) {
                 features && setCurrentFeatures(features);
             }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string', onFinish: props.onFinish }),
-        displayValue.value.toFixed(2),
-        " ",
-        '',
-        displayValue.label,
-        displayValue.label && props.measureType === 'polygon' ? ' ²' : ''));
+        displayValue.value.toLocaleString('de-DE', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }),
+        ' ',
+        unitLabel(props.unit),
+        displayValue.label &&
+            props.measureType === 'polygon' &&
+            !['hectares', 'acres'].includes(props.unit || '')
+            ? ' ²'
+            : ''));
 };
 MlMeasureTool.defaultProps = {
     mapId: undefined,
     measureType: 'line',
-    unit: 'kilometers',
+    unit: 'meters',
 };
 
-var ListStyled$1 = material.styled(material.List)({
+var ListStyled$3 = material.styled(material.List)({
     marginTop: '15px',
 });
 function LayerList(props) {
-    return React.createElement(ListStyled$1, null, props === null || props === void 0 ? void 0 : props.children);
+    return React.createElement(ListStyled$3, null, props === null || props === void 0 ? void 0 : props.children);
 }
 
-var ListItemStyled$1 = system.styled(material.ListItem)({
+var ListItemStyled$2 = system.styled(material.ListItem)({
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: '4px',
 });
-var ListItemIconStyled = system.styled(material.ListItemIcon)({
+var ListItemIconStyled$1 = system.styled(material.ListItemIcon)({
     minWidth: '30px',
 });
-var IconButtonStyled$1 = system.styled(material.IconButton)({
+var IconButtonStyled$2 = system.styled(material.IconButton)({
     marginRight: '0px',
     padding: '0px',
 });
@@ -3092,13 +3151,13 @@ var CheckboxStyled$1 = system.styled(material.Checkbox)({
     padding: 0,
     marginRight: '5px',
 });
-var BoxStyled$2 = system.styled(system.Box)(function (_a) {
+var BoxStyled$4 = system.styled(system.Box)(function (_a) {
     var open = _a.open;
     return ({
         display: open ? 'block' : 'none',
     });
 });
-var ListStyled = system.styled(material.List)({
+var ListStyled$2 = system.styled(material.List)({
     marginLeft: '50px',
 });
 function LayerListFolder(_a) {
@@ -3127,9 +3186,9 @@ function LayerListFolder(_a) {
         return React.createElement(React.Fragment, null);
     }, [_visible]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItemStyled$1, null,
-            React.createElement(ListItemIconStyled, null,
-                React.createElement(IconButtonStyled$1, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+        React.createElement(ListItemStyled$2, null,
+            React.createElement(ListItemIconStyled$1, null,
+                React.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
                 React.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
@@ -3139,8 +3198,8 @@ function LayerListFolder(_a) {
                         }
                     } })),
             React.createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
-        React.createElement(BoxStyled$2, { open: open },
-            React.createElement(ListStyled, { disablePadding: true }, _children))));
+        React.createElement(BoxStyled$4, { open: open },
+            React.createElement(ListStyled$2, { disablePadding: true }, _children))));
 }
 
 var converters = {
@@ -3154,7 +3213,7 @@ var converters = {
 var ColorPicker = function (_a) {
     var convert = _a.convert, props = __rest(_a, ["convert"]);
     var _b = React.useState(false), showPicker = _b[0], setShowPicker = _b[1];
-    var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
+    var value = (props === null || props === void 0 ? void 0 : props.value) || '';
     return (React.createElement(React.Fragment, null,
         React.createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
             React.createElement(material.Grid, { xs: 12, item: true },
@@ -3181,7 +3240,6 @@ var ColorPicker = function (_a) {
                 React.createElement(reactColor.ChromePicker, { color: value, onChange: function (c) {
                         var _a;
                         var newValue = converters[convert](c);
-                        setValue(newValue);
                         (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
                     } }))))));
 };
@@ -3191,7 +3249,7 @@ ColorPicker.defaultProps = {
     name: 'color',
 };
 
-function PaintPropsColorPicker(_a) {
+function PaintPropsColorPicker$1(_a) {
     var propKey = _a.propKey, value = _a.value, setPaintProps = _a.setPaintProps;
     return (React.createElement(ColorPicker, { value: value, label: "Color", onChange: function (value) {
             setPaintProps(function (current) {
@@ -3202,7 +3260,7 @@ function PaintPropsColorPicker(_a) {
         } }));
 }
 
-var PaperStyled = material.styled(material.Paper)({
+var PaperStyled$1 = material.styled(material.Paper)({
     marginLeft: '-100px',
     marginRight: '-21px',
     paddingLeft: '53px',
@@ -3210,10 +3268,10 @@ var PaperStyled = material.styled(material.Paper)({
     boxShadow: 'none',
     backgroundColor: 'rgb(0, 0, 0, 0)',
 });
-var BoxStyled$1 = material.styled(material.Box)({
+var BoxStyled$3 = material.styled(material.Box)({
     marginLeft: '61px',
 });
-var mapPropKeyToFormInputType = {
+var mapPropKeyToFormInputType$1 = {
     'circle-color': 'colorpicker',
     'circle-radius': 'slider',
     'circle-stroke-color': 'colorpicker',
@@ -3224,8 +3282,8 @@ var mapPropKeyToFormInputType = {
     'line-width': 'slider',
     'line-blur': 'slider',
 };
-var mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
-var inputPropsByPropKey = {
+var mapPropKeyToFormInputTypeKeys$1 = Object.keys(mapPropKeyToFormInputType$1);
+var inputPropsByPropKey$1 = {
     'circle-stroke-width': {
         step: 1,
         min: 1,
@@ -3247,18 +3305,18 @@ var inputPropsByPropKey = {
         max: 100,
     },
 };
-function LayerPropertyForm(_a) {
+function LayerPropertyForm$1(_a) {
     var _b = _a.paintProps, paintProps = _b === void 0 ? {} : _b, setPaintProps = _a.setPaintProps;
     var key = React.useRef(Math.round(Math.random() * 10000000000));
     var getFormInputByType = React.useCallback(function (key) {
-        if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1 &&
+        if (mapPropKeyToFormInputTypeKeys$1.indexOf(key) !== -1 &&
             (typeof paintProps[key] === 'number' || typeof paintProps[key] === 'string')) {
             var label = (React.createElement(material.Typography, { id: key + '_label', gutterBottom: true }, key));
-            switch (mapPropKeyToFormInputType[key]) {
+            switch (mapPropKeyToFormInputType$1[key]) {
                 case 'slider':
                     return (React.createElement(React.Fragment, { key: key },
                         label,
-                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
+                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey$1[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
                                 if (value) {
                                     setPaintProps(function (current) {
                                         var _a;
@@ -3282,24 +3340,24 @@ function LayerPropertyForm(_a) {
                     return (React.createElement(React.Fragment, { key: key },
                         label,
                         React.createElement(material.Box, { sx: { '& > div': { width: 'initial !important' } } },
-                            React.createElement(PaintPropsColorPicker, { key: key, value: paintProps[key], propKey: key, setPaintProps: setPaintProps }))));
+                            React.createElement(PaintPropsColorPicker$1, { key: key, value: paintProps[key], propKey: key, setPaintProps: setPaintProps }))));
             }
         }
         return null;
     }, [paintProps]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(PaperStyled, null,
+        React.createElement(PaperStyled$1, null,
             React.createElement(material.ListItem, { key: key + '_paintPropForm' },
-                React.createElement(BoxStyled$1, null, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
+                React.createElement(BoxStyled$3, null, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
 }
 
-var ListItemStyled = material.styled(material.ListItem)(function (configurable) { return ({
+var ListItemStyled$1 = material.styled(material.ListItem)(function (configurable) { return ({
     paddingRight: configurable ? '56px' : 0,
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: '4px',
 }); });
-var TuneIconButton$1 = material.styled(material.IconButton)({
+var TuneIconButton$2 = material.styled(material.IconButton)({
     padding: '4px',
     marginTop: '-3px',
 });
@@ -3344,7 +3402,7 @@ function LayerListItemVectorLayer(_a) {
         }
     }, [paintProps, id, setVtProps, vtProps]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItemStyled, { key: id, secondaryAction: configurable ? (React.createElement(TuneIconButton$1, { edge: "end", "aria-label": "comments", onClick: function () {
+        React.createElement(ListItemStyled$1, { key: id, secondaryAction: configurable ? (React.createElement(TuneIconButton$2, { edge: "end", "aria-label": "comments", onClick: function () {
                     setPaintPropsFormVisible(function (current) {
                         return !current;
                     });
@@ -3355,7 +3413,7 @@ function LayerListItemVectorLayer(_a) {
                         setVisible(function (val) { return !val; });
                     } })),
             React.createElement(material.ListItemText, { primary: vtProps.layers[id].id, variant: "layerlist" })),
-        configurable && paintPropsFormVisible && (React.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: vtProps.layers[id].type }))));
+        configurable && paintPropsFormVisible && (React.createElement(LayerPropertyForm$1, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: vtProps.layers[id].type }))));
 }
 LayerListItemVectorLayer.defaultProps = {
     configurable: true,
@@ -3387,11 +3445,11 @@ function SortableContainer(_a) {
     return (React.createElement("li", __assign({ ref: setNodeRef, style: style }, attributes, listeners), children));
 }
 
-var TuneIconButton = material.styled(material.IconButton)({
+var TuneIconButton$1 = material.styled(material.IconButton)({
     padding: '4px',
     marginTop: '-3px',
 });
-var DeleteIconButton = material.styled(material.IconButton)({
+var DeleteIconButton$1 = material.styled(material.IconButton)({
     marginLeft: '20px',
 });
 function LayerListItem(_a) {
@@ -3476,9 +3534,9 @@ function LayerListItem(_a) {
         }
         return undefined;
     }, [layerComponent]);
-    var listContent = (React.createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_h = Object.keys(paintProps)) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (React.createElement(React.Fragment, null, props === null || props === void 0 ? void 0 :
+    var listContent = (React.createElement(ListItemStyled$1, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_h = Object.keys(paintProps)) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (React.createElement(React.Fragment, null, props === null || props === void 0 ? void 0 :
             props.buttons,
-            React.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
+            React.createElement(TuneIconButton$1, { edge: 'end', "aria-label": "settings", onClick: function () {
                     setPaintPropsFormVisible(function (current) {
                         return !current;
                     });
@@ -3498,7 +3556,7 @@ function LayerListItem(_a) {
             configurable &&
             paintPropsFormVisible && (React.createElement(React.Fragment, null,
             props.showDeleteButton && (React.createElement(React.Fragment, null,
-                React.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
+                React.createElement(DeleteIconButton$1, { edge: "end", "aria-label": "delete", onClick: function () {
                         if (typeof setLayerState === 'function') {
                             setShowDeletionConfirmationDialog(true);
                         }
@@ -3513,7 +3571,7 @@ function LayerListItem(_a) {
                     }, onCancel: function () {
                         setShowDeletionConfirmationDialog(false);
                     }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
-            React.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
+            React.createElement(LayerPropertyForm$1, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
         ((_m = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _m === void 0 ? void 0 : _m.layers) && (React.createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_q = (_p = (_o = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _o === void 0 ? void 0 : _o.layers) === null || _p === void 0 ? void 0 : _p.map) === null || _q === void 0 ? void 0 : _q.call(_p, function (_el, idx) { return (React.createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
 }
 LayerListItem.defaultProps = {
@@ -3623,7 +3681,6 @@ var MlMultiMeasureTool = function (props) {
     var _d = React.useState(), measureState = _d[0], setMeasureState = _d[1];
     var _e = React.useState('kilometers'), selectedUnit = _e[0], setSelectedUnit = _e[1];
     var _f = React.useState([]), measureList = _f[0], setMeasureList = _f[1];
-    console.log(measureList);
     var _g = React.useState(false), reload = _g[0], setReload = _g[1];
     var unitSwitch = function () {
         if (selectedUnit === 'kilometers') {
@@ -3821,7 +3878,7 @@ var SvgCompassBackground = function SvgCompassBackground(props) {
   })));
 };
 
-var BoxStyled = material.styled(material.Box)(function (_a) {
+var BoxStyled$2 = material.styled(material.Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
@@ -3922,7 +3979,7 @@ var MlNavigationCompass = function (props) {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(BoxStyled, { sx: __assign({}, props.style) },
+        React.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
             React.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
                 React.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
                 React.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
@@ -3972,7 +4029,7 @@ var MlNavigationTools = function (props) {
         var targetPitch = mapHook.map.getPitch() !== 0 ? 0 : 60;
         mapHook.map.easeTo({ pitch: targetPitch });
     }, [mapHook.map]);
-    return (React.createElement(Box, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
+    return (React.createElement(Box, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '40px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
         React.createElement(MlNavigationCompass, null),
         props.show3DButton && (React.createElement(Button, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
         props.showFollowGpsButton && React.createElement(MlFollowGps, null),
@@ -5775,6 +5832,75 @@ var MlVectorTileLayer = function (props) {
     return React.createElement(React.Fragment, null);
 };
 
+var MlOgcApiFeatures = function (props) {
+    var _a;
+    var _b = React.useState(), geojson = _b[0], setGeojson = _b[1];
+    var mapHook = useMap({ mapId: props.mapId });
+    var layerId = React.useRef(((_a = props.mlGeoJsonLayerProps) === null || _a === void 0 ? void 0 : _a.layerId) || 'MlOgcApiFeature-' + mapHook.componentId);
+    var buildOgcApiUrl = function () {
+        var _a, _b;
+        var url = new URL(props.ogcApiUrl);
+        if (props.ogcApiFeatureParams) {
+            Object.entries(props.ogcApiFeatureParams).forEach(function (_a) {
+                var key = _a[0], value = _a[1];
+                if (value !== undefined && value !== null) {
+                    url.searchParams.append(key, value.toString());
+                }
+            });
+        }
+        if (props.reloadFeaturesOnMapMove) {
+            var southWest = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.getBounds().getSouthWest();
+            var northEast = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.getBounds().getNorthEast();
+            var bbox = "".concat(southWest === null || southWest === void 0 ? void 0 : southWest.lng, ",").concat(southWest === null || southWest === void 0 ? void 0 : southWest.lat, ",").concat(northEast === null || northEast === void 0 ? void 0 : northEast.lng, ",").concat(northEast === null || northEast === void 0 ? void 0 : northEast.lat);
+            url.searchParams.append('bbox', bbox);
+        }
+        return url.toString();
+    };
+    React.useEffect(function () {
+        if (!mapHook.map)
+            return;
+        var getDataHandler = function () {
+            var generatedOgcApiUrl = buildOgcApiUrl();
+            fetch(generatedOgcApiUrl)
+                .then(function (res) {
+                if (!res.ok)
+                    throw new Error('Error fetching OGC features');
+                return res.json();
+            })
+                .then(function (data) {
+                setGeojson(data);
+            })
+                .catch(function (error) {
+                console.log(error);
+                setGeojson(undefined);
+            });
+        };
+        getDataHandler();
+        if (props.reloadFeaturesOnMapMove) {
+            mapHook.map.on('moveend', getDataHandler);
+        }
+        return function () {
+            var _a;
+            if ((_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.off) {
+                mapHook.map.off('moveend', getDataHandler);
+            }
+        };
+    }, [mapHook.map, props.ogcApiFeatureParams, props.ogcApiUrl]);
+    React.useEffect(function () {
+        // if layer is not yet on map return
+        if (!mapHook.map || !mapHook.map.map.style.getLayer(layerId.current))
+            return;
+        // if layer is already on map: toggle layer visibility by changing the layout object's visibility property
+        if (props.visible) {
+            mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'visible');
+        }
+        else {
+            mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
+        }
+    }, [props.visible, mapHook.map]);
+    return (React.createElement(React.Fragment, null, geojson && (React.createElement(MlGeoJsonLayer, __assign({ geojson: geojson, layerId: layerId.current }, props.mlGeoJsonLayerProps)))));
+};
+
 /**
  * TODO: Add short & useful description
  *
@@ -6148,13 +6274,13 @@ var MlWmsLoader = function (props) {
         var unprojected = mapHook.map.unproject([ev.point.x, ev.point.y]);
         var point = turf__namespace.point([unprojected.lng, unprojected.lat]);
         var buffered = turf__namespace.buffer(point, 50, { units: 'meters' });
-        var _bbox = turf__namespace.bbox(buffered);
-        var _sw = lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
-        var _ne = lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
-        var bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
+        var _bbox = buffered && turf__namespace.bbox(buffered);
+        var _sw = _bbox && lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
+        var _ne = _bbox && lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
+        var bbox = _sw && _ne && [_sw[0], _sw[1], _ne[0], _ne[1]];
         var _getFeatureInfoUrlParams = {
             REQUEST: 'GetFeatureInfo',
-            BBOX: bbox.join(','),
+            BBOX: bbox === null || bbox === void 0 ? void 0 : bbox.join(','),
             SERVICE: 'WMS',
             INFO_FORMAT: ((_b = (_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _a === void 0 ? void 0 : _a.Request) === null || _b === void 0 ? void 0 : _b.GetFeatureInfo.Format.indexOf('text/html')) !== -1
                 ? 'text/html'
@@ -7074,7 +7200,7 @@ var useCameraFollowPath = function (props) {
     var speed = React.useRef(props.speed);
     var timeoutId = React.useRef();
     var kmPerStep = props.kmPerStep || 0.01;
-    var routeDistance = turf__namespace.lineDistance(props.route);
+    var routeDistance = turf__namespace.length(props.route);
     var stepDuration = props.stepDuration || 70;
     var mapHook = useMap({
         mapId: props.mapId,
@@ -7663,7 +7789,7 @@ SimpleDataProvider.propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-var IconButtonStyled = material.styled(material.IconButton)({
+var IconButtonStyled$1 = material.styled(material.IconButton)({
     padding: '4px',
     marginTop: '-3px',
     background: 'none',
@@ -7766,15 +7892,15 @@ function LayerListItemFactory(props) {
                     switch (layer.type) {
                         case 'geojson':
                             return (React.createElement(LayerListItem, { key: layer.id, layerId: layer.id, sortable: props.sortable, name: (layer === null || layer === void 0 ? void 0 : layer.name) || ((_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.type) + ' layer' || 'unnamed layer', layerComponent: React.createElement(MlGeoJsonLayer, __assign({}, layer.config, { mapId: props === null || props === void 0 ? void 0 : props.mapId, layerId: layer.id, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx) })), buttons: React.createElement(React.Fragment, null,
-                                    React.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                                    React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                             layerContext.moveDown(layer.id || '');
                                         } },
                                         React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                    React.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                    React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                             layerContext.moveUp(layer.id || '');
                                         } },
                                         React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                    React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                    React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
                                         React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
                                     return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                         var _layers = __spreadArray([], current, true);
@@ -7812,28 +7938,28 @@ function LayerListItemFactory(props) {
                                             return _layers;
                                         });
                                     }, showDeleteButton: true, buttons: React.createElement(React.Fragment, null,
-                                        React.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                                        React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
                                             React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                        React.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                        React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
                                             React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                        React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                        React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
                                             React.createElement(iconsMaterial.CenterFocusWeak, null))) }))));
                         case 'vt':
                             return (React.createElement(React.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
                                 React.createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || (layer === null || layer === void 0 ? void 0 : layer.type) + ' layer' || 'unnamed layer', layerComponent: React.createElement(MlVectorTileLayer, { layers: ((_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.layers) || [], key: layer.id, mapId: layer === null || layer === void 0 ? void 0 : layer.config.mapId, sourceOptions: (_d = layer === null || layer === void 0 ? void 0 : layer.config) === null || _d === void 0 ? void 0 : _d.sourceOptions, layerId: layer.id, url: (_e = layer === null || layer === void 0 ? void 0 : layer.config) === null || _e === void 0 ? void 0 : _e.url }), buttons: React.createElement(React.Fragment, null,
-                                        React.createElement(IconButtonStyled, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
+                                        React.createElement(IconButtonStyled$1, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
                                             React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                        React.createElement(IconButtonStyled, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
+                                        React.createElement(IconButtonStyled$1, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
                                             React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                        React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                        React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
                                             React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
                                         return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                             var _layers = __spreadArray([], current, true);
@@ -21184,10 +21310,571 @@ SpeedDial.defaultProps = {
     mapId: undefined,
 };
 
+var _a;
+function processLayerOrderItems(action, items, parent) {
+    items.forEach(function (item) {
+        action(item, parent);
+        if (item.layers && item.layers.length > 0) {
+            processLayerOrderItems(action, item.layers, item);
+        }
+    });
+}
+var initialState = {
+    mapConfigs: {},
+};
+//@ts-ignore
+var mapConfigSlice = toolkit.createSlice({
+    name: 'mapConfig',
+    initialState: initialState,
+    reducers: {
+        // Add or update a MapConfig
+        setMapConfig: function (state, action) {
+            var mapConfig = action.payload.mapConfig;
+            var key = action.payload.key;
+            //@ts-ignore
+            state.mapConfigs[key] = mapConfig;
+        },
+        // Remove a MapConfig by its uuid
+        removeMapConfig: function (state, action) {
+            delete state.mapConfigs[action.payload.key];
+        },
+        // Add or update a layer within a MapConfig
+        setLayerInMapConfig: function (state, action) {
+            var _a = action.payload, mapConfigKey = _a.mapConfigKey, updatedLayer = _a.layer;
+            var mapConfig = state.mapConfigs[mapConfigKey];
+            if (mapConfig) {
+                for (var i = 0; i < mapConfig.layers.length; i++) {
+                    if (mapConfig.layers[i].uuid === updatedLayer.uuid) {
+                        mapConfig.layers[i] = updatedLayer;
+                        break;
+                    }
+                }
+            }
+        },
+        // Remove a layer from a MapConfig
+        removeLayerFromMapConfig: function (state, action) {
+            var _a = action.payload, mapConfigKey = _a.mapConfigKey, layerUuid = _a.layerUuid;
+            var mapConfig = state.mapConfigs[mapConfigKey];
+            if (mapConfig) {
+                var targetLayerIndex = mapConfig.layers.findIndex(function (el) { return el.uuid === layerUuid; });
+                if (targetLayerIndex !== -1) {
+                    delete mapConfig.layers[targetLayerIndex];
+                    processLayerOrderItems(function (_, parent) {
+                        if (parent && parent.layers) {
+                            parent.layers = parent.layers.filter(function (child) { return child.uuid !== layerUuid; });
+                        }
+                    }, mapConfig.layerOrder);
+                }
+            }
+        },
+        updateLayerOrder: function (state, action) {
+            var _a = action.payload, mapConfigKey = _a.mapConfigKey, newOrder = _a.newOrder;
+            var mapConfig = state.mapConfigs[mapConfigKey];
+            if (mapConfig) {
+                mapConfig.layerOrder = newOrder;
+            }
+        },
+        // masterVisible property will be applied to all children of a folder that is set to be not visible
+        // masterVisible will over rule the actual layer config if set to false
+        // if masterVisible is true the actual layerConfig visibility setting is respected
+        setMasterVisible: function (state, action) {
+            var _a;
+            var _b = action.payload, mapConfigKey = _b.mapConfigKey, layerId = _b.layerId, masterVisible = _b.masterVisible;
+            var mapConfig = state.mapConfigs[mapConfigKey];
+            if (mapConfig) {
+                var targetLayerIndex = mapConfig.layers.findIndex(function (el) { return el.uuid === layerId; });
+                if (targetLayerIndex !== -1) {
+                    var layerConfig = mapConfig.layers[targetLayerIndex];
+                    if (layerConfig) {
+                        var updatedLayers_1 = __spreadArray([], mapConfig.layers, true);
+                        if (layerConfig.type === 'folder') {
+                            mapConfig.layerOrder.forEach(function (folder) {
+                                var _a;
+                                if (folder.uuid === layerId) {
+                                    (_a = folder.layers) === null || _a === void 0 ? void 0 : _a.forEach(function (childUuid) {
+                                        var _a;
+                                        var childLayerIndex = mapConfig.layers.findIndex(function (el) { return el.uuid === childUuid.uuid; });
+                                        var childLayer = updatedLayers_1[childLayerIndex];
+                                        updatedLayers_1[childLayerIndex] = __assign(__assign({}, childLayer), { masterVisible: masterVisible });
+                                        if ((childLayer === null || childLayer === void 0 ? void 0 : childLayer.type) === 'vt' && ((_a = childLayer === null || childLayer === void 0 ? void 0 : childLayer.config) === null || _a === void 0 ? void 0 : _a.layers)) {
+                                            childLayer.config.layers = childLayer.config.layers.map(function (layer) { return (__assign(__assign({}, layer), { masterVisible: masterVisible })); });
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                        if (layerConfig.type === 'vt' && ((_a = layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.config) === null || _a === void 0 ? void 0 : _a.layers)) {
+                            layerConfig.config.layers = layerConfig.config.layers.map(function (layer) { return (__assign(__assign({}, layer), { masterVisible: masterVisible })); });
+                        }
+                        state.mapConfigs[mapConfigKey].layers = updatedLayers_1;
+                    }
+                }
+            }
+        },
+    },
+});
+var getLayerByUuid = function (state, uuid) {
+    var mapConfigs = state.mapConfigs;
+    for (var key in mapConfigs) {
+        var mapConfig = mapConfigs[key];
+        var targetLayerIndex = mapConfig.layers.findIndex(function (el) { return el.uuid === uuid; });
+        var foundLayer = mapConfig.layers[targetLayerIndex];
+        if (foundLayer)
+            return foundLayer;
+    }
+    return null;
+};
+var extractUuidsFromLayerOrder = function (state, mapConfigKey) {
+    var mapConfig = state.mapConfig.mapConfigs[mapConfigKey];
+    if (!mapConfig) {
+        return [];
+    }
+    var layerOrder = mapConfig.layerOrder;
+    var uuids = [];
+    function extractUuids(items) {
+        items.forEach(function (item) {
+            uuids.push(item.uuid);
+            if (item.layers && item.layers.length > 0) {
+                extractUuids(item.layers);
+            }
+        });
+    }
+    extractUuids(layerOrder);
+    return uuids;
+};
+var store = toolkit.configureStore({
+    reducer: {
+        mapConfig: mapConfigSlice.reducer,
+    },
+});
+var setMapConfig = (_a = mapConfigSlice.actions, _a.setMapConfig), removeMapConfig = _a.removeMapConfig, setLayerInMapConfig = _a.setLayerInMapConfig, removeLayerFromMapConfig = _a.removeLayerFromMapConfig, updateLayerOrder = _a.updateLayerOrder, setMasterVisible = _a.setMasterVisible;
+
+function PaintPropsColorPicker(props) {
+    return (React.createElement(ColorPicker, { value: props.value, label: "Color", onChange: function (value) {
+            if (typeof props.onChange === 'function') {
+                props.onChange(value);
+            }
+        } }));
+}
+
+var PaperStyled = material.styled(material.Paper)({
+    marginLeft: '-100px',
+    marginRight: '-21px',
+    paddingLeft: '53px',
+    borderRadius: '0px',
+    boxShadow: 'none',
+    backgroundColor: 'rgb(0, 0, 0, 0)',
+});
+var BoxStyled$1 = material.styled(material.Box)({
+    marginLeft: '61px',
+});
+var mapPropKeyToFormInputType = {
+    'circle-color': 'colorpicker',
+    'circle-radius': 'slider',
+    'circle-stroke-color': 'colorpicker',
+    'circle-stroke-width': 'slider',
+    'fill-color': 'colorpicker',
+    'fill-outline-color': 'colorpicker',
+    'line-color': 'colorpicker',
+    'line-width': 'slider',
+    'line-blur': 'slider',
+};
+var mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
+var inputPropsByPropKey = {
+    'circle-stroke-width': {
+        step: 1,
+        min: 1,
+        max: 20,
+    },
+    'circle-radius': {
+        step: 1,
+        min: 1,
+        max: 100,
+    },
+    'line-blur': {
+        step: 1,
+        min: 1,
+        max: 100,
+    },
+    'line-width': {
+        step: 1,
+        min: 1,
+        max: 100,
+    },
+};
+function LayerPropertyForm(props) {
+    var _a, _b;
+    var key = React.useRef(Math.round(Math.random() * 10000000000));
+    var layer = getLayerByUuid(reactRedux.useSelector(function (state) { return state.mapConfig; }), props.layerUuid);
+    var dispatch = reactRedux.useDispatch();
+    var paintProps = React.useMemo(function () {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.paint) {
+            return (_d = (_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint;
+        }
+        return {};
+    }, [(_b = (_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.paint]);
+    var updatePaintProp = function (key, value) {
+        var _a;
+        var _b, _c, _d;
+        var updatedLayer = __assign(__assign({}, layer), { config: __assign(__assign({}, layer === null || layer === void 0 ? void 0 : layer.config), { options: __assign(__assign({}, (_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.options), { paint: __assign(__assign({}, (_d = (_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint), (_a = {}, _a[key] = value, _a)) }) }) });
+        dispatch(setLayerInMapConfig({
+            mapConfigKey: props.mapConfigKey,
+            layer: updatedLayer,
+        }));
+    };
+    var getFormInputByType = React.useCallback(function (key) {
+        if ((paintProps === null || paintProps === void 0 ? void 0 : paintProps[key]) &&
+            mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1 &&
+            (typeof paintProps[key] === 'number' || typeof paintProps[key] === 'string')) {
+            var label = (React.createElement(material.Typography, { id: key + '_label', gutterBottom: true }, key));
+            switch (mapPropKeyToFormInputType[key]) {
+                case 'slider':
+                    return (React.createElement(React.Fragment, { key: key },
+                        label,
+                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey[key], { value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
+                                if (value) {
+                                    updatePaintProp(key, value);
+                                }
+                            } }))));
+                case 'numberfield':
+                    return (React.createElement(React.Fragment, { key: key },
+                        label,
+                        React.createElement(material.TextField, { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], onChange: function (ev) {
+                                var _a;
+                                if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.value) {
+                                    updatePaintProp(key, parseInt(ev.target.value));
+                                }
+                            } })));
+                case 'colorpicker':
+                    return (React.createElement(React.Fragment, { key: key },
+                        label,
+                        React.createElement(material.Box, { sx: { '& > div': { width: 'initial !important' } } },
+                            React.createElement(PaintPropsColorPicker, { key: key, value: paintProps[key], onChange: function (value) {
+                                    updatePaintProp(key, value);
+                                } }))));
+            }
+        }
+        return null;
+    }, [paintProps]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PaperStyled, null,
+            React.createElement(material.ListItem, { key: key.current + '_paintPropForm' },
+                React.createElement(BoxStyled$1, null, paintProps &&
+                    Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
+}
+
+var TuneIconButton = material.styled(material.IconButton)({
+    padding: '4px',
+    marginTop: '-3px',
+});
+var DeleteIconButton = material.styled(material.IconButton)({
+    marginLeft: '20px',
+});
+var ListItemStyled = material.styled(material.ListItem)({
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: '4px',
+});
+var ListItemIconStyled = material.styled(material.ListItemIcon)({
+    minWidth: '30px',
+});
+var IconButtonStyled = material.styled(material.IconButton)({
+    marginRight: '0px',
+    padding: '0px',
+});
+var BoxStyled = material.styled(material.Box)(function (_a) {
+    var open = _a.open;
+    return ({
+        display: open ? 'block' : 'none',
+    });
+});
+var ListStyled$1 = material.styled(material.List)({
+    marginLeft: '50px',
+});
+function LayerTreeListItem(props) {
+    var _a = React.useState(false), paintPropsFormVisible = _a[0], setPaintPropsFormVisible = _a[1];
+    var _b = React.useState(false), showDeletionConfirmationDialog = _b[0], setShowDeletionConfirmationDialog = _b[1];
+    var layer = getLayerByUuid(reactRedux.useSelector(function (state) { return state.mapConfig; }), props.layerOrderConfig.uuid);
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var dispatch = reactRedux.useDispatch();
+    var mapConfig = reactRedux.useSelector(function (state) { return state.mapConfig.mapConfigs[props.mapConfigKey]; });
+    function moveLayer(uuid, getNewPos) {
+        var newLayerOrder = JSON.parse(JSON.stringify(mapConfig.layerOrder));
+        var findAndMove = function (layers) {
+            var found = false;
+            layers.forEach(function (layer, index) {
+                if (found)
+                    return;
+                if (layer.uuid === uuid) {
+                    var newPos = getNewPos(index);
+                    if (newPos < 0 || newPos >= layers.length) {
+                        throw new Error('New position is out of bounds');
+                    }
+                    var item = layers.splice(index, 1)[0];
+                    layers.splice(newPos, 0, item);
+                    found = true;
+                }
+                else if (layer.layers) {
+                    if (findAndMove(layer.layers)) {
+                        found = true;
+                    }
+                }
+            });
+            return found;
+        };
+        findAndMove(newLayerOrder);
+        dispatch(updateLayerOrder({ mapConfigKey: props.mapConfigKey, newOrder: newLayerOrder }));
+    }
+    var moveDown = function (uuid) {
+        moveLayer(uuid, function (idx) { return idx + 1; });
+    };
+    var moveUp = function (uuid) {
+        moveLayer(uuid, function (idx) { return idx - 1; });
+    };
+    function handleToggleVisibility(visible, specificLayerId) {
+        if (specificLayerId === void 0) { specificLayerId = ''; }
+        var nextVisible = !visible;
+        if (layer) {
+            toggleVisible(layer, nextVisible, specificLayerId);
+            if (layer.type === 'folder' || (layer.type === 'vt' && specificLayerId === '')) {
+                dispatch(setMasterVisible({
+                    mapConfigKey: props.mapConfigKey,
+                    layerId: layer.uuid,
+                    masterVisible: nextVisible,
+                }));
+            }
+        }
+    }
+    function toggleVisible(layer, nextVisible, specificLayerId) {
+        var _a, _b, _c;
+        //TODO: update layout for all layer types
+        var updatedLayer = __assign({}, layer);
+        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'folder') {
+            updatedLayer = __assign(__assign({}, layer), { visible: !layer.visible });
+        }
+        else {
+            switch (layer === null || layer === void 0 ? void 0 : layer.type) {
+                case 'geojson': {
+                    updatedLayer = __assign(__assign({}, layer), { config: __assign(__assign({}, layer.config), { options: __assign(__assign({}, (_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.options), { layout: __assign(__assign({}, (_c = (_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.layout), { visibility: nextVisible ? 'visible' : 'none' }) }) }) });
+                    break;
+                }
+                case 'vt': {
+                    var updateSublayerOnly_1 = false;
+                    var updatedSubLayers = layer.config.layers.map(function (layer) {
+                        if (layer.id === specificLayerId) {
+                            updateSublayerOnly_1 = true;
+                            return __assign(__assign({}, layer), { layout: __assign(__assign({}, layer.layout), { visibility: nextVisible ? 'visible' : 'none' }) });
+                        }
+                        return layer;
+                    });
+                    if (updateSublayerOnly_1) {
+                        updatedLayer = __assign(__assign({}, layer), { config: __assign(__assign({}, layer.config), { layers: updatedSubLayers }) });
+                    }
+                    else {
+                        updatedLayer = __assign(__assign({}, layer), { visible: nextVisible, config: __assign(__assign({}, layer.config), { layers: updatedSubLayers }) });
+                    }
+                    break;
+                }
+                case 'wms': {
+                    updatedLayer = __assign(__assign({}, layer), { visible: nextVisible, config: __assign(__assign({}, layer.config), { visible: nextVisible }) });
+                    break;
+                }
+            }
+        }
+        dispatch(setLayerInMapConfig({
+            mapConfigKey: props.mapConfigKey,
+            layer: updatedLayer,
+        }));
+        return updatedLayer;
+    }
+    function renderLayerItem(layer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var visible = true;
+        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'geojson') {
+            visible = ((_c = (_b = (_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.visibility) !== 'none';
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: React.createElement(React.Fragment, null, props === null || props === void 0 ? void 0 :
+                        props.buttons,
+                        React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
+                                moveDown(layer.uuid);
+                            } },
+                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                        React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
+                                moveUp(layer.uuid);
+                            } },
+                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                        layer.configurable && (React.createElement(React.Fragment, null,
+                            React.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
+                                    setPaintPropsFormVisible(function (current) {
+                                        return !current;
+                                    });
+                                } },
+                                React.createElement(iconsMaterial.Tune, null))))) },
+                    React.createElement(CheckboxListItemIcon, null,
+                        React.createElement(CheckboxStyled, { checked: visible, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible); } })),
+                    React.createElement(material.ListItemText, { variant: "layerlist", primary: layer.name || '', secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }),
+                    props.buttons),
+                layer.configurable && paintPropsFormVisible && (React.createElement(React.Fragment, null,
+                    props.showDeleteButton && (React.createElement(React.Fragment, null,
+                        React.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () { } },
+                            React.createElement(iconsMaterial.Delete, null)),
+                        showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
+                                setShowDeletionConfirmationDialog(false);
+                            }, onCancel: function () {
+                                setShowDeletionConfirmationDialog(false);
+                            }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
+                    React.createElement(LayerPropertyForm, { layerUuid: layer.uuid, mapConfigKey: props.mapConfigKey })))));
+        }
+        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'vt') {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
+                    React.createElement(ListItemIconStyled, null,
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(CheckboxListItemIcon, null,
+                            React.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible === false, onClick: function () { var _a; return handleToggleVisibility((_a = layer.visible) !== null && _a !== void 0 ? _a : false); } }))),
+                    React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
+                React.createElement(BoxStyled, { key: layer.uuid + '_list', open: open },
+                    React.createElement(ListStyled$1, { disablePadding: true }, (_e = (_d = layer.config) === null || _d === void 0 ? void 0 : _d.layers) === null || _e === void 0 ? void 0 : _e.map(function (subLayer) {
+                        var _a, _b;
+                        return (React.createElement(ListItemStyled, { key: subLayer.id, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
+                            ' ',
+                            React.createElement(ListItemIconStyled, null,
+                                React.createElement(CheckboxListItemIcon, null,
+                                    React.createElement(CheckboxStyled, { checked: ((_b = (_a = subLayer === null || subLayer === void 0 ? void 0 : subLayer.layout) === null || _a === void 0 ? void 0 : _a.visibility) !== null && _b !== void 0 ? _b : 'visible') === 'visible', disabled: (subLayer === null || subLayer === void 0 ? void 0 : subLayer.masterVisible) === false, onClick: function () {
+                                            var _a;
+                                            return handleToggleVisibility(((_a = subLayer === null || subLayer === void 0 ? void 0 : subLayer.layout) === null || _a === void 0 ? void 0 : _a.visibility) === 'visible', subLayer.id);
+                                        } }))),
+                            React.createElement(material.ListItemText, { key: subLayer.id, variant: "layerlist", primary: subLayer['source-layer'], primaryTypographyProps: { overflow: 'hidden' } })));
+                    })))));
+        }
+        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'wms') {
+            var visible_1 = (_g = (_f = layer.config) === null || _f === void 0 ? void 0 : _f.visible) !== null && _g !== void 0 ? _g : true;
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
+                    React.createElement(CheckboxListItemIcon, null,
+                        React.createElement(CheckboxStyled, { checked: visible_1, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible_1); } })),
+                    React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }))));
+        }
+        if (layer.type === 'folder') {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx) },
+                    React.createElement(ListItemIconStyled, null,
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(CheckboxListItemIcon, null,
+                            React.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible, onClick: function () { return handleToggleVisibility(layer.visible ? layer.visible : false); } }))),
+                    React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
+                React.createElement(BoxStyled, { key: layer.uuid + '_list', open: open },
+                    React.createElement(ListStyled$1, { disablePadding: true }, (_j = (_h = props === null || props === void 0 ? void 0 : props.layerOrderConfig) === null || _h === void 0 ? void 0 : _h.layers) === null || _j === void 0 ? void 0 : _j.map(function (subLayer) { return (React.createElement(LayerTreeListItem, { layerOrderConfig: subLayer, key: subLayer.uuid, mapConfigKey: props.mapConfigKey })); })))));
+        }
+        else {
+            return React.createElement(React.Fragment, null);
+        }
+    }
+    return React.createElement(React.Fragment, null, layer && renderLayerItem(layer));
+}
+
+var ListStyled = material.styled(material.List)({
+    marginTop: '15px',
+});
+function LayerTree(props) {
+    var _a;
+    var layerOrder = reactRedux.useSelector(function (state) { var _a, _b; return (_b = (_a = state.mapConfig.mapConfigs) === null || _a === void 0 ? void 0 : _a[props.mapConfigKey]) === null || _b === void 0 ? void 0 : _b.layerOrder; });
+    return (React.createElement(ListStyled, null, (_a = layerOrder === null || layerOrder === void 0 ? void 0 : layerOrder.map) === null || _a === void 0 ? void 0 : _a.call(layerOrder, function (el) { return (React.createElement(LayerTreeListItem, { key: el.uuid, layerOrderConfig: el, mapConfigKey: props.mapConfigKey })); })));
+}
+
+function LayerOnMap(props) {
+    var _a;
+    var layers = reactRedux.useSelector(function (state) { var _a, _b; return (_b = (_a = state.mapConfig.mapConfigs) === null || _a === void 0 ? void 0 : _a[props.mapConfigKey]) === null || _b === void 0 ? void 0 : _b.layers; });
+    var layerStoreOrder = reactRedux.useSelector(function (state) { var _a, _b; return (_b = (_a = state.mapConfig.mapConfigs) === null || _a === void 0 ? void 0 : _a[props.mapConfigKey]) === null || _b === void 0 ? void 0 : _b.layerOrder; });
+    var mapHook = useMap({ mapId: props === null || props === void 0 ? void 0 : props.mapId });
+    var layerStoreOrderIds = reactRedux.useSelector(function (state) {
+        return extractUuidsFromLayerOrder(state, props.mapConfigKey);
+    });
+    var previousLayerStoreOrderRef = React.useRef([]);
+    React.useEffect(function () {
+        if (!mapHook.map || !layerStoreOrder)
+            return;
+        var adjustLayerOrderAtLevel = function (layers, previousLayers, map) {
+            for (var i = 0; i < layers.length; i++) {
+                var currentLayer = layers[i];
+                var previousLayer = previousLayers ? previousLayers[i] : null;
+                if (currentLayer.uuid !== (previousLayer === null || previousLayer === void 0 ? void 0 : previousLayer.uuid)) {
+                    if (map.getLayer(currentLayer.uuid)) {
+                        var beforeLayer = i > 0 ? layers[i - 1].uuid : undefined;
+                        map.moveLayer(currentLayer.uuid, beforeLayer);
+                    }
+                }
+                if (currentLayer.layers && currentLayer.layers.length > 0) {
+                    var previousSubLayers = (previousLayer === null || previousLayer === void 0 ? void 0 : previousLayer.layers) || [];
+                    adjustLayerOrderAtLevel(currentLayer.layers, previousSubLayers, map);
+                }
+            }
+        };
+        var previousLayerStoreOrder = previousLayerStoreOrderRef.current;
+        adjustLayerOrderAtLevel(layerStoreOrder, previousLayerStoreOrder, mapHook.map);
+        previousLayerStoreOrderRef.current = layerStoreOrder;
+    }, [layerStoreOrder, mapHook.map]);
+    var orderLayers = React.useMemo(function () {
+        var layerIds = __spreadArray(__spreadArray([
+            'order-background'
+        ], layerStoreOrderIds.map(function (el) { return 'layer_id_' + el; }), true), [
+            'order-labels',
+        ], false);
+        return layerIds;
+    }, [layerStoreOrderIds]);
+    function renderLayer(layer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var targetLayerIndex = layers.findIndex(function (el) { return el.uuid === layer.uuid; });
+        var layerConfig = layers[targetLayerIndex];
+        switch (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) {
+            case 'geojson':
+                return (React.createElement(MlGeoJsonLayer, __assign({ key: layerConfig.uuid, layerId: layerConfig.uuid, insertBeforeLayer: 'layer_id_' + layerConfig.uuid }, layerConfig.config, { options: __assign(__assign({}, layerConfig.config.options), { layout: __assign(__assign({}, (_b = (_a = layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.layout), { visibility: layerConfig.masterVisible === false
+                                ? 'none'
+                                : ((_e = (_d = (_c = layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.config) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.visibility)
+                                    ? (_h = (_g = (_f = layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.config) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.visibility
+                                    : 'visible' }) }) })));
+            case 'vt': {
+                var l = layerConfig.config.layers.map(function (layer) {
+                    var _a;
+                    var newLayer = __assign({}, layer);
+                    if (newLayer.layout) {
+                        newLayer.layout = __assign(__assign({}, newLayer.layout), { visibility: newLayer.masterVisible === false ? 'none' : (_a = newLayer.layout.visibility) !== null && _a !== void 0 ? _a : 'visible' });
+                    }
+                    return newLayer;
+                });
+                return (React.createElement(MlVectorTileLayer, { key: layerConfig.uuid, layerId: layerConfig.uuid, insertBeforeLayer: 'layer_id_' + layerConfig.uuid, url: layerConfig.config.url, layers: l }));
+            }
+            case 'wms': {
+                var visible = layerConfig.masterVisible === false ? false : (_j = layerConfig.config) === null || _j === void 0 ? void 0 : _j.visible;
+                return (React.createElement(MlWmsLayer, { key: layerConfig.uuid, layerId: layerConfig.uuid, insertBeforeLayer: 'layer_id_' + layerConfig.uuid, url: ((_k = layerConfig.config) === null || _k === void 0 ? void 0 : _k.url) || '', urlParameters: (_l = layerConfig.config) === null || _l === void 0 ? void 0 : _l.urlParameters, visible: visible }));
+            }
+            case 'folder':
+                return (layer === null || layer === void 0 ? void 0 : layer.layers) ? (layer.layers.map(function (subLayer) { return renderLayer(subLayer); })) : (React.createElement(React.Fragment, null));
+            default:
+                return null;
+        }
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MlOrderLayers, { layerIds: orderLayers }), (_a = layerStoreOrder === null || layerStoreOrder === void 0 ? void 0 : layerStoreOrder.map) === null || _a === void 0 ? void 0 :
+        _a.call(layerStoreOrder, function (layerOrderItem) { return renderLayer(layerOrderItem); })));
+}
+
+var MapStore = {
+    store: store,
+    setMapConfig: setMapConfig,
+    removeMapConfig: removeMapConfig,
+    setLayerInMapConfig: setLayerInMapConfig,
+    removeLayerFromMapConfig: removeLayerFromMapConfig,
+    updateLayerOrder: updateLayerOrder,
+    setMasterVisible: setMasterVisible,
+};
+
 exports.AddLayerButton = AddLayerButton;
 exports.AddLayerPopup = AddLayerPopup;
 exports.CSVProtocolHandler = CSVProtocolHandler;
-exports.ColorPicker = PaintPropsColorPicker;
+exports.ColorPicker = PaintPropsColorPicker$1;
 exports.ConfirmDialog = ConfirmDialog;
 exports.GeoJsonContext = GeoJsonContext;
 exports.GeoJsonLayerForm = GeoJsonLayerForm;
@@ -21200,12 +21887,16 @@ exports.LayerListFolder = LayerListFolder;
 exports.LayerListItem = LayerListItem;
 exports.LayerListItemFactory = LayerListItemFactory;
 exports.LayerListItemVectorLayer = LayerListItemVectorLayer;
-exports.LayerPropertyForm = LayerPropertyForm;
+exports.LayerOnMap = LayerOnMap;
+exports.LayerPropertyForm = LayerPropertyForm$1;
+exports.LayerTree = LayerTree;
+exports.LayerTreeListItem = LayerTreeListItem;
 exports.LayerTypeForm = LayerTypeForm;
 exports.MapComponentsProvider = MapComponentsProvider;
 exports.MapContext = MapContext;
 exports.MapLibreGlWrapper = MapLibreGlWrapper;
 exports.MapLibreMap = MapLibreMap;
+exports.MapStore = MapStore;
 exports.MedievalKingdomStyle = MedievalKingdomStyle;
 exports.MlCenterPosition = MlCenterPosition;
 exports.MlComponentTemplate = MlComponentTemplate;
@@ -21225,6 +21916,7 @@ exports.MlMeasureTool = MlMeasureTool;
 exports.MlMultiMeasureTool = MlMultiMeasureTool;
 exports.MlNavigationCompass = MlNavigationCompass;
 exports.MlNavigationTools = MlNavigationTools;
+exports.MlOgcApiFeatures = MlOgcApiFeatures;
 exports.MlOrderLayers = MlOrderLayers;
 exports.MlPdfPreview = PdfPreview;
 exports.MlScaleReference = MlScaleReference;