@mapcomponents/react-maplibre 1.0.0 → 1.0.1

package/dist/index.esm.js

@@ -1,111 +1,87 @@
-'use strict';
-
-var maplibregl = require('maplibre-gl');
-var React = require('react');
-var styles = require('@mui/material/styles');
-var uuid = require('uuid');
-var PropTypes = require('prop-types');
-var material = require('@mui/material');
-var FilterCenterFocusIcon = require('@mui/icons-material/FilterCenterFocus');
-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');
-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');
-var Box = require('@mui/material/Box');
-var Divider = require('@mui/material/Divider');
-var useMediaQuery = require('@mui/material/useMediaQuery');
-var syncMove = require('@mapbox/mapbox-gl-sync-move');
-var Paper = require('@mui/material/Paper');
-var xmldom = require('@xmldom/xmldom');
-var helpers = require('@turf/helpers');
-var WMSCapabilities = require('wms-capabilities');
-var InfoIcon = require('@mui/icons-material/Info');
-var List = require('@mui/material/List');
-var ListItem = require('@mui/material/ListItem');
-var ListItemText = require('@mui/material/ListItemText');
-var IconButton = require('@mui/material/IconButton');
-var iconsMaterial = require('@mui/icons-material');
-var DeleteIcon = require('@mui/icons-material/Delete');
-var Dialog = require('@mui/material/Dialog');
-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 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 csv2geojson = require('csv2geojson');
-var osm2geojson = require('osm2geojson-lite');
-var topojsonClient = require('topojson-client');
-var externParser = require('@tmcw/togeojson');
-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 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');
-var MenuIcon = require('@mui/icons-material/Menu');
-var CloseIcon = require('@mui/icons-material/Close');
-var react = require('@emotion/react');
-var _ = require('@mui/material/');
-var FileCopy = require('@mui/icons-material/FileCopy');
-var WallpaperIcon = require('@mui/icons-material/Wallpaper');
-var MuiSpeedDial = require('@mui/material/SpeedDial');
-var MoreVertIcon = require('@mui/icons-material/MoreVert');
-var SpeedDialAction = require('@mui/material/SpeedDialAction');
-var LayersIcon = require('@mui/icons-material/Layers');
-var DesignServicesIcon = require('@mui/icons-material/DesignServices');
-var PictureAsPdfIcon = require('@mui/icons-material/PictureAsPdf');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var turf__namespace = /*#__PURE__*/_interopNamespaceDefault(turf);
-var xmldom__namespace = /*#__PURE__*/_interopNamespaceDefault(xmldom);
-var csv2geojson__namespace = /*#__PURE__*/_interopNamespaceDefault(csv2geojson);
-var externParser__namespace = /*#__PURE__*/_interopNamespaceDefault(externParser);
-var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
+import maplibregl, { Map, Popup } from 'maplibre-gl';
+import * as React from 'react';
+import React__default, { useMemo, useEffect, useCallback, useState, useRef, useContext } from 'react';
+import { createTheme, ThemeProvider, useTheme, styled as styled$2 } from '@mui/material/styles';
+import { v4 } from 'uuid';
+import PropTypes from 'prop-types';
+import { Button, CircularProgress, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, useMediaQuery, Typography, styled, Box, ListItemIcon, Checkbox, Snackbar, Drawer, Grid, Slider, ListItem as ListItem$1, IconButton as IconButton$1, List as List$1, ListItemText as ListItemText$1, Paper as Paper$1, TextField, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
+import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
+import PrinterIcon from '@mui/icons-material/Print';
+import Button$1 from '@mui/material/Button';
+import jsPDF from 'jspdf';
+import ReactDOM from 'react-dom';
+import Moveable from 'react-moveable';
+import * as turf from '@turf/turf';
+import { point, circle, lineArc, bbox, booleanContains, bboxPolygon, featureCollection, distance, lineOffset } from '@turf/turf';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import ControlPointIcon from '@mui/icons-material/ControlPoint';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import Box$1 from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import useMediaQuery$1 from '@mui/material/useMediaQuery';
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import Paper from '@mui/material/Paper';
+import * as xmldom from '@xmldom/xmldom';
+import { featureCollection as featureCollection$1, lineString, polygon } from '@turf/helpers';
+import WMSCapabilities from 'wms-capabilities';
+import InfoIcon from '@mui/icons-material/Info';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import { ExpandLess, ExpandMore, KeyboardArrowRight, Tune, Delete, ArrowCircleDown, ArrowCircleUp, CenterFocusWeak } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+import StopIcon from '@mui/icons-material/Stop';
+import FastForwardIcon from '@mui/icons-material/FastForward';
+import FastRewindIcon from '@mui/icons-material/FastRewind';
+import PentagonIcon from '@mui/icons-material/Pentagon';
+import { styled as styled$1, Box as Box$2 } from '@mui/system';
+import EditIcon from '@mui/icons-material/Edit';
+import Tooltip from '@mui/material/Tooltip';
+import { ChromePicker } from 'react-color';
+import TuneIcon from '@mui/icons-material/Tune';
+import ScatterPlotIcon from '@mui/icons-material/ScatterPlot';
+import PolylineIcon from '@mui/icons-material/Polyline';
+import * as csv2geojson from 'csv2geojson';
+import osm2geojson from 'osm2geojson-lite';
+import { feature } from 'topojson-client';
+import * as externParser from '@tmcw/togeojson';
+import * as d3 from 'd3';
+import { useSensor, PointerSensor, MouseSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import { Global } from '@emotion/react';
+import { Typography as Typography$1, SwipeableDrawer } from '@mui/material/';
+import FileCopy from '@mui/icons-material/FileCopy';
+import WallpaperIcon from '@mui/icons-material/Wallpaper';
+import MuiSpeedDial from '@mui/material/SpeedDial';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import LayersIcon from '@mui/icons-material/Layers';
+import DesignServicesIcon from '@mui/icons-material/DesignServices';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -703,7 +679,7 @@ var MapLibreGlWrapper = /** @class */ (function () {
                         _a.sent();
                         _a.label = 2;
                     case 2:
-                        self.map = new maplibregl.Map(props.mapOptions);
+                        self.map = new Map(props.mapOptions);
                         self.addNativeMaplibreFunctionsAndProps();
                         self.wrapper.refreshViewport();
                         self.wrapper.fire('viewportchange');
@@ -732,12 +708,12 @@ var MapLibreGlWrapper = /** @class */ (function () {
     return MapLibreGlWrapper;
 }());
 
-var lightDefault = styles.createTheme({
+var lightDefault = createTheme({
     palette: {
         mode: 'light',
     },
 });
-var darkDefault = styles.createTheme({
+var darkDefault = createTheme({
     palette: {
         mode: 'dark',
     },
@@ -799,7 +775,7 @@ var getTheme = function (mode) {
         'light');
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return styles.createTheme(theme, {
+    return createTheme(theme, {
         components: {
             MuiTypography: {
                 styleOverrides: {
@@ -873,13 +849,13 @@ var config = {
     sourceOptions_tiles: ['https://wms.wheregroup.com/tileserver/tile/world-0-14/{z}/{x}/{y}.pbf']
 };
 
-var LayerContext = React.createContext({});
+var LayerContext = React__default.createContext({});
 function LayerContextProvider(props) {
-    var _a = React.useState([]), layers = _a[0], setLayers = _a[1];
-    var _b = React.useState([]), backgroundLayers = _b[0], setBackgroundLayers = _b[1];
-    var _c = React.useState([]), symbolLayers = _c[0], setSymbolLayers = _c[1];
-    var _d = React.useState(config.sourceOptions_tiles[0]), tileUrl = _d[0], setTileUrl = _d[1];
-    var vtLayerConfig = React.useMemo(function () { return ({
+    var _a = React__default.useState([]), layers = _a[0], setLayers = _a[1];
+    var _b = React__default.useState([]), backgroundLayers = _b[0], setBackgroundLayers = _b[1];
+    var _c = React__default.useState([]), symbolLayers = _c[0], setSymbolLayers = _c[1];
+    var _d = React__default.useState(config.sourceOptions_tiles[0]), tileUrl = _d[0], setTileUrl = _d[1];
+    var vtLayerConfig = useMemo(function () { return ({
         layerId: 'openmaptiles',
         sourceOptions: {
             type: 'vector',
@@ -904,18 +880,18 @@ function LayerContextProvider(props) {
         setBackgroundLayers(backgroundLayers);
         setSymbolLayers(symbolLayers);
     };
-    React.useEffect(function () {
+    useEffect(function () {
         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) {
                 if (!(el === null || el === void 0 ? void 0 : el.id)) {
-                    el.id = uuid.v4();
+                    el.id = v4();
                 }
             });
             setLayers(_layers);
         }
     }, [layers]);
-    var moveLayer = React.useCallback(function (layerId, getNewPos) {
+    var moveLayer = useCallback(function (layerId, getNewPos) {
         var _a;
         var targetLayer = (_a = layers === null || layers === void 0 ? void 0 : layers.filter) === null || _a === void 0 ? void 0 : _a.call(layers, function (el) { return el.id === layerId; });
         if (targetLayer.length > 0) {
@@ -930,10 +906,10 @@ function LayerContextProvider(props) {
             }
         }
     }, [layers]);
-    var moveDown = React.useCallback(function (layerId) {
+    var moveDown = useCallback(function (layerId) {
         moveLayer(layerId, function (idx) { return idx + 1; });
     }, [moveLayer]);
-    var moveUp = React.useCallback(function (layerId) {
+    var moveUp = useCallback(function (layerId) {
         moveLayer(layerId, function (idx) { return idx - 1; });
     }, [moveLayer]);
     var value = {
@@ -951,10 +927,10 @@ function LayerContextProvider(props) {
         moveDown: moveDown,
         moveLayer: moveLayer,
     };
-    return React.createElement(LayerContext.Provider, { value: value }, props.children);
+    return React__default.createElement(LayerContext.Provider, { value: value }, props.children);
 }
 
-var MapContext = React.createContext({});
+var MapContext = React__default.createContext({});
 /**
  * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
 MapComponentsProvider must be used one level higher than the first use of MapContext.
@@ -963,10 +939,10 @@ MapComponentsProvider must be used one level higher than the first use of MapCon
  */
 var MapComponentsProvider = function (_a) {
     var children = _a.children;
-    var _b = React.useState(undefined), map = _b[0], setMap = _b[1];
-    var _c = React.useState([]), mapIds = _c[0], setMapIds = _c[1];
-    var mapIds_raw = React.useRef([]);
-    var maps = React.useRef({});
+    var _b = useState(undefined), map = _b[0], setMap = _b[1];
+    var _c = useState([]), mapIds = _c[0], setMapIds = _c[1];
+    var mapIds_raw = useRef([]);
+    var maps = useRef({});
     var removeMap = function (mapId) {
         if (mapId) {
             if (typeof maps.current[mapId] !== 'undefined') {
@@ -1028,9 +1004,9 @@ var MapComponentsProvider = function (_a) {
             return null;
         },
     };
-    return (React.createElement(MapContext.Provider, { value: value },
-        React.createElement(LayerContextProvider, null,
-            React.createElement(styles.ThemeProvider, { theme: getTheme('light') }, children))));
+    return (React__default.createElement(MapContext.Provider, { value: value },
+        React__default.createElement(LayerContextProvider, null,
+            React__default.createElement(ThemeProvider, { theme: getTheme('light') }, children))));
 };
 
 var defaultProps$1 = {
@@ -1071,13 +1047,13 @@ var defaultProps$1 = {
  */
 var MapLibreMap = function (props) {
     var _a, _b;
-    var mapRef = React.useRef();
-    var mapContainer = React.useRef();
-    var mapContext = React.useContext(MapContext);
-    var mapIdRef = React.useRef(props.mapId);
-    var initializedRef = React.useRef(false);
-    var currentStyle = React.useRef((_a = props.options) === null || _a === void 0 ? void 0 : _a.style);
-    React.useEffect(function () {
+    var mapRef = useRef();
+    var mapContainer = useRef();
+    var mapContext = useContext(MapContext);
+    var mapIdRef = useRef(props.mapId);
+    var initializedRef = useRef(false);
+    var currentStyle = useRef((_a = props.options) === null || _a === void 0 ? void 0 : _a.style);
+    useEffect(function () {
         var mapId = mapIdRef.current;
         return function () {
             var _a, _b;
@@ -1090,7 +1066,7 @@ var MapLibreMap = function (props) {
             }
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b;
         if (initializedRef.current)
             return;
@@ -1118,7 +1094,7 @@ var MapLibreMap = function (props) {
             });
         }
     }, [props.options, props.mapId]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b;
         if (((_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.map) &&
             ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.style) &&
@@ -1127,7 +1103,7 @@ var MapLibreMap = function (props) {
             mapRef.current.map.setStyle(props.options.style);
         }
     }, [(_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.style]);
-    return (React.createElement("div", { ref: mapContainer, className: "mapContainer", style: props.style }));
+    return (React__default.createElement("div", { ref: mapContainer, className: "mapContainer", style: props.style }));
 };
 MapLibreMap.defaultProps = defaultProps$1;
 
@@ -1138,22 +1114,22 @@ MapLibreMap.defaultProps = defaultProps$1;
  */
 function useMapState(props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    var mapContext = React.useContext(MapContext);
-    var initializedRef = React.useRef(false);
-    var mapRef = React.useRef();
-    var _a = React.useState(), viewport = _a[0], setViewport = _a[1];
-    var viewportRef = React.useRef(undefined);
-    var _b = React.useState([]), layers = _b[0], setLayers = _b[1];
-    var layersRef = React.useRef();
+    var mapContext = useContext(MapContext);
+    var initializedRef = useRef(false);
+    var mapRef = useRef();
+    var _a = useState(), viewport = _a[0], setViewport = _a[1];
+    var viewportRef = useRef(undefined);
+    var _b = useState([]), layers = _b[0], setLayers = _b[1];
+    var layersRef = useRef();
     //const mapRef = useRef(props.map);
-    var componentId = React.useRef(uuid.v4());
+    var componentId = useRef(v4());
     /**
      * returns the element if it matches the defined filter criteria
      * to be used as filter function on the layers array
      *
      * @param {object} layer
      */
-    var layerIdFilter = React.useCallback(function (layer) {
+    var layerIdFilter = useCallback(function (layer) {
         var _a, _b;
         if (!((_a = props === null || props === void 0 ? void 0 : props.filter) === null || _a === void 0 ? void 0 : _a.includeBaseLayers) && (layer === null || layer === void 0 ? void 0 : layer.baseLayer)) {
             return false;
@@ -1168,7 +1144,7 @@ function useMapState(props) {
         }
         return true;
     }, [props.filter]);
-    var refreshLayerState = React.useCallback(function () {
+    var refreshLayerState = useCallback(function () {
         if (!mapRef.current)
             return;
         var _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
@@ -1178,7 +1154,7 @@ function useMapState(props) {
             setLayers(_layerState);
         }
     }, [layerIdFilter]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _componentId = componentId.current;
         return function () {
             // cleanup all event listeners
@@ -1189,7 +1165,7 @@ function useMapState(props) {
             initializedRef.current = false;
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d;
         if (!mapContext.mapExists(props.mapId) || initializedRef.current)
             return;
@@ -1262,8 +1238,8 @@ useMapState.propTypes = {
 };
 
 function useMap(props) {
-    var mapContext = React.useContext(MapContext);
-    var _a = React.useState({ map: undefined, ready: false }), state = _a[0], setState = _a[1];
+    var mapContext = useContext(MapContext);
+    var _a = useState({ map: undefined, ready: false }), state = _a[0], setState = _a[1];
     var mapState = useMapState({
         mapId: props === null || props === void 0 ? void 0 : props.mapId,
         watch: {
@@ -1275,20 +1251,20 @@ function useMap(props) {
             includeBaseLayers: true,
         },
     });
-    var mapRef = React.useRef();
-    var componentId = React.useRef(uuid.v4());
+    var mapRef = useRef();
+    var componentId = useRef(v4());
     var cleanup = function () {
         if (mapRef.current) {
             mapRef.current.cleanup(componentId.current);
         }
     };
-    React.useEffect(function () {
+    useEffect(function () {
         return function () {
             cleanup();
             mapRef.current = undefined;
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (mapRef.current && mapRef.current.cancelled === true) {
             mapRef.current = undefined;
@@ -1330,11 +1306,11 @@ var MlCenterPosition = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _a = React.useState(false), locationAccessDenied = _a[0], setLocationAccessDenied = _a[1];
+    var _a = useState(false), locationAccessDenied = _a[0], setLocationAccessDenied = _a[1];
     var centerCurrentLocation = function () {
         navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
     };
-    var getLocationSuccess = React.useCallback(function (location) {
+    var getLocationSuccess = useCallback(function (location) {
         var _a, _b, _c;
         (_c = (_a = mapHook.map) === null || _a === void 0 ? void 0 : (_b = _a.map).setCenter) === null || _c === void 0 ? void 0 : _c.call(_b, [location.coords.longitude, location.coords.latitude]);
     }, [mapHook.map]);
@@ -1342,12 +1318,12 @@ var MlCenterPosition = function (props) {
         console.log('Access of user location denied');
         setLocationAccessDenied(true);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Button, { variant: "navtools", sx: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { variant: "navtools", sx: {
                 zIndex: 1002,
                 color: !locationAccessDenied ? props.onColor : props.offColor,
             }, onClick: centerCurrentLocation, disabled: locationAccessDenied },
-            React.createElement(FilterCenterFocusIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
+            React__default.createElement(FilterCenterFocusIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
 };
 MlCenterPosition.defaultProps = {
     mapId: undefined,
@@ -1362,7 +1338,7 @@ var MlComponentTemplate = function (props) {
         mapId: props.mapId,
     });
     console.log(mapHook.componentId + " remove this log");
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlComponentTemplate.defaultProps = {
     mapId: undefined,
@@ -1398,7 +1374,7 @@ var createExport = function (options) {
         _loop_1(name_1);
     }
     // Create a new MapLibre-gl instance
-    var renderMap = new maplibregl.Map({
+    var renderMap = new Map({
         container: container,
         center: options.map.map.getCenter(),
         zoom: options.map.map.getZoom(),
@@ -1474,7 +1450,7 @@ function downloadPng(options) {
 
 function useExportMap(props) {
     var mapHook = useMap({ mapId: props.mapId });
-    var _createExport = React.useMemo(function () {
+    var _createExport = useMemo(function () {
         if (mapHook.map) {
             return function (options) {
                 return createExport(__assign({ map: mapHook.map }, options));
@@ -1495,9 +1471,9 @@ var MlCreatePdfButton = function (props) {
         mapId: props.mapId,
     });
     var exportMap = useExportMap({ mapId: props.mapId });
-    var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { color: "primary", variant: "contained", onClick: function () {
+    var _a = React__default.useState(false), loading = _a[0], setLoading = _a[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button$1, { color: "primary", variant: "contained", onClick: function () {
                 if (mapHook.map && (exportMap === null || exportMap === void 0 ? void 0 : exportMap.createExport)) {
                     setLoading(true);
                     var bounds = mapHook.map.getBounds();
@@ -1519,9 +1495,9 @@ var MlCreatePdfButton = function (props) {
                         setLoading(false);
                     });
                 }
-            } }, loading ? (React.createElement(material.CircularProgress, { size: 24, sx: {
+            } }, loading ? (React__default.createElement(CircularProgress, { size: 24, sx: {
                 color: '#fff',
-            } })) : (React.createElement(PrinterIcon, null)))));
+            } })) : (React__default.createElement(PrinterIcon, null)))));
 };
 MlCreatePdfButton.defaultProps = {
     mapId: undefined,
@@ -1600,13 +1576,13 @@ var PdfTemplates = {
     },
 };
 
-var PdfContext = React.createContext({});
+var PdfContext = React__default.createContext({});
 var defaultTemplate = PdfTemplates['A4']['72dpi'];
 var PdfContextProvider = function (_a) {
     var children = _a.children;
-    var _b = React.useState('A4'), format = _b[0], setFormat = _b[1];
-    var _c = React.useState('72dpi'), quality = _c[0], setQuality = _c[1];
-    var _d = React.useState({
+    var _b = useState('A4'), format = _b[0], setFormat = _b[1];
+    var _c = useState('72dpi'), quality = _c[0], setQuality = _c[1];
+    var _d = useState({
         center: undefined,
         scale: undefined,
         rotate: 0,
@@ -1615,8 +1591,8 @@ var PdfContextProvider = function (_a) {
         orientation: 'portrait',
         fixedScale: 0,
     }), options = _d[0], setOptions = _d[1];
-    var geojsonRef = React.useRef();
-    var template = React.useMemo(function () {
+    var geojsonRef = useRef();
+    var template = useMemo(function () {
         if (typeof PdfTemplates[format][quality] !== 'undefined') {
             return options.orientation === 'portrait'
                 ? PdfTemplates[format][quality]
@@ -1637,7 +1613,7 @@ var PdfContextProvider = function (_a) {
         geojsonRef: geojsonRef,
         template: template,
     };
-    return React.createElement(PdfContext.Provider, { value: value }, children);
+    return React__default.createElement(PdfContext.Provider, { value: value }, children);
 };
 
 function getTargetRotationAngle(target) {
@@ -1677,15 +1653,15 @@ function getMapZoomScaleModifier(point, _map) {
 function PdfPreview(props) {
     var _a;
     var mapState = useMapState({ mapId: props.mapId, watch: { layers: false, viewport: true } });
-    var targetRef = React.useRef(null);
-    var fixedScaleRef = React.useRef();
-    var moveableRef = React.useRef(null);
-    var mapContainerRef = React.useRef(document.querySelector('.mapContainer'));
+    var targetRef = useRef(null);
+    var fixedScaleRef = useRef();
+    var moveableRef = useRef(null);
+    var mapContainerRef = useRef(document.querySelector('.mapContainer'));
     //const [transform, setTransform] = useState('translate(452.111px, 15.6148px)');
     var mapHook = useMap({
         mapId: props.mapId,
     });
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (!((_a = mapState === null || mapState === void 0 ? void 0 : mapState.viewport) === null || _a === void 0 ? void 0 : _a.zoom) || !mapHook.map)
             return;
@@ -1703,7 +1679,7 @@ function PdfPreview(props) {
             props.setOptions(function (val) { return (__assign(__assign({}, val), { center: [_center_1.lng, _center_1.lat] })); });
         }
     }, [mapHook.map, (_a = mapState.viewport) === null || _a === void 0 ? void 0 : _a.zoom]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         mapHook.map.map.setPitch(0);
@@ -1714,7 +1690,7 @@ function PdfPreview(props) {
             (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setMaxPitch(_maxPitch);
         };
     }, [mapHook.map]);
-    var transformOrigin = React.useMemo(function () {
+    var transformOrigin = useMemo(function () {
         if (props.options.orientation === 'portrait') {
             return [props.options.width / 2, props.options.height / 2];
         }
@@ -1722,7 +1698,7 @@ function PdfPreview(props) {
             return [props.options.height / 2, props.options.width / 2];
         }
     }, [props.options.orientation, props.options.width, props.options.height]);
-    var transform = React.useMemo(function () {
+    var transform = useMemo(function () {
         var _a, _b;
         if (!mapHook.map || !props.options.scale)
             return 'none';
@@ -1743,11 +1719,11 @@ function PdfPreview(props) {
         props.options.center,
         transformOrigin,
     ]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         (_a = moveableRef.current) === null || _a === void 0 ? void 0 : _a.updateTarget();
     }, [transform]);
-    React.useEffect(function () {
+    useEffect(function () {
         // update props.options.scale if fixedScale was changed
         if (!mapHook.map ||
             !props.options.center ||
@@ -1756,11 +1732,11 @@ function PdfPreview(props) {
                 fixedScaleRef.current === props.options.fixedScale))
             return;
         fixedScaleRef.current = props.options.fixedScale;
-        var point = turf__namespace.point(props.options.center);
+        var point = turf.point(props.options.center);
         var distance = props.options.fixedScale * (props.options.width / 1000);
         var bearing = 90;
         var options = { units: 'meters' };
-        var destination = turf__namespace.destination(point, distance, bearing, options);
+        var destination = turf.destination(point, distance, bearing, options);
         var centerInPixels = mapHook.map.map.project(point.geometry.coordinates);
         var destinationInPixels = mapHook.map.map.project(destination.geometry.coordinates);
         var scaleFactor = (Math.round(destinationInPixels.x - centerInPixels.x) / props.options.width) *
@@ -1768,7 +1744,7 @@ function PdfPreview(props) {
         props.setOptions(function (val) { return (__assign(__assign({}, val), { scale: [scaleFactor, scaleFactor] })); });
     }, [mapHook.map, props.options.width, props.options.center, props.options.fixedScale]);
     // update props.geoJsonRef
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (targetRef.current && mapHook.map) {
             // apply orientation
@@ -1818,9 +1794,9 @@ function PdfPreview(props) {
         targetRef.current,
         transformOrigin,
     ]);
-    return mapContainerRef.current ? ReactDOM.createPortal(React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "target", ref: targetRef, style: { transform: transform, transformOrigin: 'center center' } }),
-        React.createElement(Moveable
+    return mapContainerRef.current ? ReactDOM.createPortal(React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "target", ref: targetRef, style: { transform: transform, transformOrigin: 'center center' } }),
+        React__default.createElement(Moveable
         // eslint-disable-next-line
         // @ts-ignore:
         , { 
@@ -1862,7 +1838,7 @@ function PdfPreview(props) {
                     var viewportBearing_1 = ((_a = mapState === null || mapState === void 0 ? void 0 : mapState.viewport) === null || _a === void 0 ? void 0 : _a.bearing) ? mapState.viewport.bearing : 0;
                     props.setOptions(function (val) { return (__assign(__assign({}, val), { rotate: parseFloat(_transformPartString_1) + viewportBearing_1 })); });
                 }
-            } })), mapContainerRef.current) : React.createElement(React.Fragment, null);
+            } })), mapContainerRef.current) : React__default.createElement(React__default.Fragment, null);
 }
 
 var scaleOptions = [
@@ -1919,14 +1895,14 @@ var qualityOptions = [
 ];
 function PdfForm(props) {
     var _a, _b;
-    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
-    var pdfContext = React.useContext(PdfContext);
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var pdfContext = useContext(PdfContext);
     var mapHook = useMap({
         // eslint-disable-next-line react/prop-types
         mapId: props.mapId,
     });
     var mapExporter = useExportMap({ mapId: props.mapId });
-    var createPdfHandler = React.useCallback(function () {
+    var createPdfHandler = useCallback(function () {
         var _a, _b, _c, _d, _e, _f;
         if (mapHook.map &&
             mapExporter.createExport &&
@@ -1936,7 +1912,7 @@ function PdfForm(props) {
             ((_c = (_b = pdfContext.geojsonRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.bbox) &&
             ((_d = pdfContext.geojsonRef) === null || _d === void 0 ? void 0 : _d.current)) {
             setLoading(true);
-            var bbox = turf__namespace.bbox(pdfContext.geojsonRef.current);
+            var bbox = turf.bbox(pdfContext.geojsonRef.current);
             mapExporter
                 .createExport({
                 width: pdfContext.template.width,
@@ -1961,7 +1937,7 @@ function PdfForm(props) {
             });
         }
     }, [mapHook.map, pdfContext]);
-    var formControlStyles = React.useMemo(function () {
+    var formControlStyles = useMemo(function () {
         return {
             margin: '5px 0 15px 0 ',
             //...props.formControlStyles,
@@ -1969,37 +1945,37 @@ function PdfForm(props) {
     }, [
     /*props.formControlStyles*/
     ]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React.createElement(material.InputLabel, { sx: { marginTop: '3px' }, id: "format-select-label" }, "Format"),
-            React.createElement(material.Select, { labelId: "format-select-label", id: "format-select", label: "Format", value: pdfContext.format, onChange: function (event) {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(InputLabel, { sx: { marginTop: '3px' }, id: "format-select-label" }, "Format"),
+            React__default.createElement(Select, { labelId: "format-select-label", id: "format-select", label: "Format", value: pdfContext.format, onChange: function (event) {
                     var _a;
                     (_a = pdfContext.setFormat) === null || _a === void 0 ? void 0 : _a.call(pdfContext, event.target.value);
-                } }, Object.keys(PdfTemplates).map(function (el) { return (React.createElement(material.MenuItem, { key: el, value: el }, el)); }))),
-        React.createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React.createElement(material.FormLabel, { id: "orientation-radio-buttons-group-label" }, "Orientation"),
-            React.createElement(material.RadioGroup, { row: true, "aria-labelledby": "orientation-radio-buttons-group-label", name: "orientation-radio-buttons-group", value: (_a = pdfContext.options) === null || _a === void 0 ? void 0 : _a.orientation, onChange: function (event) {
+                } }, Object.keys(PdfTemplates).map(function (el) { return (React__default.createElement(MenuItem, { key: el, value: el }, el)); }))),
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(FormLabel, { id: "orientation-radio-buttons-group-label" }, "Orientation"),
+            React__default.createElement(RadioGroup, { row: true, "aria-labelledby": "orientation-radio-buttons-group-label", name: "orientation-radio-buttons-group", value: (_a = pdfContext.options) === null || _a === void 0 ? void 0 : _a.orientation, onChange: function (event) {
                     if (!pdfContext.setOptions)
                         return;
                     pdfContext.setOptions(function (val) { return (__assign(__assign({}, val), { orientation: event.target.value })); });
                 } },
-                React.createElement(material.FormControlLabel, { value: "portrait", control: React.createElement(material.Radio, null), label: "Portrait" }),
-                React.createElement(material.FormControlLabel, { value: "landscape", control: React.createElement(material.Radio, null), label: "Landscape" }))),
-        React.createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React.createElement(material.InputLabel, { id: "quality-select-label" }, "Quality"),
-            React.createElement(material.Select, { labelId: "quality-select-label", id: "quality-select", label: "Quality", value: pdfContext.quality, onChange: function (event) {
+                React__default.createElement(FormControlLabel, { value: "portrait", control: React__default.createElement(Radio, null), label: "Portrait" }),
+                React__default.createElement(FormControlLabel, { value: "landscape", control: React__default.createElement(Radio, null), label: "Landscape" }))),
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(InputLabel, { id: "quality-select-label" }, "Quality"),
+            React__default.createElement(Select, { labelId: "quality-select-label", id: "quality-select", label: "Quality", value: pdfContext.quality, onChange: function (event) {
                     var _a;
                     (_a = pdfContext.setQuality) === null || _a === void 0 ? void 0 : _a.call(pdfContext, event.target.value);
-                } }, qualityOptions.map(function (el) { return (React.createElement(material.MenuItem, { key: el.value, value: el.value }, el.label)); }))),
-        React.createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React.createElement(material.InputLabel, { id: "scale-select-label" }, "Scale"),
-            React.createElement(material.Select, { labelId: "scale-select-label", id: "scale-select", label: "Scale", value: (_b = pdfContext === null || pdfContext === void 0 ? void 0 : pdfContext.options) === null || _b === void 0 ? void 0 : _b.fixedScale, onChange: function (event) {
+                } }, qualityOptions.map(function (el) { return (React__default.createElement(MenuItem, { key: el.value, value: el.value }, el.label)); }))),
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(InputLabel, { id: "scale-select-label" }, "Scale"),
+            React__default.createElement(Select, { labelId: "scale-select-label", id: "scale-select", label: "Scale", value: (_b = pdfContext === null || pdfContext === void 0 ? void 0 : pdfContext.options) === null || _b === void 0 ? void 0 : _b.fixedScale, onChange: function (event) {
                     var _a;
                     (_a = pdfContext.setOptions) === null || _a === void 0 ? void 0 : _a.call(pdfContext, function (val) { return (__assign(__assign({}, val), { fixedScale: event.target.value })); });
-                } }, scaleOptions.map(function (el, idx) { return (React.createElement(material.MenuItem, { key: idx, value: el.value }, el.label)); }))),
-        React.createElement(material.FormControl, { fullWidth: true, sx: formControlStyles },
-            React.createElement(material.Button, { variant: "contained", className: "createPdfButton", onClick: createPdfHandler, disabled: loading }, "create PDF"),
-            loading && (React.createElement(material.CircularProgress, { size: 24, sx: {
+                } }, scaleOptions.map(function (el, idx) { return (React__default.createElement(MenuItem, { key: idx, value: el.value }, el.label)); }))),
+        React__default.createElement(FormControl, { fullWidth: true, sx: formControlStyles },
+            React__default.createElement(Button, { variant: "contained", className: "createPdfButton", onClick: createPdfHandler, disabled: loading }, "create PDF"),
+            loading && (React__default.createElement(CircularProgress, { size: 24, sx: {
                     color: 'primary.main',
                     position: 'absolute',
                     top: '50%',
@@ -2007,7 +1983,7 @@ function PdfForm(props) {
                     marginTop: '-12px',
                     marginLeft: '-12px',
                 } }))),
-        pdfContext.options && pdfContext.setOptions && (React.createElement(PdfPreview, { options: pdfContext.options, setOptions: pdfContext.setOptions, geojsonRef: pdfContext.geojsonRef }))));
+        pdfContext.options && pdfContext.setOptions && (React__default.createElement(PdfPreview, { options: pdfContext.options, setOptions: pdfContext.setOptions, geojsonRef: pdfContext.geojsonRef }))));
 }
 
 /**
@@ -2015,16 +1991,16 @@ function PdfForm(props) {
  *
  */
 var MlCreatePdfForm = function (props) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PdfContextProvider, null,
-            React.createElement(PdfForm, __assign({}, props)))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(PdfContextProvider, null,
+            React__default.createElement(PdfForm, __assign({}, props)))));
 };
 MlCreatePdfForm.defaultProps = {
     mapId: undefined,
 };
 
 function featureEditorStyle() {
-    var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
+    var mediaIsMobile = useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
     var featureEditorStyle = [
         {
             id: 'gl-draw-polygon-fill-inactive',
@@ -2254,23 +2230,23 @@ function featureEditorStyle() {
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
 var useFeatureEditor = function (props) {
-    var draw = React.useRef();
+    var draw = useRef();
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    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 drawToolsInitialized = useRef(false);
+    var _a = useState(false), drawToolsReady = _a[0], setDrawToolsReady = _a[1];
+    var _b = useState(), feature = _b[0], setFeature = _b[1];
     var style = featureEditorStyle();
-    var modeChangeHandler = React.useCallback(function (e) {
+    var modeChangeHandler = useCallback(function (e) {
         console.log('MlFeatureEditor mode change to ' + e.mode);
         //setDrawMode(e.mode);
         if (typeof props.onFinish === 'function' && e.mode === 'simple_select') {
             props.onFinish();
         }
     }, [props.onFinish]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (mapHook.map && !drawToolsInitialized.current) {
             drawToolsInitialized.current = true;
@@ -2296,7 +2272,7 @@ var useFeatureEditor = function (props) {
             setDrawToolsReady(true);
         }
     }, [mapHook.map, props, drawToolsInitialized, modeChangeHandler]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !drawToolsReady)
             return;
         var changeHandler = function () {
@@ -2319,7 +2295,7 @@ var useFeatureEditor = function (props) {
             mapHook.map.map.off('touchend', changeHandler);
         };
     }, [drawToolsReady, mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (draw.current && ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2327,7 +2303,7 @@ var useFeatureEditor = function (props) {
             draw.current.set({ type: 'FeatureCollection', features: [props.geojson] });
         }
     }, [props.geojson, drawToolsReady]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d;
         if (props.mode && draw.current && ((_b = (_a = draw.current) === null || _a === void 0 ? void 0 : _a.getMode) === null || _b === void 0 ? void 0 : _b.call(_a)) !== props.mode) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -2353,7 +2329,7 @@ var MlFeatureEditor = function (props) {
         onFinish: props.onFinish,
         mapId: props.mapId,
     });
-    return (React.createElement(React.Fragment, null));
+    return (React__default.createElement(React__default.Fragment, null));
 };
 
 var legalLayerTypes = [
@@ -2373,13 +2349,13 @@ function useLayer(props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var layerTypeRef = React.useRef('');
-    var layerPaintConfRef = React.useRef('');
-    var layerLayoutConfRef = React.useRef('');
-    var _b = React.useState(), layer = _b[0], setLayer = _b[1];
-    var initializedRef = React.useRef(false);
-    var layerId = React.useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
-    var createLayer = React.useCallback(function () {
+    var layerTypeRef = useRef('');
+    var layerPaintConfRef = useRef('');
+    var layerLayoutConfRef = useRef('');
+    var _b = useState(), layer = _b[0], setLayer = _b[1];
+    var initializedRef = useRef(false);
+    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
+    var createLayer = useCallback(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
             return;
@@ -2455,7 +2431,7 @@ function useLayer(props) {
         layerLayoutConfRef.current = JSON.stringify((_s = props.options) === null || _s === void 0 ? void 0 : _s.layout);
         layerTypeRef.current = props.options.type;
     }, [props, mapHook]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e;
         if (!mapHook.map)
             return;
@@ -2471,7 +2447,7 @@ function useLayer(props) {
         }
         createLayer();
     }, [mapHook.map, mapHook.mapIsReady, props, createLayer]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
             !initializedRef.current ||
@@ -2481,7 +2457,7 @@ function useLayer(props) {
         //@ts-ignore setData only exists on GeoJsonSource
         (_f = (_e = mapHook.map.map.getSource(layerId.current)) === null || _e === void 0 ? void 0 : _e.setData) === null || _f === void 0 ? void 0 : _f.call(_e, props.geojson);
     }, [props.geojson, mapHook.map, props.options.type]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
             !mapHook.map ||
@@ -2511,7 +2487,7 @@ function useLayer(props) {
             layerPaintConfRef.current = paintString;
         }
     }, [props.options, mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!props.insertBeforeLayer ||
             !mapHook.map ||
             !mapHook.map.getLayer(props.insertBeforeLayer) ||
@@ -2519,13 +2495,13 @@ function useLayer(props) {
             return;
         mapHook.map.moveLayer(layerId.current, props.insertBeforeLayer);
     }, [mapHook.map, props.insertBeforeLayer]);
-    React.useEffect(function () {
+    useEffect(function () {
         return function () {
             initializedRef.current = false;
             mapHook.cleanup();
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (typeof ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.source) !== 'string' ||
             !mapHook.map ||
@@ -2565,7 +2541,7 @@ useLayer.defaultProps = {};
 var MlFillExtrusionLayer = function (props) {
     useLayer({
         mapId: props.mapId,
-        layerId: props.layerId || "MlFillExtrusionLayer-" + uuid.v4(),
+        layerId: props.layerId || "MlFillExtrusionLayer-" + v4(),
         options: {
             id: "",
             type: "fill-extrusion",
@@ -2576,7 +2552,7 @@ var MlFillExtrusionLayer = function (props) {
         },
         insertBeforeFirstSymbolLayer: true,
     });
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlFillExtrusionLayer.defaultProps = {
     mapId: undefined,
@@ -2659,9 +2635,9 @@ function useSource(props) {
     var mapHook = useMap({
         mapId: props.mapId,
     });
-    var _b = React.useState(), source = _b[0], setSource = _b[1];
-    var sourceId = React.useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
-    var removeSource = React.useCallback(function () {
+    var _b = useState(), source = _b[0], setSource = _b[1];
+    var sourceId = useRef(props.sourceId || (props.idPrefix ? props.idPrefix : 'Source-') + mapHook.componentId);
+    var removeSource = useCallback(function () {
         var _a, _b;
         if (mapHook.map && ((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b._layers)) {
             for (var _i = 0, _c = Object.entries(mapHook.map.map.style._layers); _i < _c.length; _i++) {
@@ -2675,7 +2651,7 @@ function useSource(props) {
             }
         }
     }, [mapHook.map]);
-    var createSource = React.useCallback(function () {
+    var createSource = useCallback(function () {
         var _a;
         if (!mapHook.map)
             return;
@@ -2687,7 +2663,7 @@ function useSource(props) {
         (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.addSource(sourceId.current, __assign({}, props.source));
         setSource(mapHook.map.map.getSource(sourceId.current));
     }, [props, mapHook, removeSource]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d;
         if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(sourceId.current)))
             return;
@@ -2697,7 +2673,7 @@ function useSource(props) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore data only exists on GeoJsonSource
     }, [(_a = props.source) === null || _a === void 0 ? void 0 : _a.data]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c;
         if (((_c = (_b = (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource) === null || _c === void 0 ? void 0 : _c.call(_b, props.sourceId)) && props.sourceId === sourceId.current)
             return;
@@ -2705,7 +2681,7 @@ function useSource(props) {
         createSource();
     }, [mapHook.map, props, createSource]);
     //cleanup
-    React.useEffect(function () {
+    useEffect(function () {
         return function () {
             removeSource();
         };
@@ -2726,11 +2702,11 @@ function useSource(props) {
 var MlGeoJsonLayer = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-    var layerId = React.useRef(props.layerId || 'MlGeoJsonLayer-' + uuid.v4());
+    var layerId = useRef(props.layerId || 'MlGeoJsonLayer-' + v4());
     var labelLayerId = "label-".concat(layerId.current);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!props.layerId) {
-            layerId.current = 'MlGeoJsonLayer-' + uuid.v4();
+            layerId.current = 'MlGeoJsonLayer-' + v4();
         }
         else {
             layerId.current = props.layerId;
@@ -2759,7 +2735,7 @@ var MlGeoJsonLayer = function (props) {
         mapId: props.mapId,
         options: __assign(__assign(__assign({ source: props.labelProp ? 'source-' + layerId.current : undefined, id: labelLayerId, type: 'symbol', maxzoom: 24, minzoom: 1 }, ((props === null || props === void 0 ? void 0 : props.labelOptions) ? props.labelOptions : {})), (((_e = props === null || props === void 0 ? void 0 : props.options) === null || _e === void 0 ? void 0 : _e.filter) ? { filter: props.options.filter } : {})), { layout: __assign(__assign({ 'text-font': ['Open Sans Regular'], 'text-field': "{".concat(props.labelProp, "}"), 'text-size': 12, 'text-anchor': 'top' }, (((_f = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.labelOptions.layout : {})), (((_g = props === null || props === void 0 ? void 0 : props.layout) === null || _g === void 0 ? void 0 : _g.visibility) ? { visibility: props.layout.visibility } : {})), paint: __assign({ 'text-halo-width': 1, 'text-halo-color': '#fefefe', 'text-color': '#121212' }, (((_h = props === null || props === void 0 ? void 0 : props.labelOptions) === null || _h === void 0 ? void 0 : _h.paint) ? props.labelOptions.paint : {})) }),
     });
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 
 /**
@@ -2772,13 +2748,13 @@ var MlFollowGps = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _a = React.useState(false), isFollowed = _a[0], setIsFollowed = _a[1];
-    var _b = React.useState(), userLocationGeoJson = _b[0], setUserLocationGeoJson = _b[1];
-    var _c = React.useState(false), locationAccessDenied = _c[0], setLocationAccessDenied = _c[1];
-    var _d = React.useState(), accuracyGeoJson = _d[0], setAccuracyGeoJson = _d[1];
-    var _e = React.useState(0), deviceOrientation = _e[0], setDeviceOrientation = _e[1];
-    var initiallyCentered = React.useRef(false);
-    var getLocationSuccess = React.useCallback(function (pos) {
+    var _a = useState(false), isFollowed = _a[0], setIsFollowed = _a[1];
+    var _b = useState(), userLocationGeoJson = _b[0], setUserLocationGeoJson = _b[1];
+    var _c = useState(false), locationAccessDenied = _c[0], setLocationAccessDenied = _c[1];
+    var _d = useState(), accuracyGeoJson = _d[0], setAccuracyGeoJson = _d[1];
+    var _e = useState(0), deviceOrientation = _e[0], setDeviceOrientation = _e[1];
+    var initiallyCentered = useRef(false);
+    var getLocationSuccess = useCallback(function (pos) {
         if (!mapHook.map)
             return;
         if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
@@ -2797,15 +2773,15 @@ var MlFollowGps = function (props) {
         }
         if (!props.showUserLocation)
             return;
-        var geoJsonPoint = turf.point([pos.coords.longitude, pos.coords.latitude]);
+        var geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
         setUserLocationGeoJson(geoJsonPoint);
-        setAccuracyGeoJson(turf.circle(geoJsonPoint, pos.coords.accuracy / 1000));
+        setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
     }, [mapHook.map, props]);
     var getLocationError = function () {
         console.log('Access of user location denied');
         setLocationAccessDenied(true);
     };
-    var orientationCone = React.useMemo(function () {
+    var orientationCone = useMemo(function () {
         if (!userLocationGeoJson) {
             return undefined;
         }
@@ -2813,7 +2789,7 @@ var MlFollowGps = function (props) {
         var bearing1 = deviceOrientation - 15;
         var bearing2 = deviceOrientation + 15;
         var options = { steps: 65 };
-        var arc = turf.lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
+        var arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
         var copy = arc;
         copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
         copy.geometry.coordinates.slice(0, 0);
@@ -2824,7 +2800,7 @@ var MlFollowGps = function (props) {
             setDeviceOrientation(-event.alpha);
         }
     };
-    React.useEffect(function () {
+    useEffect(function () {
         if (isFollowed) {
             var _handleOrientation_1 = handleOrientation;
             window.addEventListener('deviceorientation', _handleOrientation_1);
@@ -2837,7 +2813,7 @@ var MlFollowGps = function (props) {
         }
         return;
     }, [isFollowed]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         if (isFollowed) {
@@ -2848,7 +2824,7 @@ var MlFollowGps = function (props) {
         }
         return;
     }, [mapHook.map, isFollowed, getLocationSuccess]);
-    React.useEffect(function () {
+    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();
@@ -2858,8 +2834,8 @@ var MlFollowGps = function (props) {
                 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));
+            var accurancyBounds = bbox(accuracyGeoJson);
+            var contained = booleanContains(bboxPolygon(actualBounds), bboxPolygon(accurancyBounds));
             if (contained === false) {
                 (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.fitBounds(accurancyBounds, {
                     padding: { top: 25, bottom: 25 },
@@ -2867,11 +2843,11 @@ var MlFollowGps = function (props) {
             }
         }
     }, [accuracyGeoJson]);
-    return (React.createElement(React.Fragment, null,
-        isFollowed && userLocationGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
-        isFollowed && orientationCone && (React.createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
-        isFollowed && userLocationGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
-        React.createElement(material.Button, { variant: "navtools", sx: {
+    return (React__default.createElement(React__default.Fragment, null,
+        isFollowed && userLocationGeoJson && (React__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.createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
+        isFollowed && userLocationGeoJson && (React__default.createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
+        React__default.createElement(Button, { variant: "navtools", sx: {
                 zIndex: 1002,
                 color: isFollowed
                     ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
@@ -2882,7 +2858,7 @@ var MlFollowGps = function (props) {
             }, disabled: locationAccessDenied, onClick: function () {
                 setIsFollowed(!isFollowed);
             } },
-            React.createElement(GpsFixedIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
+            React__default.createElement(GpsFixedIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
 };
 MlFollowGps.defaultProps = {
     mapId: undefined,
@@ -2900,9 +2876,9 @@ var MlImageMarkerLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _e = React.useState(), imageId = _e[0], setImageId = _e[1];
-    var imageIdRef = React.useRef(props.imageId || 'img_' + uuid.v4());
-    var layerId = React.useRef(props.layerId || 'MlImageMarkerLayer-' + mapHook.componentId);
+    var _e = useState(), imageId = _e[0], setImageId = _e[1];
+    var imageIdRef = useRef(props.imageId || 'img_' + v4());
+    var layerId = useRef(props.layerId || 'MlImageMarkerLayer-' + mapHook.componentId);
     useLayer({
         geojson: (_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.data,
         layerId: layerId.current,
@@ -2929,14 +2905,14 @@ var MlImageMarkerLayer = function (props) {
             });
         }
     };
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         if (props.imgSrc) {
             createImage(mapHook, props);
         }
     }, [props, mapHook]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 
 //const unitSquareConvert = {
@@ -2950,15 +2926,15 @@ function getUnitLabel(measureType) {
     return measureType === 'miles' ? 'mi' : 'km';
 }
 var MlMeasureTool = function (props) {
-    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 () {
+    var _a = useState({ value: 0, label: 'km' }), displayValue = _a[0], setDisplayValue = _a[1];
+    var _b = useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
+    useEffect(function () {
         if (currentFeatures[0]) {
             var result = props.measureType === 'polygon'
                 ? // for "polyong" mode calculate km²
-                    (turf__namespace.area(currentFeatures[0]) / 1000000) *
+                    (turf.area(currentFeatures[0]) / 1000000) *
                         getUnitSquareMultiplier(props.unit)
-                : turf__namespace.length(currentFeatures[0], { units: props.unit });
+                : turf.length(currentFeatures[0], { units: props.unit });
             if (typeof props.onChange === 'function') {
                 props.onChange({ value: result, unit: props.unit, geojson: currentFeatures[0] });
             }
@@ -2982,14 +2958,14 @@ var MlMeasureTool = function (props) {
             }
         }
     }, [props.unit, currentFeatures]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MlFeatureEditor, { onChange: function (features) {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MlFeatureEditor, { onChange: function (features) {
                 features && setCurrentFeatures(features);
             }, mode: props.measureType === 'polygon' ? 'draw_polygon' : 'draw_line_string', onFinish: props.onFinish }),
         displayValue.value.toFixed(2),
         " ",
         '',
-        React.createElement(material.Typography, null,
+        React__default.createElement(Typography, null,
             displayValue.label,
             props.measureType === 'polygon' ? ' ²' : '')));
 };
@@ -3002,19 +2978,19 @@ MlMeasureTool.defaultProps = {
 var _g;
 function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
 var SvgCompassNeedle = function SvgCompassNeedle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     width: 10,
     height: 40,
     viewBox: "0 0 10 40",
     fill: "none",
     id: "svg6"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     id: "g14",
     transform: "translate(0.67544,-1.25e-5)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
+  }, /*#__PURE__*/React.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", {
+  }), /*#__PURE__*/React.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"
   }))));
@@ -3023,35 +2999,35 @@ var SvgCompassNeedle = function SvgCompassNeedle(props) {
 var _circle, _path$1, _path2$1, _path3, _path4;
 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 SvgCompassBackground = function SvgCompassBackground(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     width: 52,
     height: 53,
     viewBox: "0 0 52 53",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
     cx: 26.0001,
     cy: 26.1843,
     r: 24,
     fill: "white",
     stroke: "#009EE0",
     strokeWidth: 2
-  })), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
     fill: "#009EE0"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
     fill: "#009EE0"
-  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
     d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z",
     fill: "#009EE0"
-  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
     d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z",
     fill: "#009EE0"
   })));
 };
 
-var BoxStyled$2 = material.styled(material.Box)(function (_a) {
+var BoxStyled$2 = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
@@ -3064,7 +3040,7 @@ var BoxStyled$2 = material.styled(material.Box)(function (_a) {
         },
         _b);
 });
-var CompassBox = material.styled(material.Box)(function (_a) {
+var CompassBox = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
@@ -3094,7 +3070,7 @@ var CompassBox = material.styled(material.Box)(function (_a) {
         },
         _b);
 });
-var NeedleBox = material.styled(material.Box)(function (_a) {
+var NeedleBox = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
@@ -3119,14 +3095,14 @@ var MlNavigationCompass = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _a = React.useState(0), bearing = _a[0], setBearing = _a[1];
+    var _a = useState(0), bearing = _a[0], setBearing = _a[1];
     var _updateBearing = function () {
         var _a, _b;
         if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getBearing))
             return;
         setBearing(Math.round(mapHook.map.map.getBearing()));
     };
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         mapHook.map.on('rotate', _updateBearing, mapHook.componentId);
@@ -3151,12 +3127,12 @@ var MlNavigationCompass = function (props) {
             (_d = mapHook.map) === null || _d === void 0 ? void 0 : _d.map.setBearing(0);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
-            React.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
-                React.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
-                React.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
-                    React.createElement(SvgCompassNeedle, { style: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
+            React__default.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
+                React__default.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
+                React__default.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
+                    React__default.createElement(SvgCompassNeedle, { style: {
                             transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
                         } }))))));
 };
@@ -3169,9 +3145,9 @@ var MlNavigationTools = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _a = React.useState(0), pitch = _a[0], setPitch = _a[1];
-    var mediaIsMobile = useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
-    React.useEffect(function () {
+    var _a = useState(0), pitch = _a[0], setPitch = _a[1];
+    var mediaIsMobile = useMediaQuery$1(function (theme) { return theme.breakpoints.down('md'); });
+    useEffect(function () {
         if (!mapHook.map)
             return;
         mapHook.map.on('pitchend', function () {
@@ -3181,43 +3157,43 @@ var MlNavigationTools = function (props) {
         }, mapHook.componentId);
         setPitch(mapHook.map.getPitch());
     }, [mapHook.map, props.mapId]);
-    var zoomIn = React.useCallback(function () {
+    var zoomIn = useCallback(function () {
         if (!mapHook.map)
             return;
         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 () {
+    var zoomOut = useCallback(function () {
         if (!mapHook.map)
             return;
         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 () {
+    var adjustPitch = useCallback(function () {
         if (!mapHook.map)
             return;
         setPitch(mapHook.map.getPitch());
         var targetPitch = mapHook.map.getPitch() !== 0 ? 0 : 60;
         mapHook.map.easeTo({ pitch: targetPitch });
     }, [mapHook.map]);
-    return (React.createElement(Box, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
-        React.createElement(MlNavigationCompass, null),
-        props.show3DButton && (React.createElement(Button, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
-        props.showFollowGpsButton && React.createElement(MlFollowGps, null),
-        props.showCenterLocationButton && React.createElement(MlCenterPosition, null),
-        React.createElement(ButtonGroup, { orientation: "vertical", sx: {
+    return (React__default.createElement(Box$1, { 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.createElement(MlNavigationCompass, null),
+        props.show3DButton && (React__default.createElement(Button$1, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
+        props.showFollowGpsButton && React__default.createElement(MlFollowGps, null),
+        props.showCenterLocationButton && React__default.createElement(MlCenterPosition, null),
+        React__default.createElement(ButtonGroup, { orientation: "vertical", sx: {
                 border: 'none',
                 Button: { minWidth: '20px !important' },
                 'Button:hover': { border: 'none' },
-            } }, props.showZoomButtons && (React.createElement(React.Fragment, null,
-            React.createElement(Button, { variant: "navtools", onClick: zoomIn },
-                React.createElement(ControlPointIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
-            React.createElement(Divider, { sx: { zIndex: 500, marginLeft: '7px', marginRight: '7px' } }),
-            React.createElement(Button, { variant: "navtools", onClick: zoomOut },
-                React.createElement(RemoveCircleOutlineIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
-        props.children && React.cloneElement(props.children, {})));
+            } }, props.showZoomButtons && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Button$1, { variant: "navtools", onClick: zoomIn },
+                React__default.createElement(ControlPointIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
+            React__default.createElement(Divider, { sx: { zIndex: 500, marginLeft: '7px', marginRight: '7px' } }),
+            React__default.createElement(Button$1, { variant: "navtools", onClick: zoomOut },
+                React__default.createElement(RemoveCircleOutlineIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
+        props.children && React__default.cloneElement(props.children, {})));
 };
 MlNavigationTools.defaultProps = {
     mapId: undefined,
@@ -3243,15 +3219,15 @@ var MlLayer = function (props) {
             } }, props.options),
         insertBeforeLayer: props.insertBeforeLayer,
     });
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 
 var MlScaleReference = function (props) {
-    var zoomRef = React.useRef(0);
+    var zoomRef = useRef(0);
     var mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-    var _a = React.useState(0), pxWidth = _a[0], setPxWidth = _a[1];
-    var _b = React.useState(''), text = _b[0], setText = _b[1];
-    var updateScale = React.useCallback(function () {
+    var _a = useState(0), pxWidth = _a[0], setPxWidth = _a[1];
+    var _b = useState(''), text = _b[0], setText = _b[1];
+    var updateScale = useCallback(function () {
         var _a, _b;
         if (!mapHook.map)
             return;
@@ -3292,7 +3268,7 @@ var MlScaleReference = function (props) {
             setScale(maxWidth, maxMeters, mapHook.map.map._getUIString('ScaleControl.Meters'));
         }
     }, [mapHook.map, props.unit, props.maxWidth]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         var _updateScale = updateScale;
@@ -3319,8 +3295,8 @@ var MlScaleReference = function (props) {
         d = d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : d >= 1 ? 1 : getDecimalRoundNum(d);
         return pow10 * d;
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { style: {
                 backgroundColor: 'hsla(0,0%,100%,.75)',
                 fontSize: '10px',
                 border: '2px solid #333',
@@ -3339,17 +3315,17 @@ var MlScaleReference = function (props) {
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
  */
 var MlLayerMagnify = function (props) {
-    var mapContext = React.useContext(MapContext);
-    var syncMoveInitializedRef = React.useRef(false);
-    var syncCleanupFunctionRef = React.useRef(function () { });
-    var _a = React.useState(50), swipeX = _a[0], setSwipeX = _a[1];
-    var swipeXRef = React.useRef(50);
-    var _b = React.useState(50), swipeY = _b[0], setSwipeY = _b[1];
-    var swipeYRef = React.useRef(50);
-    var magnifierRadius = React.useMemo(function () {
+    var mapContext = useContext(MapContext);
+    var syncMoveInitializedRef = useRef(false);
+    var syncCleanupFunctionRef = useRef(function () { });
+    var _a = useState(50), swipeX = _a[0], setSwipeX = _a[1];
+    var swipeXRef = useRef(50);
+    var _b = useState(50), swipeY = _b[0], setSwipeY = _b[1];
+    var swipeYRef = useRef(50);
+    var magnifierRadius = useMemo(function () {
         return props.magnifierRadius || 200;
     }, [props.magnifierRadius]);
-    var mapExists = React.useCallback(function () {
+    var mapExists = useCallback(function () {
         if (!props.map1Id || !props.map2Id) {
             return false;
         }
@@ -3358,7 +3334,7 @@ var MlLayerMagnify = function (props) {
         }
         return true;
     }, [props, mapContext]);
-    var onResize = React.useRef(function () {
+    var onResize = useRef(function () {
         if (!mapExists())
             return;
         onMove({
@@ -3366,7 +3342,7 @@ var MlLayerMagnify = function (props) {
             clientY: swipeYRef.current,
         });
     });
-    React.useEffect(function () {
+    useEffect(function () {
         window.addEventListener('resize', onResize.current);
         var _onResize = onResize.current;
         return function () {
@@ -3374,7 +3350,7 @@ var MlLayerMagnify = function (props) {
             syncCleanupFunctionRef.current();
         };
     }, []);
-    var onMove = React.useCallback(function (e) {
+    var onMove = useCallback(function (e) {
         if (!mapExists())
             return;
         var bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
@@ -3403,7 +3379,7 @@ var MlLayerMagnify = function (props) {
                     'px)';
         }
     }, [mapContext, mapExists, props, magnifierRadius]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapExists() || syncMoveInitializedRef.current)
             return;
         syncMoveInitializedRef.current = true;
@@ -3466,7 +3442,7 @@ var MlLayerMagnify = function (props) {
         var evCopy = new WheelEvent(e.type, e);
         (_a = mapContext.map) === null || _a === void 0 ? void 0 : _a.map.getCanvas().dispatchEvent(evCopy);
     };
-    return (React.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: swipeY + '%', borderRadius: '50%', width: magnifierRadius * 2 - 2 + 'px', height: magnifierRadius * 2 - 2 + 'px', background: 'rgba(0,0,0,0)', border: '2px solid #fafafa', boxShadow: '1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)', cursor: 'pointer', zIndex: '110', marginLeft: magnifierRadius * -1 - 1 + 'px', marginTop: magnifierRadius * -1 - 1 + 'px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.magnifierStyle), onTouchStart: onDown, onMouseDown: onDown, onWheel: onWheel }));
+    return (React__default.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: swipeY + '%', borderRadius: '50%', width: magnifierRadius * 2 - 2 + 'px', height: magnifierRadius * 2 - 2 + 'px', background: 'rgba(0,0,0,0)', border: '2px solid #fafafa', boxShadow: '1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)', cursor: 'pointer', zIndex: '110', marginLeft: magnifierRadius * -1 - 1 + 'px', marginTop: magnifierRadius * -1 - 1 + 'px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.magnifierStyle), onTouchStart: onDown, onMouseDown: onDown, onWheel: onWheel }));
 };
 MlLayerMagnify.defaultProps = {
     magnifierRadius: 200,
@@ -3476,14 +3452,14 @@ MlLayerMagnify.defaultProps = {
 var _path, _path2;
 function _extends() { _extends = 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.apply(this, arguments); }
 var SvgIcononlyarrow = function SvgIcononlyarrow(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 47 30",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
     fill: "#009EE0"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z",
     fill: "#009EE0"
   })));
@@ -3493,12 +3469,12 @@ var SvgIcononlyarrow = function SvgIcononlyarrow(props) {
  *	creates a split view of 2 synchronised maplibre instances
  */
 var MlLayerSwipe = function (props) {
-    var mapContext = React.useContext(MapContext);
-    var initializedRef = React.useRef(false);
-    var _a = React.useState(50), swipeX = _a[0], setSwipeX = _a[1];
-    var swipeXRef = React.useRef(0);
-    var syncCleanupFunctionRef = React.useRef(function () { });
-    var mapExists = React.useCallback(function () {
+    var mapContext = useContext(MapContext);
+    var initializedRef = useRef(false);
+    var _a = useState(50), swipeX = _a[0], setSwipeX = _a[1];
+    var swipeXRef = useRef(0);
+    var syncCleanupFunctionRef = useRef(function () { });
+    var mapExists = useCallback(function () {
         if (!props.map1Id || !props.map2Id) {
             return false;
         }
@@ -3510,7 +3486,7 @@ var MlLayerSwipe = function (props) {
     var cleanup = function () {
         syncCleanupFunctionRef.current();
     };
-    var onMove = React.useCallback(function (e) {
+    var onMove = useCallback(function (e) {
         if (!mapExists())
             return;
         var bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
@@ -3527,10 +3503,10 @@ var MlLayerSwipe = function (props) {
             mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
         }
     }, [mapContext, mapExists, props.map1Id, props.map2Id]);
-    React.useEffect(function () {
+    useEffect(function () {
         return cleanup;
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapExists() || initializedRef.current)
             return;
         initializedRef.current = true;
@@ -3573,14 +3549,14 @@ var MlLayerSwipe = function (props) {
             setSwipeX(50);
         }
     }
-    React.useEffect(function () {
+    useEffect(function () {
         window.addEventListener('resize', adjustWindowSize);
         return function () {
             window.removeEventListener('resize', adjustWindowSize);
         };
     }, [mapContext]);
-    return (React.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
-        React.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
+    return (React__default.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
+        React__default.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
                 width: '65px',
                 height: '65px',
                 justifyContent: 'center',
@@ -3631,7 +3607,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, map,
   if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
     // if at last transition step set to target geojson
     // else to an assembled LineString from common geometry and the current transition step geometry
-    var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : turf__namespace.lineString([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
+    var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : turf.lineString([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
     setDisplayGeojson(newData);
     if (typeof props.onTransitionFrame === "function") {
       props.onTransitionFrame(newData);
@@ -3672,9 +3648,9 @@ var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojso
   var reverseOrder = false;
   // In case one geojson is missing completely use the first two coordinates of the other geojson
   if (typeof longerGeojson.geometry === "undefined" && typeof shorterGeojson.geometry !== "undefined" && shorterGeojson.geometry.coordinates.length > 1) {
-    longerGeojson = turf__namespace.lineString(shorterGeojson.geometry.coordinates.slice(0, 2));
+    longerGeojson = turf.lineString(shorterGeojson.geometry.coordinates.slice(0, 2));
   } else if (typeof shorterGeojson.geometry === "undefined" && typeof longerGeojson.geometry !== "undefined" && longerGeojson.geometry.coordinates.length > 1) {
-    shorterGeojson = turf__namespace.lineString(longerGeojson.geometry.coordinates.slice(0, 2));
+    shorterGeojson = turf.lineString(longerGeojson.geometry.coordinates.slice(0, 2));
   } else if (typeof shorterGeojson.geometry === "undefined" && typeof longerGeojson.geometry === "undefined") {
     return;
   }
@@ -3709,8 +3685,8 @@ var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojso
   // create props.transitionTime / msPerStep (=: transitionSteps) Versions of transitionGeojsonCommonDataRef.current + transitionCoordinates making the transitionCoordinates transitionCoordinatesDistance / transitionSteps longer on each step
 
   var transitionSteps = props.transitionTime / msPerStep;
-  var srcCoordinatesDistance = srcCoordinates.length > 1 ? Math.round(turf__namespace.length(turf__namespace.lineString(srcCoordinates))) : 0;
-  var targetCoordinatesDistance = targetCoordinates.length > 1 ? Math.round(turf__namespace.length(turf__namespace.lineString(targetCoordinates))) : 0;
+  var srcCoordinatesDistance = srcCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(srcCoordinates))) : 0;
+  var targetCoordinatesDistance = targetCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(targetCoordinates))) : 0;
   var transitionDistance = targetCoordinatesDistance + srcCoordinatesDistance;
   var srcCoordinatesShare = srcCoordinatesDistance / transitionDistance;
   var srcTransitionSteps = Math.round(transitionSteps * srcCoordinatesShare);
@@ -3735,13 +3711,13 @@ var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojso
 var createTransitionSteps = function createTransitionSteps(linestringCoordinates, perStepDistance, stepCnt) {
   var transitionSteps = [];
   if (linestringCoordinates.length > 1) {
-    var tmpChunks = turf__namespace.lineChunk(turf__namespace.lineString(linestringCoordinates), perStepDistance);
+    var tmpChunks = turf.lineChunk(turf.lineString(linestringCoordinates), perStepDistance);
     // tmpLineString contains all coordinates of all previous plus current loop iteration
     var tmpLinestring = tmpChunks.features[0];
     for (var i = 0; i < stepCnt; i++) {
       transitionSteps.push(tmpLinestring);
       if (typeof tmpChunks.features[i] !== "undefined") {
-        tmpLinestring = turf__namespace.lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
+        tmpLinestring = turf.lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
       } else {
         break;
       }
@@ -3762,16 +3738,16 @@ var MlTransitionGeoJsonLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var initializedRef = React.useRef(false);
+    var initializedRef = useRef(false);
     // transition effect variables
-    var oldGeojsonRef = React.useRef();
-    var transitionInProgressRef = React.useRef(false);
-    var transitionTimeoutRef = React.useRef(undefined);
-    var currentTransitionStepRef = React.useRef(false);
-    var transitionGeojsonDataRef = React.useRef([]);
-    var transitionGeojsonCommonDataRef = React.useRef([]);
-    var _a = React.useState(turf__namespace.featureCollection([])), displayGeojson = _a[0], setDisplayGeojson = _a[1];
-    React.useEffect(function () {
+    var oldGeojsonRef = useRef();
+    var transitionInProgressRef = useRef(false);
+    var transitionTimeoutRef = useRef(undefined);
+    var currentTransitionStepRef = useRef(false);
+    var transitionGeojsonDataRef = useRef([]);
+    var transitionGeojsonCommonDataRef = useRef([]);
+    var _a = useState(turf.featureCollection([])), displayGeojson = _a[0], setDisplayGeojson = _a[1];
+    useEffect(function () {
         return function () {
             // This is the cleanup function, it is called when this react component is removed from react-dom
             if (transitionTimeoutRef.current) {
@@ -3779,10 +3755,10 @@ var MlTransitionGeoJsonLayer = function (props) {
             }
         };
     }, []);
-    var transitionToGeojson = React.useCallback(function () {
+    var transitionToGeojson = useCallback(function () {
         _transitionToGeojson(props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapHook.map, transitionTimeoutRef, setDisplayGeojson);
     }, [props, mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !initializedRef.current)
             return;
         if (typeof props.transitionTime !== 'undefined' &&
@@ -3796,7 +3772,7 @@ var MlTransitionGeoJsonLayer = function (props) {
         }
         oldGeojsonRef.current = props.geojson;
     }, [mapHook.map, transitionToGeojson, props]);
-    var startTransition = React.useCallback(function () {
+    var startTransition = useCallback(function () {
         if (props.type === 'line' &&
             typeof props.transitionTime !== 'undefined' &&
             props.transitionTime &&
@@ -3806,14 +3782,14 @@ var MlTransitionGeoJsonLayer = function (props) {
             oldGeojsonRef.current = props.geojson;
         }
     }, [props, transitionToGeojson]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.mapIsReady || !props.geojson)
             return;
         initializedRef.current = true;
         startTransition();
     }, [mapHook.mapIsReady, startTransition, props]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MlGeoJsonLayer, __assign({}, restProps, { geojson: displayGeojson }))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MlGeoJsonLayer, __assign({}, restProps, { geojson: displayGeojson }))));
 };
 
 /**
@@ -3828,20 +3804,20 @@ var MlMarker = function (props) {
         mapId: props.mapId,
         watch: { viewport: true },
     });
-    var iframe = React.useRef(null);
-    var _a = React.useState({
+    var iframe = useRef(null);
+    var _a = useState({
         width: "400px",
         height: "500px",
     }), iframeDimensions = _a[0], setIframeDimensions = _a[1];
-    var _b = React.useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
-    React.useEffect(function () {
+    var _b = useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
+    useEffect(function () {
         var _a, _b;
         if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.project))
             return;
         var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
         setMarkerPixelPos(_pixelPos);
     }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (!mapHook.map ||
             !((_d = (_c = (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body) === null || _d === void 0 ? void 0 : _d.scrollHeight))
@@ -3856,8 +3832,8 @@ var MlMarker = function (props) {
             height: (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
         });
     }, [props.lng, props.lat, props.content]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MlGeoJsonLayer, { geojson: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MlGeoJsonLayer, { geojson: {
                 type: "Feature",
                 geometry: {
                     type: "Point",
@@ -3868,7 +3844,7 @@ var MlMarker = function (props) {
                 "circle-radius": 14,
                 "circle-color": "rgba(40,200,20,0.5)",
             }, type: "circle", mapId: props.mapId }),
-        markerPixelPos && (React.createElement(Paper, { sx: {
+        markerPixelPos && (React__default.createElement(Paper, { sx: {
                 opacity: 0.7,
                 position: "fixed",
                 display: "flex",
@@ -3882,7 +3858,7 @@ var MlMarker = function (props) {
                 },
                 zIndex: -1,
             } },
-            React.createElement("iframe", { style: { width: "100%" }, srcDoc: props.content, ref: iframe, sandbox: "allow-same-origin allow-popups-to-escape-sandbox", frameBorder: "0", title: mapHook.componentId })))));
+            React__default.createElement("iframe", { style: { width: "100%" }, srcDoc: props.content, ref: iframe, sandbox: "allow-same-origin allow-popups-to-escape-sandbox", frameBorder: "0", title: mapHook.componentId })))));
 };
 MlMarker.defaultProps = {
     mapId: undefined,
@@ -4012,7 +3988,7 @@ var toGeoJSON = function () {
     var isNodeEnv = (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && !process.browser;
     var isTitaniumEnv = (typeof Titanium === "undefined" ? "undefined" : _typeof(Titanium)) === 'object';
     if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object' && (isNodeEnv || isTitaniumEnv)) {
-      serializer = xmldom__namespace.XMLSerializer;
+      serializer = xmldom.XMLSerializer;
     } else {
       throw new Error('Unable to initialize serializer');
     }
@@ -4403,8 +4379,8 @@ var toGeoJSON = function () {
  *
  */
 var useGpx = function (props) {
-    var _a = React.useState(), geojson = _a[0], setGeojson = _a[1];
-    var _b = React.useState([]), metadata = _b[0], setMetadata = _b[1];
+    var _a = useState(), geojson = _a[0], setGeojson = _a[1];
+    var _b = useState([]), metadata = _b[0], setMetadata = _b[1];
     var parseGpx = function (gpxAsString) {
         try {
             setMetadata([]);
@@ -4433,7 +4409,7 @@ var useGpx = function (props) {
             console.log(e);
         }
     };
-    React.useEffect(function () {
+    useEffect(function () {
         if (!props.data)
             return;
         parseGpx(props.data);
@@ -4456,11 +4432,11 @@ var LayerHoverPopup = function (props) {
         mapId: props.mapId,
         waitForLayer: props.layerId,
     });
-    var popup = React.useRef(new maplibregl.Popup({
+    var popup = useRef(new Popup({
         closeButton: false,
         closeOnClick: true,
     }));
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !props.layerId)
             return;
         mapHook.map.on('mouseenter', props.layerId, function (e) {
@@ -4487,7 +4463,7 @@ var LayerHoverPopup = function (props) {
             }
         }, mapHook.componentId);
     }, [mapHook.map]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 LayerHoverPopup.defaultProps = {
     mapId: undefined,
@@ -4499,9 +4475,9 @@ LayerHoverPopup.defaultProps = {
 var MlGpxViewer = function (props) {
     var parsedGpx = useGpx({ data: props.gpxData });
     var mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-    var sourceName = React.useRef('gpx-viewer-source-' + uuid.v4());
-    var layerNameLines = React.useRef('importer-layer-lines-' + uuid.v4());
-    var layerNamePoints = React.useRef('importer-layer-points-' + uuid.v4());
+    var sourceName = useRef('gpx-viewer-source-' + v4());
+    var layerNameLines = useRef('importer-layer-lines-' + v4());
+    var layerNamePoints = useRef('importer-layer-points-' + v4());
     LayerHoverPopup({
         layerId: layerNamePoints.current,
         getPopupContent: function (feature) { var _a; return (_a = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _a === void 0 ? void 0 : _a.name; },
@@ -4511,7 +4487,7 @@ var MlGpxViewer = function (props) {
         sourceId: sourceName.current,
         source: {
             type: 'geojson',
-            data: (parsedGpx.geojson || turf.featureCollection([])),
+            data: (parsedGpx.geojson || featureCollection([])),
         },
     });
     useLayer({
@@ -4539,26 +4515,26 @@ var MlGpxViewer = function (props) {
         },
         insertBeforeLayer: props.insertBeforeLayer,
     });
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !parsedGpx.geojson)
             return;
         if (typeof props.onParseGpxData === 'function') {
             props.onParseGpxData(parsedGpx);
         }
         // fit map view to GeoJSON bbox
-        var bounds = turf.bbox(parsedGpx.geojson);
+        var bounds = bbox(parsedGpx.geojson);
         mapHook.map.map.fitBounds(bounds);
     }, [parsedGpx]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlGpxViewer.defaultProps = {};
 
-var GeoJsonContext = React.createContext({});
+var GeoJsonContext = React__default.createContext({});
 var GeoJsonContextProvider = GeoJsonContext.Provider;
 
 var GeoJsonProvider = function (_a) {
     var children = _a.children;
-    var _b = React.useState({
+    var _b = useState({
         type: "FeatureCollection",
         features: [],
     }), data = _b[0], setData = _b[1];
@@ -4573,7 +4549,7 @@ var GeoJsonProvider = function (_a) {
         setData: setData,
         getEmptyFeatureCollection: getEmptyFeatureCollection,
     };
-    return React.createElement(GeoJsonContextProvider, { value: value }, children);
+    return React__default.createElement(GeoJsonContextProvider, { value: value }, children);
 };
 
 var getCurrentUrlParameters = function () {
@@ -4584,12 +4560,12 @@ var getCurrentUrlParameters = function () {
 var initialUrlParams = getCurrentUrlParameters();
 var MlShareMapState = function (props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    var mapContext = React.useContext(MapContext);
-    var initializedRef = React.useRef(false);
-    var mapRef = React.useRef();
-    var _a = React.useState(undefined), map = _a[0], setMap = _a[1];
-    var layersFromUrlParamsRef = React.useRef({});
-    var componentId = React.useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + uuid.v4());
+    var mapContext = useContext(MapContext);
+    var initializedRef = useRef(false);
+    var mapRef = useRef();
+    var _a = useState(undefined), map = _a[0], setMap = _a[1];
+    var layersFromUrlParamsRef = useRef({});
+    var componentId = useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + v4());
     var mapState = useMapState({
         watch: {
             viewport: false,
@@ -4600,9 +4576,9 @@ var MlShareMapState = function (props) {
             includeBaseLayers: false,
         },
     });
-    var allStatesRestoredRef = React.useRef(false);
-    var layerStatesRestored = React.useRef();
-    var restoredStatesRef = React.useRef({
+    var allStatesRestoredRef = useRef(false);
+    var layerStatesRestored = useRef();
+    var restoredStatesRef = useRef({
         viewport: {
             center: false,
             bearing: false,
@@ -4612,8 +4588,8 @@ var MlShareMapState = function (props) {
         layers: __assign({}, layersFromUrlParamsRef),
     });
     // initial URL-Params
-    var mapStateRef = React.useRef({});
-    var refreshUrlParameters = React.useCallback(function () {
+    var mapStateRef = useRef({});
+    var refreshUrlParameters = useCallback(function () {
         var _a, _b, _c;
         if (!props.active)
             return;
@@ -4636,7 +4612,7 @@ var MlShareMapState = function (props) {
             window.history.pushState(__assign({}, mapStateRef.current), document.title, '?' + urlParams.toString());
         }
     }, [mapState.layers, props.active]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _componentId = componentId.current;
         mapStateRef.current = getCurrentUrlParameters();
         return function () {
@@ -4652,12 +4628,12 @@ var MlShareMapState = function (props) {
             initializedRef.current = false;
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapRef.current)
             return;
         refreshUrlParameters();
     }, [refreshUrlParameters]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapRef.current)
             return;
         var _refreshUrlParameters = refreshUrlParameters;
@@ -4667,7 +4643,7 @@ var MlShareMapState = function (props) {
             (_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.map.off('moveend', _refreshUrlParameters);
         };
     }, [refreshUrlParameters, map]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (!((_a = mapContext === null || mapContext === void 0 ? void 0 : mapContext.mapExists) === null || _a === void 0 ? void 0 : _a.call(mapContext, props.mapId)) || initializedRef.current)
             return;
@@ -4680,7 +4656,7 @@ var MlShareMapState = function (props) {
             restoreViewportState();
         }
     }, [mapContext.mapIds, mapContext, props.mapId, props.active]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b;
         if (!((_a = mapState === null || mapState === void 0 ? void 0 : mapState.layers) === null || _a === void 0 ? void 0 : _a.length))
             return;
@@ -4713,7 +4689,7 @@ var MlShareMapState = function (props) {
             });
         }
     }, [mapState.layers, props.mapId, props.active]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!map)
             return;
         if (!mapState.layers)
@@ -4760,7 +4736,7 @@ var MlShareMapState = function (props) {
             });
         }
     };
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlShareMapState.defaultProps = {
     mapId: undefined,
@@ -4775,16 +4751,16 @@ MlShareMapState.propTypes = {
 function getElevationData(_geojsonInfo, elevationFactor) {
     var createStep = function (x, y, z, x2, y2) {
         //const summand = 0.0002;
-        var line = helpers.lineString([
+        var line = lineString([
             [x, y],
             [x2, y2],
         ]);
-        var offsetLine = turf.lineOffset(line, 5, { units: 'meters' });
+        var offsetLine = lineOffset(line, 5, { units: 'meters' });
         var x3 = offsetLine.geometry.coordinates[0][0];
         var y3 = offsetLine.geometry.coordinates[0][1];
         var x4 = offsetLine.geometry.coordinates[1][0];
         var y4 = offsetLine.geometry.coordinates[1][1];
-        return helpers.polygon([
+        return polygon([
             [
                 [x, y],
                 [x2, y2],
@@ -4800,7 +4776,7 @@ function getElevationData(_geojsonInfo, elevationFactor) {
         //const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
         //points.push(point);
         if (_geojsonInfo.line.geometry.coordinates[index + 1]) {
-            var wayLength = turf.distance([coordinate[0], coordinate[1]], [
+            var wayLength = distance([coordinate[0], coordinate[1]], [
                 _geojsonInfo.line.geometry.coordinates[index + 1][0],
                 _geojsonInfo.line.geometry.coordinates[index + 1][1],
             ], { units: 'kilometers' });
@@ -4817,7 +4793,7 @@ function getElevationData(_geojsonInfo, elevationFactor) {
             }
         }
     });
-    var output = helpers.featureCollection(points);
+    var output = featureCollection$1(points);
     return output;
 }
 
@@ -4839,10 +4815,10 @@ var defaultFillExtrusionColor = [
     'yellow',
 ];
 var MlSpatialElevationProfile = function (props) {
-    var sourceName = React.useRef('elevationprofile-' + uuid.v4());
-    var layerName = React.useRef('elevationprofile-layer-' + uuid.v4());
+    var sourceName = useRef('elevationprofile-' + v4());
+    var layerName = useRef('elevationprofile-layer-' + v4());
     var elevationFactor = props.elevationFactor || MlSpatialElevationProfile.defaultProps.elevationFactor;
-    var _geojsonInfo = React.useMemo(function () {
+    var _geojsonInfo = useMemo(function () {
         var _a, _b;
         if (!((_a = props === null || props === void 0 ? void 0 : props.geojson) === null || _a === void 0 ? void 0 : _a.features))
             return;
@@ -4861,7 +4837,7 @@ var MlSpatialElevationProfile = function (props) {
         max = max === 0 ? 1 : max;
         return { max: max, min: min, line: line };
     }, [props.geojson]);
-    var _fillExtrusionColor = React.useMemo(function () {
+    var _fillExtrusionColor = useMemo(function () {
         if (!_geojsonInfo)
             return defaultFillExtrusionColor;
         return [
@@ -4874,7 +4850,7 @@ var MlSpatialElevationProfile = function (props) {
             'rgb(255,0,0)',
         ];
     }, [_geojsonInfo, props.elevationFactor]);
-    var _geojson = React.useMemo(function () {
+    var _geojson = useMemo(function () {
         var _a;
         if (!((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.features) || !_geojsonInfo)
             return;
@@ -4886,7 +4862,7 @@ var MlSpatialElevationProfile = function (props) {
         sourceId: sourceName.current,
         source: {
             type: 'geojson',
-            data: (_geojson || helpers.featureCollection([])),
+            data: (_geojson || featureCollection$1([])),
         },
     });
     useLayer({
@@ -4903,7 +4879,7 @@ var MlSpatialElevationProfile = function (props) {
         },
         insertBeforeLayer: props.insertBeforeLayer,
     });
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlSpatialElevationProfile.defaultProps = {
     elevationFactor: 1,
@@ -4920,11 +4896,11 @@ var MlVectorTileLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var layerId = React.useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
-    var layerPaintConfsRef = React.useRef({});
-    var layerLayoutConfsRef = React.useRef({});
-    var initializedRef = React.useRef(false);
-    var createLayers = React.useCallback(function () {
+    var layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
+    var layerPaintConfsRef = useRef({});
+    var layerLayoutConfsRef = useRef({});
+    var initializedRef = useRef(false);
+    var createLayers = useCallback(function () {
         if (!mapHook.map)
             return;
         initializedRef.current = true;
@@ -4957,7 +4933,7 @@ var MlVectorTileLayer = function (props) {
             }, mapHook.componentId);
         });
     }, [mapHook.map, props]);
-    var updateLayers = React.useCallback(function () {
+    var updateLayers = useCallback(function () {
         if (!initializedRef.current)
             return;
         props.layers.forEach(function (layer) {
@@ -4984,24 +4960,24 @@ var MlVectorTileLayer = function (props) {
         });
     }, [mapHook.map, props.layers]);
     // initial layer creation
-    React.useEffect(function () {
+    useEffect(function () {
         if (initializedRef.current)
             return;
         createLayers();
     }, [createLayers]);
     // if layers get removed or added
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !initializedRef.current)
             return;
         createLayers();
     }, [props.layers.length, mapHook.map]);
     // on layout/paint update
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !initializedRef.current)
             return;
         updateLayers();
     }, [props.layers, mapHook.map]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 
 /**
@@ -5014,11 +4990,11 @@ var MlVectorTileLayer = function (props) {
  */
 var MlWmsFeatureInfoPopup = function (props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    var mapContext = React.useContext(MapContext);
-    var initializedRef = React.useRef(false);
-    var mapRef = React.useRef(undefined);
-    var componentId = React.useRef(("MlWmsFeatureInfoPopup-") + uuid.v4());
-    React.useEffect(function () {
+    var mapContext = useContext(MapContext);
+    var initializedRef = useRef(false);
+    var mapRef = useRef(undefined);
+    var componentId = useRef(("MlWmsFeatureInfoPopup-") + v4());
+    useEffect(function () {
         var _componentId = componentId.current;
         return function () {
             // This is the cleanup function, it is called when this react component is removed from react-dom
@@ -5033,7 +5009,7 @@ var MlWmsFeatureInfoPopup = function (props) {
             initializedRef.current = false;
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapContext.mapExists(props.mapId) || initializedRef.current)
             return;
         // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
@@ -5042,7 +5018,7 @@ var MlWmsFeatureInfoPopup = function (props) {
         mapRef.current = mapContext.getMap(props.mapId);
         mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
     }, [mapContext.mapIds, mapContext, props.mapId]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlWmsFeatureInfoPopup.defaultProps = {
     mapId: undefined,
@@ -5098,9 +5074,9 @@ var MlWmsLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var initializedRef = React.useRef(false);
-    var layerId = React.useRef(props.layerId || 'MlWmsLayer-' + mapHook.componentId);
-    var tileUrl = React.useMemo(function () {
+    var initializedRef = useRef(false);
+    var layerId = useRef(props.layerId || 'MlWmsLayer-' + mapHook.componentId);
+    var tileUrl = useMemo(function () {
         var _propsUrlParams;
         var _wmsUrl = props.url;
         if (props.url.indexOf('?') !== -1) {
@@ -5114,7 +5090,7 @@ var MlWmsLayer = function (props) {
         var urlParamsStr = decodeURIComponent(urlParams.toString()) + ''.replace(/%2F/g, '/').replace(/%3A/g, ':');
         return _wmsUrl + '?' + urlParamsStr;
     }, [props.urlParameters, props.url]);
-    var createLayer = React.useCallback(function () {
+    var createLayer = useCallback(function () {
         if (!mapHook.map)
             return;
         initializedRef.current = true;
@@ -5135,12 +5111,12 @@ var MlWmsLayer = function (props) {
             mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
         }
     }, [mapHook.map, props, tileUrl]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (initializedRef.current)
             return;
         createLayer();
     }, [createLayer]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d;
         if (!mapHook.map || !((_d = (_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.sourceCaches) === null || _d === void 0 ? void 0 : _d[layerId.current]) || !initializedRef.current)
             return;
@@ -5150,7 +5126,7 @@ var MlWmsLayer = function (props) {
         mapHook.map.map.style.sourceCaches[layerId.current].update(mapHook.map.map.transform);
         mapHook.map.map.triggerRepaint();
     }, [mapHook.map, tileUrl]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !initializedRef.current)
             return;
         // toggle layer visibility by changing the layout object's visibility property
@@ -5161,7 +5137,7 @@ var MlWmsLayer = function (props) {
             mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
         }
     }, [props.visible, mapHook.map]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlWmsLayer.defaultProps = __assign({}, defaultProps);
 MlWmsLayer.propTypes = {
@@ -5212,18 +5188,18 @@ MlWmsLayer.propTypes = {
 
 function useWms(props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-    var _a = React.useState(), getFeatureInfoUrl = _a[0], setGetFeatureInfoUrl = _a[1];
-    var _b = React.useState(props.url), url = _b[0], setUrl = _b[1];
-    var _c = React.useState(""), wmsUrl = _c[0], setWmsUrl = _c[1];
-    var _d = React.useState(), capabilities = _d[0], setCapabilities = _d[1];
-    var _e = React.useState(), error = _e[0], setError = _e[1];
+    var _a = useState(), getFeatureInfoUrl = _a[0], setGetFeatureInfoUrl = _a[1];
+    var _b = useState(props.url), url = _b[0], setUrl = _b[1];
+    var _c = useState(""), wmsUrl = _c[0], setWmsUrl = _c[1];
+    var _d = useState(), capabilities = _d[0], setCapabilities = _d[1];
+    var _e = useState(), error = _e[0], setError = _e[1];
     var clearState = function () {
         setGetFeatureInfoUrl(undefined);
         setCapabilities(undefined);
         //setLayers([]);
         setWmsUrl("");
     };
-    React.useEffect(function () {
+    useEffect(function () {
         // extract URL parameters from the given URL
         clearState();
         setError(undefined);
@@ -5259,7 +5235,7 @@ function useWms(props) {
             setError(error.message);
         });
     }, [url, props.urlParameters]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!(capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service))
             return;
@@ -5285,14 +5261,14 @@ useWms.defaultProps = {
 };
 
 function ConfirmDialog(props) {
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(Dialog, { open: props.open, onClose: props.onCancel, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" },
-            React__namespace.createElement(DialogTitle, { id: "alert-dialog-title" }, props.title),
-            React__namespace.createElement(DialogContent, null,
-                React__namespace.createElement(DialogContentText, { id: "alert-dialog-description" }, props.text)),
-            React__namespace.createElement(DialogActions, null,
-                React__namespace.createElement(Button, { onClick: props.onCancel }, "Cancel"),
-                React__namespace.createElement(Button, { onClick: props.onConfirm, autoFocus: true }, "Confirm")))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dialog, { open: props.open, onClose: props.onCancel, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" },
+            React.createElement(DialogTitle, { id: "alert-dialog-title" }, props.title),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, { id: "alert-dialog-description" }, props.text)),
+            React.createElement(DialogActions, null,
+                React.createElement(Button$1, { onClick: props.onCancel }, "Cancel"),
+                React.createElement(Button$1, { onClick: props.onConfirm, autoFocus: true }, "Confirm")))));
 }
 ConfirmDialog.defaultProps = {
     title: 'Confirm',
@@ -5301,13 +5277,13 @@ ConfirmDialog.defaultProps = {
 
 function SortableContainer(_a) {
     var children = _a.children, layerId = _a.layerId;
-    var _b = sortable.useSortable({
+    var _b = useSortable({
         id: layerId,
     }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform;
     var style = {
-        transform: utilities.CSS.Transform.toString(transform),
+        transform: CSS.Transform.toString(transform),
     };
-    return (React.createElement("li", __assign({ ref: setNodeRef, style: style }, attributes, listeners), children));
+    return (React__default.createElement("li", __assign({ ref: setNodeRef, style: style }, attributes, listeners), children));
 }
 
 var originShift = (2 * Math.PI * 6378137) / 2.0;
@@ -5335,44 +5311,44 @@ var MlWmsLoader = function (props) {
     var _l = useWms({
         urlParameters: props.urlParameters,
     }), _capabilities = _l.capabilities, error = _l.error, setUrl = _l.setUrl, _getFeatureInfoUrl = _l.getFeatureInfoUrl, _wmsUrl = _l.wmsUrl;
-    var _m = React.useState(((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.open) || false), open = _m[0], setOpen = _m[1];
-    var _o = React.useState(((_b = props === null || props === void 0 ? void 0 : props.config) === null || _b === void 0 ? void 0 : _b.visible) || true), visible = _o[0], setVisible = _o[1];
-    var _p = React.useState(false), showDeletionConfirmationDialog = _p[0], setShowDeletionConfirmationDialog = _p[1];
+    var _m = useState(((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.open) || false), open = _m[0], setOpen = _m[1];
+    var _o = useState(((_b = props === null || props === void 0 ? void 0 : props.config) === null || _b === void 0 ? void 0 : _b.visible) || true), visible = _o[0], setVisible = _o[1];
+    var _p = useState(false), showDeletionConfirmationDialog = _p[0], setShowDeletionConfirmationDialog = _p[1];
     var mapHook = useMap({ mapId: props === null || props === void 0 ? void 0 : props.mapId });
-    var _q = React.useState(((_c = props === null || props === void 0 ? void 0 : props.config) === null || _c === void 0 ? void 0 : _c.layers) || []), _layers = _q[0], _setLayers = _q[1];
-    var _r = React.useState(false), featureInfoEventsEnabled = _r[0], setFeatureInfoEventsEnabled = _r[1];
-    var _s = React.useState(), featureInfoLngLat = _s[0], setFeatureInfoLngLat = _s[1];
-    var _t = React.useState(undefined), featureInfoContent = _t[0], setFeatureInfoContent = _t[1];
-    React.useEffect(function () {
+    var _q = useState(((_c = props === null || props === void 0 ? void 0 : props.config) === null || _c === void 0 ? void 0 : _c.layers) || []), _layers = _q[0], _setLayers = _q[1];
+    var _r = useState(false), featureInfoEventsEnabled = _r[0], setFeatureInfoEventsEnabled = _r[1];
+    var _s = useState(), featureInfoLngLat = _s[0], setFeatureInfoLngLat = _s[1];
+    var _t = useState(undefined), featureInfoContent = _t[0], setFeatureInfoContent = _t[1];
+    useEffect(function () {
         if (props.config)
             return;
         setUrl(props.url);
     }, [props.url]);
-    var wmsUrl = React.useMemo(function () {
+    var wmsUrl = useMemo(function () {
         var _a;
         return ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.wmsUrl) || _wmsUrl;
     }, [(_d = props === null || props === void 0 ? void 0 : props.config) === null || _d === void 0 ? void 0 : _d.wmsUrl, _wmsUrl]);
-    var getFeatureInfoUrl = React.useMemo(function () {
+    var getFeatureInfoUrl = useMemo(function () {
         var _a;
         return ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.getFeatureInfoUrl) || _getFeatureInfoUrl;
     }, [(_e = props === null || props === void 0 ? void 0 : props.config) === null || _e === void 0 ? void 0 : _e.getFeatureInfoUrl, _getFeatureInfoUrl]);
-    var capabilities = React.useMemo(function () {
+    var capabilities = useMemo(function () {
         return _capabilities;
     }, [_capabilities]);
-    var name = React.useMemo(function () {
+    var name = useMemo(function () {
         var _a, _b;
         return (props === null || props === void 0 ? void 0 : props.name) || ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.name) || ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _b === void 0 ? void 0 : _b.Title);
     }, [props === null || props === void 0 ? void 0 : props.name, (_f = props === null || props === void 0 ? void 0 : props.config) === null || _f === void 0 ? void 0 : _f.name, (_g = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _g === void 0 ? void 0 : _g.Title]);
-    var layers = React.useMemo(function () {
+    var layers = useMemo(function () {
         var _a;
         if (!(props === null || props === void 0 ? void 0 : props.setLayers))
             return _layers;
         return ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.layers) || _layers;
     }, [(_h = props === null || props === void 0 ? void 0 : props.config) === null || _h === void 0 ? void 0 : _h.layers, _layers]);
-    var setLayers = React.useMemo(function () {
+    var setLayers = useMemo(function () {
         return (props === null || props === void 0 ? void 0 : props.setLayers) || _setLayers;
     }, [props === null || props === void 0 ? void 0 : props.setLayers, _setLayers]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         (_a = props === null || props === void 0 ? void 0 : props.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(props, {
             layers: layers,
@@ -5384,7 +5360,7 @@ var MlWmsLoader = function (props) {
             name: name,
         });
     }, [layers, capabilities, getFeatureInfoUrl, wmsUrl, visible, open, name]);
-    var attribution = React.useMemo(function () {
+    var attribution = useMemo(function () {
         return layers
             .filter(function (el) { var _a; return el.visible && ((_a = el === null || el === void 0 ? void 0 : el.Attribution) === null || _a === void 0 ? void 0 : _a.Title); })
             .map(function (el) { var _a; return (_a = el === null || el === void 0 ? void 0 : el.Attribution) === null || _a === void 0 ? void 0 : _a.Title; })
@@ -5395,15 +5371,15 @@ var MlWmsLoader = function (props) {
         setFeatureInfoLngLat(undefined);
         setFeatureInfoContent(undefined);
     };
-    var getFeatureInfo = React.useCallback(function (ev) {
+    var getFeatureInfo = useCallback(function (ev) {
         var _a, _b, _c;
         if (!mapHook.map)
             return;
         resetFeatureInfo();
         var unprojected = mapHook.map.unproject([ev.point.x, ev.point.y]);
-        var point = turf__namespace.point([unprojected.lng, unprojected.lat]);
-        var buffered = turf__namespace.buffer(point, 50, { units: 'meters' });
-        var _bbox = turf__namespace.bbox(buffered);
+        var point = turf.point([unprojected.lng, unprojected.lat]);
+        var buffered = turf.buffer(point, 50, { units: 'meters' });
+        var _bbox = turf.bbox(buffered);
         var _sw = lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
         var _ne = lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
         var bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
@@ -5456,13 +5432,13 @@ var MlWmsLoader = function (props) {
         })
             .catch(function (error) { return console.log(error); });
     }, [capabilities, getFeatureInfoUrl, props, mapHook, layers]);
-    var _featureInfoEventsEnabled = React.useMemo(function () {
+    var _featureInfoEventsEnabled = useMemo(function () {
         return (((typeof (props === null || props === void 0 ? void 0 : props.featureInfoActive) !== 'undefined' && props.featureInfoActive) ||
             featureInfoEventsEnabled) &&
             (layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) &&
             !!mapHook.map);
     }, [props === null || props === void 0 ? void 0 : props.featureInfoActive, featureInfoEventsEnabled, layers, mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!_featureInfoEventsEnabled) {
             resetFeatureInfo();
             return;
@@ -5476,7 +5452,7 @@ var MlWmsLoader = function (props) {
             (_c = (_a = mapHook.map) === null || _a === void 0 ? void 0 : (_b = _a.map).off) === null || _c === void 0 ? void 0 : _c.call(_b, 'click', _getFeatureInfo);
         };
     }, [_featureInfoEventsEnabled, getFeatureInfo, mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (!(capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service))
             return;
@@ -5524,9 +5500,9 @@ var MlWmsLoader = function (props) {
             }
         }
     }, [capabilities, mapHook.map]);
-    var listContent = (React.createElement(ListItem, { secondaryAction: React.createElement(React.Fragment, null,
+    var listContent = (React__default.createElement(ListItem, { secondaryAction: React__default.createElement(React__default.Fragment, null,
             props.buttons,
-            props.featureInfoEnabled && (React.createElement(IconButton, { sx: {
+            props.featureInfoEnabled && (React__default.createElement(IconButton, { sx: {
                     padding: '4px',
                     marginTop: '-3px',
                     marginRight: '4px',
@@ -5545,16 +5521,16 @@ var MlWmsLoader = function (props) {
                         setFeatureInfoEventsEnabled(function (current) { return !current; });
                     }
                 }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
-                React.createElement(InfoIcon, null))),
-            React.createElement(IconButton, { 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.createElement(iconsMaterial.ExpandLess, null) : React.createElement(iconsMaterial.ExpandMore, null)),
-            props.showDeleteButton && (React.createElement(React.Fragment, null,
-                React.createElement(IconButton, { "aria-label": "delete", edge: "end", onClick: function () {
+                React__default.createElement(InfoIcon, null))),
+            React__default.createElement(IconButton, { 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.createElement(ExpandLess, null) : React__default.createElement(ExpandMore, null)),
+            props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(IconButton, { "aria-label": "delete", edge: "end", onClick: function () {
                         if (typeof props.onConfigChange === 'function') {
                             setShowDeletionConfirmationDialog(true);
                         }
                     }, sx: { padding: '4px', marginTop: '-3px' } },
-                    React.createElement(DeleteIcon, null)),
-                showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
+                    React__default.createElement(DeleteIcon, null)),
+                showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                         if (typeof props.onConfigChange === 'function') {
                             props.onConfigChange(false);
                         }
@@ -5566,31 +5542,31 @@ var MlWmsLoader = function (props) {
             paddingTop: 0,
             paddingBottom: '4px',
         } },
-        React.createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-            React.createElement(material.Checkbox, { sx: { padding: 0 }, checked: visible, onClick: function () {
+        React__default.createElement(ListItemIcon, { sx: { minWidth: '30px' } },
+            React__default.createElement(Checkbox, { sx: { padding: 0 }, checked: visible, onClick: function () {
                     setVisible(function (val) { return !val; });
                 } })),
-        React.createElement(ListItemText, { primary: name, variant: "layerlist" })));
-    return (React.createElement(React.Fragment, null,
-        error && (React.createElement(material.Snackbar, null,
-            React.createElement(material.Box, null, error))),
-        wmsUrl && (React.createElement(React.Fragment, null,
-            props.layerId && props.sortable && (React.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
+        React__default.createElement(ListItemText, { primary: name, variant: "layerlist" })));
+    return (React__default.createElement(React__default.Fragment, null,
+        error && (React__default.createElement(Snackbar, null,
+            React__default.createElement(Box, null, error))),
+        wmsUrl && (React__default.createElement(React__default.Fragment, null,
+            props.layerId && props.sortable && (React__default.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
             props.layerId && !props.sortable && (listContent),
-            React.createElement(material.Box, { sx: { display: open ? 'block' : 'none' } },
-                React.createElement(List, { dense: true, component: "div", disablePadding: true, sx: { paddingLeft: '18px' } }, wmsUrl &&
+            React__default.createElement(Box, { sx: { display: open ? 'block' : 'none' } },
+                React__default.createElement(List, { 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) {
-                        return (layer === null || layer === void 0 ? void 0 : layer.Name) ? (React.createElement(ListItem, { key: layer.Name + idx, secondaryAction: React.createElement(React.Fragment, null, (layer === null || layer === void 0 ? void 0 : layer.queryable) && React.createElement(InfoIcon, null)) },
-                            React.createElement(material.ListItemIcon, { sx: { minWidth: '30px' } },
-                                React.createElement(material.Checkbox, { checked: layer.visible, sx: { padding: 0 }, onClick: function () {
+                        return (layer === null || layer === void 0 ? void 0 : layer.Name) ? (React__default.createElement(ListItem, { key: layer.Name + idx, secondaryAction: React__default.createElement(React__default.Fragment, null, (layer === null || layer === void 0 ? void 0 : layer.queryable) && React__default.createElement(InfoIcon, null)) },
+                            React__default.createElement(ListItemIcon, { sx: { minWidth: '30px' } },
+                                React__default.createElement(Checkbox, { checked: layer.visible, sx: { padding: 0 }, onClick: function () {
                                         var _layers = __spreadArray([], layers, true);
                                         _layers[idx].visible = !_layers[idx].visible;
                                         setLayers(__spreadArray([], _layers, true));
                                     } })),
-                            React.createElement(ListItemText, { primary: layer === null || layer === void 0 ? void 0 : layer.Title, variant: "layerlist" }))) : (React.createElement(React.Fragment, null));
+                            React__default.createElement(ListItemText, { primary: layer === null || layer === void 0 ? void 0 : layer.Title, variant: "layerlist" }))) : (React__default.createElement(React__default.Fragment, null));
                     }))),
-                wmsUrl && (layers === null || layers === void 0 ? void 0 : layers.length) && (React.createElement(MlWmsLayer, { key: mapHook.componentId, url: wmsUrl, attribution: attribution, visible: visible, urlParameters: __assign(__assign({}, props.wmsUrlParameters), { layers: (_k = layers === null || layers === void 0 ? void 0 : layers.filter) === null || _k === void 0 ? void 0 : _k.call(layers, function (layer) { return layer.visible; }).map(function (el) { return el.Name; }).reverse().join(',') }), insertBeforeLayer: props === null || props === void 0 ? void 0 : props.insertBeforeLayer }))),
-            props.featureInfoEnabled && featureInfoLngLat && (React.createElement(MlMarker, __assign({}, featureInfoLngLat, { content: featureInfoContent })))))));
+                wmsUrl && (layers === null || layers === void 0 ? void 0 : layers.length) && (React__default.createElement(MlWmsLayer, { key: mapHook.componentId, url: wmsUrl, attribution: attribution, visible: visible, urlParameters: __assign(__assign({}, props.wmsUrlParameters), { layers: (_k = layers === null || layers === void 0 ? void 0 : layers.filter) === null || _k === void 0 ? void 0 : _k.call(layers, function (layer) { return layer.visible; }).map(function (el) { return el.Name; }).reverse().join(',') }), insertBeforeLayer: props === null || props === void 0 ? void 0 : props.insertBeforeLayer }))),
+            props.featureInfoEnabled && featureInfoLngLat && (React__default.createElement(MlMarker, __assign({}, featureInfoLngLat, { content: featureInfoContent })))))));
 };
 //<p key="description" style={{ fontSize: '.7em' }}>
 //	{capabilities?.Capability?.Layer?.['Abstract']}
@@ -5795,7 +5771,7 @@ function MlTemporalControllerLabels(props) {
         'text-field': ['get', props.labelField],
         'text-font': ['Metropolis Regular'],
     };
-    return (React.createElement(MlLayer, { options: {
+    return (React__default.createElement(MlLayer, { options: {
             type: 'symbol',
             layout: props.labelLayout || defaultLayout,
             paint: props.labelPaint || currentPaint(),
@@ -5816,23 +5792,23 @@ var mobileScreenBoxStyle = {
     alignItems: 'center',
 };
 function TemporalControllerPlayer(props) {
-    var _a = React.useState(props.currentVal), currentVal = _a[0], setCurrentVal = _a[1];
-    var _b = React.useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
+    var _a = useState(props.currentVal), currentVal = _a[0], setCurrentVal = _a[1];
+    var _b = useState(props.isPlaying), isPlaying = _b[0], setIsPlaying = _b[1];
     var range = props.maxVal - props.minVal;
-    var intervalRef = React.useRef();
-    var mediaIsMobile = material.useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
-    React.useEffect(function () {
+    var intervalRef = useRef();
+    var mediaIsMobile = useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
+    useEffect(function () {
         return function () {
             if (intervalRef.current) {
                 clearInterval(intervalRef.current);
             }
         };
     }, []);
-    React.useEffect(function () {
+    useEffect(function () {
         props.returnCurrent(currentVal);
         props.returnPlaying(isPlaying);
     }, [currentVal, isPlaying]);
-    var play = React.useCallback(function () {
+    var play = React__default.useCallback(function () {
         var counter = currentVal - props.minVal;
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
@@ -5899,30 +5875,30 @@ function TemporalControllerPlayer(props) {
             }
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Drawer, { anchor: "bottom", open: props.open || true, variant: "persistent", sx: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Drawer, { anchor: "bottom", open: props.open || true, variant: "persistent", sx: {
                 flexShrink: 0,
                 '& .MuiDrawer-paper': mediaIsMobile ? mobileScreenBoxStyle : bigScreenBoxStyle,
             } },
-            React.createElement(material.Grid, { container: true },
-                mediaIsMobile ? React.createElement(React.Fragment, null) : React.createElement(material.Grid, { item: true, xs: 3 }),
-                React.createElement(material.Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
-                    React.createElement(material.Button, { onClick: handleFastRewind },
-                        React.createElement(FastRewindIcon, null)),
-                    React.createElement(material.Button, { onClick: handleStop },
-                        React.createElement(StopIcon, null)),
-                    React.createElement(material.Button, { onClick: handlePlayPause }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayArrowIcon, null)),
-                    React.createElement(material.Button, { onClick: handleFastForward },
-                        React.createElement(FastForwardIcon, null))),
-                props.display && !mediaIsMobile && (React.createElement(material.Grid, { item: true, xs: 3 },
-                    React.createElement(material.Typography, { variant: 'h5', textAlign: 'right', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
-            React.createElement(material.Slider, { sx: {
+            React__default.createElement(Grid, { container: true },
+                mediaIsMobile ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(Grid, { item: true, xs: 3 }),
+                React__default.createElement(Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
+                    React__default.createElement(Button, { onClick: handleFastRewind },
+                        React__default.createElement(FastRewindIcon, null)),
+                    React__default.createElement(Button, { onClick: handleStop },
+                        React__default.createElement(StopIcon, null)),
+                    React__default.createElement(Button, { onClick: handlePlayPause }, isPlaying ? React__default.createElement(PauseIcon, null) : React__default.createElement(PlayArrowIcon, null)),
+                    React__default.createElement(Button, { onClick: handleFastForward },
+                        React__default.createElement(FastForwardIcon, null))),
+                props.display && !mediaIsMobile && (React__default.createElement(Grid, { item: true, xs: 3 },
+                    React__default.createElement(Typography, { variant: 'h5', textAlign: 'right', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
+            React__default.createElement(Slider, { sx: {
                     position: 'flex',
                     width: '95%',
                     paddingTop: '10px',
                     alignSelf: 'center',
                 }, "aria-label": "Custom marks", defaultValue: props.minVal, value: currentVal, step: props.step, onChange: handleChange, min: props.minVal, max: props.maxVal }),
-            mediaIsMobile && props.display && (React.createElement(material.Typography, { variant: 'body1', textAlign: 'right' }, Math.floor(currentVal))))));
+            mediaIsMobile && props.display && (React__default.createElement(Typography, { variant: 'body1', textAlign: 'right' }, Math.floor(currentVal))))));
 }
 
 function getMinVal(geojson, timeField) {
@@ -5947,7 +5923,7 @@ function useFilterData(props) {
     var mapHook = useMap({
         mapId: props.mapId,
     });
-    var minVal = React.useMemo(function () {
+    var minVal = useMemo(function () {
         if (props.minVal) {
             return props.minVal;
         }
@@ -5955,7 +5931,7 @@ function useFilterData(props) {
             return getMinVal(props.geojson, props.timeField);
         }
     }, [props.minVal, props.geojson, props.timeField]);
-    var maxVal = React.useMemo(function () {
+    var maxVal = useMemo(function () {
         if (props.maxVal) {
             return props.maxVal;
         }
@@ -5964,9 +5940,9 @@ function useFilterData(props) {
         }
     }, [props.maxVal, props.geojson, props.timeField]);
     // filter geojson
-    var filteredData = React.useMemo(function () {
+    var filteredData = useMemo(function () {
         if (props.geojson !== undefined && mapHook.map && minVal && maxVal) {
-            return turf.featureCollection(props.geojson.features.filter(function (e) {
+            return featureCollection(props.geojson.features.filter(function (e) {
                 var _a, _b;
                 return (((_a = e.properties) === null || _a === void 0 ? void 0 : _a[props.timeField]) >= minVal &&
                     ((_b = e.properties) === null || _b === void 0 ? void 0 : _b[props.timeField]) <= maxVal);
@@ -5992,11 +5968,11 @@ var MlTemporalController = function (props) {
         initialVal: props.initialVal,
         mapId: props.mapId,
     }), filteredData = _d.filteredData, minVal = _d.minVal, maxVal = _d.maxVal;
-    var theme = styles.useTheme();
-    var _e = React.useState(props.initialVal || minVal), currentVal = _e[0], setCurrentVal = _e[1];
+    var theme = useTheme();
+    var _e = useState(props.initialVal || minVal), currentVal = _e[0], setCurrentVal = _e[1];
     var featuresColor = props.featuresColor || theme.palette.primary.main;
     var labelColor = props.labelColor || theme.palette.text.primary;
-    var _f = React.useState(false), isPlaying = _f[0], setIsPlaying = _f[1];
+    var _f = useState(false), isPlaying = _f[0], setIsPlaying = _f[1];
     var paint = paintPicker({
         type: props.type,
         timeField: props.timeField,
@@ -6011,7 +5987,7 @@ var MlTemporalController = function (props) {
         userPaint: props.paint,
     });
     //Set Initial values and clear references
-    React.useEffect(function () {
+    useEffect(function () {
         if (!props.initialVal && minVal) {
             setCurrentVal(minVal);
         }
@@ -6027,14 +6003,14 @@ var MlTemporalController = function (props) {
         });
     }
     // Fit map to bbox
-    React.useEffect(function () {
+    useEffect(function () {
         var _a;
         if (props.fitBounds && typeof filteredData !== 'undefined') {
-            var geojsonBbox = turf.bbox(filteredData);
+            var geojsonBbox = bbox(filteredData);
             (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.fitBounds(geojsonBbox);
         }
     }, [filteredData]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c;
         if (!mapHook.map)
             return;
@@ -6070,8 +6046,8 @@ var MlTemporalController = function (props) {
             }
         };
     }, [mapHook.map, props.onClick, props.onHover, props.onLeave]);
-    return (React.createElement(React.Fragment, null,
-        filteredData && props.ownLayer && (React.createElement(MlGeoJsonLayer, { type: props.type, mapId: props.mapId, 
+    return (React__default.createElement(React__default.Fragment, null,
+        filteredData && props.ownLayer && (React__default.createElement(MlGeoJsonLayer, { type: props.type, mapId: props.mapId, 
             //layerId="timeController"
             //insertBeforeLayer={props.insertBeforeLayer || 'timeControllerLabels'}
             paint: props.paint ||
@@ -6082,8 +6058,8 @@ var MlTemporalController = function (props) {
                     data: filteredData
                 },
             } })),
-        filteredData && props.label && (React.createElement(MlTemporalControllerLabels, { data: filteredData, currentVal: currentVal, fadeIn: props.labelFadeIn, fadeOut: props.labelFadeOut, step: props.step, labelField: labelField, labelColor: labelColor, timeField: props.timeField, minVal: minVal, accumulate: props.accumulate, isPlaying: isPlaying })),
-        React.createElement(TemporalControllerPlayer, { currentVal: currentVal, isPlaying: isPlaying, step: props.step, interval: props.interval, minVal: minVal, maxVal: maxVal, returnCurrent: setCurrentVal, returnPlaying: setIsPlaying, open: false, fadeIn: props.fadeIn, fadeOut: props.fadeOut, featuresColor: featuresColor, labels: props.label, labelColor: labelColor, labelFadeIn: props.labelFadeIn, labelFadeOut: props.labelFadeOut, accumulate: props.accumulate, display: props.displayCurrentValue })));
+        filteredData && props.label && (React__default.createElement(MlTemporalControllerLabels, { data: filteredData, currentVal: currentVal, fadeIn: props.labelFadeIn, fadeOut: props.labelFadeOut, step: props.step, labelField: labelField, labelColor: labelColor, timeField: props.timeField, minVal: minVal, accumulate: props.accumulate, isPlaying: isPlaying })),
+        React__default.createElement(TemporalControllerPlayer, { currentVal: currentVal, isPlaying: isPlaying, step: props.step, interval: props.interval, minVal: minVal, maxVal: maxVal, returnCurrent: setCurrentVal, returnPlaying: setIsPlaying, open: false, fadeIn: props.fadeIn, fadeOut: props.fadeOut, featuresColor: featuresColor, labels: props.label, labelColor: labelColor, labelFadeIn: props.labelFadeIn, labelFadeOut: props.labelFadeOut, accumulate: props.accumulate, display: props.displayCurrentValue })));
 };
 MlTemporalController.defaultProps = {
     mapId: undefined,
@@ -6108,9 +6084,9 @@ MlTemporalController.defaultProps = {
  */
 var MlOrderLayers = function (props) {
     var _a;
-    return (React.createElement(React.Fragment, null, (_a = props === null || props === void 0 ? void 0 : props.layerIds) === null || _a === void 0 ? void 0 : _a.map(function (layer, idx) {
+    return (React__default.createElement(React__default.Fragment, null, (_a = props === null || props === void 0 ? void 0 : props.layerIds) === null || _a === void 0 ? void 0 : _a.map(function (layer, idx) {
         var _a;
-        return (React.createElement(MlLayer, __assign({ layerId: layer, options: {
+        return (React__default.createElement(MlLayer, __assign({ layerId: layer, options: {
                 display: 'none',
             }, key: layer }, (idx > 0
             ? {
@@ -6130,7 +6106,7 @@ MlOrderLayers.defaultProps = {
  */
 var MlTerrainLayer = function (props) {
     var mapHook = useMap({ mapId: 'map_1' });
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         if (!mapHook.map.map.getSource('terrain')) {
@@ -6153,68 +6129,68 @@ var MlTerrainLayer = function (props) {
             }
         };
     }, [mapHook.map, props.sourceOptions, props.terrainOptions]);
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 };
 MlTerrainLayer.defaultProps = {
     mapId: undefined,
 };
 
-var ListItemStyled$1 = system.styled(material.ListItem)({
+var ListItemStyled$1 = styled$1(ListItem$1)({
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: '4px',
 });
-var ListItemIconStyled = system.styled(material.ListItemIcon)({
+var ListItemIconStyled = styled$1(ListItemIcon)({
     minWidth: '30px',
 });
-var IconButtonStyled$1 = system.styled(material.IconButton)({
+var IconButtonStyled$1 = styled$1(IconButton$1)({
     marginRight: '0px',
     padding: '0px',
 });
-var CheckboxStyled$1 = system.styled(material.Checkbox)({
+var CheckboxStyled$1 = styled$1(Checkbox)({
     padding: 0,
     marginRight: '5px',
 });
-var BoxStyled$1 = system.styled(system.Box)(function (_a) {
+var BoxStyled$1 = styled$1(Box$2)(function (_a) {
     var open = _a.open;
     return ({
         display: open ? 'block' : 'none',
     });
 });
-var ListStyled$1 = system.styled(material.List)({
+var ListStyled$1 = styled$1(List$1)({
     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 () {
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(true), localVisible = _d[0], setLocalVisible = _d[1];
+    var _visible = useMemo(function () {
         if (!visible) {
             return false;
         }
         return localVisible;
     }, [visible, localVisible]);
-    var _children = React.useMemo(function () {
+    var _children = useMemo(function () {
         if (children) {
             if (Array.isArray(children)) {
                 return children.map(function (element) {
-                    return React.cloneElement(element, {
+                    return React__default.cloneElement(element, {
                         visible: _visible,
                     });
                 });
             }
-            return React.cloneElement(children, {
+            return React__default.cloneElement(children, {
                 visible: _visible,
             });
         }
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }, [_visible]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ListItemStyled$1, null,
-            React.createElement(ListItemIconStyled, null,
-                React.createElement(IconButtonStyled$1, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
-                React.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ListItemStyled$1, null,
+            React__default.createElement(ListItemIconStyled, null,
+                React__default.createElement(IconButtonStyled$1, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
+                React__default.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
                         }
@@ -6222,9 +6198,9 @@ function LayerListFolder(_a) {
                             setLocalVisible(function (val) { return !val; });
                         }
                     } })),
-            React.createElement(material.ListItemText, { primary: name, variant: "layerlist" })),
-        React.createElement(BoxStyled$1, { open: open },
-            React.createElement(ListStyled$1, { disablePadding: true }, _children))));
+            React__default.createElement(ListItemText$1, { primary: name, variant: "layerlist" })),
+        React__default.createElement(BoxStyled$1, { open: open },
+            React__default.createElement(ListStyled$1, { disablePadding: true }, _children))));
 }
 
 var converters = {
@@ -6237,12 +6213,12 @@ var converters = {
 
 var ColorPicker = function (_a) {
     var convert = _a.convert, props = __rest(_a, ["convert"]);
-    var _b = React.useState(false), showPicker = _b[0], setShowPicker = _b[1];
-    var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
-            React.createElement(material.Grid, { xs: 12, item: true },
-                React.createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
+    var _b = useState(false), showPicker = _b[0], setShowPicker = _b[1];
+    var _c = useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid, { container: true, sx: { flexWrap: 'nowrap' } },
+            React__default.createElement(Grid, { xs: 12, item: true },
+                React__default.createElement(Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
                         minWidth: '100%',
                         padding: '5px',
                         marginBottom: '10px',
@@ -6250,19 +6226,19 @@ var ColorPicker = function (_a) {
                         borderColor: function (theme) { return theme.palette.text.primary; },
                         color: function (theme) { return theme.palette.text.primary; },
                     } },
-                    React.createElement("div", { style: {
+                    React__default.createElement("div", { style: {
                             width: '25px',
                             height: '25px',
                             marginRight: '10px',
                             backgroundColor: value,
                         } }),
                     value))),
-        showPicker && (React.createElement("div", { style: { position: 'relative', marginTop: 0 } },
-            React.createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
-                React.createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
+        showPicker && (React__default.createElement("div", { style: { position: 'relative', marginTop: 0 } },
+            React__default.createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
+                React__default.createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
                         setShowPicker(false);
                     } }),
-                React.createElement(reactColor.ChromePicker, { color: value, onChange: function (c) {
+                React__default.createElement(ChromePicker, { color: value, onChange: function (c) {
                         var _a;
                         var newValue = converters[convert](c);
                         setValue(newValue);
@@ -6277,7 +6253,7 @@ ColorPicker.defaultProps = {
 
 function PaintPropsColorPicker(_a) {
     var propKey = _a.propKey, value = _a.value, setPaintProps = _a.setPaintProps;
-    return (React.createElement(ColorPicker, { value: value, label: "Color", onChange: function (value) {
+    return (React__default.createElement(ColorPicker, { value: value, label: "Color", onChange: function (value) {
             setPaintProps(function (current) {
                 var _a;
                 var newProps = __assign(__assign({}, current), (_a = {}, _a[propKey] = value, _a));
@@ -6286,7 +6262,7 @@ function PaintPropsColorPicker(_a) {
         } }));
 }
 
-var PaperStyled = material.styled(material.Paper)({
+var PaperStyled = styled(Paper$1)({
     marginLeft: '-100px',
     marginRight: '-21px',
     paddingLeft: '53px',
@@ -6294,7 +6270,7 @@ var PaperStyled = material.styled(material.Paper)({
     boxShadow: 'none',
     backgroundColor: 'rgb(0, 0, 0, 0)',
 });
-var BoxStyled = material.styled(material.Box)({
+var BoxStyled = styled(Box)({
     marginLeft: '61px',
 });
 var mapPropKeyToFormInputType = {
@@ -6333,16 +6309,16 @@ 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));
-    var getFormInputByType = React.useCallback(function (key) {
+    var key = useRef(Math.round(Math.random() * 10000000000));
+    var getFormInputByType = useCallback(function (key) {
         if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1 &&
             (typeof paintProps[key] === 'number' || typeof paintProps[key] === 'string')) {
-            var label = (React.createElement(material.Typography, { id: key + '_label', gutterBottom: true }, key));
+            var label = (React__default.createElement(Typography, { id: key + '_label', gutterBottom: true }, key));
             switch (mapPropKeyToFormInputType[key]) {
                 case 'slider':
-                    return (React.createElement(React.Fragment, { key: key },
+                    return (React__default.createElement(React__default.Fragment, { key: key },
                         label,
-                        React.createElement(material.Slider, __assign({}, inputPropsByPropKey[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
+                        React__default.createElement(Slider, __assign({}, inputPropsByPropKey[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
                                 if (value) {
                                     setPaintProps(function (current) {
                                         var _a;
@@ -6351,9 +6327,9 @@ function LayerPropertyForm(_a) {
                                 }
                             } }))));
                 case 'numberfield':
-                    return (React.createElement(React.Fragment, { key: key },
+                    return (React__default.createElement(React__default.Fragment, { key: key },
                         label,
-                        React.createElement(material.TextField, { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], onChange: function (ev) {
+                        React__default.createElement(TextField, { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], onChange: function (ev) {
                                 var _a;
                                 if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.value) {
                                     setPaintProps(function (current) {
@@ -6363,42 +6339,42 @@ function LayerPropertyForm(_a) {
                                 }
                             } })));
                 case 'colorpicker':
-                    return (React.createElement(React.Fragment, { key: key },
+                    return (React__default.createElement(React__default.Fragment, { key: key },
                         label,
-                        React.createElement(material.Box, { sx: { '& > div': { width: 'initial !important' } } },
-                            React.createElement(PaintPropsColorPicker, { key: key, value: paintProps[key], propKey: key, setPaintProps: setPaintProps }))));
+                        React__default.createElement(Box, { sx: { '& > div': { width: 'initial !important' } } },
+                            React__default.createElement(PaintPropsColorPicker, { key: key, value: paintProps[key], propKey: key, setPaintProps: setPaintProps }))));
             }
         }
         return null;
     }, [paintProps]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PaperStyled, null,
-            React.createElement(material.ListItem, { key: key + '_paintPropForm' },
-                React.createElement(BoxStyled, null, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(PaperStyled, null,
+            React__default.createElement(ListItem$1, { key: key + '_paintPropForm' },
+                React__default.createElement(BoxStyled, null, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); }))))));
 }
 
-var ListItemStyled = material.styled(material.ListItem)(function (configurable) { return ({
+var ListItemStyled = styled(ListItem$1)(function (configurable) { return ({
     paddingRight: configurable ? '56px' : 0,
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: '4px',
 }); });
-var TuneIconButton$1 = material.styled(material.IconButton)({
+var TuneIconButton$1 = styled(IconButton$1)({
     padding: '4px',
     marginTop: '-3px',
 });
-var CheckboxListItemIcon = material.styled(material.ListItemIcon)({
+var CheckboxListItemIcon = styled(ListItemIcon)({
     minWidth: '30px',
 });
-var CheckboxStyled = material.styled(material.Checkbox)({
+var CheckboxStyled = styled(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];
-    var _c = React.useState(true), visible = _c[0], setVisible = _c[1];
-    var _d = React.useState(vtProps.layers[id].paint), paintProps = _d[0], setPaintProps = _d[1];
-    React.useEffect(function () {
+    var _b = useState(false), paintPropsFormVisible = _b[0], setPaintPropsFormVisible = _b[1];
+    var _c = useState(true), visible = _c[0], setVisible = _c[1];
+    var _d = useState(vtProps.layers[id].paint), paintProps = _d[0], setPaintProps = _d[1];
+    useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         if (!setVtProps ||
             (typeof ((_b = (_a = vtProps.layers[id]) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.visibility) === 'undefined' && visible) ||
@@ -6414,10 +6390,10 @@ function LayerListItemVectorLayer(_a) {
         }
         setVtProps(__assign(__assign({}, vtProps), { layers: _layers }));
     }, [visible, id, setVtProps, vtProps]);
-    React.useEffect(function () {
+    useEffect(function () {
         setVisible(!!props.visibleMaster);
     }, [props.visibleMaster]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!setVtProps)
             return;
         if (JSON.stringify(paintProps) !== JSON.stringify(vtProps.layers[id].paint)) {
@@ -6427,49 +6403,49 @@ function LayerListItemVectorLayer(_a) {
             setVtProps(__assign(__assign({}, vtProps), { layers: _layers }));
         }
     }, [paintProps, id, setVtProps, vtProps]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ListItemStyled, { key: id, secondaryAction: configurable ? (React.createElement(TuneIconButton$1, { edge: "end", "aria-label": "comments", onClick: function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ListItemStyled, { key: id, secondaryAction: configurable ? (React__default.createElement(TuneIconButton$1, { edge: "end", "aria-label": "comments", onClick: function () {
                     setPaintPropsFormVisible(function (current) {
                         return !current;
                     });
                 } },
-                React.createElement(TuneIcon, null))) : undefined },
-            React.createElement(CheckboxListItemIcon, null,
-                React.createElement(CheckboxStyled, { checked: visible, onClick: function () {
+                React__default.createElement(TuneIcon, null))) : undefined },
+            React__default.createElement(CheckboxListItemIcon, null,
+                React__default.createElement(CheckboxStyled, { checked: visible, onClick: function () {
                         setVisible(function (val) { return !val; });
                     } })),
-            React.createElement(material.ListItemText, { primary: vtProps.layers[id].id, variant: "layerlist" })),
-        configurable && paintPropsFormVisible && (React.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: vtProps.layers[id].type }))));
+            React__default.createElement(ListItemText$1, { primary: vtProps.layers[id].id, variant: "layerlist" })),
+        configurable && paintPropsFormVisible && (React__default.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: vtProps.layers[id].type }))));
 }
 LayerListItemVectorLayer.defaultProps = {
     configurable: true,
 };
 
-var TuneIconButton = material.styled(material.IconButton)({
+var TuneIconButton = styled(IconButton$1)({
     padding: '4px',
     marginTop: '-3px',
 });
-var DeleteIconButton = material.styled(material.IconButton)({
+var DeleteIconButton = styled(IconButton$1)({
     marginLeft: '20px',
 });
 function LayerListItem(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     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 _r = React.useState(true), localVisible = _r[0], setLocalVisible = _r[1];
-    var _s = React.useState(false), paintPropsFormVisible = _s[0], setPaintPropsFormVisible = _s[1];
-    var _t = React.useState(false), showDeletionConfirmationDialog = _t[0], setShowDeletionConfirmationDialog = _t[1];
-    var deletedRef = React.useRef(false);
-    var visibleRef = React.useRef(visible);
+    var _r = useState(true), localVisible = _r[0], setLocalVisible = _r[1];
+    var _s = useState(false), paintPropsFormVisible = _s[0], setPaintPropsFormVisible = _s[1];
+    var _t = useState(false), showDeletionConfirmationDialog = _t[0], setShowDeletionConfirmationDialog = _t[1];
+    var deletedRef = useRef(false);
+    var visibleRef = useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _u = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) || ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
+    var _u = useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) || ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
         getDefaultPaintPropsByType(((_e = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _e === void 0 ? void 0 : _e.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _u[0], setPaintProps = _u[1];
-    var _visible = React.useMemo(function () {
+    var _visible = useMemo(function () {
         if (!visible) {
             return false;
         }
         return localVisible;
     }, [visible, localVisible]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b, _c;
         if (!setLayerState || !((_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.layers) || _visible === visibleRef.current)
             return;
@@ -6495,7 +6471,7 @@ function LayerListItem(_a) {
                 break;
         }
     }, [_visible, setLayerState, layerComponent]);
-    React.useEffect(function () {
+    useEffect(function () {
         var _a, _b;
         if (!setLayerState || deletedRef.current || !paintProps || ((_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.layers))
             return;
@@ -6503,17 +6479,17 @@ function LayerListItem(_a) {
             return;
         setLayerState(__assign(__assign({}, layerComponent.props), { paint: paintProps }));
     }, [paintProps, setLayerState, (_f = layerComponent.props) === null || _f === void 0 ? void 0 : _f.paint]);
-    var _layerComponent = React.useMemo(function () {
+    var _layerComponent = useMemo(function () {
         var _a;
         if (layerComponent && type === 'layer') {
             switch (layerComponent.type.name) {
                 case 'MlWmsLayer':
-                    return React.cloneElement(layerComponent, __assign(__assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props), { visible: _visible }));
+                    return React__default.cloneElement(layerComponent, __assign(__assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props), { visible: _visible }));
                 case 'MlVectorTileLayer':
-                    return React.cloneElement(layerComponent, __assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props));
+                    return React__default.cloneElement(layerComponent, __assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props));
                 default:
                 case 'MlGeoJsonLayer':
-                    return React.cloneElement(layerComponent, {
+                    return React__default.cloneElement(layerComponent, {
                         layout: {
                             visibility: _visible ? 'visible' : 'none',
                         },
@@ -6521,9 +6497,9 @@ function LayerListItem(_a) {
                     });
             }
         }
-        return React.createElement(React.Fragment, null);
+        return React__default.createElement(React__default.Fragment, null);
     }, [type, layerComponent, paintProps, _visible, (_g = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _g === void 0 ? void 0 : _g.layers, setLayerState]);
-    var layerType = React.useMemo(function () {
+    var layerType = useMemo(function () {
         if (layerComponent && type === 'layer') {
             if (layerComponent.props.type) {
                 return layerComponent.props.type;
@@ -6534,35 +6510,35 @@ function LayerListItem(_a) {
         }
         return undefined;
     }, [layerComponent]);
-    var listContent = (React.createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_h = Object.keys(paintProps)) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (React.createElement(React.Fragment, null, props === null || props === void 0 ? void 0 :
+    var listContent = (React__default.createElement(ListItemStyled, { sx: __assign({}, props.listItemSx), secondaryAction: configurable && ((_h = Object.keys(paintProps)) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (React__default.createElement(React__default.Fragment, null, props === null || props === void 0 ? void 0 :
             props.buttons,
-            React.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
+            React__default.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
                     setPaintPropsFormVisible(function (current) {
                         return !current;
                     });
                 } },
-                React.createElement(iconsMaterial.Tune, null)))) : undefined },
-        React.createElement(CheckboxListItemIcon, null,
-            React.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
+                React__default.createElement(Tune, null)))) : undefined },
+        React__default.createElement(CheckboxListItemIcon, null,
+            React__default.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
                     setLocalVisible(function (val) { return !val; });
                 } })),
-        React.createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
-    return (React.createElement(React.Fragment, null,
-        props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
+        React__default.createElement(ListItemText$1, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
+    return (React__default.createElement(React__default.Fragment, null,
+        props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
         !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (listContent),
         _layerComponent,
         !((_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) &&
             Object.keys(paintProps).length > 0 &&
             configurable &&
-            paintPropsFormVisible && (React.createElement(React.Fragment, null,
-            props.showDeleteButton && (React.createElement(React.Fragment, null,
-                React.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
+            paintPropsFormVisible && (React__default.createElement(React__default.Fragment, null,
+            props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
                         if (typeof setLayerState === 'function') {
                             setShowDeletionConfirmationDialog(true);
                         }
                     } },
-                    React.createElement(iconsMaterial.Delete, null)),
-                showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
+                    React__default.createElement(Delete, null)),
+                showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                         if (typeof setLayerState === 'function') {
                             deletedRef.current = true;
                             setLayerState(false);
@@ -6571,20 +6547,20 @@ function LayerListItem(_a) {
                     }, onCancel: function () {
                         setShowDeletionConfirmationDialog(false);
                     }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
-            React.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
-        ((_m = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _m === void 0 ? void 0 : _m.layers) && (React.createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_q = (_p = (_o = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _o === void 0 ? void 0 : _o.layers) === null || _p === void 0 ? void 0 : _p.map) === null || _q === void 0 ? void 0 : _q.call(_p, function (_el, idx) { return (React.createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
+            React__default.createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
+        ((_m = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _m === void 0 ? void 0 : _m.layers) && (React__default.createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_q = (_p = (_o = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _o === void 0 ? void 0 : _o.layers) === null || _p === void 0 ? void 0 : _p.map) === null || _q === void 0 ? void 0 : _q.call(_p, function (_el, idx) { return (React__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',
     visible: true,
     showDeleteButton: false,
-    buttons: React.createElement(React.Fragment, null),
+    buttons: React__default.createElement(React__default.Fragment, null),
 };
 
 var sketchTools = [
-    { name: 'Point', mode: 'draw_point', icon: React.createElement(ScatterPlotIcon, null) },
-    { name: 'LineString', mode: 'draw_line_string', icon: React.createElement(PolylineIcon, null) },
-    { name: 'Polygon', mode: 'draw_polygon', icon: React.createElement(PentagonIcon, null) },
+    { name: 'Point', mode: 'draw_point', icon: React__default.createElement(ScatterPlotIcon, null) },
+    { name: 'LineString', mode: 'draw_line_string', icon: React__default.createElement(PolylineIcon, null) },
+    { name: 'Polygon', mode: 'draw_polygon', icon: React__default.createElement(PentagonIcon, null) },
 ];
 /**
  * Component template
@@ -6596,14 +6572,14 @@ var MlSketchTool = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _c = React.useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
-    var _d = React.useState({
+    var _c = useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
+    var _d = useState({
         activeGeometryIndex: undefined,
         selectedGeoJson: undefined,
         geometries: [],
         drawMode: undefined,
     }), sketchState = _d[0], setSketchState = _d[1];
-    React.useEffect(function () {
+    useEffect(function () {
         if (!(typeof props.onChange === 'function'))
             return;
         props.onChange(sketchState);
@@ -6627,7 +6603,7 @@ var MlSketchTool = function (props) {
         });
     };
     var SketchToolButtons = function () {
-        return (React.createElement(React.Fragment, null, sketchTools.map(function (el) {
+        return (React__default.createElement(React__default.Fragment, null, sketchTools.map(function (el) {
             var stateColor = function (theme) {
                 if (sketchState.drawMode === el.mode) {
                     return theme.palette.primary.main;
@@ -6644,20 +6620,20 @@ var MlSketchTool = function (props) {
                     return theme.palette.navigation.navColor;
                 }
             };
-            return (React.createElement(React.Fragment, null,
-                React.createElement(Tooltip, { title: el.name },
-                    React.createElement(material.Button, { sx: __assign({ color: stateIconColor, backgroundColor: stateColor, '&:hover': {
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip, { title: el.name },
+                    React__default.createElement(Button, { sx: __assign({ color: stateIconColor, backgroundColor: stateColor, '&:hover': {
                                 backgroundColor: stateColor,
                             } }, buttonStyle), onClick: function () { return buttonClickHandler(el.mode); } }, el.icon))));
         })));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(system.Box, { sx: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box$2, { sx: {
                 zIndex: 104,
             } },
-            React.createElement(ButtonGroup, null,
-                React.createElement(SketchToolButtons, null))),
-        sketchState.drawMode && (React.createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
+            React__default.createElement(ButtonGroup, null,
+                React__default.createElement(SketchToolButtons, null))),
+        sketchState.drawMode && (React__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) {
@@ -6676,11 +6652,11 @@ var MlSketchTool = function (props) {
             }, onFinish: function () {
                 setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
             } })),
-        React.createElement(List, { sx: { zIndex: 105, marginBottom: '-10px' } },
-            sketchState.geometries.map(function (el) { return (React.createElement(React.Fragment, null,
-                React.createElement(system.Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
-                    React.createElement("br", null),
-                    React.createElement(system.Box, { flexDirection: 'row', sx: {
+        React__default.createElement(List, { sx: { zIndex: 105, marginBottom: '-10px' } },
+            sketchState.geometries.map(function (el) { return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Box$2, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
+                    React__default.createElement("br", null),
+                    React__default.createElement(Box$2, { flexDirection: 'row', sx: {
                             '&:hover': {
                                 backgroundColor: 'rgb(177, 177, 177, 0.2)',
                             },
@@ -6690,28 +6666,28 @@ var MlSketchTool = function (props) {
                         }, onMouseLeave: function () {
                             setHoveredGeometry(undefined);
                         } },
-                        React.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
-                        React.createElement(system.Box, { sx: {
+                        React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
+                        React__default.createElement(Box$2, { sx: {
                                 padding: '3px 30px',
                             } },
-                            React.createElement(ButtonGroup, { size: "small" },
-                                React.createElement(material.Button, { onClick: function () {
+                            React__default.createElement(ButtonGroup, { size: "small" },
+                                React__default.createElement(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);
+                                            : turf.centerOfMass(el).geometry.coordinates);
                                     } },
-                                    React.createElement(GpsFixedIcon, null)),
-                                React.createElement(material.Button, { sx: buttonStyle, onClick: function () {
+                                    React__default.createElement(GpsFixedIcon, null)),
+                                React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
                                         setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
                                     } },
-                                    React.createElement(EditIcon, null)),
-                                React.createElement(material.Button, { sx: buttonStyle, onClick: function () {
+                                    React__default.createElement(EditIcon, null)),
+                                React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
                                         removeGeoJson(el);
                                         setHoveredGeometry(undefined);
                                     } },
-                                    React.createElement(DeleteIcon, null)))))))); }),
-            hoveredGeometry && (React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
+                                    React__default.createElement(DeleteIcon, null)))))))); }),
+            hoveredGeometry && (React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
                     circle: {
                         'circle-color': '#dd9900',
                         'circle-opacity': 0.4,
@@ -6727,7 +6703,7 @@ var MlSketchTool = function (props) {
                         'fill-opacity': 0.4
                     },
                 } }))),
-        sketchState.drawMode === 'simple_select' && (React.createElement(material.Typography, { sx: { fontSize: '0.6em' } },
+        sketchState.drawMode === 'simple_select' && (React__default.createElement(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))));
 };
@@ -6743,27 +6719,27 @@ MlSketchTool.defaultProps = {
 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 initializedRef = useRef(false);
+    var pause = useRef(props.pause);
+    var zoom = useRef(props.zoom);
+    var pitch = useRef(props.pitch);
+    var step = useRef(1);
+    var speed = useRef(props.speed);
+    var timeoutId = useRef();
     var kmPerStep = props.kmPerStep || 0.01;
-    var routeDistance = turf__namespace.lineDistance(props.route);
+    var routeDistance = turf.lineDistance(props.route);
     var stepDuration = props.stepDuration || 70;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    React.useEffect(function () {
+    useEffect(function () {
         pause.current = props.pause;
         if (!pause.current) {
             play();
         }
     }, [props.pause]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         zoom.current = props.zoom;
@@ -6771,7 +6747,7 @@ var useCameraFollowPath = function (props) {
             mapHook.map.map.setZoom(zoom.current);
         }
     }, [mapHook.map, props.zoom]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map)
             return;
         pitch.current = props.pitch;
@@ -6779,10 +6755,10 @@ var useCameraFollowPath = function (props) {
             mapHook.map.map.setPitch(pitch.current);
         }
     }, [mapHook.map, props.pitch]);
-    React.useEffect(function () {
+    useEffect(function () {
         speed.current = props.speed;
     }, [props.speed]);
-    var disableInteractivity = React.useCallback(function () {
+    var disableInteractivity = useCallback(function () {
         if (!mapHook.map)
             return;
         mapHook.map.map['scrollZoom'].disable();
@@ -6793,7 +6769,7 @@ var useCameraFollowPath = function (props) {
         mapHook.map.map['doubleClickZoom'].disable();
         mapHook.map.map['touchZoomRotate'].disable();
     }, [mapHook.map]);
-    var enableInteractivity = React.useCallback(function () {
+    var enableInteractivity = useCallback(function () {
         if (!mapHook.map)
             return;
         mapHook.map.map['scrollZoom'].enable();
@@ -6807,7 +6783,7 @@ var useCameraFollowPath = function (props) {
     function centerRoute() {
         if (!mapHook.map || !props.route)
             return;
-        var bbox = turf__namespace.bbox(props.route);
+        var bbox = turf.bbox(props.route);
         var bounds;
         if (bbox && bbox.length > 3) {
             bounds = [
@@ -6825,12 +6801,12 @@ var useCameraFollowPath = function (props) {
             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
+            var alongRoutelati = turf.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)),
+                    bearing: turf.bearing(turf.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]), turf.point(alongRoutelati)),
                     duration: stepDuration,
                     essential: true,
                 });
@@ -6864,13 +6840,13 @@ var useCameraFollowPath = function (props) {
         enableInteractivity();
         step.current = 1;
     }
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || initializedRef.current)
             return;
         initializedRef.current = true;
         centerRoute();
     }, [mapHook.map]);
-    React.useEffect(function () {
+    useEffect(function () {
         return function () {
             if (timeoutId.current) {
                 clearTimeout(timeoutId.current);
@@ -6889,7 +6865,7 @@ useCameraFollowPath.defaultProps = {
 
 function useLayerFilter(props) {
     var mapHook = useMap({ mapId: props.mapId });
-    React.useEffect(function () {
+    useEffect(function () {
         if (!mapHook.map || !props.layerId || !props.filter)
             return;
         if (mapHook.map.map.getLayer(props.layerId)) {
@@ -6922,7 +6898,7 @@ function useLayerEvent(props) {
   var mapHook = useMap({
     mapId: props.mapId
   });
-  React.useEffect(function () {
+  useEffect(function () {
     if (!mapHook.map) return true;
     if (typeof props.condition !== 'undefined' && props.condition === false) return;
     //console.log('useLayerEvent');
@@ -6955,7 +6931,7 @@ function useLayerEvent(props) {
 }
 
 var useLayerContext = function () {
-    var layerContext = React.useContext(LayerContext);
+    var layerContext = useContext(LayerContext);
     return layerContext;
 };
 
@@ -6964,7 +6940,7 @@ var useLayerContext = function () {
  *
  */
 var useAddProtocol = function (props) {
-    React.useEffect(function () {
+    useEffect(function () {
         if (!props.protocol || typeof props.handler !== 'function')
             return;
         maplibregl.addProtocol(props.protocol, props.handler);
@@ -7031,7 +7007,7 @@ function convertCsv(filename, options) {
                         }
                         getProtocolData(filename).then(function (rawData) {
                             // Use the csv2geojson library to convert the CSV to GeoJSON	
-                            csv2geojson__namespace.csv2geojson(rawData, useOptions, function (err, data) {
+                            csv2geojson.csv2geojson(rawData, useOptions, function (err, data) {
                                 if (err) {
                                     reject(err);
                                 }
@@ -7167,7 +7143,7 @@ function convertTopojson(params) {
                                 result = {
                                     type: 'FeatureCollection',
                                     features: Object.keys(topoJsonData.objects).map(function (key) {
-                                        return topojsonClient.feature(topoJsonData, key);
+                                        return feature(topoJsonData, key);
                                     }),
                                 };
                                 result.features = reduceFeatures(result);
@@ -7209,7 +7185,7 @@ function convertXML(params) {
                             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'));
+                                    return externParser[params.protocolId](new DOMParser().parseFromString(rawData, 'text/xml'));
                                     // use the projects gpxConverter function for gpx and kml files
                                 }
                                 else {
@@ -7256,8 +7232,8 @@ var useAddImage = function (props) {
     var mapHook = useMap({
         mapId: undefined,
     });
-    var initializedRef = React.useRef(false);
-    React.useEffect(function () {
+    var initializedRef = useRef(false);
+    useEffect(function () {
         var _a;
         if (!mapHook.map || initializedRef.current)
             return;
@@ -7281,23 +7257,23 @@ useAddImage.defaultProps = {
     mapId: undefined,
 };
 
-var SimpleDataContext = React.createContext({});
+var SimpleDataContext = React__default.createContext({});
 var SimpleDataContextProvider = SimpleDataContext.Provider;
 
 var SimpleDataProvider = function (props) {
-    var _a = React.useState(), data = _a[0], setData = _a[1];
-    React.useEffect(function () {
+    var _a = useState(), data = _a[0], setData = _a[1];
+    useEffect(function () {
         if (!props.url)
             return;
         var data_promise = null;
         if (props.format === "json") {
-            data_promise = d3__namespace.json(props.url);
+            data_promise = d3.json(props.url);
         }
         else if (props.format === "csv") {
-            data_promise = d3__namespace.csv(props.url);
+            data_promise = d3.csv(props.url);
         }
         else if (props.format === "xml") {
-            data_promise = d3__namespace.xml(props.url);
+            data_promise = d3.xml(props.url);
         }
         if (data_promise) {
             data_promise.then(function (received_data) {
@@ -7334,20 +7310,20 @@ var SimpleDataProvider = function (props) {
         data: data,
         setData: setData,
     };
-    return (React.createElement(SimpleDataContextProvider, { value: value }, props.children));
+    return (React__default.createElement(SimpleDataContextProvider, { value: value }, props.children));
 };
 SimpleDataProvider.propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-var ListStyled = material.styled(material.List)({
+var ListStyled = styled(List$1)({
     marginTop: '15px',
 });
 function LayerList(props) {
-    return React.createElement(ListStyled, null, props === null || props === void 0 ? void 0 : props.children);
+    return React__default.createElement(ListStyled, null, props === null || props === void 0 ? void 0 : props.children);
 }
 
-var IconButtonStyled = material.styled(material.IconButton)({
+var IconButtonStyled = styled(IconButton$1)({
     padding: '4px',
     marginTop: '-3px',
     background: 'none',
@@ -7369,7 +7345,7 @@ function LayerListItemFactory(props) {
         switch (layer.type) {
             case 'geojson':
                 if ((_e = layer.config) === null || _e === void 0 ? void 0 : _e.geojson) {
-                    (_f = mapHook.map) === null || _f === void 0 ? void 0 : _f.fitBounds(turf.bbox((_g = layer.config) === null || _g === void 0 ? void 0 : _g.geojson), props.fitBoundsOptions);
+                    (_f = mapHook.map) === null || _f === void 0 ? void 0 : _f.fitBounds(bbox((_g = layer.config) === null || _g === void 0 ? void 0 : _g.geojson), props.fitBoundsOptions);
                 }
                 else {
                     if (!layerSource) {
@@ -7383,7 +7359,7 @@ function LayerListItemFactory(props) {
                         (_j = mapHook.map) === null || _j === void 0 ? void 0 : _j.zoomTo(1);
                         _geojson.features = (_k = mapHook.map) === null || _k === void 0 ? void 0 : _k.querySourceFeatures(layerSource);
                     }
-                    _bbox = turf.bbox(_geojson);
+                    _bbox = bbox(_geojson);
                 }
                 break;
             case 'vt':
@@ -7399,7 +7375,7 @@ function LayerListItemFactory(props) {
             (_q = mapHook.map) === null || _q === void 0 ? void 0 : _q.fitBounds(_bbox, props.fitBoundsOptions);
         }
     }
-    var orderLayers = React.useMemo(function () {
+    var orderLayers = useMemo(function () {
         var layerIds = __spreadArray(__spreadArray([
             'order-background'
         ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
@@ -7407,59 +7383,59 @@ function LayerListItemFactory(props) {
         ], false);
         return layerIds.reverse();
     }, [layerContext.layers]);
-    var layers = React.useMemo(function () {
+    var layers = useMemo(function () {
         if (props.layers)
             return props.layers;
         if (layerContext === null || layerContext === void 0 ? void 0 : layerContext.layers)
             return layerContext.layers;
         return [];
     }, [props.layers, layerContext.layers]);
-    var setLayers = React.useMemo(function () {
+    var setLayers = useMemo(function () {
         if (props.setLayers)
             return props.setLayers;
         return layerContext.setLayers;
     }, [props.setLayers, layerContext.setLayers]);
-    var pointerSensor = core.useSensor(core.PointerSensor, {
+    var pointerSensor = useSensor(PointerSensor, {
         activationConstraint: {
             distance: 5,
         },
     });
-    var mouseSensor = core.useSensor(core.MouseSensor, {
+    var mouseSensor = useSensor(MouseSensor, {
         activationConstraint: {
             distance: 5,
         },
     });
-    var sensors = core.useSensors(mouseSensor, pointerSensor);
+    var sensors = 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.createElement(React.Fragment, null,
-        React.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.createElement(LayerListItem, { key: 'background_labels', layerComponent: React.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 (React__default.createElement(React__default.Fragment, null,
+        React__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.createElement(LayerListItem, { key: 'background_labels', layerComponent: React__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" })),
-        React.createElement(core.DndContext, { collisionDetection: core.closestCenter, sensors: sensors, onDragEnd: function (event) { return dragEnd(event); }, modifiers: [modifiers.restrictToVerticalAxis] },
-            React.createElement(sortable.SortableContext, { items: layers, strategy: sortable.verticalListSortingStrategy },
+        React__default.createElement(DndContext, { collisionDetection: closestCenter, sensors: sensors, onDragEnd: function (event) { return dragEnd(event); }, modifiers: [restrictToVerticalAxis] },
+            React__default.createElement(SortableContext, { items: layers, strategy: 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.createElement(LayerListItem, { key: layer.id, layerId: layer.id, sortable: props.sortable, name: (layer === null || layer === void 0 ? void 0 : layer.name) || ((_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.type) + ' layer' || 'unnamed layer', layerComponent: React.createElement(MlGeoJsonLayer, __assign({}, layer.config, { mapId: props === null || props === void 0 ? void 0 : props.mapId, layerId: layer.id, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx) })), buttons: React.createElement(React.Fragment, null,
-                                    React.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                            return (React__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.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.createElement(React__default.Fragment, null,
+                                    React__default.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
                                             layerContext.moveDown(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                    React.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                        React__default.createElement(ArrowCircleDown, null)),
+                                    React__default.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
                                             layerContext.moveUp(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                    React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
-                                        React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                        React__default.createElement(ArrowCircleUp, null)),
+                                    React__default.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                        React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
                                     return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                         var _layers = __spreadArray([], current, true);
                                         if (layerConfig === false) {
@@ -7472,8 +7448,8 @@ function LayerListItemFactory(props) {
                                     });
                                 }, configurable: true, showDeleteButton: true }));
                         case 'wms':
-                            return (React.createElement(React.Fragment, null,
-                                React.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) {
+                            return (React__default.createElement(React__default.Fragment, null,
+                                React__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) {
@@ -7495,30 +7471,30 @@ function LayerListItemFactory(props) {
                                             }
                                             return _layers;
                                         });
-                                    }, showDeleteButton: true, buttons: React.createElement(React.Fragment, null,
-                                        React.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
+                                    }, showDeleteButton: true, buttons: React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement(IconButtonStyled, { disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                        React.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
+                                            React__default.createElement(ArrowCircleDown, null)),
+                                        React__default.createElement(IconButtonStyled, { disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                        React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))) }))));
+                                            React__default.createElement(ArrowCircleUp, null)),
+                                        React__default.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                            React__default.createElement(CenterFocusWeak, null))) }))));
                         case 'vt':
-                            return (React.createElement(React.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
-                                React.createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || (layer === null || layer === void 0 ? void 0 : layer.type) + ' layer' || 'unnamed layer', layerComponent: React.createElement(MlVectorTileLayer, { layers: ((_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.layers) || [], key: layer.id, mapId: layer === null || layer === void 0 ? void 0 : layer.config.mapId, sourceOptions: (_d = layer === null || layer === void 0 ? void 0 : layer.config) === null || _d === void 0 ? void 0 : _d.sourceOptions, layerId: layer.id, url: (_e = layer === null || layer === void 0 ? void 0 : layer.config) === null || _e === void 0 ? void 0 : _e.url }), buttons: React.createElement(React.Fragment, null,
-                                        React.createElement(IconButtonStyled, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
+                            return (React__default.createElement(React__default.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
+                                React__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.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.createElement(React__default.Fragment, null,
+                                        React__default.createElement(IconButtonStyled, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
-                                        React.createElement(IconButtonStyled, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
+                                            React__default.createElement(ArrowCircleDown, null)),
+                                        React__default.createElement(IconButtonStyled, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
-                                        React.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                            React__default.createElement(ArrowCircleUp, null)),
+                                        React__default.createElement(IconButtonStyled, { onClick: function () { return fitLayer(layer); } },
+                                            React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
                                         return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                             var _layers = __spreadArray([], current, true);
                                             if (layerConfig === false) {
@@ -7534,7 +7510,7 @@ function LayerListItemFactory(props) {
                             return null;
                     }
                 }),
-                ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React.createElement(LayerListItem, { key: 'background_geometry', layerComponent: React.createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.backgroundLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-background' })), setLayerState: function (state) {
+                ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default.createElement(LayerListItem, { key: 'background_geometry', layerComponent: React__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" }))))));
 }
@@ -7548,81 +7524,81 @@ var types$1 = [
     'circle',
 ];
 function GeoJsonLayerForm(props) {
-    var _a = React.useState({ type: 'circle' }), config = _a[0], setConfig = _a[1];
-    var configIsValid = React.useMemo(function () {
+    var _a = React__default.useState({ type: 'circle' }), config = _a[0], setConfig = _a[1];
+    var configIsValid = useMemo(function () {
         if (!(config === null || config === void 0 ? void 0 : config.type) || !(config === null || config === void 0 ? void 0 : config.geojson))
             return false;
         return true;
     }, [config]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.DialogTitle, null, "GeoJSON layer"),
-        React.createElement(material.FormControl, { fullWidth: true },
-            React.createElement(material.InputLabel, { id: "type-label" }, "Type"),
-            React.createElement(material.Select, { labelId: "type-label", value: config.type, label: "Type", onChange: function (ev) {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DialogTitle$1, null, "GeoJSON layer"),
+        React__default.createElement(FormControl, { fullWidth: true },
+            React__default.createElement(InputLabel, { id: "type-label" }, "Type"),
+            React__default.createElement(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$1.map(function (type) { return (React.createElement(material.MenuItem, { key: type, value: type }, type)); }))),
-        React.createElement(material.FormControl, { fullWidth: true },
-            React.createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
+                } }, types$1.map(function (type) { return (React__default.createElement(MenuItem, { key: type, value: type }, type)); }))),
+        React__default.createElement(FormControl, { fullWidth: true },
+            React__default.createElement(Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
                 "Upload File",
-                React.createElement("input", { type: "file", hidden: true, onChange: function (ev) {
+                React__default.createElement("input", { type: "file", hidden: true, onChange: function (ev) {
                         var _a;
                         (_a = ev.target.files) === null || _a === void 0 ? void 0 : _a[0].text().then(function (data) {
                             return setConfig(function (current) { return (__assign(__assign({}, current), { geojson: JSON.parse(data) })); });
                         });
                     } }))),
-        React.createElement(material.DialogActions, null,
-            React.createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
-            React.createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+        React__default.createElement(DialogActions$1, null,
+            React__default.createElement(Button, { onClick: props.onCancel }, "Cancel"),
+            React__default.createElement(Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
 }
 
 var LayerTypeForm = function (props) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.DialogTitle, null, props.layerTypes.length > 1 ? "Select a layer type" : "Load new layer"),
-        React.createElement(material.List, null, props.layerTypes.map(function (type, idx) { return (React.createElement(material.ListItem, { disableGutters: true, key: idx },
-            React.createElement(material.ListItemButton, { autoFocus: true, onClick: function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DialogTitle$1, null, props.layerTypes.length > 1 ? "Select a layer type" : "Load new layer"),
+        React__default.createElement(List$1, null, props.layerTypes.map(function (type, idx) { return (React__default.createElement(ListItem$1, { disableGutters: true, key: idx },
+            React__default.createElement(ListItemButton, { autoFocus: true, onClick: function () {
                     props.onSelect(type);
                 } },
-                React.createElement(material.ListItemAvatar, null,
-                    React.createElement(material.Avatar, null,
-                        React.createElement(DynamicFeedIcon, null))),
-                React.createElement(material.ListItemText, { primary: type })))); }))));
+                React__default.createElement(ListItemAvatar, null,
+                    React__default.createElement(Avatar, null,
+                        React__default.createElement(DynamicFeedIcon, null))),
+                React__default.createElement(ListItemText$1, { primary: type })))); }))));
 };
 LayerTypeForm.defaultProps = {};
 
 function WmsLayerForm(props) {
-    var _a = React.useState({ url: '' }), config = _a[0], setConfig = _a[1];
-    var configIsValid = React.useMemo(function () {
+    var _a = React__default.useState({ url: '' }), config = _a[0], setConfig = _a[1];
+    var configIsValid = useMemo(function () {
         if (!(config === null || config === void 0 ? void 0 : config.url))
             return false;
         return true;
     }, [config]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.DialogTitle, null, "WMS layer"),
-        React.createElement(material.DialogContent, null,
-            React.createElement(material.FormControl, { fullWidth: true, sx: { marginTop: '10px' } },
-                React.createElement(material.InputLabel, { htmlFor: "wms-url-input" }, "WMS URL"),
-                React.createElement(material.OutlinedInput, { id: "wms-url-input", label: "WMS URL", value: config.url, onChange: function (ev) { return setConfig(__assign(__assign({}, config), { url: ev.target.value })); } }))),
-        React.createElement(material.DialogActions, null,
-            React.createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
-            React.createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DialogTitle$1, null, "WMS layer"),
+        React__default.createElement(DialogContent$1, null,
+            React__default.createElement(FormControl, { fullWidth: true, sx: { marginTop: '10px' } },
+                React__default.createElement(InputLabel, { htmlFor: "wms-url-input" }, "WMS URL"),
+                React__default.createElement(OutlinedInput, { id: "wms-url-input", label: "WMS URL", value: config.url, onChange: function (ev) { return setConfig(__assign(__assign({}, config), { url: ev.target.value })); } }))),
+        React__default.createElement(DialogActions$1, null,
+            React__default.createElement(Button, { onClick: props.onCancel }, "Cancel"),
+            React__default.createElement(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.createElement(React.Fragment, null,
-        React.createElement(material.Typography, null, " Options "),
-        React.createElement(material.Button, { onClick: function () { return setOpen(!open); } }, open ? React.createElement(IndeterminateCheckBoxIcon, null) : React.createElement(AddBoxIcon, null)),
-        React.createElement(material.List, null, open &&
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Typography, null, " Options "),
+        React__default.createElement(Button, { onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(IndeterminateCheckBoxIcon, null) : React__default.createElement(AddBoxIcon, null)),
+        React__default.createElement(List$1, null, open &&
             (optionFields$1 === null || optionFields$1 === void 0 ? void 0 : optionFields$1.map(function (el) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(material.ListItem, null,
-                        React.createElement(material.Typography, null,
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(ListItem$1, null,
+                        React__default.createElement(Typography, null,
                             " ",
                             el,
                             " ")),
-                    React.createElement(material.ListItem, null,
-                        React.createElement(material.TextField, { size: "small", onChange: function (ev) {
+                    React__default.createElement(ListItem$1, null,
+                        React__default.createElement(TextField, { size: "small", onChange: function (ev) {
                                 var newObject = {};
                                 newObject[el] = ev.target.value;
                                 props.setter(newObject);
@@ -7638,19 +7614,19 @@ var optionFields = [
     'suppressWay',
 ];
 function OsmOptionsFomular(props) {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Typography, null, " Options "),
-        React.createElement(material.Button, { onClick: function () { return setOpen(!open); } }, open ? React.createElement(IndeterminateCheckBoxIcon, null) : React.createElement(AddBoxIcon, null)),
-        React.createElement(material.List, null, open &&
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Typography, null, " Options "),
+        React__default.createElement(Button, { onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(IndeterminateCheckBoxIcon, null) : React__default.createElement(AddBoxIcon, null)),
+        React__default.createElement(List$1, null, open &&
             (optionFields === null || optionFields === void 0 ? void 0 : optionFields.map(function (el) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(material.ListItem, null,
-                        React.createElement(material.Typography, null,
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(ListItem$1, null,
+                        React__default.createElement(Typography, null,
                             " ",
                             el,
                             " "),
-                        React.createElement(material.Checkbox, { onChange: function (ev) {
+                        React__default.createElement(Checkbox, { onChange: function (ev) {
                                 var newObject = {};
                                 newObject[el] = ev.target.value === 'on' ? true : false;
                                 props.setter(newObject);
@@ -7669,17 +7645,17 @@ var handlers = {
 };
 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 _a = useState({ type: 'circle' }), config = _a[0], setConfig = _a[1];
+    var _b = useState(), fileName = _b[0], setFileName = _b[1];
+    var _c = useState(), filePath = _c[0], setFilePath = _c[1];
+    var _d = 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 () {
+    var configIsValid = useMemo(function () {
         if (!(config === null || config === void 0 ? void 0 : config.type))
             return false;
         if (filePath && fileName)
@@ -7687,7 +7663,7 @@ function ProtocolHandlerLayerForm(props) {
         else
             return false;
     }, [config, filePath, fileName]);
-    React.useEffect(function () {
+    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)))
@@ -7700,7 +7676,7 @@ function ProtocolHandlerLayerForm(props) {
         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 () {
+    useEffect(function () {
         var _a;
         if (filePath && fileName && ((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.getLayer(fileName))) {
             URL.revokeObjectURL(filePath);
@@ -7710,19 +7686,19 @@ function ProtocolHandlerLayerForm(props) {
         var newOptions = __assign(__assign({}, optionsObject), newObject);
         return setOptionsObject(newOptions);
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.DialogTitle, null,
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DialogTitle$1, null,
             "Layer from ",
             props.originType),
-        React.createElement(material.FormControl, { fullWidth: true },
-            React.createElement(material.InputLabel, { id: "type-label" }, "Type"),
-            React.createElement(material.Select, { labelId: "type-label", value: config.type, label: "Type", onChange: function (ev) {
+        React__default.createElement(FormControl, { fullWidth: true },
+            React__default.createElement(InputLabel, { id: "type-label" }, "Type"),
+            React__default.createElement(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.createElement(material.MenuItem, { key: type, value: type }, type)); }))),
-        React.createElement(material.FormControl, { fullWidth: true },
-            React.createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
+                } }, types.map(function (type) { return (React__default.createElement(MenuItem, { key: type, value: type }, type)); }))),
+        React__default.createElement(FormControl, { fullWidth: true },
+            React__default.createElement(Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
                 "Select origin file",
-                React.createElement("input", { type: "file", hidden: true, accept: props.originType, onChange: function (ev) {
+                React__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]) {
@@ -7730,11 +7706,11 @@ function ProtocolHandlerLayerForm(props) {
                             setFilePath(dataUrl);
                         }
                     } })),
-            props.originType === 'csv' && React.createElement(CSVOptionsFormular, { setter: addOption }),
-            props.originType === 'osm' && React.createElement(OsmOptionsFomular, { setter: addOption })),
-        React.createElement(material.DialogActions, null,
-            React.createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
-            React.createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+            props.originType === 'csv' && React__default.createElement(CSVOptionsFormular, { setter: addOption }),
+            props.originType === 'osm' && React__default.createElement(OsmOptionsFomular, { setter: addOption })),
+        React__default.createElement(DialogActions$1, null,
+            React__default.createElement(Button, { onClick: props.onCancel }, "Cancel"),
+            React__default.createElement(Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
 }
 
 var LayerSpecificationKeys = [
@@ -7748,16 +7724,16 @@ var LayerSpecificationKeys = [
     'options',
 ];
 function MbtilesLayerPropFormular(props) {
-    var _a = React.useState([]), layers = _a[0], setLayers = _a[1];
+    var _a = useState([]), layers = _a[0], setLayers = _a[1];
     var newLayer = {};
     var toJSON = ['paint', 'layout', 'options', 'metadata'];
-    React.useEffect(function () {
+    useEffect(function () {
         props.setter(layers);
     }, [layers]);
     var TextFields = function () {
-        return (React.createElement(React.Fragment, null, LayerSpecificationKeys.map(function (key) {
-            return (React.createElement(React.Fragment, { key: key + '_fragment' },
-                React.createElement(material.TextField, { label: key, onChange: function (ev) {
+        return (React__default.createElement(React__default.Fragment, null, LayerSpecificationKeys.map(function (key) {
+            return (React__default.createElement(React__default.Fragment, { key: key + '_fragment' },
+                React__default.createElement(TextField, { label: key, onChange: function (ev) {
                         return newLayer[key] = ev.target.value;
                     } })));
         })));
@@ -7782,22 +7758,22 @@ function MbtilesLayerPropFormular(props) {
             }
         });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.FormControl, { fullWidth: true },
-            React.createElement(TextFields, null)),
-        React.createElement(material.Button, { onClick: addLayer }, " Add")));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(FormControl, { fullWidth: true },
+            React__default.createElement(TextFields, null)),
+        React__default.createElement(Button, { onClick: addLayer }, " Add")));
 }
 
 function MbtilesLayerForm(props) {
-    var _a = React.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 _a = React__default.useState(props.config), config = _a[0], setConfig = _a[1];
+    var _b = useState(), fileName = _b[0], setFileName = _b[1];
+    var _c = useState(), filePath = _c[0], setFilePath = _c[1];
+    var _d = useState([]), layers = _d[0], setLayers = _d[1];
     var mapHook = useMap({ mapId: props.mapId });
-    var _e = React.useState(false), expanded = _e[0], setExpanded = _e[1];
+    var _e = useState(false), expanded = _e[0], setExpanded = _e[1];
     console.log(layers);
     var LayersToCall = function () {
-        return (React.createElement(React.Fragment, null, layers.map(function (el, idx) { return (React.createElement(material.Typography, { variant: "body2", key: idx },
+        return (React__default.createElement(React__default.Fragment, null, layers.map(function (el, idx) { return (React__default.createElement(Typography, { variant: "body2", key: idx },
             idx + 1,
             ": ",
             JSON.stringify(el))); })));
@@ -7814,12 +7790,12 @@ function MbtilesLayerForm(props) {
     *   layout: {},
     *   paint: { "fill-color": "#f9a5f5", "fill-opacity": 0.5 },
     */
-    var configIsValid = React.useMemo(function () {
+    var configIsValid = useMemo(function () {
         if (!fileName)
             return false;
         return true;
     }, [fileName]);
-    React.useEffect(function () {
+    useEffect(function () {
         if (typeof fileName !== 'undefined' && typeof filePath !== 'undefined') {
             setConfig({
                 url: 'mbtiles://' + filePath + '/{z}/{x}/{y}',
@@ -7833,12 +7809,12 @@ function MbtilesLayerForm(props) {
             });
         }
     }, [fileName, mapHook.map, filePath, layers]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.DialogTitle, null, " Layer from mbtiles file"),
-        React.createElement(material.DialogContent, null,
-            React.createElement(material.Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DialogTitle$1, null, " Layer from mbtiles file"),
+        React__default.createElement(DialogContent$1, null,
+            React__default.createElement(Button, { variant: "contained", component: "label", sx: { marginTop: '10px' } },
                 "Select origin file",
-                React.createElement("input", { type: "file", hidden: true, accept: props.originType, onChange: function (ev) {
+                React__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]) {
@@ -7846,21 +7822,21 @@ function MbtilesLayerForm(props) {
                             setFilePath(dataUrl);
                         }
                     } })),
-            React.createElement(material.Accordion, { expanded: expanded },
-                React.createElement(material.AccordionSummary, { "aria-controls": "panel1d-content", id: "panel1d-header" },
-                    React.createElement(material.Typography, null, "MB-Tile Layer properties"),
-                    React.createElement(material.Button, { onClick: function () { return setExpanded(!expanded); } }, expanded ? React.createElement(KeyboardArrowUpIcon, null) : React.createElement(KeyboardArrowDownIcon, null))),
-                React.createElement(material.Typography, { variant: "body1" }, " Layers"),
-                layers.length > 0 ? React.createElement(LayersToCall, null) : React.createElement(material.Typography, { variant: "body2" }, " 0 "),
-                React.createElement(MbtilesLayerPropFormular, { setter: setLayers }))),
-        React.createElement(material.DialogActions, null,
-            React.createElement(material.Button, { onClick: props.onCancel }, "Cancel"),
-            React.createElement(material.Button, { disabled: !configIsValid, onClick: function () { return props.onSubmit(config); } }, "Add"))));
+            React__default.createElement(Accordion, { expanded: expanded },
+                React__default.createElement(AccordionSummary, { "aria-controls": "panel1d-content", id: "panel1d-header" },
+                    React__default.createElement(Typography, null, "MB-Tile Layer properties"),
+                    React__default.createElement(Button, { onClick: function () { return setExpanded(!expanded); } }, expanded ? React__default.createElement(KeyboardArrowUpIcon, null) : React__default.createElement(KeyboardArrowDownIcon, null))),
+                React__default.createElement(Typography, { variant: "body1" }, " Layers"),
+                layers.length > 0 ? React__default.createElement(LayersToCall, null) : React__default.createElement(Typography, { variant: "body2" }, " 0 "),
+                React__default.createElement(MbtilesLayerPropFormular, { setter: setLayers }))),
+        React__default.createElement(DialogActions$1, null,
+            React__default.createElement(Button, { onClick: props.onCancel }, "Cancel"),
+            React__default.createElement(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 _a = useState(props === null || props === void 0 ? void 0 : props.config), layerConfig = _a[0], setLayerConfig = _a[1];
+    var _b = 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) {
@@ -7880,39 +7856,39 @@ var AddLayerPopup = function (props) {
         setLayerConfig(undefined);
     };
     var ProtocolTypeFormulars = function () {
-        return (React.createElement(React.Fragment, null, supportedProtocols.map(function (el, idx) {
-            return (React.createElement(React.Fragment, null, (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === el && (React.createElement(ProtocolHandlerLayerForm, { key: idx, originType: el, onSubmit: function (config) {
+        return (React__default.createElement(React__default.Fragment, null, supportedProtocols.map(function (el, idx) {
+            return (React__default.createElement(React__default.Fragment, null, (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === el && (React__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.createElement(material.Dialog, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
-        !(layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) && React.createElement(LayerTypeForm, { onSelect: updateLayerType, layerTypes: layerTypes }),
-        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === 'geojson' && (React.createElement(GeoJsonLayerForm, { onSubmit: function (config) {
+    return (React__default.createElement(Dialog$1, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
+        !(layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) && React__default.createElement(LayerTypeForm, { onSelect: updateLayerType, layerTypes: layerTypes }),
+        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'geojson' && originType === 'geojson' && (React__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();
             }, onCancel: handleCancel })),
-        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'wms' && (React.createElement(WmsLayerForm, { onSubmit: function (config) {
+        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'wms' && (React__default.createElement(WmsLayerForm, { 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();
             }, onCancel: handleCancel })),
-        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'vt' && originType !== undefined && (React.createElement(MbtilesLayerForm, { config: layerConfig, originType: originType, onSubmit: function (config) {
+        (layerConfig === null || layerConfig === void 0 ? void 0 : layerConfig.type) === 'vt' && originType !== undefined && (React__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.createElement(ProtocolTypeFormulars, { key: 'protocol' })));
+        React__default.createElement(ProtocolTypeFormulars, { key: 'protocol' })));
 };
 AddLayerPopup.defaultProps = {};
 
 var AddLayerButton = function (props) {
-    var _a = React.useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
+    var _a = React__default.useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
     var layerTypes = props.layerTypes || [
         'geojson',
         'wms',
@@ -7924,10 +7900,10 @@ var AddLayerButton = function (props) {
         'kml',
         'tcx',
     ];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
-            React.createElement(PlaylistAddIcon, null)),
-        React.createElement(AddLayerPopup, { open: popupOpen, setOpen: setPopupOpen, onComplete: props === null || props === void 0 ? void 0 : props.onComplete, layerTypes: layerTypes })));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
+            React__default.createElement(PlaylistAddIcon, null)),
+        React__default.createElement(AddLayerPopup, { open: popupOpen, setOpen: setPopupOpen, onComplete: props === null || props === void 0 ? void 0 : props.onComplete, layerTypes: layerTypes })));
 };
 AddLayerButton.defaultProps = {};
 
@@ -7936,40 +7912,40 @@ 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 theme = useTheme();
+    var _a = 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, { sx: {
+    return (React.createElement(AppBar, { sx: {
             minHeight: '62px',
             position: 'absolute',
             zIndex: 1300,
             top: 0,
         } },
-        React__namespace.createElement(Toolbar, { disableGutters: true },
-            props.logo || (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement(Box, { sx: {
+        React.createElement(Toolbar, { disableGutters: true },
+            props.logo || (React.createElement(React.Fragment, null,
+                React.createElement(Box$1, { 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, { sx: {
+                    React.createElement("img", { src: theme.palette.mode === 'dark' ? logoUrl_dark : logoUrl, style: { width: '100%', maxWidth: '250px' } })),
+                React.createElement(Box$1, { 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, { sx: { flexGrow: 1, display: { xs: 'flex' } } }, props.unmovableButtons),
-            props.buttons ? (React__namespace.createElement(Box, { sx: { flexGrow: 22, display: { xs: 'flex', sm: 'none' } } },
-                React__namespace.createElement(IconButton, { onClick: handleOpenNavMenu },
-                    React__namespace.createElement(MenuIcon, null)),
-                React__namespace.createElement(Menu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
+                    React.createElement("img", { src: logoUrl_mobile, width: "50px", height: "50px" })))),
+            React.createElement(Box$1, { sx: { flexGrow: 1, display: { xs: 'flex' } } }, props.unmovableButtons),
+            props.buttons ? (React.createElement(Box$1, { sx: { flexGrow: 22, display: { xs: 'flex', sm: 'none' } } },
+                React.createElement(IconButton, { onClick: handleOpenNavMenu },
+                    React.createElement(MenuIcon, null)),
+                React.createElement(Menu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
                         vertical: 'bottom',
                         horizontal: 'left',
                     }, keepMounted: true, transformOrigin: {
@@ -7984,16 +7960,16 @@ function TopToolbar(props) {
                     }, sx: {
                         display: { xs: 'block', sm: 'none' },
                     } },
-                    React__namespace.createElement(Box, { sx: { paddingLeft: '10px', paddingRight: '10px' }, onClick: handleCloseNavMenu }, props.buttons)))) : (''),
-            React__namespace.createElement(Box, { sx: { marginRight: '25px', display: { xs: 'none', sm: 'flex' } } }, props.buttons))));
+                    React.createElement(Box$1, { sx: { paddingLeft: '10px', paddingRight: '10px' }, onClick: handleCloseNavMenu }, props.buttons)))) : (''),
+            React.createElement(Box$1, { sx: { marginRight: '25px', display: { xs: 'none', sm: 'flex' } } }, props.buttons))));
 }
 
-var DrawerHeader = styles.styled('div')(function () { return ({
+var DrawerHeader = styled$2('div')(function () { return ({
     display: 'flex',
     alignItems: 'center',
 }); });
 var drawerBleeding = 56;
-var Puller = styles.styled(Box)(function (_a) {
+var Puller = styled$2(Box$1)(function (_a) {
     var theme = _a.theme;
     return ({
         width: 30,
@@ -8007,19 +7983,19 @@ var Puller = styles.styled(Box)(function (_a) {
 });
 function Sidebar(_a) {
     var drawerPaperProps = _a.drawerPaperProps, drawerHeaderProps = _a.drawerHeaderProps, setOpen = _a.setOpen, props = __rest(_a, ["drawerPaperProps", "drawerHeaderProps", "setOpen"]);
-    var mediaIsMobile = useMediaQuery(function (theme) { return theme.breakpoints.down('sm'); });
-    var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
-    return (React.createElement(React.Fragment, null,
-        !mediaIsMobile ? (React.createElement(Box, { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
-            React.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: { sm: '84px 20px 20px 20px', xs: '74px 10px 10px 10px' }, width: {
+    var mediaIsMobile = useMediaQuery$1(function (theme) { return theme.breakpoints.down('sm'); });
+    var _b = useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        !mediaIsMobile ? (React__default.createElement(Box$1, { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
+            React__default.createElement(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: { sm: '84px 20px 20px 20px', xs: '74px 10px 10px 10px' }, 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.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
-                    React.createElement(_.Typography, { variant: "h6" }, props.name),
-                    React.createElement(material.IconButton, { onClick: setOpen
+                React__default.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
+                    React__default.createElement(Typography$1, { variant: "h6" }, props.name),
+                    React__default.createElement(IconButton$1, { onClick: setOpen
                             ? function () {
                                 setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
                             }
@@ -8029,15 +8005,15 @@ function Sidebar(_a) {
                             position: 'absolute',
                             right: '20px',
                         } },
-                        React.createElement(CloseIcon, null))),
-                React.createElement(Box, null, props.children)))) : (React.createElement(Box, { sx: { display: { xs: 'flex', sm: 'none' } } },
-            React.createElement(react.Global, { styles: {
+                        React__default.createElement(CloseIcon, null))),
+                React__default.createElement(Box$1, null, props.children)))) : (React__default.createElement(Box$1, { sx: { display: { xs: 'flex', sm: 'none' } } },
+            React__default.createElement(Global, { styles: {
                     '.MuiDrawer-root > .MuiPaper-root': {
                         height: "calc(50% - ".concat(drawerBleeding, "px)"),
                         overflow: 'visible',
                     },
                 } }),
-            React.createElement(_.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
+            React__default.createElement(SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
                     ? function () {
                         setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
                     }
@@ -8055,7 +8031,7 @@ function Sidebar(_a) {
                         top: "calc(90%)",
                     },
                 } },
-                React.createElement(material.Paper, { sx: {
+                React__default.createElement(Paper$1, { sx: {
                         position: 'absolute',
                         top: -drawerBleeding,
                         borderTopLeftRadius: 8,
@@ -8064,9 +8040,9 @@ function Sidebar(_a) {
                         right: 0,
                         left: 0,
                     } },
-                    React.createElement(Puller, null),
-                    React.createElement(_.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
-                React.createElement(material.Paper, { sx: {
+                    React__default.createElement(Puller, null),
+                    React__default.createElement(Typography$1, { variant: "h6", sx: { p: '13px' } }, props.name)),
+                React__default.createElement(Paper$1, { sx: {
                         px: '15px',
                         pb: '15px',
                         height: '100%',
@@ -8077,7 +8053,7 @@ function Sidebar(_a) {
 }
 
 function UploadButton(props) {
-    var fileupload = React.useRef(null);
+    var fileupload = useRef(null);
     var fileUploadOnChange = function () {
         var _a, _b;
         if (!fileupload.current)
@@ -8103,10 +8079,10 @@ function UploadButton(props) {
             return;
         fileupload.current.click();
     };
-    return (React.createElement(React.Fragment, null,
-        props.buttonComponent ? (React.cloneElement(props.buttonComponent, { onClick: upload })) : (React.createElement(material.Button, { onClick: upload },
-            React.createElement(FileCopy, null))),
-        React.createElement("input", { ref: fileupload, onChange: fileUploadOnChange, type: "file", accept: props.accept, id: "input", multiple: true, style: { display: 'none' } })));
+    return (React__default.createElement(React__default.Fragment, null,
+        props.buttonComponent ? (React__default.cloneElement(props.buttonComponent, { onClick: upload })) : (React__default.createElement(Button, { onClick: upload },
+            React__default.createElement(FileCopy, null))),
+        React__default.createElement("input", { ref: fileupload, onChange: fileUploadOnChange, type: "file", accept: props.accept, id: "input", multiple: true, style: { display: 'none' } })));
 }
 
 var SelectStylePopup = function (props) {
@@ -8114,18 +8090,18 @@ var SelectStylePopup = function (props) {
     var handleCancel = function () {
         props.setOpen(false);
     };
-    return (React.createElement(material.Dialog, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
-        React.createElement(material.DialogTitle, null, "Select a style"),
-        React.createElement(material.List, null, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.map(function (style) {
+    return (React__default.createElement(Dialog$1, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
+        React__default.createElement(DialogTitle$1, null, "Select a style"),
+        React__default.createElement(List$1, null, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.map(function (style) {
             var _a;
-            return (React.createElement(material.ListItem, { disableGutters: true, key: style.name },
-                React.createElement(material.ListItemButton, { autoFocus: true, onClick: function () {
+            return (React__default.createElement(ListItem$1, { disableGutters: true, key: style.name },
+                React__default.createElement(ListItemButton, { autoFocus: true, onClick: function () {
                         var _a;
                         (_a = props === null || props === void 0 ? void 0 : props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, style);
                     } },
-                    React.createElement(material.ListItemAvatar, null,
-                        React.createElement(material.Avatar, { sx: { width: '50px', height: '50px' }, alt: style.name, src: (style === null || style === void 0 ? void 0 : style.name) && ((_a = props === null || props === void 0 ? void 0 : props.styleThumbnailPaths) === null || _a === void 0 ? void 0 : _a[style.name]) })),
-                    React.createElement(material.ListItemText, { primary: style.name }))));
+                    React__default.createElement(ListItemAvatar, null,
+                        React__default.createElement(Avatar, { sx: { width: '50px', height: '50px' }, alt: style.name, src: (style === null || style === void 0 ? void 0 : style.name) && ((_a = props === null || props === void 0 ? void 0 : props.styleThumbnailPaths) === null || _a === void 0 ? void 0 : _a[style.name]) })),
+                    React__default.createElement(ListItemText$1, { primary: style.name }))));
         }))));
 };
 SelectStylePopup.defaultProps = {
@@ -20894,12 +20870,12 @@ var GruvboxStyle = {
 
 var defaultStyleThumbnailPath = 'https://mapcomponents.github.io/react-map-components-maplibre/assets/style_thumbnails/';
 var SelectStyleButton = function (props) {
-    var layerContext = React.useContext(LayerContext);
-    var _a = React.useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
-            React.createElement(WallpaperIcon, null)),
-        React.createElement(SelectStylePopup, { styles: __spreadArray(__spreadArray([], (props.defaultStyles
+    var layerContext = React__default.useContext(LayerContext);
+    var _a = React__default.useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
+            React__default.createElement(WallpaperIcon, null)),
+        React__default.createElement(SelectStylePopup, { styles: __spreadArray(__spreadArray([], (props.defaultStyles
                 ? [MonokaiStyle, SolarizedStyle, OceanicNextStyle, MedievalKingdomStyle, GruvboxStyle]
                 : []), true), (props.styles || []), true), styleThumbnailPaths: __assign(__assign({}, props === null || props === void 0 ? void 0 : props.styleThumbnailPaths), (props.defaultStyles
                 ? {
@@ -20924,23 +20900,23 @@ SelectStyleButton.defaultProps = {
 };
 
 var actions = [
-    { icon: React.createElement(PictureAsPdfIcon, null), name: 'Create PDF' },
-    { icon: React.createElement(DesignServicesIcon, null), name: 'Sketch' },
-    { icon: React.createElement(LayersIcon, null), name: 'Layers' },
-    { icon: React.createElement(WallpaperIcon, null), name: 'Background' },
+    { icon: React__default.createElement(PictureAsPdfIcon, null), name: 'Create PDF' },
+    { icon: React__default.createElement(DesignServicesIcon, null), name: 'Sketch' },
+    { icon: React__default.createElement(LayersIcon, null), name: 'Layers' },
+    { icon: React__default.createElement(WallpaperIcon, null), name: 'Background' },
 ];
 /*
  * SpeedDial Button, which opens up options for Background, Layers, Sketch and Create PDF
  */
 var SpeedDial = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
     var handleOpen = function (_event, reason) {
         if (reason === 'toggle') {
             setOpen(true);
         }
     };
     var handleClose = function () { return setOpen(false); };
-    return (React.createElement(Box, { sx: {
+    return (React__default.createElement(Box$1, { sx: {
             height: 330,
             transform: 'translateZ(0px)',
             flexGrow: 1,
@@ -20950,101 +20926,11 @@ var SpeedDial = function () {
             width: '100px',
             zIndex: '1000',
         } },
-        React.createElement(MuiSpeedDial, { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React.createElement(CloseIcon, { fontSize: "large" }) : React.createElement(MoreVertIcon, { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React.createElement(SpeedDialAction, { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: 'text.primary' } } })); }))));
+        React__default.createElement(MuiSpeedDial, { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default.createElement(CloseIcon, { fontSize: "large" }) : React__default.createElement(MoreVertIcon, { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default.createElement(SpeedDialAction, { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: 'text.primary' } } })); }))));
 };
 SpeedDial.defaultProps = {
     mapId: undefined,
 };
 
-exports.AddLayerButton = AddLayerButton;
-exports.AddLayerPopup = AddLayerPopup;
-exports.CSVProtocolHandler = CSVProtocolHandler;
-exports.ColorPicker = PaintPropsColorPicker;
-exports.ConfirmDialog = ConfirmDialog;
-exports.GeoJsonContext = GeoJsonContext;
-exports.GeoJsonLayerForm = GeoJsonLayerForm;
-exports.GeoJsonProvider = GeoJsonProvider;
-exports.GruvboxStyle = GruvboxStyle;
-exports.LayerContext = LayerContext;
-exports.LayerContextProvider = LayerContextProvider;
-exports.LayerList = LayerList;
-exports.LayerListFolder = LayerListFolder;
-exports.LayerListItem = LayerListItem;
-exports.LayerListItemFactory = LayerListItemFactory;
-exports.LayerListItemVectorLayer = LayerListItemVectorLayer;
-exports.LayerPropertyForm = LayerPropertyForm;
-exports.LayerTypeForm = LayerTypeForm;
-exports.MapComponentsProvider = MapComponentsProvider;
-exports.MapContext = MapContext;
-exports.MapLibreGlWrapper = MapLibreGlWrapper;
-exports.MapLibreMap = MapLibreMap;
-exports.MedievalKingdomStyle = MedievalKingdomStyle;
-exports.MlCenterPosition = MlCenterPosition;
-exports.MlComponentTemplate = MlComponentTemplate;
-exports.MlCreatePdfButton = MlCreatePdfButton;
-exports.MlCreatePdfForm = MlCreatePdfForm;
-exports.MlFeatureEditor = MlFeatureEditor;
-exports.MlFillExtrusionLayer = MlFillExtrusionLayer;
-exports.MlFollowGps = MlFollowGps;
-exports.MlGeoJsonLayer = MlGeoJsonLayer;
-exports.MlGpxViewer = MlGpxViewer;
-exports.MlImageMarkerLayer = MlImageMarkerLayer;
-exports.MlLayer = MlLayer;
-exports.MlLayerMagnify = MlLayerMagnify;
-exports.MlLayerSwipe = MlLayerSwipe;
-exports.MlMarker = MlMarker;
-exports.MlMeasureTool = MlMeasureTool;
-exports.MlNavigationCompass = MlNavigationCompass;
-exports.MlNavigationTools = MlNavigationTools;
-exports.MlOrderLayers = MlOrderLayers;
-exports.MlPdfPreview = PdfPreview;
-exports.MlScaleReference = MlScaleReference;
-exports.MlShareMapState = MlShareMapState;
-exports.MlSketchTool = MlSketchTool;
-exports.MlSpatialElevationProfile = MlSpatialElevationProfile;
-exports.MlTemporalController = MlTemporalController;
-exports.MlTerrainLayer = MlTerrainLayer;
-exports.MlTransitionGeoJsonLayer = MlTransitionGeoJsonLayer;
-exports.MlVectorTileLayer = MlVectorTileLayer;
-exports.MlWmsFeatureInfoPopup = MlWmsFeatureInfoPopup;
-exports.MlWmsLayer = MlWmsLayer;
-exports.MlWmsLoader = MlWmsLoader;
-exports.MonokaiStyle = MonokaiStyle;
-exports.OSMProtocolHandler = OSMProtocolHandler;
-exports.OceanicNextStyle = OceanicNextStyle;
-exports.PdfContext = PdfContext;
-exports.PdfForm = PdfForm;
-exports.SelectStyleButton = SelectStyleButton;
-exports.SelectStylePopup = SelectStylePopup;
-exports.Sidebar = Sidebar;
-exports.SimpleDataContext = SimpleDataContext;
-exports.SimpleDataProvider = SimpleDataProvider;
-exports.SolarizedStyle = SolarizedStyle;
-exports.SpeedDial = SpeedDial;
-exports.TopToolbar = TopToolbar;
-exports.TopojsonProtocolHandler = TopojsonProtocolHandler;
-exports.UploadButton = UploadButton;
-exports.WmsLayerForm = WmsLayerForm;
-exports.XMLProtocolHandler = XMLProtocolHandler;
-exports.convertCsv = convertCsv;
-exports.convertOSM = convertOSM;
-exports.convertTopojson = convertTopojson;
-exports.convertXML = convertXML;
-exports.getTheme = getTheme;
-exports.useAddImage = useAddImage;
-exports.useAddProtocol = useAddProtocol;
-exports.useCameraFollowPath = useCameraFollowPath;
-exports.useExportMap = useExportMap;
-exports.useFeatureEditor = useFeatureEditor;
-exports.useFilterData = useFilterData;
-exports.useGpx = useGpx;
-exports.useLayer = useLayer;
-exports.useLayerContext = useLayerContext;
-exports.useLayerEvent = useLayerEvent;
-exports.useLayerFilter = useLayerFilter;
-exports.useLayerHoverPopup = LayerHoverPopup;
-exports.useMap = useMap;
-exports.useMapState = useMapState;
-exports.useSource = useSource;
-exports.useWms = useWms;
+export { AddLayerButton, AddLayerPopup, CSVProtocolHandler, PaintPropsColorPicker as ColorPicker, ConfirmDialog, GeoJsonContext, GeoJsonLayerForm, GeoJsonProvider, GruvboxStyle, LayerContext, LayerContextProvider, LayerList, LayerListFolder, LayerListItem, LayerListItemFactory, LayerListItemVectorLayer, LayerPropertyForm, LayerTypeForm, MapComponentsProvider, MapContext, MapLibreGlWrapper, MapLibreMap, MedievalKingdomStyle, MlCenterPosition, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGeoJsonLayer, MlGpxViewer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOrderLayers, PdfPreview as MlPdfPreview, MlScaleReference, MlShareMapState, MlSketchTool, MlSpatialElevationProfile, MlTemporalController, MlTerrainLayer, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsFeatureInfoPopup, MlWmsLayer, MlWmsLoader, MonokaiStyle, OSMProtocolHandler, OceanicNextStyle, PdfContext, PdfForm, SelectStyleButton, SelectStylePopup, Sidebar, SimpleDataContext, SimpleDataProvider, SolarizedStyle, SpeedDial, TopToolbar, TopojsonProtocolHandler, UploadButton, WmsLayerForm, XMLProtocolHandler, convertCsv, convertOSM, convertTopojson, convertXML, getTheme, useAddImage, useAddProtocol, useCameraFollowPath, useExportMap, useFeatureEditor, useFilterData, useGpx, useLayer, useLayerContext, useLayerEvent, useLayerFilter, LayerHoverPopup as useLayerHoverPopup, useMap, useMapState, useSource, useWms };
 //# sourceMappingURL=index.esm.js.map