feat: Add URL-based location sharing for map and buildings

Author: tknkaa

src/buildings.ts

@@ -0,0 +1,49 @@
+// Building center positions for URL sharing
+export const buildingCenters: Record<string, [number, number]> = {
+  building1: [1064, 1904],
+  building2: [921, 1095],
+  building5: [1558, 1488],
+  building7: [1401, 1645],
+  building8: [1393, 2073],
+  building9: [1569, 1971],
+  building10: [1400, 1824],
+  building11: [1104, 1567],
+  building12: [1017, 1267],
+  building13: [1169, 1314],
+  building14: [1120, 1072],
+  building15: [1409, 816],
+  building16: [1575, 881],
+  building17: [1537, 1222],
+  building18: [1641, 1770],
+  building19: [2039, 2628],
+  building101: [1149, 2300],
+  building900: [808, 1465],
+  komcee_west: [1643, 2226],
+  komcee_east: [1533, 2343],
+  info_edu: [431, 1603],
+  administration: [644, 2244],
+  comipla_north: [1350, 2786],
+  library: [938, 2800],
+  second_gymnasium: [1628, 2686],
+  first_gymnasium: [1716, 2988],
+  campus_plaza_a: [1504, 2823],
+  campus_plaza_b: [1505, 2941],
+  komaba_museum: [818, 2336],
+  advanced_research_lab: [1859, 1609],
+  komaba_international_edu: [1401, 1249],
+  komaba_health_center: [550, 1539],
+  coop_cafeteria: [1123, 2571],
+  science_center_a: [836, 2068],
+  science_center_b: [850, 2288],
+  science_center_c: [843, 2187],
+  science_center_d: [834, 2399],
+  science_center_e: [835, 2640],
+  science_center_f: [921, 2638],
+  science_center_g: [1081, 2288],
+  science_center_h: [1081, 2220],
+  science_center_i: [1081, 2172],
+};
+
+export function getBuildingCenter(buildingId: string): [number, number] | null {
+  return buildingCenters[buildingId] || null;
+}

src/markers.ts

@@ -90,9 +90,16 @@ export function setupBuildingPolygons(map: L.Map) {
         詳細
       </a>`
       : "";
+    const shareUrl = `${window.location.origin}/?building=${buildingId}`;
+    const shareButtonHtml = `
+      <button onclick="navigator.clipboard.writeText('${shareUrl}').then(()=>alert('URLをコピーしました！')).catch(()=>{})" style="${buttonStyle}">
+        共有
+      </button>
+    `;
     return `
     <div style="text-align: center; padding: 8px;">
-      <p style="margin: 0 0 ${showButton ? "8px" : "0"} 0; font-weight: bold; font-size: 16px;">${name}</p>
+      <p style="margin: 0 0 4px 0; font-weight: bold; font-size: 16px;">${name}</p>
+      ${shareButtonHtml}
       ${buttonHtml}
     </div>
     `;

src/pages/MapPage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import L from "leaflet";
+import { useSearchParams } from "react-router-dom";
 import { Komabamap } from "../assets";
 import UtcFavicon from "../assets/utc-favicon.svg";
 import { setupGeolocation } from "../geolocation";
@@ -10,6 +11,7 @@ import {
   toggleMarkers,
 } from "../markers";
 import { searchItems, type SearchableItem } from "../search";
+import { getBuildingCenter } from "../buildings";
 
 const imgWidth = 4000;
 const imgHeight = 2800;
@@ -25,6 +27,8 @@ export function MapPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<SearchableItem[]>([]);
   const [selectedItem, setSelectedItem] = useState<SearchableItem | null>(null);
+  const [searchParams] = useSearchParams();
+  const initialParamsProcessed = useRef(false);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -50,6 +54,48 @@ export function MapPage() {
     const vmMarkers = setupVendingMachineMarkers(map);
     vmMarkersRef.current = vmMarkers.markers;
     setupBuildingPolygons(map);
+
+    // Process URL parameters for sharing location
+    const buildingId = searchParams.get("building");
+    const lat = searchParams.get("lat");
+    const lng = searchParams.get("lng");
+    const zoom = searchParams.get("zoom");
+
+    if (buildingId) {
+      const center = getBuildingCenter(buildingId);
+      if (center) {
+        map.flyTo([center[0], center[1]], 0, { duration: 1.5 });
+
+        // Show popup with pin
+        const buildingItem = searchItems(buildingId).find(
+          (item) => item.buildingId === buildingId,
+        );
+        if (buildingItem && buildingItem.buildingId) {
+          const popupContent = `
+            <div style="text-align: center;">
+              <p style="margin: 0 0 8px 0; font-weight: bold;">${buildingItem.name}</p>
+              <a href="/building/${buildingItem.buildingId}" style="display: inline-block; padding: 8px 16px; background-color: #3b82f6; color: white; border-radius: 6px; text-decoration: none;">詳細</a>
+            </div>
+          `;
+          L.popup()
+            .setLatLng([center[0], center[1]])
+            .setContent(popupContent)
+            .openOn(map);
+        }
+      }
+    } else if (lat && lng) {
+      const position: [number, number] = [Number(lat), Number(lng)];
+      const zoomLevel = zoom ? Number(zoom) : 0;
+      map.flyTo(position, zoomLevel, { duration: 1.5 });
+
+      L.popup()
+        .setLatLng(position)
+        .setContent(`<b>共有された位置</b>`)
+        .openOn(map);
+    }
+
+    initialParamsProcessed.current = true;
+
     return () => {
       geo.cleanup();
       map.remove();
@@ -94,12 +140,17 @@ export function MapPage() {
 
       // If it's a building with a detail page, show a popup with link
       if (item.type === "building" && item.buildingId) {
+        const shareUrl = `${window.location.origin}/?building=${item.buildingId}`;
         L.popup()
           .setLatLng([item.lat, item.lng])
           .setContent(
             `
             <div style="text-align: center;">
               <p style="margin: 0 0 8px 0; font-weight: bold;">${item.name}</p>
+              <button onclick="navigator.clipboard.writeText('${shareUrl}').then(()=>alert('URLをコピーしました！')).catch(()=>{})" style="display: inline-block; padding: 8px 16px; background-color: #3b82f6; color: white; border-radius: 6px; text-decoration: none; border: none; cursor: pointer; margin-bottom: 8px;">
+                共有
+              </button>
+              <br/>
               <a href="/building/${item.buildingId}" style="display: inline-block; padding: 8px 16px; background-color: #3b82f6; color: white; border-radius: 6px; text-decoration: none;">詳細</a>
             </div>
           `,