populate webview with react-map-gl (#5)

* webview displays in gps map with wry, happy 4th, boom boom

* gps-map is webview with html

* Add initial setup for `base-map` package

- Include `.gitignore` for package-specific files and logs.
- Implement a basic interactive Mapbox map with Chakra UI layout.
- Add token storage and retrieval mechanism using `js-cookie`.
- Initialize `bun.lock` with dependencies.

* "Replace static GPS map with dynamically built base-map package integration and update related paths and scripts"

* fix wasm32 builds

---------

Co-authored-by: geoffsee <>

packages/base-map/src/App.tsx

@@ -0,0 +1,58 @@
+import Map from 'react-map-gl/mapbox';          // ↔ v5+ uses this import path
+import 'mapbox-gl/dist/mapbox-gl.css';
+import {Box, HStack, Button, Input} from '@chakra-ui/react';
+import {useState, useEffect} from 'react';
+import Cookies from 'js-cookie';
+
+function App() {
+    const [mapboxToken, setMapboxToken] = useState(() => Cookies.get('mapbox_token') || '');
+
+    useEffect(() => {
+        if (mapboxToken) {
+            Cookies.set('mapbox_token', mapboxToken, {
+                secure: true,
+                sameSite: 'strict',
+                expires: 30  // 30 days
+            });
+        } else {
+            Cookies.remove('mapbox_token');
+        }
+    }, [mapboxToken]);
+
+
+    return (
+        /* Full-screen wrapper — fills the viewport and becomes the positioning context */
+        <Box w="100vw" h="100vh" position="relative" overflow="hidden">
+            {/* Button bar — absolutely positioned inside the wrapper */}
+            <HStack position="absolute" top={4} right={4} zIndex={1}>
+                <Button colorScheme="blue" size="sm" variant="solid">
+                    Navigation
+                </Button>
+                <Button colorScheme="teal" size="sm" variant="solid">
+                    Search
+                </Button>
+                {!mapboxToken && (
+                    <Input
+                        placeholder="Enter Mapbox token"
+                        size="sm"
+                        width="300px"
+                        value={mapboxToken}
+                        onChange={(e) => setMapboxToken(e.target.value)}
+                    />
+                )}
+            </HStack>
+
+            {/* Map itself */}
+            <Map
+                mapboxAccessToken={mapboxToken}
+                initialViewState={{ longitude: -122.4, latitude: 37.8, zoom: 14 }}
+                mapStyle="mapbox://styles/mapbox/dark-v11"
+                reuseMaps
+                attributionControl={false}
+                style={{ width: '100%', height: '100%' }}  // let the wrapper dictate size
+            />
+        </Box>
+    );
+}
+
+export default App;