@mapcomponents/react-maplibre 0.1.86 → 0.1.88

package/dist/index.esm.js

@@ -42,17 +42,36 @@ var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
 var DialogContentText = require('@mui/material/DialogContentText');
 var DialogTitle = require('@mui/material/DialogTitle');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var PlayArrowIcon = require('@mui/icons-material/PlayArrow');
 var PauseIcon = require('@mui/icons-material/Pause');
 var StopIcon = require('@mui/icons-material/Stop');
 var FastForwardIcon = require('@mui/icons-material/FastForward');
 var FastRewindIcon = require('@mui/icons-material/FastRewind');
-var d3 = require('d3');
+var PentagonIcon = require('@mui/icons-material/Pentagon');
 var system = require('@mui/system');
+var EditIcon = require('@mui/icons-material/Edit');
+var Tooltip = require('@mui/material/Tooltip');
 var reactColor = require('react-color');
 var TuneIcon = require('@mui/icons-material/Tune');
+var ScatterPlotIcon = require('@mui/icons-material/ScatterPlot');
+var PolylineIcon = require('@mui/icons-material/Polyline');
+var d3 = require('d3');
+var core = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
 var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
 var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
+var AddBoxIcon = require('@mui/icons-material/AddBox');
+var IndeterminateCheckBoxIcon = require('@mui/icons-material/IndeterminateCheckBox');
+var csv2geojson = require('csv2geojson');
+var topojsonClient = require('topojson-client');
+var osm2geojson = require('osm2geojson-lite');
+var externParser = require('@tmcw/togeojson');
+var initSqlJs = require('sql.js');
+var pako = require('pako');
+var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
 var AppBar = require('@mui/material/AppBar');
 var Toolbar = require('@mui/material/Toolbar');
 var Menu = require('@mui/material/Menu');
@@ -128,10 +147,24 @@ var PauseIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseIcon);
 var StopIcon__default = /*#__PURE__*/_interopDefaultLegacy(StopIcon);
 var FastForwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastForwardIcon);
 var FastRewindIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastRewindIcon);
-var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
+var PentagonIcon__default = /*#__PURE__*/_interopDefaultLegacy(PentagonIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
+var ScatterPlotIcon__default = /*#__PURE__*/_interopDefaultLegacy(ScatterPlotIcon);
+var PolylineIcon__default = /*#__PURE__*/_interopDefaultLegacy(PolylineIcon);
+var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 var PlaylistAddIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlaylistAddIcon);
 var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
+var AddBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddBoxIcon);
+var IndeterminateCheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(IndeterminateCheckBoxIcon);
+var csv2geojson__namespace = /*#__PURE__*/_interopNamespace(csv2geojson);
+var osm2geojson__default = /*#__PURE__*/_interopDefaultLegacy(osm2geojson);
+var externParser__namespace = /*#__PURE__*/_interopNamespace(externParser);
+var initSqlJs__default = /*#__PURE__*/_interopDefaultLegacy(initSqlJs);
+var pako__namespace = /*#__PURE__*/_interopNamespace(pako);
+var KeyboardArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownIcon);
+var KeyboardArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowUpIcon);
 var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
 var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
@@ -933,7 +966,6 @@ function LayerContextProvider(props) {
         setSymbolLayers(symbolLayers);
     };
     React.useEffect(function () {
-        console.log('layers', layers);
         if (layers.filter(function (el) { return !(el === null || el === void 0 ? void 0 : el.id); }).length) {
             var _layers = __spreadArray([], layers, true);
             _layers.forEach(function (el) {
@@ -978,6 +1010,7 @@ function LayerContextProvider(props) {
         setTileUrl: setTileUrl,
         moveUp: moveUp,
         moveDown: moveDown,
+        moveLayer: moveLayer,
     };
     return React__default["default"].createElement(LayerContext.Provider, { value: value }, props.children);
 }
@@ -2569,7 +2602,7 @@ var MlFillExtrusionLayer = function (props) {
             type: "fill-extrusion",
             source: props.sourceId || "openmaptiles",
             "source-layer": props.sourceLayer || "building",
-            minzoom: props.minZoom || 14,
+            minzoom: props.minZoom || 6,
             paint: __assign({}, props.paint),
         },
         insertBeforeFirstSymbolLayer: true,
@@ -2658,8 +2691,10 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
  * @component
  */
 var MlGeoJsonLayer = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+    var layerId = props.layerId || 'MlGeoJsonLayer-' + uuid.v4();
+    var labelLayerId = "label-".concat(layerId);
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
     useLayer({
         mapId: props.mapId,
@@ -2671,6 +2706,14 @@ var MlGeoJsonLayer = function (props) {
         onClick: props.onClick,
         onLeave: props.onLeave,
     });
+    if (props.labelProp) {
+        useLayer({
+            mapId: props.mapId,
+            layerId: labelLayerId,
+            geojson: props.geojson,
+            options: __assign(__assign({ type: 'symbol' }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), { layout: __assign({ 'text-field': "{".concat(props.labelProp, "}") }, (((_c = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _c === void 0 ? void 0 : _c.layout) ? props.labelOptions.layout : {})), paint: {} }),
+        });
+    }
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 
@@ -2854,52 +2897,77 @@ var MlImageMarkerLayer = function (props) {
 //	miles: 1 / 2.58998811,
 //};
 function getUnitSquareMultiplier(measureType) {
-    return measureType === "miles" ? 1 / 2.58998811 : 1;
+    return measureType === 'miles' ? 1 / 2.58998811 : 1;
 }
 function getUnitLabel(measureType) {
-    return measureType === "miles" ? 'mi' : 'km';
+    return measureType === 'miles' ? 'mi' : 'km';
 }
 var MlMeasureTool = function (props) {
-    var _a = React.useState(0), length = _a[0], setLength = _a[1];
+    var _a = React.useState({ value: 0, label: 'km' }), displayValue = _a[0], setDisplayValue = _a[1];
     var _b = React.useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
     React.useEffect(function () {
         if (currentFeatures[0]) {
-            setLength(props.measureType === "polygon"
+            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 }));
+                : 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 = 'in';
+                    value = result * 63360;
+                    if (props.measureType === 'polygon') {
+                        value = result * 4014489599.4792;
+                    }
+                }
+                setDisplayValue({ value: value, label: label });
+            }
         }
     }, [props.unit, currentFeatures]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MlFeatureEditor, { onChange: function (features) {
                 setCurrentFeatures(features);
-            }, mode: props.measureType === "polygon" ? "draw_polygon" : "draw_line_string" }),
-        length.toFixed(2),
+            }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string' }),
+        displayValue.value.toFixed(2),
         " ",
-        getUnitLabel(props.unit),
-        props.measureType === "polygon" ? "²" : ""));
+        displayValue.label,
+        props.measureType === 'polygon' ? '²' : ''));
 };
 MlMeasureTool.defaultProps = {
     mapId: undefined,
-    measureType: "line",
-    unit: "kilometers",
+    measureType: 'line',
+    unit: 'kilometers',
 };
 
-var _path$1, _path2$1;
+var _g;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgCompassNeedle = function SvgCompassNeedle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    width: 9,
+    width: 10,
     height: 40,
-    viewBox: "0 0 9 40",
+    viewBox: "0 0 10 40",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3.34715 4.52028C3.57452 3.46874 5.0746 3.46874 5.30197 4.52028L8.64912 20H0L3.34715 4.52028Z",
-    fill: "#CF003D"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3.34715 35.4797C3.57452 36.5313 5.0746 36.5313 5.30197 35.4797L8.64912 20H0L3.34715 35.4797Z",
-    fill: "#D3DCE1"
-  })));
+    id: "svg6"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    id: "g14",
+    transform: "translate(0.67544,-1.25e-5)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z",
+    fill: "#cf003d"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z",
+    fill: "#d3dcf0"
+  }))));
 };
 
 var _circle, _path, _path2, _path3, _path4;
