display map by using openstreetmap(issue#71)

client/package.json

@@ -27,10 +27,12 @@
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "is-inside-container": "^1.0.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.516.0",
     "next": "15.5.10",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-leaflet": "^5.0.0",
     "react-social-icons": "^6.25.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
@@ -41,6 +43,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.29.0",
     "@tanstack/eslint-plugin-query": "^5.78.0",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^24.0.3",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",

client/src/components/map/EventMap.tsx

@@ -0,0 +1,43 @@
+import "leaflet/dist/leaflet.css";
+
+import L from "leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+
+const iconProto = L.Icon.Default.prototype as unknown as {
+  _getIconUrl?: unknown;
+};
+
+delete iconProto._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: "/leaflet/marker-icon-2x.png",
+  iconUrl: "/leaflet/marker-icon.png",
+  shadowUrl: "/leaflet/marker-shadow.png",
+});
+
+type Props = {
+  lat: number;
+  lon: number;
+  name?: string;
+};
+
+export default function EventMap({ lat, lon, name }: Props) {
+  return (
+    <div className="mt-6 overflow-hidden rounded-lg border border-gray-600">
+      <MapContainer
+        center={[lat, lon]}
+        zoom={16}
+        scrollWheelZoom={false}
+        style={{ height: 320, width: "100%" }}
+      >
+        <TileLayer
+          attribution="&copy; OpenStreetMap contributors"
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={[lat, lon]}>
+          <Popup>{name ?? "Event location"}</Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  );
+}

client/src/components/map/osm.ts

@@ -0,0 +1,28 @@
+export function parseOpenStreetMapUrl(
+  osmUrl: string,
+): { lat: number; lon: number } | null {
+  try {
+    const url = new URL(osmUrl);
+
+    // Pattern 1: ?mlat=..&mlon=..
+    const mlat = url.searchParams.get("mlat");
+    const mlon = url.searchParams.get("mlon");
+    if (mlat && mlon) {
+      const lat = Number(mlat);
+      const lon = Number(mlon);
+      if (Number.isFinite(lat) && Number.isFinite(lon)) return { lat, lon };
+    }
+
+    // Pattern 2: #map=zoom/lat/lon
+    const match = url.hash.match(/#map=\d+\/(-?\d+(\.\d+)?)\/(-?\d+(\.\d+)?)/);
+    if (match) {
+      const lat = Number(match[1]);
+      const lon = Number(match[3]);
+      if (Number.isFinite(lat) && Number.isFinite(lon)) return { lat, lon };
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}

client/src/hooks/useEvent.ts

@@ -12,6 +12,7 @@ type ApiEvent = {
   startTime: string | null;
   location: string;
   cover_image: string | null;
+  openstreetmap_url: string | null;
 };
 
 type UiEvent = Omit<ApiEvent, "cover_image"> & {

client/src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import "@/styles/globals.css";
+import "leaflet/dist/leaflet.css";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

client/src/pages/events/[id].tsx

@@ -1,8 +1,14 @@
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import { useRouter } from "next/router";
 
+import { parseOpenStreetMapUrl } from "@/components/map/osm";
 import { useEvent } from "@/hooks/useEvent";
 
+const EventMap = dynamic(() => import("@/components/map/EventMap"), {
+  ssr: false,
+});
+
 function formatDateTime(dateString: string): string {
   try {
     const date = new Date(dateString);
@@ -59,6 +65,9 @@ export default function EventPage() {
       </main>
     );
   }
+  const coords = event.openstreetmap_url
+    ? parseOpenStreetMapUrl(event.openstreetmap_url)
+    : null;
 
   return (
     <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
@@ -89,6 +98,14 @@ export default function EventPage() {
           />
         </div>
       </div>
+      {coords && (
+        <div className="mt-6 flex flex-col gap-12 md:flex-row md:gap-20">
+          <div className="flex-1">
+            <EventMap lat={coords.lat} lon={coords.lon} name={event.name} />
+          </div>
+          <div className="lg:w-128 md:w-96" aria-hidden="true" />
+        </div>
+      )}
     </main>
   );
 }

server/game_dev/migrations/0010_event_openstreetmap_url.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.14 on 2026-02-16 09:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0009_merge_20260131_1044"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="event",
+            name="openstreetmap_url",
+            field=models.URLField(blank=True, max_length=500),
+        ),
+    ]

server/game_dev/migrations/0014_merge_20260218_0101.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.14 on 2026-02-17 17:01
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0010_event_openstreetmap_url"),
+        ("game_dev", "0013_merge_20260214_1347"),
+    ]
+
+    operations = []

server/game_dev/models.py

@@ -4,7 +4,8 @@
 class Member(models.Model):
     name = models.CharField(max_length=200)
     active = models.BooleanField(default=True)
-    profile_picture = models.ImageField(upload_to="profiles/", null=True, blank=True)
+    profile_picture = models.ImageField(
+        upload_to="profiles/", null=True, blank=True)
     about = models.CharField(max_length=256, blank=True)
     pronouns = models.CharField(max_length=20, blank=True)
 
@@ -19,15 +20,18 @@ class Event(models.Model):
     publicationDate = models.DateField()
     cover_image = models.ImageField(upload_to="events/", null=True)
     location = models.CharField(max_length=256)
+    openstreetmap_url = models.URLField(max_length=500, blank=True)
 
     def __str__(self):
         return self.name
 
 
 # GameContributor table: links Game, Member, and role (composite PK)
 class GameContributor(models.Model):
-    game = models.ForeignKey('Game', on_delete=models.CASCADE, related_name='game_contributors')
-    member = models.ForeignKey('Member', on_delete=models.CASCADE, related_name='member_games')
+    game = models.ForeignKey(
+        'Game', on_delete=models.CASCADE, related_name='game_contributors')
+    member = models.ForeignKey(
+        'Member', on_delete=models.CASCADE, related_name='member_games')
     role = models.CharField(max_length=100)
 
     class Meta:
@@ -62,7 +66,8 @@ class CompletionStatus(models.IntegerChoices):
     )
 
     thumbnail = models.ImageField(upload_to="games/", null=True)
-    event = models.ForeignKey(Event, on_delete=models.SET_NULL, null=True, blank=True)
+    event = models.ForeignKey(
+        Event, on_delete=models.SET_NULL, null=True, blank=True)
 
     def __str__(self):
         return str(self.name)

server/game_dev/serializers.py

@@ -13,6 +13,7 @@ class Meta:
             "publicationDate",
             "cover_image",
             "location",
+            "openstreetmap_url",
         ]