@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/dist/index.esm.js

@@ -10,9 +10,9 @@ var uuid = require('uuid');
 var PropTypes = require('prop-types');
 var material = require('@mui/material');
 var GpsFixedIcon = require('@mui/icons-material/GpsFixed');
-var jsPDF = require('jspdf');
 var PrinterIcon = require('@mui/icons-material/Print');
 var Button = require('@mui/material/Button');
+var jsPDF = require('jspdf');
 var ReactDOM = require('react-dom');
 var Moveable = require('react-moveable');
 var turf = require('@turf/turf');
@@ -44,6 +44,13 @@ var TuneIcon = require('@mui/icons-material/Tune');
 var muiColor = require('mui-color');
 var iconsMaterial = require('@mui/icons-material');
 var system = require('@mui/system');
+var AppBar = require('@mui/material/AppBar');
+var Toolbar = require('@mui/material/Toolbar');
+var Menu = require('@mui/material/Menu');
+var MenuIcon = require('@mui/icons-material/Menu');
+var CloseIcon = require('@mui/icons-material/Close');
+var react = require('@emotion/react');
+var _ = require('@mui/material/');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,9 +76,9 @@ 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 jsPDF__default = /*#__PURE__*/_interopDefaultLegacy(jsPDF);
 var PrinterIcon__default = /*#__PURE__*/_interopDefaultLegacy(PrinterIcon);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var jsPDF__default = /*#__PURE__*/_interopDefaultLegacy(jsPDF);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
 var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