@@ -2952,7 +3020,13 @@ var CompassBox = material.styled(material.Box)(function (_a) {
     return (_b = {
             position: 'absolute',
             right: '-10px',
-            top: '-52px'
+            top: '-52px',
+            width: '52px',
+            height: '52px',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center'
         },
         _b[theme.breakpoints.down('md')] = {
             right: '0px',
@@ -2973,9 +3047,8 @@ var CompassBox = material.styled(material.Box)(function (_a) {
 var NeedleBox = material.styled(material.Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        position: 'absolute',
-        right: '21.4px',
-        top: '6px',
+        display: 'flex',
+        flexDirection: 'row',
         'path:nth-of-type(2)': {
             fill: theme.palette.compass.compSouth,
         },
@@ -3031,7 +3104,7 @@ var MlNavigationCompass = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(BoxStyled$2, { sx: __assign({}, props.style) },
             React__default["default"].createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
-                React__default["default"].createElement(SvgCompassBackground, null),
+                React__default["default"].createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
                 React__default["default"].createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
                     React__default["default"].createElement(SvgCompassNeedle, { style: {
                             transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
@@ -3081,7 +3154,7 @@ var MlNavigationTools = function (props) {
     }, [mapHook.map]);
     return (React__default["default"].createElement(Box__default["default"], { 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) },
         React__default["default"].createElement(MlNavigationCompass, null),
-        props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch < 59 ? '3D' : '2D')),
+        props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
         props.showFollowGpsButton && React__default["default"].createElement(MlFollowGps, null),
         props.showCenterLocationButton && React__default["default"].createElement(MlCenterPosition, null),
         React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
@@ -3114,9 +3187,9 @@ var MlLayer = function (props) {
         idPrefix: 'MlLayer-',
         layerId: props.layerId,
         mapId: props.mapId,
-        geojson: props.geojson,
-        options: __assign({ type: "background", paint: {
-                "background-color": "rgba(0,0,0,0)",
+        geojson: props.geojson || undefined,
+        options: __assign({ type: 'background', paint: {
+                'background-color': 'rgba(0,0,0,0)',
             } }, props.options),
         insertBeforeLayer: props.insertBeforeLayer,
     });
@@ -3401,7 +3474,7 @@ var MlLayerSwipe = function (props) {
         });
     }, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
     var onDown = function (e) {
-        if (e.nativeEvent instanceof TouchEvent) {
+        if ((window === null || window === void 0 ? void 0 : window.TouchEvent) && e.nativeEvent instanceof window.TouchEvent) {
             document.addEventListener('touchmove', onMove);
             document.addEventListener('touchend', onTouchEnd);
         }
@@ -5347,6 +5420,17 @@ ConfirmDialog.defaultProps = {
     text: 'Are you sure?',
 };
 
+function SortableContainer(_a) {
+    var children = _a.children, layerId = _a.layerId;
+    var _b = sortable.useSortable({
+        id: layerId,
+    }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform;
+    var style = {
+        transform: utilities.CSS.Transform.toString(transform),
+    };
+    return (React__default["default"].createElement("li", __assign({ ref: setNodeRef, style: style }, attributes, listeners), children));
+}
+
 var originShift = (2 * Math.PI * 6378137) / 2.0;
 var lngLatToMeters = function (lnglat, accuracy) {
     if (accuracy === void 0) { accuracy = { enable: true, decimal: 1 }; }
@@ -5561,57 +5645,59 @@ var MlWmsLoader = function (props) {
             }
         }
     }, [capabilities, mapHook.map]);
+    var listContent = (React__default["default"].createElement(ListItem__default["default"], { secondaryAction: React__default["default"].createElement(React__default["default"].Fragment, null,
+            props.buttons,
+            props.featureInfoEnabled && (React__default["default"].createElement(IconButton__default["default"], { sx: {
+                    padding: '4px',
+                    marginTop: '-3px',
+                    marginRight: '4px',
+                    background: function (theme) {
+                        if (!(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })))
+                            return 'initial';
+                        if (_featureInfoEventsEnabled)
+                            return theme.palette.info.light;
+                        return theme.palette.grey[300];
+                    },
+                }, "aria-label": "featureinfo", onClick: function () {
+                    if (typeof (props === null || props === void 0 ? void 0 : props.setFeatureInfoActive) === 'function') {
+                        props.setFeatureInfoActive(function (current) { return !current; });
+                    }
+                    else {
+                        setFeatureInfoEventsEnabled(function (current) { return !current; });
+                    }
+                }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
+                React__default["default"].createElement(InfoIcon__default["default"], null))),
+            React__default["default"].createElement(IconButton__default["default"], { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandLess, null) : React__default["default"].createElement(iconsMaterial.ExpandMore, null)),
+            props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(IconButton__default["default"], { "aria-label": "delete", edge: "end", onClick: function () {
+                        if (typeof props.onConfigChange === 'function') {
+                            setShowDeletionConfirmationDialog(true);
+                        }
+                    }, sx: { padding: '4px', marginTop: '-3px' } },
+                    React__default["default"].createElement(DeleteIcon__default["default"], null)),
+                showDeletionConfirmationDialog && (React__default["default"].createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
+                        if (typeof props.onConfigChange === 'function') {
+                            props.onConfigChange(false);
+                        }
+                    }, onCancel: function () {
+                        setShowDeletionConfirmationDialog(false);
+                    }, title: "Delete layer", text: "Are you sure you want to delete this layer?" }))))), sx: {
+            paddingRight: 0,
+            paddingLeft: 0,
+            paddingTop: 0,
+            paddingBottom: '4px',
+        } },
+        React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
+            React__default["default"].createElement(material.Checkbox, { sx: { padding: 0 }, checked: visible, onClick: function () {
+                    setVisible(function (val) { return !val; });
+                } })),
+        React__default["default"].createElement(ListItemText__default["default"], { primary: name, variant: "layerlist" })));
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         error && (React__default["default"].createElement(material.Snackbar, null,
             React__default["default"].createElement(material.Box, null, error))),
         wmsUrl && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(ListItem__default["default"], { secondaryAction: React__default["default"].createElement(React__default["default"].Fragment, null,
-                    props.buttons,
-                    props.featureInfoEnabled && (React__default["default"].createElement(IconButton__default["default"], { sx: {
-                            padding: '4px',
-                            marginTop: '-3px',
-                            marginRight: '4px',
-                            background: function (theme) {
-                                if (!(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })))
-                                    return 'initial';
-                                if (_featureInfoEventsEnabled)
-                                    return theme.palette.info.light;
-                                return theme.palette.grey[300];
-                            },
-                        }, "aria-label": "featureinfo", onClick: function () {
-                            if (typeof (props === null || props === void 0 ? void 0 : props.setFeatureInfoActive) === 'function') {
-                                props.setFeatureInfoActive(function (current) { return !current; });
-                            }
-                            else {
-                                setFeatureInfoEventsEnabled(function (current) { return !current; });
-                            }
-                        }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
-                        React__default["default"].createElement(InfoIcon__default["default"], null))),
-                    React__default["default"].createElement(IconButton__default["default"], { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandLess, null) : React__default["default"].createElement(iconsMaterial.ExpandMore, null)),
-                    props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(IconButton__default["default"], { "aria-label": "delete", edge: "end", onClick: function () {
-                                if (typeof props.onConfigChange === 'function') {
-                                    setShowDeletionConfirmationDialog(true);
-                                }
-                            }, sx: { padding: '4px', marginTop: '-3px' } },
-                            React__default["default"].createElement(DeleteIcon__default["default"], null)),
-                        showDeletionConfirmationDialog && (React__default["default"].createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
-                                if (typeof props.onConfigChange === 'function') {
-                                    props.onConfigChange(false);
-                                }
-                            }, onCancel: function () {
-                                setShowDeletionConfirmationDialog(false);
-                            }, title: "Delete layer", text: "Are you sure you want to delete this layer?" }))))), sx: {
-                    paddingRight: 0,
-                    paddingLeft: 0,
-                    paddingTop: 0,
-                    paddingBottom: '4px',
-                } },
-                React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                    React__default["default"].createElement(material.Checkbox, { sx: { padding: 0 }, checked: visible, onClick: function () {
-                            setVisible(function (val) { return !val; });
-                        } })),
-                React__default["default"].createElement(ListItemText__default["default"], { primary: name, variant: "layerlist" })),
+            props.layerId && props.sortable && (React__default["default"].createElement(SortableContainer, { layerId: props.layerId }, listContent)),
+            props.layerId && !props.sortable && (listContent),
             React__default["default"].createElement(material.Box, { sx: { display: open ? 'block' : 'none' } },
                 React__default["default"].createElement(List__default["default"], { dense: true, component: "div", disablePadding: true, sx: { paddingLeft: '18px' } }, wmsUrl &&
                     ((_j = layers === null || layers === void 0 ? void 0 : layers.map) === null || _j === void 0 ? void 0 : _j.call(layers, function (layer, idx) {
@@ -6220,385 +6306,80 @@ MlTerrainLayer.defaultProps = {
     mapId: undefined,
 };
 
-/**
- * Component template
- *
- */
-var useCameraFollowPath = function (props) {
-    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    // without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
-    var initializedRef = React.useRef(false);
-    var pause = React.useRef(props.pause);
-    var zoom = React.useRef(props.zoom);
-    var pitch = React.useRef(props.pitch);
-    var step = React.useRef(1);
-    var speed = React.useRef(props.speed);
-    var timeoutId = React.useRef();
-    var kmPerStep = props.kmPerStep || 0.01;
-    var routeDistance = turf__namespace.lineDistance(props.route);
-    var stepDuration = props.stepDuration || 70;
-    var mapHook = useMap({
-        mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
+var ListItemStyled$1 = system.styled(material.ListItem)({
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: '4px',
+});
+var ListItemIconStyled = system.styled(material.ListItemIcon)({
+    minWidth: '30px',
+});
+var IconButtonStyled$1 = system.styled(material.IconButton)({
+    marginRight: '0px',
+    padding: '0px',
+});
+var CheckboxStyled$1 = system.styled(material.Checkbox)({
+    padding: 0,
+    marginRight: '5px',
+});
+var BoxStyled$1 = system.styled(system.Box)(function (_a) {
+    var open = _a.open;
+    return ({
+        display: open ? 'block' : 'none',
     });
-    React.useEffect(function () {
-        pause.current = props.pause;
-        if (!pause.current) {
-            play();
-        }
-    }, [props.pause]);
-    React.useEffect(function () {
-        if (!mapHook.map)
-            return;
-        zoom.current = props.zoom;
-        if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
-            mapHook.map.map.setZoom(zoom.current);
-        }
-    }, [mapHook.map, props.zoom]);
-    React.useEffect(function () {
-        if (!mapHook.map)
-            return;
-        pitch.current = props.pitch;
-        if (typeof pitch.current !== 'undefined' && pitch.current !== mapHook.map.map.getPitch()) {
-            mapHook.map.map.setPitch(pitch.current);
-        }
-    }, [mapHook.map, props.pitch]);
-    React.useEffect(function () {
-        speed.current = props.speed;
-    }, [props.speed]);
-    var disableInteractivity = React.useCallback(function () {
-        if (!mapHook.map)
-            return;
-        mapHook.map.map['scrollZoom'].disable();
-        mapHook.map.map['boxZoom'].disable();
-        mapHook.map.map['dragRotate'].disable();
-        mapHook.map.map['dragPan'].disable();
-        mapHook.map.map['keyboard'].disable();
-        mapHook.map.map['doubleClickZoom'].disable();
-        mapHook.map.map['touchZoomRotate'].disable();
-    }, [mapHook.map]);
-    var enableInteractivity = React.useCallback(function () {
-        if (!mapHook.map)
-            return;
-        mapHook.map.map['scrollZoom'].enable();
-        mapHook.map.map['boxZoom'].enable();
-        mapHook.map.map['dragRotate'].enable();
-        mapHook.map.map['dragPan'].enable();
-        mapHook.map.map['keyboard'].enable();
-        mapHook.map.map['doubleClickZoom'].enable();
-        mapHook.map.map['touchZoomRotate'].enable();
-    }, [mapHook.map]);
-    function centerRoute() {
-        if (!mapHook.map || !props.route)
-            return;
-        var bbox = turf__namespace.bbox(props.route);
-        var bounds;
-        if (bbox && bbox.length > 3) {
-            bounds = [
-                [bbox[0], bbox[1]],
-                [bbox[2], bbox[3]],
-            ];
-            mapHook.map.map.fitBounds(bounds, { padding: 100 });
+});
+var ListStyled$1 = system.styled(material.List)({
+    marginLeft: '50px',
+});
+function LayerListFolder(_a) {
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, name = _a.name, children = _a.children, setVisible = _a.setVisible;
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var _d = React.useState(true), localVisible = _d[0], setLocalVisible = _d[1];
+    var _visible = React.useMemo(function () {
+        if (!visible) {
+            return false;
         }
-    }
-    function play() {
-        if (!mapHook.map)
-            return;
-        if (!pause.current) {
-            disableInteractivity();
-            if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
-                mapHook.map.map.setZoom(zoom.current);
-            }
-            var alongRoutelati = turf__namespace.along(props.route, step.current * kmPerStep).geometry
-                .coordinates;
-            if (step.current * kmPerStep < routeDistance) {
-                mapHook.map.map.easeTo({
-                    center: alongRoutelati,
-                    bearing: turf__namespace.bearing(turf__namespace.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]), turf__namespace.point(alongRoutelati)),
-                    duration: stepDuration,
-                    essential: true,
+        return localVisible;
+    }, [visible, localVisible]);
+    var _children = React.useMemo(function () {
+        if (children) {
+            if (Array.isArray(children)) {
+                return children.map(function (element) {
+                    return React__default["default"].cloneElement(element, {
+                        visible: _visible,
+                    });
                 });
-                if (typeof speed.current !== 'undefined') {
-                    step.current = step.current + speed.current;
-                }
-                else {
-                    step.current++;
-                }
-                console.log('PAN MOVE');
-                setTimeout(function () {
-                    play();
-                }, 100);
-            }
-            else {
-                mapHook.map.map.setPitch(0);
-                centerRoute();
-                enableInteractivity();
-                console.log('ENABLE CONTROLS');
-                step.current = 1;
             }
+            return React__default["default"].cloneElement(children, {
+                visible: _visible,
+            });
         }
-        else {
-            enableInteractivity();
-        }
-    }
-    function reset() {
-        if (!mapHook.map)
-            return;
-        centerRoute();
-        enableInteractivity();
-        step.current = 1;
-    }
-    React.useEffect(function () {
-        if (!mapHook.map || initializedRef.current)
-            return;
-        initializedRef.current = true;
-        centerRoute();
-    }, [mapHook.map]);
-    React.useEffect(function () {
-        return function () {
-            if (timeoutId.current) {
-                clearTimeout(timeoutId.current);
-            }
-        };
-    }, []);
-    return {
-        play: play,
-        reset: reset,
-    };
-};
-useCameraFollowPath.defaultProps = {
-    mapId: undefined,
-    zoom: 18,
-};
-
-function useLayerFilter(props) {
-    var mapHook = useMap({ mapId: props.mapId });
-    React.useEffect(function () {
-        if (!mapHook.map || !props.layerId || !props.filter)
-            return;
-        if (mapHook.map.map.getLayer(props.layerId)) {
-            var _layerId_1 = props.layerId;
-            mapHook.map.map.setFilter(_layerId_1, props.filter);
-            return function () {
-                if (mapHook.map) {
-                    mapHook.map.map.setFilter(_layerId_1, null);
-                }
-            };
-        }
-        return;
-    }, [props, mapHook.map]);
-    return {};
-}
-
-var touchEquivalents = {
-  mousedown: 'touchstart',
-  mouseup: 'touchend',
-  mousemove: 'touchmove'
-};
-var touchEquivalentsKeys = Object.keys(touchEquivalents);
-function useLayerEvent(props) {
-  var mapState = useMapState({
-    mapId: props.mapId,
-    watch: {
-      layers: true
-    }
-  });
-  var mapHook = useMap({
-    mapId: props.mapId
-  });
-  React.useEffect(function () {
-    if (!mapHook.map) return true;
-    if (typeof props.condition !== 'undefined' && props.condition === false) return;
-    //console.log('useLayerEvent');
-    //console.log(mapState);
-
-    if (mapHook.map.map.getLayer(props.layerId)) {
-      //console.log("layer avail");
-      var _event = props.event;
-      var _layerId = props.layerId;
-      var _eventHandler = props.eventHandler;
-
-      //console.log(_event);
-      mapHook.map.on(_event, _layerId, _eventHandler, mapHook.componentId);
-      if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
-        if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-          mapHook.map.on(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-        }
-      }
-      return function () {
-        mapHook.map.off(_event, _layerId, _eventHandler);
-        if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
-          if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-            mapHook.map.off(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-          }
-        }
-      };
-    }
-  }, [props, mapState, mapHook.map]);
-  return {};
-}
-
-var useLayerContext = function () {
-    var layerContext = React.useContext(LayerContext);
-    return layerContext;
-};
-
-/**
- * Enables the use of custom protocols (basically custom tile load functions) in the maplibre-gl-js library.
- *
- */
-var useAddProtocol = function (props) {
-    React.useEffect(function () {
-        if (!props.protocol || typeof props.handler !== 'function')
-            return;
-        maplibregl__default["default"].addProtocol(props.protocol, props.handler);
-        return function () {
-            maplibregl__default["default"].removeProtocol(props.protocol);
-        };
-    }, []);
-    return {};
-};
-useAddProtocol.defaultProps = {
-    mapId: undefined,
-};
-
-var SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
-var SimpleDataContextProvider = SimpleDataContext.Provider;
-
-var SimpleDataProvider = function SimpleDataProvider(props) {
-  var _useState = React.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  React.useEffect(function () {
-    if (!props.url) return;
-    var data_promise = null;
-    if (props.format === "json") {
-      data_promise = d3__namespace.json(props.url);
-    } else if (props.format === "csv") {
-      data_promise = d3__namespace.csv(props.url);
-    } else if (props.format === "xml") {
-      data_promise = d3__namespace.xml(props.url);
-    }
-    if (data_promise) {
-      data_promise.then(function (received_data) {
-        if (props.format === "xml") {
-          if (props.nodeType) {
-            var dataTmp = [];
-            received_data.querySelectorAll(props.nodeType).forEach(function (el) {
-              dataTmp.push(props.formatData(el));
-            });
-            setData(dataTmp);
-          }
-        } else {
-          if (props.data_property) {
-            received_data = received_data[props.data_property];
-          }
-          if (typeof props.formatData === "function") {
-            setData(received_data.map(props.formatData));
-          } else {
-            setData(received_data);
-          }
-        }
-        if (typeof props.onData === "function") {
-          props.onData();
-        }
-      });
-    }
-  }, [props.url, props]);
-  var value = {
-    data: data,
-    setData: setData
-  };
-  return /*#__PURE__*/React__default["default"].createElement(SimpleDataContextProvider, {
-    value: value
-  }, props.children);
-};
-SimpleDataProvider.propTypes = {
-  children: PropTypes__default["default"].node.isRequired
-};
-
-var ListStyled$1 = material.styled(material.List)({
-    marginTop: '15px',
-});
-function LayerList(props) {
-    return React__default["default"].createElement(ListStyled$1, null, props === null || props === void 0 ? void 0 : props.children);
-}
-
-var ListItemStyled$1 = system.styled(material.ListItem)({
-    paddingRight: 0,
-    paddingLeft: 0,
-    paddingTop: 0,
-    paddingBottom: '4px',
-});
-var ListItemIconStyled = system.styled(material.ListItemIcon)({
-    minWidth: '30px',
-});
-var IconButtonStyled$1 = system.styled(material.IconButton)({
-    marginRight: '0px',
-    padding: '0px',
-});
-var CheckboxStyled$1 = system.styled(material.Checkbox)({
-    padding: 0,
-    marginRight: '5px',
-});
-var BoxStyled$1 = system.styled(system.Box)(function (_a) {
-    var open = _a.open;
-    return ({
-        display: open ? 'block' : 'none',
-    });
-});
-var ListStyled = system.styled(material.List)({
-    marginLeft: '50px',
-});
-function LayerListFolder(_a) {
-    var _b = _a.visible, visible = _b === void 0 ? true : _b, name = _a.name, children = _a.children, setVisible = _a.setVisible;
-    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
-    var _d = React.useState(true), localVisible = _d[0], setLocalVisible = _d[1];
-    var _visible = React.useMemo(function () {
-        if (!visible) {
-            return false;
-        }
-        return localVisible;
-    }, [visible, localVisible]);
-    var _children = React.useMemo(function () {
-        if (children) {
-            if (Array.isArray(children)) {
-                return children.map(function (element) {
-                    return React__default["default"].cloneElement(element, {
-                        visible: _visible,
-                    });
-                });
-            }
-            return React__default["default"].cloneElement(children, {
-                visible: _visible,
-            });
-        }
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    }, [_visible]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(ListItemStyled$1, null,
-            React__default["default"].createElement(ListItemIconStyled, null,
-                React__default["default"].createElement(IconButtonStyled$1, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandMore, null) : React__default["default"].createElement(iconsMaterial.KeyboardArrowRight, null)),
-                React__default["default"].createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
-                        if (setVisible) {
-                            setVisible(function (val) { return !val; });
-                        }
-                        else {
-                            setLocalVisible(function (val) { return !val; });
-                        }
-                    } })),
-            React__default["default"].createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
-        React__default["default"].createElement(BoxStyled$1, { open: open },
-            React__default["default"].createElement(ListStyled, { disablePadding: true }, _children))));
-}
-
-var converters = {
-    rgba: function (c) { return "rgba(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ", ").concat(c.rgb.a, ")"); },
-    rgb: function (c) { return "rgb(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ")"); },
-    hex: function (c) { return c.hex; },
-    rgba_rgb: function (c) { return c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c); },
-    rgba_hex: function (c) { return c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c); }
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [_visible]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(ListItemStyled$1, null,
+            React__default["default"].createElement(ListItemIconStyled, null,
+                React__default["default"].createElement(IconButtonStyled$1, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandMore, null) : React__default["default"].createElement(iconsMaterial.KeyboardArrowRight, null)),
+                React__default["default"].createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
+                        if (setVisible) {
+                            setVisible(function (val) { return !val; });
+                        }
+                        else {
+                            setLocalVisible(function (val) { return !val; });
+                        }
+                    } })),
+            React__default["default"].createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
+        React__default["default"].createElement(BoxStyled$1, { open: open },
+            React__default["default"].createElement(ListStyled$1, { disablePadding: true }, _children))));
+}
+
+var converters = {
+    rgba: function (c) { return "rgba(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ", ").concat(c.rgb.a, ")"); },
+    rgb: function (c) { return "rgb(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ")"); },
+    hex: function (c) { return c.hex; },
+    rgba_rgb: function (c) { return c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c); },
+    rgba_hex: function (c) { return c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c); }
 };
 
 var ColorPicker = function (_a) {
@@ -6817,16 +6598,16 @@ var DeleteIconButton = material.styled(material.IconButton)({
     marginLeft: '20px',
 });
 function LayerListItem(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var layerComponent = _a.layerComponent, visible = _a.visible, type = _a.type, name = _a.name, description = _a.description, configurable = _a.configurable, setLayerState = _a.setLayerState, props = __rest(_a, ["layerComponent", "visible", "type", "name", "description", "configurable", "setLayerState"]);
-    var _o = React.useState(true), localVisible = _o[0], setLocalVisible = _o[1];
-    var _p = React.useState(false), paintPropsFormVisible = _p[0], setPaintPropsFormVisible = _p[1];
-    var _q = React.useState(false), showDeletionConfirmationDialog = _q[0], setShowDeletionConfirmationDialog = _q[1];
+    var _p = React.useState(true), localVisible = _p[0], setLocalVisible = _p[1];
+    var _q = React.useState(false), paintPropsFormVisible = _q[0], setPaintPropsFormVisible = _q[1];
+    var _r = React.useState(false), showDeletionConfirmationDialog = _r[0], setShowDeletionConfirmationDialog = _r[1];
     var deletedRef = React.useRef(false);
     var visibleRef = React.useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _r = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
-        getDefaultPaintPropsByType(((_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _r[0], setPaintProps = _r[1];
+    var _s = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
+        getDefaultPaintPropsByType(((_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _s[0], setPaintProps = _s[1];
     var _visible = React.useMemo(function () {
         if (!visible) {
             return false;
@@ -6894,22 +6675,24 @@ function LayerListItem(_a) {
         }
         return undefined;
     }, [layerComponent]);
+    var listContent = (React__default["default"].createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_f = Object.keys(paintProps)) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
+            props.buttons,
+            React__default["default"].createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
+                    setPaintPropsFormVisible(function (current) {
+                        return !current;
+                    });
+                } },
+                React__default["default"].createElement(iconsMaterial.Tune, null)))) : undefined },
+        React__default["default"].createElement(CheckboxListItemIcon, null,
+            React__default["default"].createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
+                    setLocalVisible(function (val) { return !val; });
+                } })),
+        React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        !((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
-                props.buttons,
-                React__default["default"].createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
-                        setPaintPropsFormVisible(function (current) {
-                            return !current;
-                        });
-                    } },
-                    React__default["default"].createElement(iconsMaterial.Tune, null)))) : undefined },
-            React__default["default"].createElement(CheckboxListItemIcon, null,
-                React__default["default"].createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
-                        setLocalVisible(function (val) { return !val; });
-                    } })),
-            React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } }))),
+        props.sortable && props.layerId && !((_g = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _g === void 0 ? void 0 : _g.layers) && (React__default["default"].createElement(SortableContainer, { layerId: props.layerId }, listContent)),
+        !props.sortable && !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) && (listContent),
         _layerComponent,
