fix: load map with token (#642)

gregkonush · Dec 24, 2024 · 23c734a · 23c734a
1 parent e36465e
commit 23c734a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/apps/findbobastore/src/app/page.tsx b/apps/findbobastore/src/app/page.tsx
@@ -4,7 +4,7 @@ export default async function Home() {
   const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
   return (
     <main className="relative w-full h-screen">
-      <div className="absolute top-4 left-4 z-10 bg-slate-900/80 px-4 py-2 rounded-lg">
+      <div className="absolute top-4 left-4 z-10 bg-slate-900/50 px-4 py-2 rounded-lg">
         <h1 className="text-xl font-bold text-white">Find Boba Store</h1>
       </div>
       {mapboxToken && <MapContainer token={mapboxToken} />}

diff --git a/apps/findbobastore/src/components/map-view.tsx b/apps/findbobastore/src/components/map-view.tsx
@@ -221,7 +221,7 @@ function MapOverlay({ store }: { store: BobaStore | null }) {
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 20 }}
         className={cn(
-          'absolute bottom-4 left-4 p-4 bg-slate-900/90 rounded-lg shadow-lg',
+          'absolute bottom-4 left-4 p-4 bg-slate-900/40 rounded-lg shadow-lg',
           'backdrop-blur-sm border border-slate-800',
           'max-w-sm w-full z-10',
         )}
@@ -238,7 +238,6 @@ function MapOverlay({ store }: { store: BobaStore | null }) {
 }
 
 export function MapView({ token }: { token: string }) {
-  mapboxgl.accessToken = token
   const mapContainer = useRef<HTMLDivElement>(null)
   const map = useRef<mapboxgl.Map | null>(null)
   const [selectedStore, setSelectedStore] = useState<BobaStore | null>(null)
@@ -328,6 +327,7 @@ export function MapView({ token }: { token: string }) {
         center: location,
         zoom: 12,
         maxZoom: 15,
+        accessToken: token,
       })
 
       map.current.on('load', () => {
@@ -367,7 +367,7 @@ export function MapView({ token }: { token: string }) {
         trackUserLocation: true,
       }),
     )
-  }, [getUserLocation, clearMarkers, addUserLocationMarker, addBobaMarkers])
+  }, [getUserLocation, clearMarkers, addUserLocationMarker, addBobaMarkers, token])
 
   useEffect(() => {
     if (!map.current) {