@@ -97,6 +104,11 @@ var ListItemText__default = /*#__PURE__*/_interopDefaultLegacy(ListItemText);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
+var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
+var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
+var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
+var MenuIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuIcon);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -735,8 +747,8 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
                 main: '#009FE3',
             },
             background: {
-                default: '#121212',
-                paper: '#323232',
+                default: '#222222',
+                paper: '#414141',
                 icon: '#525252',
             },
             text: {
@@ -792,9 +804,8 @@ var getTheme = function (mode) {
             },
             MuiButton: {
                 styleOverrides: {
-                    backgroundColor: theme.palette.background.paper,
-                    ':hover': {
-                        backgroundColor: theme.palette.primary.main,
+                    contained: {
+                        color: '#fff',
                     },
                 },
                 variants: [
@@ -961,6 +972,7 @@ var MapLibreMap = function (props) {
         var mapId = mapIdRef.current;
         return function () {
             var _a, _b, _c;
+            initializedRef.current = false;
             mapContext.removeMap(mapId);
             (_c = (_b = (_a = map.current) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.remove) === null || _c === void 0 ? void 0 : _c.call(_b);
             map.current = undefined;
@@ -1229,216 +1241,138 @@ MlCenterPosition.defaultProps = {
 };
 
 /**
- * Component template
+ * Component description
  *
  */
 var MlComponentTemplate = function (props) {
     var mapHook = useMap({
         mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
     });
-    var initializedRef = React.useRef(false);
-    React.useEffect(function () {
-        if (!mapHook.map || initializedRef.current)
-            return;
-        // the MapLibre-gl instance (mapHook.map) is accessible here
-        // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-        initializedRef.current = true;
-        mapHook.map.map.setCenter([7.132122000552613, 50.716405378037706]);
-    }, [mapHook.map, props.mapId]);
+    console.log(mapHook.componentId + " remove this log");
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 MlComponentTemplate.defaultProps = {
     mapId: undefined,
 };
 
-var nmMap = {
-    street: [
-        "footway",
-        "street",
-        "road",
-        "street_name",
-        "residential",
-        "path",
-        "pedestrian",
-        "road_reference",
-        "road_reference_intl",
-        "square",
-        "place",
-    ],
-    number: ["house_number", "street_number"],
-    place: [
-        "city",
-        "village",
-        "hamlet",
-        "locality",
-        "croft",
-        "neighbourhood",
-        "suburb",
-        "city_district",
-        "district",
-        "quarter",
-        "borough",
-        "city_block",
-        "residential",
-        "commercial",
-        "industrial",
-        "houses",
-        "subdivision",
-        "allotments",
-        "postal_city",
-        "town",
-        "municipality",
-        "local_administrative_area",
-    ],
-    zip: ["postcode", "partial_postcode"],
-    state: ["state", "province", "state_code"],
-};
-var nmConverter = function (nmAddress) {
-    var addressArr = [];
-    for (var key in nmMap) {
-        nmMap[key].some(function (element) {
-            if (nmAddress.hasOwnProperty(element)) {
-                addressArr.push(nmAddress[element]);
-                return true;
-            }
-            return false;
-        });
-    }
-    return addressArr.join(", ");
-};
-
-var toPixels = function (length) {
-    var conversionFactor = 96;
-    conversionFactor /= 25.4;
-    return conversionFactor * length + "px";
-};
-var createPdf = function (map, locationValue, setLoading) {
-    setLoading(true);
-    var width = 210;
-    var height = 297;
-    // Calculate pixel ratio
-    var actualPixelRatio = window.devicePixelRatio;
+var createExport = function (options) {
+    var width = options.width;
+    var height = options.height;
     // Create map container
-    var hidden = document.createElement("div");
-    hidden.className = "hidden-map";
-    document.body.appendChild(hidden);
-    var container = document.createElement("div");
-    container.style.width = toPixels(width);
-    container.style.height = toPixels(height);
-    hidden.appendChild(container);
-    var style = map.map.getStyle();
+    var hiddenContainer = document.createElement('div');
+    hiddenContainer.className = 'hidden-map';
+    hiddenContainer.style.width = '0px';
+    hiddenContainer.style.height = '0px';
+    hiddenContainer.style.overflow = 'hidden';
+    document.body.appendChild(hiddenContainer);
+    var container = document.createElement('div');
+    container.style.width = width + 'px';
+    container.style.height = height + 'px';
+    hiddenContainer.appendChild(container);
+    var style = options.map.map.getStyle();
     var _loop_1 = function (name_1) {
         var src = style.sources[name_1];
         Object.keys(src).forEach(function (key) {
-            //delete properties if value is undefined.
-            // for instance, raster-dem might has undefined value in "url" and "bounds"
+            // delete property if value is undefined.
+            // for instance, raster-dem might have undefined value in "url" and "bounds"
             if (!src[key]) {
                 delete src[key];
             }
         });
     };
+    // delete undefined source properties
     for (var name_1 in style.sources) {
         _loop_1(name_1);
     }
-    //Render map
+    // Create a new MapLibre-gl instance
     var renderMap = new maplibreGl.Map({
         container: container,
-        center: map.map.getCenter(),
-        zoom: map.map.getZoom(),
-        bearing: map.map.getBearing(),
-        pitch: map.map.getPitch(),
+        center: options.map.map.getCenter(),
+        zoom: options.map.map.getZoom(),
+        bearing: 0,
+        pitch: 0,
         interactive: false,
         preserveDrawingBuffer: true,
         fadeDuration: 0,
         attributionControl: false,
-        style: style
+        style: style,
     });
-    renderMap.once("idle", function () {
-        var _a;
-        // TO DO: It is still under development
-        var pdf = new jsPDF__default["default"]({
-            orientation: "p",
-            unit: "mm",
-            compress: true,
-        });
-        Object.defineProperty(window, "devicePixelRatio", {
-            get: function () {
-                return 300 / 96;
-            },
+    var bboxCamera = renderMap._cameraForBoxAndBearing([options.bboxUnrotated[0], options.bboxUnrotated[1]], [options.bboxUnrotated[2], options.bboxUnrotated[3]], options.bearing + options.map.map.getBearing());
+    renderMap._fitInternal(bboxCamera);
+    return new Promise(function (resolve) {
+        console.log('before idle');
+        renderMap.once('idle', function () {
+            var params = __assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer, createPdf: function (_options) {
+                    return createJsPdf(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
+                }, createPng: function (_options) {
+                    return createPng(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
+                } });
+            resolve(params);
         });
-        var offsetX = 2.5;
-        var offsetY = 2.5;
-        var marginTop = 3;
-        var marginBottom = 3;
-        var innerMargin = 2;
-        var logo = "data:image/png;base64,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";
-        var textBuffer = 1;
-        var lineHeight = 3.25;
-        var text = locationValue ? nmConverter(locationValue.address) : "";
-        var textChunksSeperator = text.split(",");
-        var textChunks = [];
-        if (textChunks.length) {
-            textChunksSeperator.forEach(function (chunk) {
-                var limitChunks = chunk.match(/.{1,34}/g);
-                if (limitChunks) {
-                    textChunks.push.apply(textChunks, limitChunks);
-                }
-            });
-        }
+    });
+};
+function createJsPdf(options) {
+    var pdf = new jsPDF__default["default"]({
+        orientation: (options === null || options === void 0 ? void 0 : options.orientation) === 'portrait' ? 'p' : 'l',
+        unit: 'mm',
+        compress: true,
+        format: options.format,
+    });
+    Object.defineProperty(window, 'devicePixelRatio', {
+        get: function () {
+            return 300 / 96;
+        },
+    });
+    return new Promise(function (resolve) {
+        var _b;
         //Render map image
-        pdf.addImage(renderMap.getCanvas().toDataURL("image/png"), "png", 0, 0, 210, 297, undefined, "FAST");
-        //Render lower left Copyright box
-        pdf.setFillColor("white");
-        pdf.rect(138, 287, 297, 10, "F");
-        pdf.setFontSize(10); // optional
-        pdf.text("Datenquelle: © OpenStreetMap-Mitwirkende", 140, pdf.internal.pageSize.height - 3);
-        //Render infobox
-        pdf.setFillColor("white");
-        var infoBoxSize = textChunks.length * lineHeight +
-            marginTop +
-            marginBottom +
-            lineHeight * 2 +
-            innerMargin * 2 +
-            textBuffer;
-        pdf.rect(offsetX, 2, 66.5, infoBoxSize, "F");
-        pdf.setFontSize(10);
-        pdf.text("Karten PDF:", 6, offsetY + marginTop);
-        //Render inner infobox
-        pdf.rect(6, 7, 60, textChunks.length * lineHeight + innerMargin * 2 + textBuffer);
-        pdf.setFontSize(10);
-        //Write out address
-        textChunks.forEach(function (text, i) {
-            pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
-        });
-        //Add WG Logo
-        pdf.addImage(logo, "png", 5, offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2, 3, 3, undefined, "FAST");
-        //Add WG Url
-        pdf.setFontSize(10);
-        pdf.text("wheregroup.com", 40, offsetY +
-            marginTop +
-            lineHeight * 2 +
-            textChunks.length * lineHeight +
-            innerMargin * 2 +
-            textBuffer);
-        //Set pdfs props
-        pdf.setProperties({
-            title: "Map export",
-            subject: "Map export",
-            creator: "WhereGroup GmbH",
-            author: "(c)WhereGroup GmbH, (c)OpenStreetMap",
-        });
-        pdf.save("Map.pdf");
-        renderMap.remove();
-        (_a = hidden.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(hidden);
-        Object.defineProperty(window, "devicePixelRatio", {
-            get: function () {
-                return actualPixelRatio;
-            },
-        });
-        setLoading(false);
+        pdf.addImage(options.renderMap.getCanvas().toDataURL('image/png'), 'png', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), undefined, 'FAST');
+        // remove DOM Elements
+        options.renderMap.remove();
+        (_b = options.hiddenContainer.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(options.hiddenContainer);
+        var params = __assign(__assign({}, options), { pdf: pdf, downloadPdf: function (_options) { return downloadPdf(__assign(__assign({}, params), _options)); } });
+        resolve(params);
     });
-};
+}
+function downloadPdf(options) {
+    options.pdf.save('Map.pdf');
+    return new Promise(function (resolve) {
+        resolve(__assign({}, options));
+    });
+}
+function createPng(options) {
+    return new Promise(function (resolve) {
+        var png = options.renderMap.getCanvas().toDataURL('image/png');
+        var params = __assign(__assign({}, options), { png: png, downloadPng: function (_options) { return downloadPng(__assign(__assign({}, params), _options)); } });
+        resolve(params);
+    });
+}
+function downloadPng(options) {
+    var _a = document.createElement('a');
+    _a.download = (options === null || options === void 0 ? void 0 : options.name) ? options.name + '.png' : 'map.png';
+    _a.href = options.png;
+    document.body.appendChild(_a);
+    _a.click();
+    document.body.removeChild(_a);
+    return new Promise(function (resolve) {
+        resolve(__assign({}, options));
+    });
+}
+
+function useExportMap(props) {
+    var mapHook = useMap({ mapId: props.mapId });
+    var _createExport = React.useMemo(function () {
+        if (mapHook.map) {
+            return function (options) {
+                return createExport(__assign({ map: mapHook.map }, options));
+            };
+        }
+        return;
+    }, [mapHook.map]);
+    return {
+        createExport: _createExport,
+    };
+}
 
 /**
  * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
@@ -1446,15 +1380,35 @@ var createPdf = function (map, locationValue, setLoading) {
 var MlCreatePdfButton = function (props) {
     var mapHook = useMap({
         mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
     });
+    var exportMap = useExportMap({ mapId: props.mapId });
+    var _a = React__default["default"].useState(false), loading = _a[0], setLoading = _a[1];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Button__default["default"], { color: "primary", variant: "contained", onClick: function () {
-                if (mapHook.map) {
-                    createPdf(mapHook.map, null, function () { });
+                if (mapHook.map && (exportMap === null || exportMap === void 0 ? void 0 : exportMap.createExport)) {
+                    setLoading(true);
+                    var bounds = mapHook.map.getBounds();
+                    var bbox = [
+                        bounds.getWest(),
+                        bounds.getSouth(),
+                        bounds.getEast(),
+                        bounds.getNorth(),
+                    ];
+                    exportMap
+                        .createExport(__assign({ width: 595 * 1.4, height: 842 * 1.4, bbox: bbox, bboxUnrotated: bbox, bearing: mapHook.map.getBearing(), format: 'a4', orientation: 'portrait' }, props.exportOptions))
+                        .then(function (res) { return res.createPdf(); })
+                        .then(function (res) {
+                        setLoading(false);
+                        return res.downloadPdf();
+                    })
+                        .catch(function (error) {
+                        console.log(error);
+                        setLoading(false);
+                    });
                 }
-            } },
-            React__default["default"].createElement(PrinterIcon__default["default"], null))));
+            } }, loading ? (React__default["default"].createElement(material.CircularProgress, { size: 24, sx: {
+                color: 'text.contrast',
+            } })) : (React__default["default"].createElement(PrinterIcon__default["default"], null)))));
 };
 MlCreatePdfButton.defaultProps = {
     mapId: undefined,
@@ -1798,102 +1752,6 @@ function PdfPreview(props) {
             } })), mapContainerRef.current) : React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
-var createExport = function (options) {
-    var width = options.width;
-    var height = options.height;
-    // Create map container
-    var hiddenContainer = document.createElement('div');
-    hiddenContainer.className = 'hidden-map';
-    document.body.appendChild(hiddenContainer);
-    var container = document.createElement('div');
-    container.style.width = width + 'px';
-    container.style.height = height + 'px';
-    hiddenContainer.appendChild(container);
-    var style = options.map.map.getStyle();
-    var _loop_1 = function (name_1) {
-        var src = style.sources[name_1];
-        Object.keys(src).forEach(function (key) {
-            // delete property if value is undefined.
-            // for instance, raster-dem might have undefined value in "url" and "bounds"
-            if (!src[key]) {
-                delete src[key];
-            }
-        });
-    };
-    // delete undefined source properties
-    for (var name_1 in style.sources) {
-        _loop_1(name_1);
-    }
-    // Create a new MapLibre-gl instance
-    var renderMap = new maplibreGl.Map({
-        container: container,
-        center: options.map.map.getCenter(),
-        zoom: options.map.map.getZoom(),
-        bearing: 0,
-        pitch: 0,
-        interactive: false,
-        preserveDrawingBuffer: true,
-        fadeDuration: 0,
-        attributionControl: false,
-        style: style,
-    });
-    var bboxCamera = renderMap._cameraForBoxAndBearing([options.bboxUnrotated[0], options.bboxUnrotated[1]], [options.bboxUnrotated[2], options.bboxUnrotated[3]], options.bearing + options.map.map.getBearing());
-    renderMap._fitInternal(bboxCamera);
-    return new Promise(function (resolve) {
-        console.log('before idle');
-        renderMap.once('idle', function () {
-            var params = __assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer, createPdf: function (_options) {
-                    return createJsPdf(__assign(__assign(__assign({}, options), { renderMap: renderMap, hiddenContainer: hiddenContainer }), _options));
-                } });
-            resolve(params);
-        });
-    });
-};
-function createJsPdf(options) {
-    var pdf = new jsPDF__default["default"]({
-        orientation: (options === null || options === void 0 ? void 0 : options.orientation) === 'portrait' ? 'p' : 'l',
-        unit: 'mm',
-        compress: true,
-        format: options.format,
-    });
-    Object.defineProperty(window, 'devicePixelRatio', {
-        get: function () {
-            return 300 / 96;
-        },
-    });
-    return new Promise(function (resolve) {
-        var _a;
-        //Render map image
-        pdf.addImage(options.renderMap.getCanvas().toDataURL('image/png'), 'png', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), undefined, 'FAST');
-        // remove DOM Elements
-        options.renderMap.remove();
-        (_a = options.hiddenContainer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(options.hiddenContainer);
-        var params = __assign(__assign({}, options), { pdf: pdf, downloadPdf: function (_options) { return downloadPdf(__assign(__assign({}, params), _options)); } });
-        resolve(params);
-    });
-}
-function downloadPdf(options) {
-    options.pdf.save('Map.pdf');
-    return new Promise(function (resolve) {
-        resolve(__assign({}, options));
-    });
-}
-
-function useExportMap(props) {
-    var mapHook = useMap({ mapId: props.mapId });
-    var _createExport = React.useMemo(function () {
-        if (mapHook.map) {
-            return function (options) {
-                return createExport(__assign({ map: mapHook.map }, options));
-            };
-        }
-        return;
-    }, [mapHook.map]);
-    return {
-        createExport: _createExport,
-    };
-}
-
 var scaleOptions = [
     {
         value: 0,
@@ -4100,7 +3958,7 @@ var MlNavigationTools = function (props) {
         React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
                 width: '50px',
                 border: 'none',
-                Button: { minWidth: '20px !important', border: 'none', padding: 0 },
+                Button: { minWidth: '20px !important' },
                 'Button:hover': { border: 'none' },
             } }, props.showZoomButtons && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: zoomIn },
@@ -5970,8 +5828,6 @@ var MlVectorTileLayer = function (props) {
     var layerPaintConfsRef = React.useRef({});
     var layerLayoutConfsRef = React.useRef({});
     var initializedRef = React.useRef(false);
-    console.log('render vt');
-    console.log(props.layers);
     var createLayers = React.useCallback(function () {
         if (!mapHook.map)
             return;
@@ -7127,6 +6983,153 @@ LayerListItem.defaultProps = {
     visible: true,
 };
 
+var ghPagesUrl = 'https://mapcomponents.github.io/react-map-components-maplibre/';
+var logoUrl = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb.svg';
+var logoUrl_dark = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb-weisse-schrift.svg';
+var logoUrl_mobile = ghPagesUrl + 'assets/mapcomponents_logo.png';
+function TopToolbar(props) {
+    var theme = styles.useTheme();
+    var _a = React.useState(null), anchorElNav = _a[0], setAnchorElNav = _a[1];
+    var handleOpenNavMenu = function (event) {
+        setAnchorElNav(event.currentTarget);
+    };
+    var handleCloseNavMenu = function () {
+        setAnchorElNav(null);
+    };
+    return (React__namespace.createElement(AppBar__default["default"], { sx: {
+            minHeight: '62px',
+            position: 'absolute',
+            zIndex: 1300,
+        }, position: "static" },
+        React__namespace.createElement(Toolbar__default["default"], { disableGutters: true },
+            props.logo || (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(Box__default["default"], { sx: {
+                        marginLeft: '25px',
+                        display: { xs: 'none', md: 'flex' },
+                        flexGrow: { md: '30' },
+                    } },
+                    React__namespace.createElement("img", { src: theme.palette.mode === 'dark' ? logoUrl_dark : logoUrl, style: { width: '100%', maxWidth: '250px' } })),
+                React__namespace.createElement(Box__default["default"], { sx: {
+                        marginLeft: '25px',
+                        display: { xs: 'flex', sm: 'flex', md: 'none' },
+                        flexGrow: { xs: '500' },
+                        mr: { sm: '0px' },
+                    } },
+                    React__namespace.createElement("img", { src: logoUrl_mobile, width: "50px", height: "50px" })))),
+            React__namespace.createElement(Box__default["default"], { sx: { flexGrow: 1, display: { xs: 'flex' } } }, props.unmovableButtons),
+            props.buttons ? (React__namespace.createElement(Box__default["default"], { sx: { flexGrow: 22, display: { xs: 'flex', sm: 'none' } } },
+                React__namespace.createElement(IconButton__default["default"], { onClick: handleOpenNavMenu },
+                    React__namespace.createElement(MenuIcon__default["default"], null)),
+                React__namespace.createElement(Menu__default["default"], { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }, keepMounted: true, transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    }, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, PaperProps: {
+                        elevation: 24,
+                        sx: {
+                            overflow: 'visible',
+                            mt: '15px',
+                        },
+                    }, 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: { marginRight: '25px', display: { xs: 'none', sm: 'flex' } } }, props.buttons))));
+}
+
+var DrawerHeader = styles.styled('div')(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+}); });
+var drawerBleeding = 56;
+var Puller = styles.styled(Box__default["default"])(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: 30,
+        height: 6,
+        backgroundColor: theme.palette.text.primary,
+        borderRadius: 3,
+        position: 'absolute',
+        top: 8,
+        left: 'calc(50% - 15px)',
+    });
+});
+function Sidebar(_a) {
+    var drawerPaperProps = _a.drawerPaperProps, drawerHeaderProps = _a.drawerHeaderProps, props = __rest(_a, ["drawerPaperProps", "drawerHeaderProps"]);
+    var mediaIsMobile = useMediaQuery__default["default"]('(max-width:600px)');
+    var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        !mediaIsMobile ? (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
+            React__default["default"].createElement(material.Drawer, __assign({ transitionDuration: 0, variant: "persistent", anchor: "left", open: typeof props.open === 'undefined' ? drawerOpen : props.open, PaperProps: __assign(__assign({}, drawerPaperProps), { sx: __assign({ maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' }, padding: { lg: '20px', md: '20px', sm: '20px', xs: '10px' }, top: '64px', width: {
+                            xs: '80%',
+                            sm: '60%',
+                            md: '350px',
+                            lg: '350px',
+                        }, boxSizing: 'border-box' }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
+                React__default["default"].createElement(DrawerHeader, __assign({}, drawerHeaderProps),
+                    React__default["default"].createElement(_.Typography, { variant: "h6" }, props.name),
+                    React__default["default"].createElement(material.IconButton, { onClick: props.setOpen
+                            ? function () {
+                                var _a;
+                                (_a = props.setOpen) === null || _a === void 0 ? void 0 : _a.call(props, false);
+                            }
+                            : function () {
+                                setDrawerOpen(false);
+                            }, sx: {
+                            position: 'absolute',
+                            right: '20px',
+                        } },
+                        React__default["default"].createElement(CloseIcon__default["default"], null))),
+                React__default["default"].createElement(Box__default["default"], null, props.children)))) : (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'flex', sm: 'none' } } },
+            React__default["default"].createElement(react.Global, { styles: {
+                    '.MuiDrawer-root > .MuiPaper-root': {
+                        height: "calc(50% - ".concat(drawerBleeding, "px)"),
+                        overflow: 'visible',
+                    },
+                } }),
+            React__default["default"].createElement(_.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: props.setOpen
+                    ? function () {
+                        var _a;
+                        (_a = props.setOpen) === null || _a === void 0 ? void 0 : _a.call(props, false);
+                    }
+                    : function () {
+                        setDrawerOpen(false);
+                    }, onOpen: props.setOpen
+                    ? function () {
+                        var _a;
+                        (_a = props.setOpen) === null || _a === void 0 ? void 0 : _a.call(props, true);
+                    }
+                    : function () {
+                        setDrawerOpen(true);
+                    }, swipeAreaWidth: drawerBleeding, disableSwipeToOpen: false, hideBackdrop: true, ModalProps: {
+                    keepMounted: true,
+                    sx: {
+                        top: "calc(90%)",
+                    },
+                } },
+                React__default["default"].createElement(material.Paper, { sx: {
+                        position: 'absolute',
+                        top: -drawerBleeding,
+                        borderTopLeftRadius: 8,
+                        borderTopRightRadius: 8,
+                        visibility: 'visible',
+                        right: 0,
+                        left: 0,
+                    } },
+                    React__default["default"].createElement(Puller, null),
+                    React__default["default"].createElement(_.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
+                React__default["default"].createElement(material.Paper, { sx: {
+                        px: '15px',
+                        pb: '15px',
+                        height: '100%',
+                        overflow: 'auto',
+                        paddingTop: '20px',
+                    } }, props.children)))),
+        ";"));
+}
+
 exports.ColorPicker = PaintPropsColorPicker;
 exports.GeoJsonContext = GeoJsonContext;
 exports.GeoJsonProvider = GeoJsonProvider;
@@ -7169,8 +7172,10 @@ exports.MlWmsLayer = MlWmsLayer;
 exports.MlWmsLoader = MlWmsLoader;
 exports.PdfContext = PdfContext;
 exports.PdfForm = PdfForm;
+exports.Sidebar = Sidebar;
 exports.SimpleDataContext = SimpleDataContext;
 exports.SimpleDataProvider = SimpleDataProvider;
+exports.TopToolbar = TopToolbar;
 exports.getTheme = getTheme;
 exports.useCameraFollowPath = useCameraFollowPath;
 exports.useExportMap = useExportMap;