-        !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) &&
+        !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) &&
             Object.keys(paintProps).length > 0 &&
             configurable &&
             paintPropsFormVisible && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -6930,7 +6713,7 @@ function LayerListItem(_a) {
                         setShowDeletionConfirmationDialog(false);
                     }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
             React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
-        ((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_m = (_l = (_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) === null || _l === void 0 ? void 0 : _l.map) === null || _m === void 0 ? void 0 : _m.call(_l, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
+        ((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_o = (_m = (_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
 }
 LayerListItem.defaultProps = {
     type: 'layer',
@@ -6939,26 +6722,510 @@ LayerListItem.defaultProps = {
     buttons: React__default["default"].createElement(React__default["default"].Fragment, null),
 };
 
-var IconButtonStyled = material.styled(material.IconButton)({
-    padding: '4px',
-    marginTop: '-3px',
-    background: 'none',
-    '&:hover': {
-        background: 'none',
-    },
-});
-function LayerListItemFactory(props) {
+var sketchTools = [
+    { name: 'Point', mode: 'draw_point', icon: React__default["default"].createElement(ScatterPlotIcon__default["default"], null) },
+    { name: 'LineString', mode: 'draw_line_string', icon: React__default["default"].createElement(PolylineIcon__default["default"], null) },
+    { name: 'Polygon', mode: 'draw_polygon', icon: React__default["default"].createElement(PentagonIcon__default["default"], null) },
+];
+/**
+ * Component template
+ *
+ */
+var MlSketchTool = function (props) {
     var _a, _b;
-    var layerContext = useLayerContext();
-    var orderLayers = React.useMemo(function () {
-        var layerIds = __spreadArray(__spreadArray([
-            'order-background'
-        ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
-            'order-labels',
-        ], false);
-        return layerIds.reverse();
-    }, [layerContext.layers]);
-    var layers = React.useMemo(function () {
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    var _c = React.useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
+    var _d = React.useState({
+        activeGeometryIndex: undefined,
+        selectedGeoJson: undefined,
+        geometries: [],
+        drawMode: undefined,
+    }), sketchState = _d[0], setSketchState = _d[1];
+    var buttonStyle = __assign({}, props.buttonStyleOverride);
+    var buttonClickHandler = function (buttonDrawMode) {
+        setSketchState(function (_state) { return ({
+            drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
+            geometries: _state.geometries,
+            activeGeometryIndex: undefined,
+            selectedGeoJson: undefined,
+        }); });
+    };
+    var removeGeoJson = function (geoJson) {
+        setSketchState(function (_sketchState) {
+            var _geometries = __spreadArray([], _sketchState.geometries, true);
+            _geometries.splice(_geometries.indexOf(geoJson), 1);
+            return __assign(__assign({}, _sketchState), { geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
+                    ? _sketchState.activeGeometryIndex - 1
+                    : undefined });
+        });
+    };
+    var SketchToolButtons = function () {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, sketchTools.map(function (el) {
+            var stateColor = function (theme) {
+                if (sketchState.drawMode === el.mode) {
+                    return theme.palette.primary.main;
+                }
+                else {
+                    return theme.palette.navigation.navColor;
+                }
+            };
+            var stateIconColor = function (theme) {
+                if (sketchState.drawMode !== el.mode) {
+                    return theme.palette.primary.main;
+                }
+                else {
+                    return theme.palette.navigation.navColor;
+                }
+            };
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(Tooltip__default["default"], { title: el.name },
+                    React__default["default"].createElement(material.Button, { sx: __assign({ color: stateIconColor, backgroundColor: stateColor, '&:hover': {
+                                backgroundColor: stateColor,
+                            } }, buttonStyle), onClick: function () { return buttonClickHandler(el.mode); } }, el.icon))));
+        })));
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(system.Box, { sx: {
+                zIndex: 104,
+            } },
+            React__default["default"].createElement(ButtonGroup__default["default"], null,
+                React__default["default"].createElement(SketchToolButtons, null))),
+        sketchState.drawMode && (React__default["default"].createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
+                if (!(feature === null || feature === void 0 ? void 0 : feature[0]))
+                    return;
+                setSketchState(function (_sketchState) {
+                    var _geometries = __spreadArray([], sketchState.geometries, true);
+                    if (typeof _sketchState.activeGeometryIndex === 'undefined') {
+                        var tempFeature = feature[0];
+                        tempFeature.properties.id = tempFeature.id;
+                        _sketchState.activeGeometryIndex = _geometries.length;
+                        _geometries.push(tempFeature);
+                    }
+                    else {
+                        _geometries[_sketchState.activeGeometryIndex] = feature[0];
+                    }
+                    return __assign(__assign({}, _sketchState), { geometries: _geometries });
+                });
+            }, onFinish: function () {
+                setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
+            } })),
+        React__default["default"].createElement(List__default["default"], { sx: { zIndex: 105 } },
+            sketchState.geometries.map(function (el) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(system.Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
+                    React__default["default"].createElement("br", null),
+                    React__default["default"].createElement(system.Box, { flexDirection: 'row', sx: {
+                            '&:hover': {
+                                backgroundColor: 'rgb(177, 177, 177, 0.2)',
+                            },
+                        }, onMouseOver: function () {
+                            setHoveredGeometry(el);
+                        }, onMouseLeave: function () {
+                            setHoveredGeometry(undefined);
+                        } },
+                        React__default["default"].createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default["default"].createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
+                        React__default["default"].createElement(system.Box, { sx: {
+                                padding: '3px 30px',
+                            } },
+                            React__default["default"].createElement(ButtonGroup__default["default"], { size: "small" },
+                                React__default["default"].createElement(material.Button, { onClick: function () {
+                                        var _a;
+                                        (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
+                                            ? el.geometry.coordinates
+                                            : turf__namespace.centerOfMass(el).geometry.coordinates);
+                                    } },
+                                    React__default["default"].createElement(GpsFixedIcon__default["default"], null)),
+                                React__default["default"].createElement(material.Button, { sx: buttonStyle, onClick: function () {
+                                        setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
+                                    } },
+                                    React__default["default"].createElement(EditIcon__default["default"], null)),
+                                React__default["default"].createElement(material.Button, { sx: buttonStyle, onClick: function () {
+                                        removeGeoJson(el);
+                                        setHoveredGeometry(undefined);
+                                    } },
+                                    React__default["default"].createElement(DeleteIcon__default["default"], null)))))))); }),
+            hoveredGeometry && (React__default["default"].createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, type: 'line', layerId: 'highlightBorder', paint: {
+                    'line-color': '#dd9900',
+                    'line-opacity': 0.4,
+                    'line-width': 10,
+                } }))),
+        sketchState.drawMode === 'simple_select' && (React__default["default"].createElement(material.Typography, { sx: { fontSize: '0.6em' } },
+            "Edit ", (_b = (_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 :
+            _b.type))));
+};
+MlSketchTool.defaultProps = {
+    mapId: undefined,
+    buttonStyleOverride: {},
+};
+
+/**
+ * Component template
+ *
+ */
+var useCameraFollowPath = function (props) {
+    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+    // without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
+    var initializedRef = React.useRef(false);
+    var pause = React.useRef(props.pause);
+    var zoom = React.useRef(props.zoom);
+    var pitch = React.useRef(props.pitch);
+    var step = React.useRef(1);
+    var speed = React.useRef(props.speed);
+    var timeoutId = React.useRef();
+    var kmPerStep = props.kmPerStep || 0.01;
+    var routeDistance = turf__namespace.lineDistance(props.route);
+    var stepDuration = props.stepDuration || 70;
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    React.useEffect(function () {
+        pause.current = props.pause;
+        if (!pause.current) {
+            play();
+        }
+    }, [props.pause]);
+    React.useEffect(function () {
+        if (!mapHook.map)
+            return;
+        zoom.current = props.zoom;
+        if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+            mapHook.map.map.setZoom(zoom.current);
+        }
+    }, [mapHook.map, props.zoom]);
+    React.useEffect(function () {
+        if (!mapHook.map)
+            return;
+        pitch.current = props.pitch;
+        if (typeof pitch.current !== 'undefined' && pitch.current !== mapHook.map.map.getPitch()) {
+            mapHook.map.map.setPitch(pitch.current);
+        }
+    }, [mapHook.map, props.pitch]);
+    React.useEffect(function () {
+        speed.current = props.speed;
+    }, [props.speed]);
+    var disableInteractivity = React.useCallback(function () {
+        if (!mapHook.map)
+            return;
+        mapHook.map.map['scrollZoom'].disable();
+        mapHook.map.map['boxZoom'].disable();
+        mapHook.map.map['dragRotate'].disable();
+        mapHook.map.map['dragPan'].disable();
+        mapHook.map.map['keyboard'].disable();
+        mapHook.map.map['doubleClickZoom'].disable();
+        mapHook.map.map['touchZoomRotate'].disable();
+    }, [mapHook.map]);
+    var enableInteractivity = React.useCallback(function () {
+        if (!mapHook.map)
+            return;
+        mapHook.map.map['scrollZoom'].enable();
+        mapHook.map.map['boxZoom'].enable();
+        mapHook.map.map['dragRotate'].enable();
+        mapHook.map.map['dragPan'].enable();
+        mapHook.map.map['keyboard'].enable();
+        mapHook.map.map['doubleClickZoom'].enable();
+        mapHook.map.map['touchZoomRotate'].enable();
+    }, [mapHook.map]);
+    function centerRoute() {
+        if (!mapHook.map || !props.route)
+            return;
+        var bbox = turf__namespace.bbox(props.route);
+        var bounds;
+        if (bbox && bbox.length > 3) {
+            bounds = [
+                [bbox[0], bbox[1]],
+                [bbox[2], bbox[3]],
+            ];
+            mapHook.map.map.fitBounds(bounds, { padding: 100 });
+        }
+    }
+    function play() {
+        if (!mapHook.map)
+            return;
+        if (!pause.current) {
+            disableInteractivity();
+            if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+                mapHook.map.map.setZoom(zoom.current);
+            }
+            var alongRoutelati = turf__namespace.along(props.route, step.current * kmPerStep).geometry
+                .coordinates;
+            if (step.current * kmPerStep < routeDistance) {
+                mapHook.map.map.easeTo({
+                    center: alongRoutelati,
+                    bearing: turf__namespace.bearing(turf__namespace.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]), turf__namespace.point(alongRoutelati)),
+                    duration: stepDuration,
+                    essential: true,
+                });
+                if (typeof speed.current !== 'undefined') {
+                    step.current = step.current + speed.current;
+                }
+                else {
+                    step.current++;
+                }
+                console.log('PAN MOVE');
+                setTimeout(function () {
+                    play();
+                }, 100);
+            }
+            else {
+                mapHook.map.map.setPitch(0);
+                centerRoute();
+                enableInteractivity();
+                console.log('ENABLE CONTROLS');
+                step.current = 1;
+            }
+        }
+        else {
+            enableInteractivity();
+        }
+    }
+    function reset() {
+        if (!mapHook.map)
+            return;
+        centerRoute();
+        enableInteractivity();
+        step.current = 1;
+    }
+    React.useEffect(function () {
+        if (!mapHook.map || initializedRef.current)
+            return;
+        initializedRef.current = true;
+        centerRoute();
+    }, [mapHook.map]);
+    React.useEffect(function () {
+        return function () {
+            if (timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, []);
+    return {
+        play: play,
+        reset: reset,
+    };
+};
+useCameraFollowPath.defaultProps = {
+    mapId: undefined,
+    zoom: 18,
+};
+
+function useLayerFilter(props) {
+    var mapHook = useMap({ mapId: props.mapId });
+    React.useEffect(function () {
+        if (!mapHook.map || !props.layerId || !props.filter)
+            return;
+        if (mapHook.map.map.getLayer(props.layerId)) {
+            var _layerId_1 = props.layerId;
+            mapHook.map.map.setFilter(_layerId_1, props.filter);
+            return function () {
+                if (mapHook.map) {
+                    mapHook.map.map.setFilter(_layerId_1, null);
+                }
+            };
+        }
+        return;
+    }, [props, mapHook.map]);
+    return {};
+}
+
+var touchEquivalents = {
+  mousedown: 'touchstart',
+  mouseup: 'touchend',
+  mousemove: 'touchmove'
+};
+var touchEquivalentsKeys = Object.keys(touchEquivalents);
+function useLayerEvent(props) {
+  var mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      layers: true
+    }
+  });
+  var mapHook = useMap({
+    mapId: props.mapId
+  });
+  React.useEffect(function () {
+    if (!mapHook.map) return true;
+    if (typeof props.condition !== 'undefined' && props.condition === false) return;
+    //console.log('useLayerEvent');
+    //console.log(mapState);
+
+    if (mapHook.map.map.getLayer(props.layerId)) {
+      //console.log("layer avail");
+      var _event = props.event;
+      var _layerId = props.layerId;
+      var _eventHandler = props.eventHandler;
+
+      //console.log(_event);
+      mapHook.map.on(_event, _layerId, _eventHandler, mapHook.componentId);
+      if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
+        if (touchEquivalentsKeys.indexOf(_event) !== -1) {
+          mapHook.map.on(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
+        }
+      }
+      return function () {
+        mapHook.map.off(_event, _layerId, _eventHandler);
+        if ((props === null || props === void 0 ? void 0 : props.addTouchEvents) === true) {
+          if (touchEquivalentsKeys.indexOf(_event) !== -1) {
+            mapHook.map.off(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
+          }
+        }
+      };
+    }
+  }, [props, mapState, mapHook.map]);
+  return {};
+}
+
+var useLayerContext = function () {
+    var layerContext = React.useContext(LayerContext);
+    return layerContext;
+};
+
+/**
+ * Enables the use of custom protocols (basically custom tile load functions) in the maplibre-gl-js library.
+ *
+ */
+var useAddProtocol = function (props) {
+    React.useEffect(function () {
+        if (!props.protocol || typeof props.handler !== 'function')
+            return;
+        maplibregl__default["default"].addProtocol(props.protocol, props.handler);
+        return function () {
+            maplibregl__default["default"].removeProtocol(props.protocol);
+        };
+    }, [props]);
+    return {};
+};
+useAddProtocol.defaultProps = {
+    mapId: undefined,
+};
+
+var SimpleDataContext = /*#__PURE__*/React__default["default"].createContext({});
+var SimpleDataContextProvider = SimpleDataContext.Provider;
+
+var SimpleDataProvider = function SimpleDataProvider(props) {
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  React.useEffect(function () {
+    if (!props.url) return;
+    var data_promise = null;
+    if (props.format === "json") {
+      data_promise = d3__namespace.json(props.url);
+    } else if (props.format === "csv") {
+      data_promise = d3__namespace.csv(props.url);
+    } else if (props.format === "xml") {
+      data_promise = d3__namespace.xml(props.url);
+    }
+    if (data_promise) {
+      data_promise.then(function (received_data) {
+        if (props.format === "xml") {
+          if (props.nodeType) {
+            var dataTmp = [];
+            received_data.querySelectorAll(props.nodeType).forEach(function (el) {
+              dataTmp.push(props.formatData(el));
+            });
+            setData(dataTmp);
+          }
+        } else {
+          if (props.data_property) {
+            received_data = received_data[props.data_property];
+          }
+          if (typeof props.formatData === "function") {
+            setData(received_data.map(props.formatData));
+          } else {
+            setData(received_data);
+          }
+        }
+        if (typeof props.onData === "function") {
+          props.onData();
+        }
+      });
+    }
+  }, [props.url, props]);
+  var value = {
+    data: data,
+    setData: setData
+  };
+  return /*#__PURE__*/React__default["default"].createElement(SimpleDataContextProvider, {
+    value: value
+  }, props.children);
+};
+SimpleDataProvider.propTypes = {
+  children: PropTypes__default["default"].node.isRequired
+};
+
+var ListStyled = material.styled(material.List)({
+    marginTop: '15px',
+});
+function LayerList(props) {
+    return React__default["default"].createElement(ListStyled, null, props === null || props === void 0 ? void 0 : props.children);
+}
+
+var IconButtonStyled = material.styled(material.IconButton)({
+    padding: '4px',
+    marginTop: '-3px',
+    background: 'none',
+    '&:hover': {
+        background: 'none',
+    },
+});
+function LayerListItemFactory(props) {
+    var _a, _b;
+    var layerContext = useLayerContext();
+    var mapHook = useMap({ mapId: undefined });
+    //useCallback Hook
+    function fitLayer(layer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var layerSource = layer.id && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer(layer.id)) === null || _b === void 0 ? void 0 : _b.source)
+            ? (_c = mapHook.map) === null || _c === void 0 ? void 0 : _c.getLayer(layer.id).source
+            : undefined;
+        var _bbox = null;
+        switch (layer.type) {
+            case 'geojson':
+                if ((_d = layer.config) === null || _d === void 0 ? void 0 : _d.geojson) {
+                    (_e = mapHook.map) === null || _e === void 0 ? void 0 : _e.fitBounds(turf.bbox((_f = layer.config) === null || _f === void 0 ? void 0 : _f.geojson), props.fitBoundsOptions);
+                }
+                else {
+                    if (!layerSource) {
+                        return;
+                    }
+                    var _geojson = {
+                        type: 'FeatureCollection',
+                        features: (_g = mapHook.map) === null || _g === void 0 ? void 0 : _g.querySourceFeatures(layerSource),
+                    };
+                    if (_geojson.features.length === 0) {
+                        (_h = mapHook.map) === null || _h === void 0 ? void 0 : _h.zoomTo(1);
+                        _geojson.features = (_j = mapHook.map) === null || _j === void 0 ? void 0 : _j.querySourceFeatures(layerSource);
+                    }
+                    _bbox = turf.bbox(_geojson);
+                }
+                break;
+            case 'vt':
+                console.log('vt');
+                break;
+            case 'wms':
+                _bbox = (_o = (_m = (_l = (_k = layer === null || layer === void 0 ? void 0 : layer.config) === null || _k === void 0 ? void 0 : _k.config) === null || _l === void 0 ? void 0 : _l.layers) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.EX_GeographicBoundingBox;
+                break;
+            default:
+                return;
+        }
+        if (_bbox) {
+            (_p = mapHook.map) === null || _p === void 0 ? void 0 : _p.fitBounds(_bbox, props.fitBoundsOptions);
+        }
+    }
+    var orderLayers = React.useMemo(function () {
+        var layerIds = __spreadArray(__spreadArray([
+            'order-background'
+        ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
+            'order-labels',
+        ], false);
+        return layerIds.reverse();
+    }, [layerContext.layers]);
+    var layers = React.useMemo(function () {
         if (props.layers)
             return props.layers;
         if (layerContext === null || layerContext === void 0 ? void 0 : layerContext.layers)
@@ -6970,83 +7237,130 @@ function LayerListItemFactory(props) {
             return props.setLayers;
         return layerContext.setLayers;
     }, [props.setLayers, layerContext.setLayers]);
+    var pointerSensor = core.useSensor(core.PointerSensor, {
+        activationConstraint: {
+            distance: 5,
+        },
+    });
+    var mouseSensor = core.useSensor(core.MouseSensor, {
+        activationConstraint: {
+            distance: 5,
+        },
+    });
+    var sensors = core.useSensors(mouseSensor, pointerSensor);
+    function dragEnd(event) {
+        var _a, _b, _c;
+        var dragLayerId = event.active.id;
+        var dragLayerNewPosition = (_c = (_b = (_a = event.over) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.sortable.index;
+        layerContext.moveLayer(String(dragLayerId), function () { return dragLayerNewPosition; });
+    }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MlOrderLayers, { layerIds: orderLayers, insertBeforeLayer: "_background" }),
         ((_a = layerContext === null || layerContext === void 0 ? void 0 : layerContext.symbolLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_labels', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.symbolLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-labels' })), setLayerState: function (state) {
                 return layerContext.setSymbolLayers(state === null || state === void 0 ? void 0 : state.layers);
             }, visible: true, configurable: true, type: "layer", name: "Labels" })),
