@mapcomponents/react-maplibre 0.1.84 → 0.1.85

package/dist/index.esm.js

@@ -9,7 +9,7 @@ var uuid = require('uuid');
 require('maplibre-gl/dist/maplibre-gl.css');
 var PropTypes = require('prop-types');
 var material = require('@mui/material');
-var GpsFixedIcon = require('@mui/icons-material/GpsFixed');
+var FilterCenterFocusIcon = require('@mui/icons-material/FilterCenterFocus');
 var PrinterIcon = require('@mui/icons-material/Print');
 var Button = require('@mui/material/Button');
 var jsPDF = require('jspdf');
@@ -18,6 +18,7 @@ var Moveable = require('react-moveable');
 var turf = require('@turf/turf');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
+var GpsFixedIcon = require('@mui/icons-material/GpsFixed');
 var ButtonGroup = require('@mui/material/ButtonGroup');
 var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
@@ -46,11 +47,9 @@ 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 TuneIcon = require('@mui/icons-material/Tune');
-var reactColor = require('react-color');
 var system = require('@mui/system');
-var ArrowCircleDownIcon = require('@mui/icons-material/ArrowCircleDown');
-var ArrowCircleUpIcon = require('@mui/icons-material/ArrowCircleUp');
+var reactColor = require('react-color');
+var TuneIcon = require('@mui/icons-material/Tune');
 var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
 var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
 var AppBar = require('@mui/material/AppBar');
@@ -93,7 +92,7 @@ var maplibregl__default = /*#__PURE__*/_interopDefaultLegacy(maplibregl);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var GpsFixedIcon__default = /*#__PURE__*/_interopDefaultLegacy(GpsFixedIcon);
+var FilterCenterFocusIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterCenterFocusIcon);
 var PrinterIcon__default = /*#__PURE__*/_interopDefaultLegacy(PrinterIcon);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var jsPDF__default = /*#__PURE__*/_interopDefaultLegacy(jsPDF);
@@ -101,6 +100,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
 var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
 var MapboxDraw__default = /*#__PURE__*/_interopDefaultLegacy(MapboxDraw);
+var GpsFixedIcon__default = /*#__PURE__*/_interopDefaultLegacy(GpsFixedIcon);
 var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
 var ControlPointIcon__default = /*#__PURE__*/_interopDefaultLegacy(ControlPointIcon);
 var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveCircleOutlineIcon);
@@ -128,8 +128,6 @@ var FastForwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastForwardIco
 var FastRewindIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastRewindIcon);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
-var ArrowCircleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleDownIcon);
-var ArrowCircleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleUpIcon);
 var PlaylistAddIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlaylistAddIcon);
 var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
 var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
@@ -1357,7 +1355,7 @@ var MlCenterPosition = function (props) {
                 zIndex: 1002,
                 color: !locationAccessDenied ? props.onColor : props.offColor,
             }, onClick: centerCurrentLocation, disabled: locationAccessDenied },
