Add Leaflet map to sublet page

Author: Anthony Li

docker-compose.yml

@@ -68,7 +68,10 @@ services:
       - penn-marketplace-frontend-pnpm-store:/app/.pnpm-store
     environment:
       - NODE_ENV=development
+      # Browser on your machine → API on published port
       - NEXT_PUBLIC_API_URL=http://localhost:8000
+      # Next server inside this container → Django service name
+      - API_BASE_URL=http://backend:8000
 
 volumes:
   penn-marketplace-postgres-data:

frontend/components/listings/detail/ListingDetail.tsx

@@ -5,6 +5,7 @@ import { ListingImageGallery } from "@/components/listings/detail/ListingImageGa
 import { ListingInfo } from "@/components/listings/detail/ListingInfo";
 import { UserCard } from "@/components/listings/detail/UserCard";
 import { BackButton } from "@/components/listings/detail/BackButton";
+import { SubletMap } from "@/components/listings/detail/SubletMap";
 
 interface Props {
   listing: Item | Sublet;
@@ -15,6 +16,11 @@ export const ListingDetail = ({ listing }: Props) => {
   const priceLabel = listingType === "sublet" ? "/mo" : undefined;
   const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
 
+  const subletCoords =
+    listingType === "sublet" ? listing.additional_data : null;
+  const hasLocation =
+    subletCoords?.latitude != null && subletCoords?.longitude != null;
+
   return (
     <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
       <div className="mb-4 flex items-center justify-between">
@@ -41,6 +47,15 @@ export const ListingDetail = ({ listing }: Props) => {
             priceLabel={priceLabel}
             listingOwnerLabel={listingOwnerLabel}
           />
+          {hasLocation && (
+            <div className="space-y-3">
+              <h2 className="text-lg font-semibold">Where you'll be living</h2>
+              <SubletMap
+                latitude={subletCoords.latitude!}
+                longitude={subletCoords.longitude!}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

frontend/components/listings/detail/SubletMap.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+interface Props {
+  latitude: number;
+  longitude: number;
+}
+
+const LazyMap = dynamic(
+  () =>
+    import("./SubletMapContent").then((m) => m.SubletMapContent),
+  { ssr: false },
+);
+
+export const SubletMap = ({ latitude, longitude }: Props) => {
+  return <LazyMap latitude={latitude} longitude={longitude} />;
+};

frontend/components/listings/detail/SubletMapContent.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import "leaflet/dist/leaflet.css";
+import { MapContainer, TileLayer, Circle } from "react-leaflet";
+
+interface Props {
+  latitude: number;
+  longitude: number;
+}
+
+const CIRCLE_RADIUS_METERS = 200;
+
+export const SubletMapContent = ({ latitude, longitude }: Props) => {
+  return (
+    <MapContainer
+      center={[latitude, longitude]}
+      zoom={15}
+      scrollWheelZoom={false}
+      className="z-0 h-72 w-full rounded-lg sm:h-80"
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Circle
+        center={[latitude, longitude]}
+        radius={CIRCLE_RADIUS_METERS}
+        pathOptions={{
+          color: "#3b82f6",
+          fillColor: "#3b82f6",
+          fillOpacity: 0.2,
+          weight: 2,
+        }}
+      />
+    </MapContainer>
+  );
+};

frontend/lib/constants.ts

@@ -9,8 +9,15 @@ import {
 export const BASE_URL =
   process.env.NODE_ENV === "production" ? "REPLACE WITH PROD BASE URL" : "http://localhost:3000";
 
+/**
+ * Server-side fetches (RSC, Route Handlers, middleware).
+ * - Local `pnpm dev`: default http://localhost:8000 (backend on host port).
+ * - Docker frontend service: set API_BASE_URL=http://backend:8000 in compose.
+ */
 export const API_BASE_URL =
-  process.env.NODE_ENV === "production" ? "REPLACE WITH PROD API URL" : "http://backend:8000"; // can't be localhost because server fetch happens in container
+  process.env.NODE_ENV === "production"
+    ? process.env.NEXT_PUBLIC_API_URL ?? "REPLACE WITH PROD API URL"
+    : (process.env.API_BASE_URL ?? "http://localhost:8000");
 
 export const PLATFORM_URL = process.env.PLATFORM_URL;
 export const CLIENT_ID = process.env.CLIENT_ID;

frontend/lib/types.ts

@@ -44,6 +44,8 @@ export type SubletAdditionalData = {
   baths: number;
   start_date: string;
   end_date: string;
+  latitude: number | null;
+  longitude: number | null;
 };
 
 // ------------------------------------------------------------

frontend/package.json

@@ -28,6 +28,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "jose": "^3.20.4",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.546.0",
     "next": "15.5.4",
     "next-themes": "^0.4.6",
@@ -36,13 +37,15 @@
     "react-dom": "19.1.0",
     "react-hook-form": "^7.69.0",
     "react-intersection-observer": "^9.16.0",
+    "react-leaflet": "^5.0.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.2.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",