-        __spreadArray([], layers, true).map(function (layer, idx) {
-            var _a, _b;
-            if (!(layer === null || layer === void 0 ? void 0 : layer.id))
-                return null;
-            switch (layer.type) {
-                case 'geojson':
-                    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(LayerListItem, { key: layer.id, 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__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null,
-                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
-                                        layerContext.moveDown(layer.id || '');
-                                    } },
-                                    React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
-                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
-                                        layerContext.moveUp(layer.id || '');
-                                    } },
-                                    React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null))), setLayerState: function (layerConfig) {
-                                return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
-                                    var _layers = __spreadArray([], current, true);
-                                    if (layerConfig === false) {
-                                        _layers.splice(idx, 1);
-                                    }
-                                    else {
-                                        _layers[idx].config = layerConfig;
-                                    }
-                                    return _layers;
-                                });
-                            }, configurable: true, showDeleteButton: true })));
-                case 'wms':
-                    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(MlWmsLoader, __assign({}, layer.config, { key: layer.id, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx), onConfigChange: function (layerConfig) {
-                                setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
-                                    var _layers = __spreadArray([], current, true);
-                                    if (layerConfig === false) {
-                                        _layers.splice(idx, 1);
-                                    }
-                                    else {
-                                        _layers[idx].config.config = layerConfig;
-                                    }
-                                    return _layers;
-                                });
-                            }, featureInfoActive: ((_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.featureInfoActive) || false, setFeatureInfoActive: function (updateFunction) {
-                                setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
-                                    var _a;
-                                    var _layers = __spreadArray([], current, true);
-                                    if (typeof updateFunction === 'function') {
-                                        _layers[idx].config.featureInfoActive =
-                                            updateFunction(((_a = _layers[idx].config) === null || _a === void 0 ? void 0 : _a.featureInfoActive) || false);
-                                    }
-                                    return _layers;
-                                });
-                            }, showDeleteButton: true, buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
-                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
-                                        layerContext.moveDown(layer.id || '');
-                                    } },
-                                    React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
-                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
-                                        layerContext.moveUp(layer.id || '');
-                                    } },
-                                    React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null))) }))));
-                default:
-                    return null;
-            }
-        }),
-        ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_geometry', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.backgroundLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-background' })), setLayerState: function (state) {
-                layerContext.setBackgroundLayers(state === null || state === void 0 ? void 0 : state.layers);
-            }, visible: true, configurable: true, type: "layer", name: "Background" }))));
+        React__default["default"].createElement(core.DndContext, { collisionDetection: core.closestCenter, sensors: sensors, onDragEnd: function (event) { return dragEnd(event); }, modifiers: [modifiers.restrictToVerticalAxis] },
+            React__default["default"].createElement(sortable.SortableContext, { items: layers, strategy: sortable.verticalListSortingStrategy },
+                __spreadArray([], layers, true).map(function (layer, idx) {
+                    var _a, _b, _c, _d, _e;
+                    if (!(layer === null || layer === void 0 ? void 0 : layer.id))
+                        return null;
+                    switch (layer.type) {
+                        case 'geojson':
+                            return (React__default["default"].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__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null,
+                                    React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                                            layerContext.moveDown(layer.id || '');
+                                        } },
+                                        React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
+                                    React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                            layerContext.moveUp(layer.id || '');
+                                        } },
+                                        React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null)),
+                                    React__default["default"].createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                        React__default["default"].createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                    return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
+                                        var _layers = __spreadArray([], current, true);
+                                        if (layerConfig === false) {
+                                            _layers.splice(idx, 1);
+                                        }
+                                        else {
+                                            _layers[idx].config = layerConfig;
+                                        }
+                                        return _layers;
+                                    });
+                                }, configurable: true, showDeleteButton: true }));
+                        case 'wms':
+                            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(MlWmsLoader, __assign({}, layer.config, { key: layer.id, layerId: layer.id, sortable: props.sortable, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx), onConfigChange: function (layerConfig) {
+                                        setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
+                                            var _layers = __spreadArray([], current, true);
+                                            if (layerConfig === false) {
+                                                _layers.splice(idx, 1);
+                                            }
+                                            else {
+                                                _layers[idx].config.config = layerConfig;
+                                            }
+                                            return _layers;
+                                        });
+                                    }, featureInfoActive: ((_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.featureInfoActive) || false, setFeatureInfoActive: function (updateFunction) {
+                                        setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
+                                            var _a;
+                                            var _layers = __spreadArray([], current, true);
+                                            if (typeof updateFunction === 'function') {
+                                                _layers[idx].config.featureInfoActive =
+                                                    updateFunction(((_a = _layers[idx].config) === null || _a === void 0 ? void 0 : _a.featureInfoActive) ||
+                                                        false);
+                                            }
+                                            return _layers;
+                                        });
+                                    }, showDeleteButton: true, buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
+                                        React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                                                layerContext.moveDown(layer.id || '');
+                                            } },
+                                            React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
+                                        React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                                layerContext.moveUp(layer.id || '');
+                                            } },
+                                            React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null)),
+                                        React__default["default"].createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                            React__default["default"].createElement(iconsMaterial.CenterFocusWeak, null))) }))));
+                        case 'vt':
+                            return (React__default["default"].createElement(React__default["default"].Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
+                                React__default["default"].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__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null,
+                                        React__default["default"].createElement(IconButtonStyled, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
+                                                layerContext.moveDown(layer.id || '');
+                                            } },
+                                            React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
+                                        React__default["default"].createElement(IconButtonStyled, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
+                                                layerContext.moveUp(layer.id || '');
+                                            } },
+                                            React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null)),
+                                        React__default["default"].createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                            React__default["default"].createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                        return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
+                                            var _layers = __spreadArray([], current, true);
+                                            if (layerConfig === false) {
+                                                _layers.splice(idx, 1);
+                                            }
+                                            else {
+                                                _layers[idx].config = layerConfig;
+                                            }
+                                            return _layers;
+                                        });
+                                    }, configurable: true, showDeleteButton: true })));
+                        default:
+                            return null;
+                    }
+                }),
+                ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_geometry', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.backgroundLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-background' })), setLayerState: function (state) {
+                        layerContext.setBackgroundLayers(state === null || state === void 0 ? void 0 : state.layers);
+                    }, visible: true, configurable: true, type: "layer", name: "Background" }))))));
 }
 LayerListItemFactory.defaultProps = {
     mapId: undefined,
 };
 