-            React__default["default"].createElement(GpsFixedIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
+            React__default["default"].createElement(FilterCenterFocusIcon__default["default"], { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
 };
 MlCenterPosition.defaultProps = {
     mapId: undefined,
@@ -2035,10 +2033,238 @@ MlCreatePdfForm.defaultProps = {
     mapId: undefined,
 };
 
+function featureEditorStyle() {
+    var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
+    var featureEditorStyle = [
+        {
+            id: 'gl-draw-polygon-fill-inactive',
+            type: 'fill',
+            filter: [
+                'all',
+                ['==', 'active', 'false'],
+                ['==', '$type', 'Polygon'],
+                ['!=', 'mode', 'static'],
+            ],
+            paint: {
+                'fill-color': '#3bb2d0',
+                'fill-outline-color': '#3bb2d0',
+                'fill-opacity': 0.1,
+            },
+        },
+        {
+            id: 'gl-draw-polygon-fill-active',
+            type: 'fill',
+            filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+            paint: {
+                'fill-color': '#fbb03b',
+                'fill-outline-color': '#fbb03b',
+                'fill-opacity': 0.1,
+            },
+        },
+        {
+            id: 'gl-draw-polygon-midpoint',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 7 : 5,
+                'circle-color': '#fbb03b',
+            },
+        },
+        {
+            id: 'gl-draw-polygon-stroke-inactive',
+            type: 'line',
+            filter: [
+                'all',
+                ['==', 'active', 'false'],
+                ['==', '$type', 'Polygon'],
+                ['!=', 'mode', 'static'],
+            ],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#3bb2d0',
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-polygon-stroke-active',
+            type: 'line',
+            filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#fbb03b',
+                'line-dasharray': [0.2, 2],
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-line-inactive',
+            type: 'line',
+            filter: [
+                'all',
+                ['==', 'active', 'false'],
+                ['==', '$type', 'LineString'],
+                ['!=', 'mode', 'static'],
+            ],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#3bb2d0',
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-line-active',
+            type: 'line',
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#fbb03b',
+                'line-dasharray': [0.2, 2],
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
+            type: 'circle',
+            filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 8 : 6,
+                'circle-color': '#fff',
+            },
+        },
+        {
+            id: 'gl-draw-polygon-and-line-vertex-inactive',
+            type: 'circle',
+            filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 7 : 5,
+                'circle-color': '#fbb03b',
+            },
+        },
+        {
+            id: 'gl-draw-point-point-stroke-inactive',
+            type: 'circle',
+            filter: [
+                'all',
+                ['==', 'active', 'false'],
+                ['==', '$type', 'Point'],
+                ['==', 'meta', 'feature'],
+                ['!=', 'mode', 'static'],
+            ],
+            paint: {
+                'circle-radius': mediaIsMobile ? 10 : 9,
+                'circle-opacity': 1,
+                'circle-color': '#fff',
+            },
+        },
+        {
+            id: 'gl-draw-point-inactive',
+            type: 'circle',
+            filter: [
+                'all',
+                ['==', 'active', 'false'],
+                ['==', '$type', 'Point'],
+                ['==', 'meta', 'feature'],
+                ['!=', 'mode', 'static'],
+            ],
+            paint: {
+                'circle-radius': mediaIsMobile ? 7.5 : 6.5,
+                'circle-color': '#3bb2d0',
+            },
+        },
+        {
+            id: 'gl-draw-point-stroke-active',
+            type: 'circle',
+            filter: [
+                'all',
+                ['==', '$type', 'Point'],
+                ['==', 'active', 'true'],
+                ['!=', 'meta', 'midpoint'],
+            ],
+            paint: {
+                'circle-radius': mediaIsMobile ? 11 : 10,
+                'circle-color': '#fff',
+            },
+        },
+        {
+            id: 'gl-draw-point-active',
+            type: 'circle',
+            filter: [
+                'all',
+                ['==', '$type', 'Point'],
+                ['!=', 'meta', 'midpoint'],
+                ['==', 'active', 'true'],
+            ],
+            paint: {
+                'circle-radius': mediaIsMobile ? 8.5 : 7.5,
+                'circle-color': '#fbb03b',
+            },
+        },
+        {
+            id: 'gl-draw-polygon-fill-static',
+            type: 'fill',
+            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+            paint: {
+                'fill-color': '#404040',
+                'fill-outline-color': '#404040',
+                'fill-opacity': 0.1,
+            },
+        },
+        {
+            id: 'gl-draw-polygon-stroke-static',
+            type: 'line',
+            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#404040',
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-line-static',
+            type: 'line',
+            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+            },
+            paint: {
+                'line-color': '#404040',
+                'line-width': 2,
+            },
+        },
+        {
+            id: 'gl-draw-point-static',
+            type: 'circle',
+            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
+            paint: {
+                'circle-radius': mediaIsMobile ? 8.5 : 6.5,
+                'circle-color': '#404040',
+            },
+        },
+    ];
+    return featureEditorStyle;
+}
+
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
 var useFeatureEditor = function (props) {
+    console.log(featureEditorStyle());
     var draw = React.useRef();
     var mapHook = useMap({
         mapId: props.mapId,
@@ -2047,11 +2273,11 @@ var useFeatureEditor = function (props) {
     var drawToolsInitialized = React.useRef(false);
     var _a = React.useState(false), drawToolsReady = _a[0], setDrawToolsReady = _a[1];
     var _b = React.useState(), feature = _b[0], setFeature = _b[1];
+    var style = featureEditorStyle();
     var modeChangeHandler = React.useCallback(function (e) {
         console.log('MlFeatureEditor mode change to ' + e.mode);
         //setDrawMode(e.mode);
-        if (typeof props.onFinish === 'function' &&
-            (e.mode === 'simple_select')) {
+        if (typeof props.onFinish === 'function' && e.mode === 'simple_select') {
             props.onFinish();
         }
     }, [props.onFinish]);
@@ -2073,6 +2299,8 @@ var useFeatureEditor = function (props) {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 modes: Object.assign({}, MapboxDraw__default["default"].modes),
+                userProperties: true,
+                styles: style,
             });
             mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
             mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
@@ -2124,7 +2352,7 @@ var useFeatureEditor = function (props) {
     return {
         feature: feature,
         drawToolsReady: drawToolsReady,
-        draw: draw.current
+        draw: draw.current,
     };
 };
 
@@ -2510,6 +2738,25 @@ var MlFollowGps = function (props) {
         }
         return;
     }, [mapHook.map, isFollowed, getLocationSuccess]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (accuracyGeoJson === null || accuracyGeoJson === void 0 ? void 0 : accuracyGeoJson.type) {
+            var getBounds = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getBounds();
+            var actualBounds = [
+                getBounds === null || getBounds === void 0 ? void 0 : getBounds._ne.lng,
+                getBounds === null || getBounds === void 0 ? void 0 : getBounds._ne.lat,
+                getBounds === null || getBounds === void 0 ? void 0 : getBounds._sw.lng,
+                getBounds === null || getBounds === void 0 ? void 0 : getBounds._sw.lat,
+            ];
+            var accurancyBounds = turf.bbox(accuracyGeoJson);
+            var contained = turf.booleanContains(turf.bboxPolygon(actualBounds), turf.bboxPolygon(accurancyBounds));
+            if (contained === false) {
+                (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.fitBounds(accurancyBounds, {
+                    padding: { top: 25, bottom: 25 },
+                });
+            }
+        }
+    }, [accuracyGeoJson]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         isFollowed && userLocationGeoJson && (React__default["default"].createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && orientationCone && (React__default["default"].createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
@@ -2660,7 +2907,7 @@ var SvgCompassBackground = function SvgCompassBackground(props) {
   })));
 };
 
-var StyleBox = material.styled('div')(function (_a) {
+var BoxStyled$2 = material.styled(material.Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
@@ -2673,7 +2920,7 @@ var StyleBox = material.styled('div')(function (_a) {
         },
         _b);
 });
-var CompassBox = material.styled('div')(function (_a) {
+var CompassBox = material.styled(material.Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
@@ -2693,7 +2940,7 @@ var CompassBox = material.styled('div')(function (_a) {
         },
         _b);
 });
-var NeedleBox = material.styled('div')({
+var NeedleBox = material.styled(material.Box)({
     position: 'absolute',
     right: '21.4px',
     top: '6px',
@@ -2743,7 +2990,7 @@ var MlNavigationCompass = function (props) {
         }
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyleBox, { sx: __assign({}, props.style) },
+        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(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
@@ -2768,36 +3015,34 @@ var MlNavigationTools = function (props) {
         mapHook.map.on('pitchend', function () {
             if (!mapHook.map)
                 return;
-            setPitch(mapHook.map.map.getPitch());
+            setPitch(mapHook.map.getPitch());
         }, mapHook.componentId);
-        setPitch(mapHook.map.map.getPitch());
+        setPitch(mapHook.map.getPitch());
     }, [mapHook.map, props.mapId]);
     var zoomIn = React.useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
-            mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
+        if (mapHook.map.transform._zoom + 0.5 <= mapHook.map.transform._maxZoom) {
+            mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom + 0.5 });
         }
     }, [mapHook.map]);
     var zoomOut = React.useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
-            mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
+        if (mapHook.map.transform._zoom - 0.5 >= mapHook.map.transform._minZoom) {
+            mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom - 0.5 });
         }
     }, [mapHook.map]);
     var adjustPitch = React.useCallback(function () {
         if (!mapHook.map)
             return;
-        var targetPitch = 60;
-        if (mapHook.map.map.getPitch() !== 0) {
-            targetPitch = 0;
-        }
-        mapHook.map.map.easeTo({ pitch: targetPitch });
+        setPitch(mapHook.map.getPitch());
+        var targetPitch = mapHook.map.getPitch() !== 0 ? 0 : 60;
+        mapHook.map.easeTo({ pitch: targetPitch });
     }, [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 20px 10px' } : { marginTop: '50px' })), props.sx) },
+    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 ? '2D' : '3D')),
+        props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch < 59 ? '2D' : '3D')),
         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: {
@@ -3134,6 +3379,25 @@ var MlLayerSwipe = function (props) {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onMouseUp);
     };
