add map and tweak responsiveness of its container

.env.example

@@ -15,5 +15,5 @@ SECRET_KEY=default-secret-key_local # Replace with your actual secret key
 
 # Frontend Environment Variables
 NEXT_PUBLIC_API_URL=http://localhost:8000/api # The base URL for API calls to the backend
-NEXT_PUBLIC_MAPBOX_TOKEN=dummy-mapbox-token
+NEXT_PUBLIC_MAPBOX_TOKEN=dummy-mapbox-token # Allows access to Mapbox APIs; replace with your actual access token
 NODE_ENV=development  # For libraries and general Node.js practices

README.md

@@ -86,7 +86,8 @@ This project uses Docker and Docker Compose to run the application, which includ
 - Start all services defined in the docker-compose.yml file (e.g., frontend, backend, database).
 
 2.  **Access the Application**:
-    - The app is running at http://localhost:3000.
+
+    - The app is running at http://localhost:3000. Note that this may conflict with your local dev server. If so, one will be running on port 3000 and the other on port 3001.
     - The API is accessible at http://localhost:8000.
     - The Postgres instance with PostGIS extension is accessible at http://localhost:5432.
     - To interact with a running container, use `docker exec [OPTIONS] CONTAINER COMMAND [ARG...]`
@@ -104,9 +105,10 @@ To stop and shut down the application:
 2.  **Bring Down the Containers**: If you want to stop and remove the containers completely, run:
     `docker-compose down`
     This will:
+
     - Stop all services.
     - Remove the containers, but it will **not** delete volumes (so the database data will persist).
-   
+
     **Note:** If you want to start with a clean slate and remove all data inside the containers, run `docker-compose down -v`.
 
 ---
@@ -124,8 +126,8 @@ We use GitHub Secrets to store sensitive environment variables. A template `.env
 The file is organized into three main sections:
 
 - **Postgres Environment Variables**. This section contains the credentials to connect to the PostgreSQL database, such as the username, password, and the name of the database.
-- **Backend Environment Variables**. These variables are used by the backend (e.g., FastAPI) to configure its behavior and to connect to the database and the frontend application.
-- **Frontend Environment Variables**. This section contains the base URL for API calls to the backend and `NODE_ENV` variable that determines in which environment the Node.js application is running.
+- **Backend Environment Variables**. These variables are used by the backend (i.e., FastAPI) to configure its behavior and to connect to the database and the frontend application.
+- **Frontend Environment Variables**. This section contains the base URL for API calls to the backend, `NODE_ENV` variable that determines in which environment the Node.js application is running, and the token needed to access Mapbox APIs.
 
 ---
 

app/components/map.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useRef, useEffect } from "react";
+import mapboxgl, { LngLat } from "mapbox-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+const lookupCoordinates = {
+  geometry: {
+    type: "Point",
+    coordinates: [-122.463733, 37.777448],
+  },
+};
+
+const softStories = [
+  { lng: -122.424145, lat: 37.80379 },
+  { lng: -122.433985, lat: 37.7751 },
+  { lng: -122.40082, lat: 37.76169 },
+  { lng: -122.42539, lat: 37.7195 },
+  { lng: -122.42698, lat: 37.7616 },
+];
+
+const Map = () => {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+
+  useEffect(() => {
+    const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN;
+
+    if (!mapContainerRef.current || !mapboxToken) {
+      console.error("Mapbox access token or container is not set!");
+      return;
+    }
+
+    mapboxgl.accessToken = mapboxToken;
+
+    if (mapRef.current) {
+      return;
+    } else {
+      mapRef.current = new mapboxgl.Map({
+        container: mapContainerRef.current!,
+        style: "mapbox://styles/mapbox/standard",
+        center: [-122.437, 37.75],
+        zoom: 11, // Start with more zoomed-out view but not too far
+        minZoom: 10.5, // Allow users to zoom out more
+        maxZoom: 15, // Increase max zoom to allow closer inspection
+        maxBounds: [
+          [-122.6, 37.65], // Southwest coordinates
+          [-122.25, 37.85], // Northeast coordinates
+        ],
+      });
+
+      const map = mapRef.current;
+      const nav = new mapboxgl.NavigationControl({ showCompass: false });
+      map.addControl(nav, "top-right");
+
+      map.on("load", () => {
+        const el = document.createElement("div");
+        const center = map.getCenter();
+
+        const marker = new mapboxgl.Marker({
+          anchor: "bottom",
+          element: el,
+          className: "marker",
+          draggable: true,
+        })
+          .setLngLat(center)
+          .addTo(map);
+
+        softStories.forEach(({ lng, lat }) => {
+          const el = document.createElement("div");
+
+          const storyMarker = new mapboxgl.Marker({
+            element: el,
+            className: "soft-story",
+            draggable: true,
+          })
+            .setLngLat(new LngLat(lng, lat))
+            .addTo(map);
+        });
+      });
+
+      return () => {
+        if (mapRef.current) mapRef.current.remove();
+      };
+    }
+  }, []);
+
+  return (
+    <div ref={mapContainerRef} style={{ width: "100%", height: "100%" }} />
+  );
+};
+
+export default Map;

app/globals.css

@@ -0,0 +1,46 @@
+.marker {
+  /* Pin */
+  width: 26.2px;
+  height: 41px;
+  background-image: url("/marker.svg");
+  background-size: cover;
+  border-radius: 0;
+}
+
+.soft-story {
+  /* Pin */
+  width: 11px;
+  height: 11px;
+  background-size: cover;
+
+  /* Ellipse 10 */
+  box-sizing: border-box;
+  position: absolute;
+  /* gray/900 */
+  background-color: #171923;
+  /* white */
+  border: 1px solid #FFFFFF;
+  border-radius: 50%
+}
+
+.key {
+  /* Key */
+  width: 16px;
+  height: 16px;
+  border-radius: 50%
+}
+
+.key-soft-story {
+  /* gray/900 */
+  background-color: #171923;
+}
+
+.key-seismic {
+  /* orange/300 */
+  background-color: #f6ad55;
+}
+
+.key-tsunami {
+  /* pink/400 */
+  background-color: #ed64a6;
+}

app/page.tsx

@@ -1,6 +1,8 @@
-import { Box, Flex, Highlight, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 import SearchBar from "./components/search-bar";
 import Heading from "./components/heading";
+import Map from "./components/map";
+import "./globals.css";
 
 const Home = () => {
   return (
@@ -20,17 +22,24 @@ const Home = () => {
         </Box>
       </Box>
       <Box
-        w={{ base: "base", xl: "xl" }}
-        h={{ base: "166px", md: "213px", xl: "261px" }}
+        w={{ base: "base", md: "741px", xl: "xl" }}
+        h={{ base: "323px", md: "411px", xl: "462px" }}
         p={{
-          base: "23px 23px 27px 23px",
+          base: "23px 24px 27px 24px",
           md: "37px 27px 28px 26px",
-          xl: "50px 127px 40px 127px",
+          xl: "50px 128px 40px 127px",
         }}
         m="auto"
       >
-        <Box h="100%" border="1px solid" borderColor="grey.400">
-          <Text textStyle="headerMedium">Cards and map box</Text>
+        <Box
+          h="100%"
+          border="1px solid"
+          borderColor="grey.400"
+          borderRadius="8px"
+          boxShadow="0px 2px 4px -1px #0000000F, 0px 4px 6px -1px #0000001A"
+          overflow="hidden"
+        >
+          <Map />
         </Box>
       </Box>
       <Box bgColor="blue">