-var types = [
+var types$1 = [
     'fill',
     'line',
     'circle',
@@ -7064,7 +7378,7 @@ function GeoJsonLayerForm(props) {
             React__default["default"].createElement(material.InputLabel, { id: "type-label" }, "Type"),
             React__default["default"].createElement(material.Select, { labelId: "type-label", value: config.type, label: "Type", onChange: function (ev) {
                     return setConfig(function (current) { return (__assign(__assign({}, current), { type: ev.target.value })); });
-                } }, types.map(function (type) { return (React__default["default"].createElement(material.MenuItem, { key: type, value: type }, type)); }))),
+                } }, types$1.map(function (type) { return (React__default["default"].createElement(material.MenuItem, { key: type, value: type }, type)); }))),
         React__default["default"].createElement(material.FormControl, { fullWidth: true },
             React__default["default"].createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
                 "Upload File",
@@ -7079,11 +7393,10 @@ function GeoJsonLayerForm(props) {
             React__default["default"].createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
 }
 
-var layerTypes = ['geojson', 'wms'];
 var LayerTypeForm = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.DialogTitle, null, "Select a layer type"),
-        React__default["default"].createElement(material.List, null, layerTypes.map(function (type) { return (React__default["default"].createElement(material.ListItem, { disableGutters: true, key: type },
+        React__default["default"].createElement(material.DialogTitle, null, props.layerTypes.length > 1 ? "Select a layer type" : "Load new layer"),
+        React__default["default"].createElement(material.List, null, props.layerTypes.map(function (type, idx) { return (React__default["default"].createElement(material.ListItem, { disableGutters: true, key: idx },
             React__default["default"].createElement(material.ListItemButton, { autoFocus: true, onClick: function () {
                     props.onSelect(type);
                 } },
@@ -7112,18 +7425,667 @@ function WmsLayerForm(props) {
             React__default["default"].createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
 }
 
+var optionFields$1 = ['latfield', 'lonfield', 'delimiter'];
+function CSVOptionsFormular(props) {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.Typography, null, " Options "),
+        React__default["default"].createElement(material.Button, { onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(IndeterminateCheckBoxIcon__default["default"], null) : React__default["default"].createElement(AddBoxIcon__default["default"], null)),
+        React__default["default"].createElement(material.List, null, open &&
+            (optionFields$1 === null || optionFields$1 === void 0 ? void 0 : optionFields$1.map(function (el) {
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(material.ListItem, null,
+                        React__default["default"].createElement(material.Typography, null,
+                            " ",
+                            el,
+                            " ")),
+                    React__default["default"].createElement(material.ListItem, null,
+                        React__default["default"].createElement(material.TextField, { size: "small", onChange: function (ev) {
+                                var newObject = {};
+                                newObject[el] = ev.target.value;
+                                props.setter(newObject);
+                            } }))));
+            })))));
+}
+
+var optionFields = [
+    'completeFeature',
+    'allFeatures',
+    'renderTagged',
+    'excludeWay',
+    'suppressWay',
+];
+function OsmOptionsFomular(props) {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.Typography, null, " Options "),
+        React__default["default"].createElement(material.Button, { onClick: function () { return setOpen(!open); } }, open ? React__default["default"].createElement(IndeterminateCheckBoxIcon__default["default"], null) : React__default["default"].createElement(AddBoxIcon__default["default"], null)),
+        React__default["default"].createElement(material.List, null, open &&
+            (optionFields === null || optionFields === void 0 ? void 0 : optionFields.map(function (el) {
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(material.ListItem, null,
+                        React__default["default"].createElement(material.Typography, null,
+                            " ",
+                            el,
+                            " "),
+                        React__default["default"].createElement(material.Checkbox, { onChange: function (ev) {
+                                var newObject = {};
+                                newObject[el] = ev.target.value === 'on' ? true : false;
+                                props.setter(newObject);
+                            } }))));
+            })))));
+}
+
+function protocolPathParser(url) {
+    var test = url.split('?');
+    var urlParts = test[0].split('://');
+    var protocolId = urlParts[0];
+    var csvUrl = urlParts.length > 2 ? urlParts[1] + '://' + urlParts[2] : urlParts[1];
+    var csvParts = csvUrl.split('/');
+    var filename = csvParts.join('/');
+    var optionsString = decodeURI(test[1]);
+    var options = Object.fromEntries(new URLSearchParams(optionsString));
+    return {
+        protocolId: protocolId,
+        filename: filename,
+        options: options,
+    };
+}
+
+function getProtocolData(path) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response, rawData, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    return [4 /*yield*/, fetch(path)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.text()];
+                case 2:
+                    rawData = _a.sent();
+                    return [2 /*return*/, rawData];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('File could not be loaded: ', error_1);
+                    return [2 /*return*/, error_1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+function convertCsv(filename, options) {
+    return __awaiter(this, void 0, void 0, function () {
+        var geojson;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
+                        var useOptions = options || {};
+                        var extension = filename.substring(filename.length - 3);
+                        if (extension === 'tsv') {
+                            options.delimiter = '\t';
+                        }
+                        getProtocolData(filename).then(function (rawData) {
+                            // Use the csv2geojson library to convert the CSV to GeoJSON	
+                            csv2geojson__namespace.csv2geojson(rawData, useOptions, function (err, data) {
+                                if (err) {
+                                    reject(err);
+                                }
+                                else {
+                                    resolve(data);
+                                }
+                            });
+                        });
+                    })];
+                case 1:
+                    geojson = _a.sent();
+                    return [2 /*return*/, geojson];
+            }
+        });
+    });
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var CSVProtocolHandler = function (params, callback) {
+    var parsedParams = protocolPathParser(params.url);
+    convertCsv(parsedParams.filename, parsedParams.options).then(function (data) {
+        if (data !== undefined) {
+            callback(null, data, null, null);
+        }
+        else {
+            callback(new Error('CSV not found'));
+        }
+    });
+    return { cancel: function () { } };
+};
+
+function reduceFeatures(geojson) {
+    var newFeatures = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geojson.features.forEach(function (e) {
+        if (!e.features) {
+            newFeatures.push({
+                type: e.type,
+                geometry: e.geometry,
+                properties: e.properties,
+            });
+        }
+        else {
+            e.features.forEach(function (el) {
+                newFeatures.push({ type: el.type, geometry: el.geometry, properties: el.properties });
+            });
+        }
+    });
+    return newFeatures;
+}
+function convertTopojson(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var geojson;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                        var topoJsonData = {
+                            type: 'Topology',
+                            objects: { key: '' },
+                            arcs: []
+                        };
+                        getProtocolData(params.filename).then(function (rawData) {
+                            try {
+                                topoJsonData = JSON.parse(rawData);
+                            }
+                            catch (e) {
+                                throw 'Invalid TopoJson';
+                            }
+                            // Convert the data
+                            var result = {
+                                type: 'FeatureCollection',
+                                features: [],
+                            };
+                            if (topoJsonData.type === 'Topology' && topoJsonData.objects !== undefined) {
+                                // add the "fromObject" property in each topojson feature
+                                Object.keys(topoJsonData.objects).map(function (key) {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    if (((_a = topoJsonData.objects) === null || _a === void 0 ? void 0 : _a[key].type) === 'GeometryCollection') {
+                                        (_c = (_b = topoJsonData.objects) === null || _b === void 0 ? void 0 : _b[key].geometries) === null || _c === void 0 ? void 0 : _c.forEach(function (e) { return (e.properties = __assign({ fromObject: key }, e.properties)); });
+                                    }
+                                    else if (((_d = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _d === void 0 ? void 0 : _d[key]) &&
+                                        ((_f = (_e = topoJsonData === null || topoJsonData === void 0 ? void 0 : topoJsonData.objects) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.type) !== 'GeometryCollection') {
+                                        topoJsonData.objects[key].properties = __assign({ fromObject: key }, (_g = topoJsonData.objects) === null || _g === void 0 ? void 0 : _g[key].properties);
+                                    }
+                                });
+                                //convert the data into a geoJson object
+                                result = {
+                                    type: 'FeatureCollection',
+                                    features: Object.keys(topoJsonData.objects).map(function (key) {
+                                        return topojsonClient.feature(topoJsonData, key);
+                                    }),
+                                };
+                                result.features = reduceFeatures(result);
+                            }
+                            resolve(result);
+                        });
+                    })];
+                case 1:
+                    geojson = _a.sent();
+                    return [2 /*return*/, geojson];
+            }
+        });
+    });
+}
+var TopojsonProtocolHandler = function (params, callback) {
+    var parsedParams = protocolPathParser(params.url);
+    convertTopojson(parsedParams).then(function (data) {
+        if (data !== undefined) {
+            callback(null, data, null, null);
+        }
+        else {
+            callback(new Error('Topojson not found'));
+        }
+    });
+    return { cancel: function () { } };
+};
+
+function convertOSM(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var options, geojson;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    options = params.options || {};
+                    return [4 /*yield*/, new Promise(function (resolve, reject) {
+                            getProtocolData(params.filename).then(function (rawData) {
+                                var newData = osm2geojson__default["default"](rawData, options);
+                                if (!newData) {
+                                    reject('Conversion failed');
+                                }
+                                else {
+                                    resolve(newData);
+                                }
+                            });
+                        })];
+                case 1:
+                    geojson = _a.sent();
+                    return [2 /*return*/, geojson];
+            }
+        });
+    });
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var OSMProtocolHandler = function (params, callback) {
+    var parsedParams = protocolPathParser(params.url);
+    convertOSM(parsedParams).then(function (data) {
+        if (data !== undefined) {
+            callback(null, data, null, null);
+        }
+        else {
+            callback(new Error('OSM File not found'));
+        }
+    });
+    return { cancel: function () { } };
+};
+
+function convertXML(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var geojson;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, new Promise(function (resolve, reject) {
+                        getProtocolData(params.filename).then(function (rawData) {
+                            var newData = function () {
+                                // use an extern converter for tcx files
+                                if (params.protocolId === 'tcx') {
+                                    return externParser__namespace[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
+                                    // use the projects gpxConverter function for gpx and kml files
+                                }
+                                else {
+                                    return toGeoJSON[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
+                                }
+                            };
+                            if (!newData()) {
+                                reject('Conversion failed');
+                            }
+                            else {
+                                resolve(newData());
+                            }
+                        });
+                    })];
+                case 1:
+                    geojson = _a.sent();
+                    return [2 /*return*/, geojson];
+            }
+        });
+    });
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var XMLProtocolHandler = function (params, callback) {
+    var parsedParams = protocolPathParser(params.url);
+    convertXML(parsedParams).then(function (data) {
+        if (data !== undefined) {
+            callback(null, data, null, null);
+        }
+        else {
+            callback(new Error('XML not found'));
+        }
+    });
+    return { cancel: function () { } };
+};
+
+var loadedMbtiles = {};
+var parseTileParams = function (url) {
+    var urlParts = url.split('://');
+    var mbtilesUrl = urlParts.length > 2 ? urlParts[1] + '://' + urlParts[2] : urlParts[1];
+    var mbtilesParts = mbtilesUrl.split('/');
+    var mbtilesPartsLength = mbtilesParts.length;
+    var y = mbtilesParts.splice(mbtilesPartsLength - 1, 1)[0];
+    var x = mbtilesParts.splice(mbtilesPartsLength - 2, 1)[0];
+    var z = mbtilesParts.splice(mbtilesPartsLength - 3, 1)[0];
+    var filename = mbtilesParts.join('/');
+    return {
+        filename: filename,
+        z: z,
+        x: x,
+        y: y,
+    };
+};
+// mbtiles files are sqlite databases. This function loads the database and returns a handler
+// to work with sqlite databases in javascript we need to use sql.js.
+// to make this work in your project make sure to copy sql-wasm.wasm to the file root of your public folder and
+// add the following config to the externals prop of your webpack config
+// {externals: { fs: 'fs' }};
+var getMbtilesDbHandler = function (_a) {
+    var filename = _a.filename;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var SQL, fetched, buf, db;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!!loadedMbtiles[filename]) return [3 /*break*/, 4];
+                    return [4 /*yield*/, initSqlJs__default["default"]()];
+                case 1:
+                    SQL = _b.sent();
+                    return [4 /*yield*/, fetch(filename)];
+                case 2:
+                    fetched = _b.sent();
+                    return [4 /*yield*/, fetched.arrayBuffer()];
+                case 3:
+                    buf = _b.sent();
+                    db = new SQL.Database(new Uint8Array(buf));
+                    loadedMbtiles[filename] = db;
+                    _b.label = 4;
+                case 4: return [2 /*return*/, loadedMbtiles[filename]];
+            }
+        });
+    });
+};
+/**
+ * Example usage:
+ * getBufferFromMbtiles({ filename: 'mbtiles/countries.mbtiles', z: '0', x: '0', y: '0' }).then(
+ * 	(result) => {
+ * 		console.log(result);
+ * 	}
+ * );
+ */
+function getBufferFromMbtiles(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var db, query;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getMbtilesDbHandler(params)];
+                case 1:
+                    db = _a.sent();
+                    query = 'SELECT tile_data FROM tiles WHERE zoom_level = ' +
+                        params.z +
+                        ' AND tile_column = ' +
+                        params.x +
+                        ' AND tile_row = ' +
+                        (Math.pow(2, parseInt(params.z)) - parseInt(params.y) - 1);
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            try {
+                                // some of the logic here was heavily inspired by
+                                // https://github.com/IsraelHikingMap/Site/blob/6aa2ec0cfb8891fa048b1d9e2a4fc7d4cbcc8c97/IsraelHiking.Web/src/application/services/database.service.ts
+                                var result = db.exec(query);
+                                if (result.length !== 1) {
+                                    reject(new Error('Tile not found.'));
+                                    return;
+                                }
+                                var resultData = result[0].values[0][0];
+                                var binData = void 0;
+                                var isGzipped = resultData[0] === 0x1f && resultData[1] === 0x8b;
+                                if (isGzipped) {
+                                    binData = pako__namespace.inflate(resultData);
+                                }
+                                else {
+                                    binData = resultData;
+                                }
+                                if (binData === null || binData === void 0 ? void 0 : binData.buffer) {
+                                    resolve(binData.buffer);
+                                }
+                                else {
+                                    reject(new Error('Tile not found.'));
+                                    return;
+                                }
+                            }
+                            catch (error) {
+                                reject(error);
+                            }
+                        })];
+            }
+        });
+    });
+}
+/**
+ * Expects a tile url in the following format:
+ *
+ * 'mbtiles://mbtiles/countries.mbtiles/{z}/{x}/{y}'
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var mbTilesProtocolHandler = function (params, callback) {
+    var parsedParams = parseTileParams(params.url);
+    getBufferFromMbtiles(parsedParams).then(function (result) {
+        if (result) {
+            callback(null, result, null, null);
+        }
+        else {
+            callback(new Error('Tile not found'));
+        }
+    });
+    return { cancel: function () { } };
+};
+
+var handlers = {
+    csv: CSVProtocolHandler,
+    topojson: TopojsonProtocolHandler,
+    osm: OSMProtocolHandler,
+    gpx: XMLProtocolHandler,
+    kml: XMLProtocolHandler,
+    tcx: XMLProtocolHandler,
+    mbtiles: mbTilesProtocolHandler
+};
+var types = ['fill', 'line', 'circle'];
+function ProtocolHandlerLayerForm(props) {
+    var _a = React.useState({ type: 'circle' }), config = _a[0], setConfig = _a[1];
+    var _b = React.useState(), fileName = _b[0], setFileName = _b[1];
+    var _c = React.useState(), filePath = _c[0], setFilePath = _c[1];
+    var _d = React.useState({}), optionsObject = _d[0], setOptionsObject = _d[1];
+    var mapHook = useMap({ mapId: props.mapId });
+    var optionsURL = '?' + new URLSearchParams(optionsObject).toString();
+    useAddProtocol({
+        protocol: props.originType,
+        handler: handlers[props.originType],
+    });
+    var configIsValid = React.useMemo(function () {
+        if (!(config === null || config === void 0 ? void 0 : config.type))
+            return false;
+        if (filePath && fileName)
+            return true;
+        else
+            return false;
+    }, [config, filePath, fileName]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (typeof fileName !== 'undefined' && typeof filePath !== 'undefined') {
+            if (!((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getSource(fileName)))
+                (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.addSource(fileName, {
+                    type: 'geojson',
+                    data: optionsObject ? props.originType + '://' + filePath + optionsURL : props.originType + '://' + filePath,
+                });
+            config.options = { source: fileName };
+        }
+        return function () { };
+    }, [fileName, mapHook.map, filePath]);
+    //the temporally storage adress of the uploaded file will be revoked, after source and layer are loaded in the map  
+    React.useEffect(function () {
+        var _a;
+        if (filePath && fileName && ((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer(fileName))) {
+            URL.revokeObjectURL(filePath);
+        }
+    }, [fileName, filePath, mapHook.map]);
+    function addOption(newObject) {
+        var newOptions = __assign(__assign({}, optionsObject), newObject);
+        return setOptionsObject(newOptions);
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.DialogTitle, null,
+            "Layer from ",
+            props.originType),
+        React__default["default"].createElement(material.FormControl, { fullWidth: true },
+            React__default["default"].createElement(material.InputLabel, { id: "type-label" }, "Type"),
+            React__default["default"].createElement(material.Select, { labelId: "type-label", value: config.type, label: "Type", onChange: function (ev) {
+                    return setConfig(function (current) { return (__assign(__assign({}, current), { type: ev.target.value })); });
+                } }, types.map(function (type) { return (React__default["default"].createElement(material.MenuItem, { key: type, value: type }, type)); }))),
+        React__default["default"].createElement(material.FormControl, { fullWidth: true },
+            React__default["default"].createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
+                "Select origin file",
+                React__default["default"].createElement("input", { type: "file", hidden: true, accept: props.originType, onChange: function (ev) {
+                        var _a, _b, _c;
+                        setFileName((_a = ev.target.files) === null || _a === void 0 ? void 0 : _a[0].name);
+                        if ((_b = ev.target.files) === null || _b === void 0 ? void 0 : _b[0]) {
+                            var dataUrl = URL.createObjectURL((_c = ev.target.files) === null || _c === void 0 ? void 0 : _c[0]);
+                            setFilePath(dataUrl);
+                        }
+                    } })),
+            props.originType === 'csv' && React__default["default"].createElement(CSVOptionsFormular, { setter: addOption }),
+            props.originType === 'osm' && React__default["default"].createElement(OsmOptionsFomular, { setter: addOption })),
+        React__default["default"].createElement(material.DialogActions, null,
+            React__default["default"].createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
+            React__default["default"].createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+}
+
+var LayerSpecificationKeys = [
+    'id',
+    'type',
+    'metadata',
+    'source',
+    'source-layer',
+    'layout',
+    'paint',
+    'options',
+];
+function MbtilesLayerPropFormular(props) {
+    var _a = React.useState([]), layers = _a[0], setLayers = _a[1];
+    var newLayer = {};
+    var toJSON = ['paint', 'layout', 'options', 'metadata'];
+    React.useEffect(function () {
+        props.setter(layers);
+    }, [layers]);
+    var TextFields = function () {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, LayerSpecificationKeys.map(function (key) {
+            return (React__default["default"].createElement(React__default["default"].Fragment, { key: key + '_fragment' },
+                React__default["default"].createElement(material.TextField, { label: key, onChange: function (ev) {
+                        return newLayer[key] = ev.target.value;
+                    } })));
+        })));
+    };
+    function addLayer() {
+        toJSON.map(function (key) {
+            if (typeof newLayer[key] !== 'undefined') {
+                try {
+                    newLayer[key] = JSON.parse(newLayer[key]);
+                }
+                catch (_a) {
+                    alert("Invalid JSON format, try again");
+                }
+            }
+        });
+        setLayers(function (current) {
+            if (current.length > 0) {
+                return __spreadArray([newLayer], current, true);
+            }
+            else {
+                return [newLayer];
+            }
+        });
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.FormControl, { fullWidth: true },
+            React__default["default"].createElement(TextFields, null)),
+        React__default["default"].createElement(material.Button, { onClick: addLayer }, " Add")));
+}
+
+function MbtilesLayerForm(props) {
+    var _a = React__default["default"].useState(props.config), config = _a[0], setConfig = _a[1];
+    var _b = React.useState(), fileName = _b[0], setFileName = _b[1];
+    var _c = React.useState(), filePath = _c[0], setFilePath = _c[1];
+    var _d = React.useState([]), layers = _d[0], setLayers = _d[1];
+    var mapHook = useMap({ mapId: props.mapId });
+    var _e = React.useState(false), expanded = _e[0], setExpanded = _e[1];
+    console.log(layers);
+    var LayersToCall = function () {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, layers.map(function (el, idx) { return (React__default["default"].createElement(material.Typography, { variant: "body2", key: idx },
+            idx + 1,
+            ": ",
+            JSON.stringify(el))); })));
+    };
+    /**
+     * A Vector Tile layer configuration with a mbtile Protocol url will passed to the onComplete function of the addLayerButton.
+     * In order to visdualize the file content, a mbtiles ProtocolHandler must be added to the map Instanz.
+     * See the MapComponents AddLayerButton demo and the documentation of useAddProtocolHook to find out more about Protocol handlers.
+     */
+    /* example values:
+    *	 	id: 'countries',
+    *		type: 'fill',
+    *		'source-layer': 'countries',
+    *   layout: {},
+    *   paint: { "fill-color": "#f9a5f5", "fill-opacity": 0.5 },
+    */
+    var configIsValid = React.useMemo(function () {
+        if (!fileName)
+            return false;
+        return true;
+    }, [fileName]);
+    React.useEffect(function () {
+        if (typeof fileName !== 'undefined' && typeof filePath !== 'undefined') {
+            setConfig({
+                url: 'mbtiles://' + filePath + '/{z}/{x}/{y}',
+                layers: layers,
+                layerId: fileName,
+                sourceOptions: {
+                    type: 'vector',
+                    minzoom: 0,
+                    maxzoom: 1,
+                },
+            });
+        }
+    }, [fileName, mapHook.map, filePath, layers]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.DialogTitle, null, " Layer from mbtiles file"),
+        React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
+                "Select origin file",
+                React__default["default"].createElement("input", { type: "file", hidden: true, accept: props.originType, onChange: function (ev) {
+                        var _a, _b, _c;
+                        setFileName((_a = ev.target.files) === null || _a === void 0 ? void 0 : _a[0].name);
+                        if ((_b = ev.target.files) === null || _b === void 0 ? void 0 : _b[0]) {
+                            var dataUrl = URL.createObjectURL((_c = ev.target.files) === null || _c === void 0 ? void 0 : _c[0]);
+                            setFilePath(dataUrl);
+                        }
+                    } })),
+            React__default["default"].createElement(material.Accordion, { expanded: expanded },
+                React__default["default"].createElement(material.AccordionSummary, { "aria-controls": "panel1d-content", id: "panel1d-header" },
+                    React__default["default"].createElement(material.Typography, null, "MB-Tile Layer properties"),
+                    React__default["default"].createElement(material.Button, { onClick: function () { return setExpanded(!expanded); } }, expanded ? React__default["default"].createElement(KeyboardArrowUpIcon__default["default"], null) : React__default["default"].createElement(KeyboardArrowDownIcon__default["default"], null))),
+                React__default["default"].createElement(material.Typography, { variant: "body1" }, " Layers"),
+                layers.length > 0 ? React__default["default"].createElement(LayersToCall, null) : React__default["default"].createElement(material.Typography, { variant: "body2" }, " 0 "),
+                React__default["default"].createElement(MbtilesLayerPropFormular, { setter: setLayers }))),
+        React__default["default"].createElement(material.DialogActions, null,
+            React__default["default"].createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
+            React__default["default"].createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+}
+
 var AddLayerPopup = function (props) {
     var _a = React.useState(props === null || props === void 0 ? void 0 : props.config), layerConfig = _a[0], setLayerConfig = _a[1];
+    var _b = React.useState(), originType = _b[0], setOriginType = _b[1];
+    var layerTypes = props.layerTypes;
+    var supportedProtocols = layerTypes.filter(function (el) { return el !== 'wms' && el !== 'geojson' && el !== 'mbtiles'; });
     var updateLayerType = function (type) {
-        setLayerConfig({ type: type, config: {} });
+        setOriginType(type);
+        if (supportedProtocols.includes(type)) {
+            setLayerConfig({ type: 'geojson', config: {} });
+        }
+        else if (type === 'mbtiles') {
+            setLayerConfig({ type: 'vt', config: { layers: [] } });
+        }
+        else {
+            setLayerConfig({ type: type, config: {} });
+        }
     };
     var handleCancel = function () {
         props.setOpen(false);
         setLayerConfig(undefined);
     };
+    var ProtocolTypeFormulars = function () {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, supportedProtocols.map(function (el, idx) {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === el && (React__default["default"].createElement(ProtocolHandlerLayerForm, { key: idx, originType: el, onSubmit: function (config) {
+                    var _a;
+                    (_a = props === null || props === void 0 ? void 0 : props.onComplete) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, layerConfig), { config: config, type: 'geojson' }));
+                    handleCancel();
+                }, onCancel: handleCancel }))));
+        })));
+    };
     return (React__default["default"].createElement(material.Dialog, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
-        !(layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) && React__default["default"].createElement(LayerTypeForm, { onSelect: updateLayerType }),
-        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && (React__default["default"].createElement(GeoJsonLayerForm, { onSubmit: function (config) {
+        !(layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) && React__default["default"].createElement(LayerTypeForm, { onSelect: updateLayerType, layerTypes: layerTypes }),
+        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === 'geojson' && (React__default["default"].createElement(GeoJsonLayerForm, { onSubmit: function (config) {
                 var _a;
                 (_a = props === null || props === void 0 ? void 0 : props.onComplete) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, layerConfig), { config: config }));
                 handleCancel();
@@ -7132,16 +8094,29 @@ var AddLayerPopup = function (props) {
                 var _a;
                 (_a = props === null || props === void 0 ? void 0 : props.onComplete) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, layerConfig), { config: config }));
                 handleCancel();
-            }, onCancel: handleCancel }))));
+            }, onCancel: handleCancel })),
+        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'vt' && originType !== undefined && (React__default["default"].createElement(MbtilesLayerForm, { config: layerConfig, originType: originType, onSubmit: function (config) {
+                var _a;
+                if (layerConfig) {
+                    (_a = props === null || props === void 0 ? void 0 : props.onComplete) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, layerConfig), { config: config }));
+                    handleCancel();
+                }
+            }, onCancel: handleCancel })),
+        React__default["default"].createElement(ProtocolTypeFormulars, { key: 'protocol' })));
 };
 AddLayerPopup.defaultProps = {};
 
 var AddLayerButton = function (props) {
     var _a = React__default["default"].useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
+    var layerTypes = props.layerTypes || ['geojson', 'wms', 'mbtiles', 'csv', 'topojson', 'osm', 'gpx', 'kml', 'tcx'];
+    layerTypes.includes('mbtiles') && useAddProtocol({
+        protocol: 'mbtiles',
+        handler: mbTilesProtocolHandler,
+    });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
             React__default["default"].createElement(PlaylistAddIcon__default["default"], null)),