+    function adjustWindowSize() {
+        var clipWidth = mapContext.maps[props.map2Id].getContainer().style.clip.split(',')[1].replace('px', '');
+        var canvasWidth = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect().width;
+        if (parseFloat(clipWidth) < canvasWidth) {
+            var newPosition = parseFloat(((clipWidth / canvasWidth) * 100).toFixed(2));
+            setSwipeX(newPosition);
+        }
+        else {
+            var newClip = 'rect(0, ' + canvasWidth / 2 + 'px, 999em, 0)';
+            mapContext.maps[props.map2Id].getContainer().style.clip = newClip;
+            setSwipeX(50);
+        }
+    }
+    React.useEffect(function () {
+        window.addEventListener('resize', adjustWindowSize);
+        return function () {
+            window.removeEventListener('resize', adjustWindowSize);
+        };
+    }, [mapContext]);
     return (React__default["default"].createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '100px', height: '100px', background: '#0066ff', border: '3px solid #eaebf1', cursor: 'pointer', zIndex: '110', marginLeft: '-50px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown }));
 };
 MlLayerSwipe.defaultProps = {
@@ -6216,8 +6480,79 @@ 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(material.List, { sx: { marginTop: '15px' } }, props === null || props === void 0 ? void 0 : props.children));
+    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 = {
@@ -6279,6 +6614,15 @@ function PaintPropsColorPicker(_a) {
         } }));
 }
 
