diff --git a/map4.js b/map4.js index 8086eb1..e1b48b3 100644 --- a/map4.js +++ b/map4.js @@ -8,7 +8,7 @@ const supa = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY); // =============================== -// デバイスID(ユーザー識別用) +// デバイスID(ずっと固定) // =============================== let deviceId = localStorage.getItem("deviceId"); if (!deviceId) { @@ -17,8 +17,6 @@ } // =============================== -// グローバル変数 -// =============================== let currentGroup = ""; let currentUser = ""; let map; @@ -26,27 +24,23 @@ let otherMarkers = []; let reloadTimer; -// デフォルト位置(皇居あたり) const DEFAULT_LAT = 35.685175; const DEFAULT_LNG = 139.752799; // =============================== -// URL パラメータから group / user を取得 +// URLのパラメータ取得 // =============================== function loadParams() { const params = new URLSearchParams(location.search); - currentGroup = params.get("group") || "未指定"; - currentUser = params.get("user") || "名無し"; + currentGroup = params.get("group"); + currentUser = params.get("user"); - const gSpan = document.getElementById("groupName"); - const uSpan = document.getElementById("userName"); - - if (gSpan) gSpan.textContent = currentGroup; - if (uSpan) uSpan.textContent = currentUser; + document.getElementById("groupName").textContent = currentGroup; + document.getElementById("userName").textContent = currentUser; } // =============================== -// おしゃれなピンアイコン +// ピンアイコン // =============================== const myIcon = L.icon({ iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png", @@ -63,21 +57,17 @@ }); // =============================== -// 現在地の取得(Promise) -// =============================== function getPosition() { return new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition( (pos) => resolve(pos.coords), - (err) => reject(err), + reject, { enableHighAccuracy: true } ); }); } // =============================== -// 地図の初期化 -// =============================== function initMap(lat, lng) { map = L.map("map").setView([lat, lng], 15); @@ -90,43 +80,45 @@ } // =============================== -// 自分の位置を「デバイスIDで1件だけ」保存 -// =============================== async function saveMyLocation(lat, lng) { - // まず自分の古い記録を削除 await supa .from("locations") .delete() .eq("group_name", currentGroup) .eq("device_id", deviceId); - // 新しい1件を保存 await supa.from("locations").insert({ group_name: currentGroup, user_name: currentUser, device_id: deviceId, - lat: lat, - lng: lng, + lat, + lng, }); } // =============================== -// グループ内の「各ユーザーの最新ピンのみ」を表示 +function showMemberList(latestByDevice) { + const list = document.getElementById("memberList"); + list.innerHTML = ""; + + Object.values(latestByDevice).forEach((row) => { + const li = document.createElement("li"); + li.textContent = row.user_name; + list.appendChild(li); + }); +} + // =============================== async function showOtherUsers() { - const { data, error } = await supa + const { data } = await supa .from("locations") .select("*") .eq("group_name", currentGroup) .order("updated_at", { ascending: false }); - if (error || !data) return; - - // 既存のピンを削除(自分以外) otherMarkers.forEach((m) => map.removeLayer(m)); otherMarkers = []; - // デバイスIDごとに最新1件だけ使う const latestByDevice = {}; for (const row of data) { if (!latestByDevice[row.device_id]) { @@ -134,9 +126,12 @@ } } - // 各ユーザーの最新位置だけピンを表示 + // 一覧表示 + showMemberList(latestByDevice); + + // ピン表示 Object.values(latestByDevice).forEach((row) => { - if (row.device_id === deviceId) return; // 自分はスキップ + if (row.device_id === deviceId) return; const mk = L.marker([row.lat, row.lng], { icon: otherIcon }).addTo(map); mk.bindPopup(`${row.user_name} さん
更新: ${row.updated_at}`); @@ -145,8 +140,6 @@ } // =============================== -// main -// =============================== async function main() { loadParams(); @@ -157,16 +150,12 @@ const pos = await getPosition(); lat = pos.latitude; lng = pos.longitude; - } catch (e) { - console.warn("現在地取得に失敗。デフォルト位置を表示します。"); - } + } catch {} initMap(lat, lng); - await saveMyLocation(lat, lng); await showOtherUsers(); - // ⏱ 2秒ごとに他ユーザーの最新位置を更新 reloadTimer = setInterval(showOtherUsers, 2000); }