-        React__default["default"].createElement(AddLayerPopup, { open: popupOpen, setOpen: setPopupOpen, onComplete: props === null || props === void 0 ? void 0 : props.onComplete })));
+        React__default["default"].createElement(AddLayerPopup, { open: popupOpen, setOpen: setPopupOpen, onComplete: props === null || props === void 0 ? void 0 : props.onComplete, layerTypes: layerTypes })));
 };
 AddLayerButton.defaultProps = {};
 
@@ -7162,7 +8137,8 @@ function TopToolbar(props) {
             minHeight: '62px',
             position: 'absolute',
             zIndex: 1300,
-        }, position: "static" },
+            top: 0,
+        } },
         React__namespace.createElement(Toolbar__default["default"], { disableGutters: true },
             props.logo || (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(Box__default["default"], { sx: {
@@ -20214,6 +21190,7 @@ exports.MlOsmLayer = MlOsmLayer;
 exports.MlPdfPreview = PdfPreview;
 exports.MlScaleReference = MlScaleReference;
 exports.MlShareMapState = MlShareMapState;
+exports.MlSketchTool = MlSketchTool;
 exports.MlSpatialElevationProfile = MlSpatialElevationProfile;
 exports.MlTemporalController = MlTemporalController;
 exports.MlTerrainLayer = MlTerrainLayer;