+var PaperStyled = material.styled(material.Paper)({
+    marginLeft: '-100px',
+    marginRight: '-21px',
+    paddingLeft: '53px',
+    borderRadius: '0px',
+});
+var BoxStyled = material.styled(material.Box)({
+    marginLeft: '61px',
+});
 var mapPropKeyToFormInputType = {
     'circle-color': 'colorpicker',
     'circle-radius': 'slider',
@@ -6316,7 +6660,6 @@ var inputPropsByPropKey = {
 function LayerPropertyForm(_a) {
     var _b = _a.paintProps, paintProps = _b === void 0 ? {} : _b, setPaintProps = _a.setPaintProps;
     var key = React.useRef(Math.round(Math.random() * 10000000000));
-    //const onChange = (event) => {};
     var getFormInputByType = React.useCallback(function (key) {
         if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1 &&
             (typeof paintProps[key] === 'number' || typeof paintProps[key] === 'string')) {
@@ -6355,68 +6698,27 @@ function LayerPropertyForm(_a) {
         return null;
     }, [paintProps]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Paper, { sx: {
-                marginLeft: '-100px',
-                marginRight: '-21px',
-                paddingLeft: '81px',
-                borderRadius: '0px',
-            } },
+        React__default["default"].createElement(PaperStyled, null,
             React__default["default"].createElement(material.ListItem, { key: key + '_paintPropForm' },
-                React__default["default"].createElement(material.Box, { sx: {
-                        marginLeft: '61px',
-                    } }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
-}
-
-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(material.ListItem, { className: 'listItemFolder', sx: {
-                paddingRight: 0,
-                paddingLeft: 0,
-                paddingTop: 0,
-                paddingBottom: '4px',
-            } },
-            React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                React__default["default"].createElement(material.IconButton, { sx: {
-                        marginRight: '0px',
-                        padding: '0px',
-                    }, 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(material.Checkbox, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, sx: { padding: 0, marginRight: '5px' }, 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(system.Box, { sx: { display: open ? 'block' : 'none' } },
-            React__default["default"].createElement(material.List, { component: "div", disablePadding: true, sx: { marginLeft: '25px' } }, _children))));
+                React__default["default"].createElement(BoxStyled, null, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
 }
 
+var ListItemStyled = material.styled(material.ListItem)(function (configurable) { return ({
+    paddingRight: configurable ? '56px' : 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: '4px',
+}); });
+var TuneIconButton$1 = material.styled(material.IconButton)({
+    padding: '4px',
+    marginTop: '-3px',
+});
+var CheckboxListItemIcon = material.styled(material.ListItemIcon)({
+    minWidth: '30px',
+});
+var CheckboxStyled = material.styled(material.Checkbox)({
+    padding: 0,
+});
 function LayerListItemVectorLayer(_a) {
     var configurable = _a.configurable, vtProps = _a.vtProps, setVtProps = _a.setVtProps, id = _a.id, props = __rest(_a, ["configurable", "vtProps", "setVtProps", "id"]);
     var _b = React.useState(false), paintPropsFormVisible = _b[0], setPaintPropsFormVisible = _b[1];
@@ -6452,19 +6754,14 @@ function LayerListItemVectorLayer(_a) {
         }
     }, [paintProps, id, setVtProps, vtProps]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.ListItem, { key: id, sx: {
-                paddingRight: configurable ? '56px' : 0,
-                paddingLeft: 0,
-                paddingTop: 0,
-                paddingBottom: '4px',
-            }, secondaryAction: configurable ? (React__default["default"].createElement(material.IconButton, { edge: "end", "aria-label": "comments", onClick: function () {
+        React__default["default"].createElement(ListItemStyled, { key: id, secondaryAction: configurable ? (React__default["default"].createElement(TuneIconButton$1, { edge: "end", "aria-label": "comments", onClick: function () {
                     setPaintPropsFormVisible(function (current) {
                         return !current;
                     });
-                }, sx: { padding: '4px', marginTop: '-3px' } },
+                } },
                 React__default["default"].createElement(TuneIcon__default["default"], null))) : undefined },
-            React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                React__default["default"].createElement(material.Checkbox, { checked: visible, onClick: function () {
+            React__default["default"].createElement(CheckboxListItemIcon, null,
+                React__default["default"].createElement(CheckboxStyled, { checked: visible, onClick: function () {
                         setVisible(function (val) { return !val; });
                     } })),
             React__default["default"].createElement(material.ListItemText, { primary: vtProps.layers[id].id, variant: "layerlist" })),
@@ -6474,6 +6771,15 @@ LayerListItemVectorLayer.defaultProps = {
     configurable: true,
 };
 
+var TuneIconButton = material.styled(material.IconButton)(function (showDeleteButton) { return ({
+    marginRight: showDeleteButton ? '4px' : '1000px',
+    padding: '4px',
+    marginTop: '-3px',
+}); });
+var DeleteIconButton = material.styled(material.IconButton)({
+    padding: '4px',
+    marginTop: '-3px',
+});
 function LayerListItem(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     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"]);
@@ -6553,24 +6859,21 @@ function LayerListItem(_a) {
         return undefined;
     }, [layerComponent]);
     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(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: '25px', paddingTop: 0, paddingBottom: '4px' }, 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 :
+        !((_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(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
+                React__default["default"].createElement(TuneIconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
                         setPaintPropsFormVisible(function (current) {
                             return !current;
                         });
-                    }, sx: __assign({ marginRight: '0px', padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})) },
-                    React__default["default"].createElement(TuneIcon__default["default"], null)),
+                    } },
+                    React__default["default"].createElement(iconsMaterial.Tune, null)),
                 props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(material.IconButton, { edge: "end", "aria-label": "delete", onClick: function () {
+                    React__default["default"].createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
                             if (typeof setLayerState === 'function') {
                                 setShowDeletionConfirmationDialog(true);
                             }
-                        }, sx: {
-                            padding: '4px',
-                            marginTop: '-3px',
                         } },
-                        React__default["default"].createElement(DeleteIcon__default["default"], null)),
+                        React__default["default"].createElement(iconsMaterial.Delete, null)),
                     showDeletionConfirmationDialog && (React__default["default"].createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                             if (typeof setLayerState === 'function') {
                                 deletedRef.current = true;
@@ -6580,8 +6883,8 @@ function LayerListItem(_a) {
                         }, onCancel: function () {
                             setShowDeletionConfirmationDialog(false);
                         }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))))) : undefined },
-            React__default["default"].createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                React__default["default"].createElement(material.Checkbox, { disabled: !visible, checked: localVisible, sx: { padding: 0 }, onClick: function () {
+            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' } }))),
@@ -6599,6 +6902,14 @@ 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 _a, _b;
     var layerContext = useLayerContext();
@@ -6623,7 +6934,7 @@ function LayerListItemFactory(props) {
         return layerContext.setLayers;
     }, [props.setLayers, layerContext.setLayers]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(MlOrderLayers, { layerIds: orderLayers, insertBeforeLayer: '_background' }),
+        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" })),
@@ -6635,28 +6946,14 @@ function LayerListItemFactory(props) {
                 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(material.IconButton, { disabled: idx === layers.length - 1, onClick: function () {
+                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
                                         layerContext.moveDown(layer.id || '');
-                                    }, sx: {
-                                        padding: '4px',
-                                        marginTop: '-3px',
-                                        background: 'none',
-                                        "&:hover": {
-                                            background: "none"
-                                        }
                                     } },
-                                    React__default["default"].createElement(ArrowCircleDownIcon__default["default"], null)),
-                                React__default["default"].createElement(material.IconButton, { disabled: idx === 0, onClick: function () {
+                                    React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
+                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
                                         layerContext.moveUp(layer.id || '');
-                                    }, sx: {
-                                        padding: '4px',
-                                        marginTop: '-3px',
-                                        background: 'none',
-                                        "&:hover": {
-                                            background: "none"
-                                        }
                                     } },
-                                    React__default["default"].createElement(ArrowCircleUpIcon__default["default"], null))), setLayerState: function (layerConfig) {
+                                    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) {
@@ -6692,28 +6989,14 @@ function LayerListItemFactory(props) {
                                     return _layers;
                                 });
                             }, showDeleteButton: true, buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
-                                React__default["default"].createElement(material.IconButton, { disabled: idx === layers.length - 1, onClick: function () {
+                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
                                         layerContext.moveDown(layer.id || '');
-                                    }, sx: {
-                                        padding: '4px',
-                                        marginTop: '-3px',
-                                        background: 'none',
-                                        "&:hover": {
-                                            background: "none"
-                                        }
                                     } },
-                                    React__default["default"].createElement(ArrowCircleDownIcon__default["default"], null)),
-                                React__default["default"].createElement(material.IconButton, { disabled: idx === 0, onClick: function () {
+                                    React__default["default"].createElement(iconsMaterial.ArrowCircleDown, null)),
+                                React__default["default"].createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
                                         layerContext.moveUp(layer.id || '');
-                                    }, sx: {
-                                        padding: '4px',
-                                        marginTop: '-3px',
-                                        background: 'none',
-                                        "&:hover": {
-                                            background: "none"
-                                        }
                                     } },
-                                    React__default["default"].createElement(ArrowCircleUpIcon__default["default"], null))) }))));
+                                    React__default["default"].createElement(iconsMaterial.ArrowCircleUp, null))) }))));
                 default:
                     return null;
             }
