Add useEffect to zoom out of map when showGlobeButton is true

Author: lenaghub

src/components/MlGlobeButton/MlGlobeButton.tsx

@@ -18,6 +18,10 @@ export interface MlGlobeButtonProps {
 	 * Style object to adjust css definitions of the component.
 	 */
 	style?: CSSProperties;
+	/**
+	 * Initial projection mode of the map.
+	 */
+	mode?: 'globe' | 'mercator';
 }
 
 /**
@@ -37,19 +41,19 @@ const MlGlobeButton = (props: MlGlobeButtonProps) => {
 		waitForLayer: props.insertBeforeLayer,
 	});
 
-	const [projection, setProjection] = useState<'globe' | 'mercator'>('mercator');
+	const [projection, setProjection] = useState<'globe' | 'mercator'>(props.mode || 'mercator');
 
 	useEffect(() => {
 		const current = mapHook.map?.map.getProjection?.()?.type;
-		if (current === 'globe' || current === 'mercator') {
-			setProjection(current);
+		if (current !== projection) {
+			mapHook.map?.setProjection({ type: projection });
 		}
 	}, [mapHook.map]);
 
 	const handleClick = () => {
 		if (!mapHook.map) return;
 		const next = projection === 'globe' ? 'mercator' : 'globe';
-		mapHook.map.map.setProjection({ type: next });
+		mapHook.map.setProjection({ type: next });
 		setProjection(next);
 	};
 
@@ -68,5 +72,6 @@ const MlGlobeButton = (props: MlGlobeButtonProps) => {
 
 MlGlobeButton.defaultProps = {
 	mapId: undefined,
+	mode: 'mercator',
 };
 export default MlGlobeButton;

src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -106,6 +106,12 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
 		mapHook.map.easeTo({ pitch: targetPitch });
 	}, [mapHook.map]);
 
+	useEffect(() => {
+		if (props.showGlobeButton && mapHook.map) {
+			mapHook.map.easeTo({ zoom: 2 });
+		}
+	}, [props.showGlobeButton, mapHook.map]);
+
 	return (
 		<Box
 			sx={{
@@ -129,7 +135,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
 					{pitch < 29 ? '2D' : '3D'}
 				</Button>
 			)}
-			{props.showGlobeButton && <MlGlobeButton />}
+			{props.showGlobeButton && <MlGlobeButton mode="globe" />}
 			{props.showFollowGpsButton && <MlFollowGps />}
 			{props.showCenterLocationButton && <MlCenterPosition />}
 			<ButtonGroup