@mapcomponents/react-maplibre 1.3.1 → 1.3.3

package/dist/index.esm.js

@@ -1,10 +1,10 @@
 import maplibregl, { Map, Popup } from 'maplibre-gl';
 import * as React from 'react';
 import React__default, { useMemo, useEffect, useCallback, useState, useRef, useContext, Fragment } from 'react';
-import { createTheme, ThemeProvider, styled as styled$2, useTheme } from '@mui/material/styles';
+import { createTheme, ThemeProvider, styled as styled$2, useTheme as useTheme$1 } from '@mui/material/styles';
 import { v4 } from 'uuid';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, Snackbar, FormGroup, 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 { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, useTheme, Divider, Snackbar, FormGroup, 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';
@@ -37,9 +37,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import useMediaQuery$1 from '@mui/material/useMediaQuery';
 import { Global } from '@emotion/react';
 import ButtonGroup from '@mui/material/ButtonGroup';
-import ControlPointIcon from '@mui/icons-material/ControlPoint';
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import Divider from '@mui/material/Divider';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import MapIcon from '@mui/icons-material/Map';
+import PublicIcon from '@mui/icons-material/Public';
 import syncMove from '@mapbox/mapbox-gl-sync-move';
 import * as xmldom from '@xmldom/xmldom';
 import { featureCollection as featureCollection$1, lineString, polygon } from '@turf/helpers';
@@ -745,7 +746,7 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
                 contrast: '#000',
             },
             topToolbar: { barColor: '#000' },
-            navigation: { navColor: '#313131', navHover: '#747577' },
+            navigation: { buttonColor: '#fff', navColor: '#313131', navHover: '#747577' },
             GPS: {
                 GPSActiveColor: '#fff',
                 GPSInactiveColor: '#fff',
@@ -769,10 +770,10 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
                 contrast: '#fff',
             },
             topToolbar: { barColor: '#fff' },
-            navigation: { navColor: '#fff', navHover: '#f5f5f5' },
+            navigation: { buttonColor: '#747577', navColor: '#fff', navHover: '#f5f5f5' },
             GPS: {
                 GPSActiveColor: '#009EE0',
-                GPSInactiveColor: '#000',
+                GPSInactiveColor: '#747577',
                 GPSActiveBackgroundColor: '#fff',
             },
             compass: {
@@ -1310,9 +1311,14 @@ var MlCenterPosition = function (props) {
         setLocationAccessDenied(true);
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Button, { variant: "navtools", sx: {
-                zIndex: 1002,
-                color: !locationAccessDenied ? props.onColor : props.offColor,
+        React__default.createElement(Button, { variant: "navtools", sx: function (theme) {
+                var _a, _b;
+                return ({
+                    zIndex: 1002,
+                    color: !locationAccessDenied
+                        ? ((_a = props.onColor) !== null && _a !== void 0 ? _a : theme.palette.navigation.buttonColor)
+                        : ((_b = props.offColor) !== null && _b !== void 0 ? _b : theme.palette.navigation.buttonColor),
+                });
             }, onClick: centerCurrentLocation, disabled: locationAccessDenied },
             React__default.createElement(FilterCenterFocusIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
 };
@@ -3944,6 +3950,46 @@ var MlNavigationCompass = function (props) {
                         } }))))));
 };
 
+/**
+ * Projection component that displays the map as a globe or as a mercator projection.
+ * @component
+ */
+var GlobeButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        zIndex: 1000,
+        color: theme.palette.navigation.buttonColor,
+        transform: 'scale(1)',
+    });
+});
+var MlGlobeButton = function (props) {
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    var _a = useState(props.mode || 'mercator'), projection = _a[0], setProjection = _a[1];
+    useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        var current = (_d = (_c = (_a = mapHook.map) === null || _a === void 0 ? void 0 : (_b = _a.map).getProjection) === null || _c === void 0 ? void 0 : _c.call(_b)) === null || _d === void 0 ? void 0 : _d.type;
+        if (current !== projection) {
+            (_e = mapHook.map) === null || _e === void 0 ? void 0 : _e.setProjection({ type: projection });
+        }
+    }, [mapHook.map]);
+    var handleClick = function () {
+        if (!mapHook.map)
+            return;
+        var next = projection === 'globe' ? 'mercator' : 'globe';
+        mapHook.map.setProjection({ type: next });
+        setProjection(next);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(GlobeButtonStyled, { variant: "navtools", onClick: handleClick, style: props.style }, projection === 'globe' ? (React__default.createElement(PublicIcon, { "data-testid": "PublicIcon", sx: { fontSize: { xs: '1.4em', md: '1em' } } })) : (React__default.createElement(MapIcon, { "data-testid": "MapIcon", sx: { fontSize: { xs: '1.4em', md: '1em' } } })))));
+};
+MlGlobeButton.defaultProps = {
+    mapId: undefined,
+    mode: 'mercator',
+};
+
 /**
  * @component
  */
@@ -3954,6 +4000,7 @@ var MlNavigationTools = function (props) {
     });
     var _a = useState(0), pitch = _a[0], setPitch = _a[1];
     var mediaIsMobile = useMediaQuery$1(function (theme) { return theme.breakpoints.down('md'); });
+    var theme = useTheme();
     useEffect(function () {
         if (!mapHook.map)
             return;
@@ -3983,24 +4030,40 @@ var MlNavigationTools = function (props) {
     }, [mapHook.map]);
     return (React__default.createElement(Box$2, { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '40px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
         React__default.createElement(MlNavigationCompass, null),
-        props.show3DButton && (React__default.createElement(Button$1, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
+        props.show3DButton && (React__default.createElement(Button$1, { variant: "navtools", onClick: adjustPitch, sx: { color: function (theme) { return theme.palette.navigation.buttonColor; } } }, pitch < 29 ? '2D' : '3D')),
+        props.showGlobeButton && React__default.createElement(MlGlobeButton, null),
         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: { minWidth: '20px !important', color: theme.palette.navigation.buttonColor },
                 'Button:hover': { border: 'none' },
             } }, 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' } } }))))),
+            React__default.createElement(Button$1, { variant: "navtools", onClick: zoomIn, sx: {
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    position: 'relative',
+                } },
+                React__default.createElement(AddIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
+            React__default.createElement(Paper, { sx: {
+                    backgroundColor: '#fff',
+                } },
+                React__default.createElement(Divider, { sx: {
+                        marginLeft: '6px',
+                        marginRight: '6px',
+                    } })),
+            React__default.createElement(Button$1, { variant: "navtools", onClick: zoomOut, sx: {
+                    margin: 0,
+                    borderTopLeftRadius: 0,
+                    borderTopRightRadius: 0,
+                } },
+                React__default.createElement(RemoveIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
         props.children && React__default.cloneElement(props.children, {})));
 };
 MlNavigationTools.defaultProps = {
     mapId: undefined,
     show3DButton: true,
+    showGlobeButton: false,
     showFollowGpsButton: true,
     showCenterLocationButton: false,
     showZoomButtons: true,
@@ -6812,7 +6875,7 @@ var MlTemporalController = function (props) {
         initialVal: props.initialVal,
         mapId: props.mapId,
     }), filteredData = _d.filteredData, minVal = _d.minVal, maxVal = _d.maxVal;
-    var theme = useTheme();
+    var theme = useTheme$1();
     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;
@@ -8440,7 +8503,7 @@ 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 = useTheme();
+    var theme = useTheme$1();
     var _a = useState(null), anchorElNav = _a[0], setAnchorElNav = _a[1];
     var handleOpenNavMenu = function (event) {
         setAnchorElNav(event.currentTarget);