@mapcomponents/react-maplibre 1.3.2 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [v1.3.2]
+
+## Changed
+- f2980b6: Design/navigation tool (#225)
+- 570987e: Upgrade to maplibre to 5.6.0 (from 5.5.0)
+
 ## [v1.3.1]
 
 ## Changed

package/dist/index.cjs.js

@@ -37,9 +37,10 @@ var CloseIcon = require('@mui/icons-material/Close');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var react = require('@emotion/react');
 var ButtonGroup = require('@mui/material/ButtonGroup');
-var ControlPointIcon = require('@mui/icons-material/ControlPoint');
-var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
-var Divider = require('@mui/material/Divider');
+var AddIcon = require('@mui/icons-material/Add');
+var RemoveIcon = require('@mui/icons-material/Remove');
+var MapIcon = require('@mui/icons-material/Map');
+var PublicIcon = require('@mui/icons-material/Public');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
 var xmldom = require('@xmldom/xmldom');
 var helpers = require('@turf/helpers');
@@ -769,7 +770,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',
@@ -793,10 +794,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: {
@@ -1334,9 +1335,14 @@ var MlCenterPosition = function (props) {
         setLocationAccessDenied(true);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(material.Button, { variant: "navtools", sx: {
-                zIndex: 1002,
-                color: !locationAccessDenied ? props.onColor : props.offColor,
+        React.createElement(material.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.createElement(FilterCenterFocusIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))));
 };
@@ -3968,6 +3974,46 @@ var MlNavigationCompass = function (props) {
                         } }))))));
 };
 
+/**
+ * Projection component that displays the map as a globe or as a mercator projection.
+ * @component
+ */
+var GlobeButtonStyled = material.styled(material.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 = React.useState(props.mode || 'mercator'), projection = _a[0], setProjection = _a[1];
+    React.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.createElement(React.Fragment, null,
+        React.createElement(GlobeButtonStyled, { variant: "navtools", onClick: handleClick, style: props.style }, projection === 'globe' ? (React.createElement(PublicIcon, { "data-testid": "PublicIcon", sx: { fontSize: { xs: '1.4em', md: '1em' } } })) : (React.createElement(MapIcon, { "data-testid": "MapIcon", sx: { fontSize: { xs: '1.4em', md: '1em' } } })))));
+};
+MlGlobeButton.defaultProps = {
+    mapId: undefined,
+    mode: 'mercator',
+};
+
 /**
  * @component
  */
@@ -3978,6 +4024,7 @@ var MlNavigationTools = function (props) {
     });
     var _a = React.useState(0), pitch = _a[0], setPitch = _a[1];
     var mediaIsMobile = useMediaQuery(function (theme) { return theme.breakpoints.down('md'); });
+    var theme = material.useTheme();
     React.useEffect(function () {
         if (!mapHook.map)
             return;
@@ -4007,24 +4054,40 @@ var MlNavigationTools = function (props) {
     }, [mapHook.map]);
     return (React.createElement(Box, { 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.createElement(MlNavigationCompass, null),
-        props.show3DButton && (React.createElement(Button, { variant: "navtools", onClick: adjustPitch }, pitch < 29 ? '3D' : '2D')),
+        props.show3DButton && (React.createElement(Button, { variant: "navtools", onClick: adjustPitch, sx: { color: function (theme) { return theme.palette.navigation.buttonColor; } } }, pitch < 29 ? '2D' : '3D')),
+        props.showGlobeButton && React.createElement(MlGlobeButton, null),
         props.showFollowGpsButton && React.createElement(MlFollowGps, null),
         props.showCenterLocationButton && React.createElement(MlCenterPosition, null),
         React.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.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' } } }))))),
+            React.createElement(Button, { variant: "navtools", onClick: zoomIn, sx: {
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    position: 'relative',
+                } },
+                React.createElement(AddIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } })),
+            React.createElement(material.Paper, { sx: {
+                    backgroundColor: '#fff',
+                } },
+                React.createElement(material.Divider, { sx: {
+                        marginLeft: '6px',
+                        marginRight: '6px',
+                    } })),
+            React.createElement(Button, { variant: "navtools", onClick: zoomOut, sx: {
+                    margin: 0,
+                    borderTopLeftRadius: 0,
+                    borderTopRightRadius: 0,
+                } },
+                React.createElement(RemoveIcon, { sx: { fontSize: { xs: '1.4em', md: '1em' } } }))))),
         props.children && React.cloneElement(props.children, {})));
 };
 MlNavigationTools.defaultProps = {
     mapId: undefined,
     show3DButton: true,
+    showGlobeButton: false,
     showFollowGpsButton: true,
     showCenterLocationButton: false,
     showZoomButtons: true,