sweet lander

packages/client/src/components/landing-component/Map.tsx

@@ -3,6 +3,8 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import { Box, HStack, Button, Input, Center } from '@chakra-ui/react';
 import { useState, useEffect, useCallback } from 'react';
 
+import MapNext from './MapNext.tsx';
+
 // Types for bevy_flurx_ipc communication
 interface GpsPosition {
   latitude: number;
@@ -33,64 +35,27 @@ const key =
   'cGsuZXlKMUlqb2laMlZ2Wm1aelpXVWlMQ0poSWpvaVkycDFOalo0YkdWNk1EUTRjRE41YjJnNFp6VjNNelp6YXlKOS56LUtzS1l0X3VGUGdCSDYwQUFBNFNn';
 
 function Map(props: { visible: boolean }) {
-  const [mapboxToken, setMapboxToken] = useState(atob(key));
-  const [isTokenLoading, setIsTokenLoading] = useState(false);
-  const [authenticated, setAuthenticated] = useState(false);
-
-  useEffect(() => {
-    setAuthenticated(true);
-    setIsTokenLoading(false);
-  }, []);
-
-  const [mapView, setMapView] = useState({
-    longitude: -122.4,
-    latitude: 37.8,
-    zoom: 14,
-  });
-
-  const handleNavigationClick = useCallback(async () => {
-    console.log('handling navigation in map');
-  }, []);
-
-  const handleSearchClick = useCallback(async () => {
-    console.log('handling click search in map');
-  }, []);
-
-  const handleMapViewChange = useCallback(async (evt: any) => {
-    const { longitude, latitude, zoom } = evt.viewState;
-    setMapView({ longitude, latitude, zoom });
-  }, []);
-
   return (
-    <Box
-      p={4}
-      height="80%"
-      width="100%"
-      position="relative"
-      display={props.visible ? undefined : 'none'}
-    >
-      <Box width={'100%'} height={'100%'} position="relative" zIndex={0}>
-        {/* Map itself */}
-        {authenticated && (
-          <ReactMap
-            mapboxAccessToken={mapboxToken}
-            initialViewState={mapView}
-            onMove={handleMapViewChange}
-            mapStyle="mapbox://styles/mapbox/dark-v11"
-            attributionControl={false}
-            style={{ width: '100%', height: '100%' }} // let the wrapper dictate size
-          />
-        )}
-      </Box>
+    /* Full-screen wrapper — fills the viewport and becomes the positioning context */
+    <Box w="100%" h="100vh" position="relative" overflow="hidden">
       {/* Button bar — absolutely positioned inside the wrapper */}
-      <HStack position="relative" top={1} right={4} zIndex={1} justify={'right'}>
-        <Button size="sm" variant="solid" onClick={handleNavigationClick}>
-          Navigation
-        </Button>
-        <Button size="sm" variant="solid" onClick={handleSearchClick}>
-          Search
-        </Button>
-      </HStack>
+
+      <MapNext mapboxPublicKey={atob(key)} />
+      {/*<Map*/}
+      {/*    mapboxAccessToken={atob(key)}*/}
+      {/*    initialViewState={mapView}*/}
+      {/*    onMove={handleMapViewChange}*/}
+      {/*    mapStyle="mapbox://styles/mapbox/dark-v11"*/}
+      {/*    reuseMaps*/}
+      {/*    attributionControl={false}*/}
+      {/*    style={{width: '100%', height: '100%'}}  // let the wrapper dictate size*/}
+      {/*>*/}
+      {/*    /!*{vesselPosition && (*!/*/}
+      {/*    /!*    <Source id="vessel-data" type="geojson" data={vesselGeojson}>*!/*/}
+      {/*    /!*        <Layer {...vesselLayerStyle} />*!/*/}
+      {/*    /!*    </Source>*!/*/}
+      {/*    /!*)}*!/*/}
+      {/*</Map>*/}
     </Box>
   );
 }