@@ -6877,7 +7160,7 @@ function TopToolbar(props) {
                     }, sx: {
                         display: { xs: 'block', sm: 'none' },
                     } },
-                    React__namespace.createElement(Box__default["default"], { sx: { paddingLeft: '10px', paddingRight: '10px' } }, props.buttons)))) : (''),
+                    React__namespace.createElement(Box__default["default"], { sx: { paddingLeft: '10px', paddingRight: '10px' }, onClick: handleCloseNavMenu }, props.buttons)))) : (''),
             React__namespace.createElement(Box__default["default"], { sx: { marginRight: '25px', display: { xs: 'none', sm: 'flex' } } }, props.buttons))));
 }
 
@@ -6999,7 +7282,7 @@ function UploadButton(props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         props.buttonComponent ? (React__default["default"].cloneElement(props.buttonComponent, { onClick: upload })) : (React__default["default"].createElement(material.Button, { onClick: upload },
             React__default["default"].createElement(FileCopy__default["default"], null))),
-        React__default["default"].createElement("input", { ref: fileupload, onChange: fileUploadOnChange, type: "file", id: "input", multiple: true, style: { display: 'none' } })));
+        React__default["default"].createElement("input", { ref: fileupload, onChange: fileUploadOnChange, type: "file", accept: props.accept, id: "input", multiple: true, style: { display: 'none' } })));
 }
 
 var SelectStylePopup = function (props) {