diff --git a/map4.js b/map4.js index 79b601e..86771a5 100644 --- a/map4.js +++ b/map4.js @@ -41,7 +41,7 @@ let myStatus = localStorage.getItem("myStatus") || "移動中"; // =================================== -// ステータスを Supabase に保存 +// ステータス保存 // =================================== async function updateStatus(newStatus) { myStatus = newStatus; @@ -53,11 +53,11 @@ .eq("group_name", currentGroup) .eq("device_id", deviceId); - showOtherUsers(); // メンバーリスト更新 + showOtherUsers(); } // =================================== -// ステータスボタン設定 +// ステータスボタン // =================================== function setupStatusButtons() { const buttons = document.querySelectorAll(".stBtn"); @@ -82,7 +82,7 @@ }); // =================================== -// URL パラメータ読み込み +// URL パラメータ // =================================== function loadParams() { const p = new URLSearchParams(location.search); @@ -97,7 +97,7 @@ } // =================================== -// 現在位置取得 +// 位置取得 // =================================== function getPosition() { return new Promise((resolve, reject) => { @@ -119,7 +119,7 @@ maxZoom: 19, }).addTo(map); - // ホストだけ待ち合わせを設定 + // ホストのみ待ち合わせ設定 map.on("click", async (e) => { if (!isHost) return; @@ -149,7 +149,7 @@ } // =================================== -// 自分の位置保存(ステータスも一緒に) +// 自位置保存(ステータス含む) // =================================== async function saveMyLocation(lat, lng) { await supa @@ -164,30 +164,31 @@ device_id: deviceId, lat, lng, - status: myStatus, // ★ 追加:ステータス保存 + status: myStatus, }); } // =================================== -// 自分のピン表示 +// 自ピン表示 // =================================== function renderSelfMarker() { if (!map || lastLat === null || lastLng === null) return; if (selfMarker) map.removeLayer(selfMarker); + // ★ 修正:status を渡す selfMarker = createLabeledMarker(lastLat, lastLng, currentUser, true, myStatus); selfMarker.addTo(map); } + // =================================== -// ピン生成(ステータス色ラベル) +// ピン生成(ステータス色付き) // =================================== function createLabeledMarker(lat, lng, name, isSelf, status) { const pinUrl = isSelf ? "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png" : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png"; - // ステータスによって色分け const statusColor = { "移動中": "#4caf50", "遅れます": "#ff9800", @@ -199,14 +200,11 @@
${name}
-
${status}
+
+ ${status} +
`; @@ -221,7 +219,7 @@ } // =================================== -// メンバー一覧(ステータス追加) +// メンバー一覧表示(ステータス付き) // =================================== function showMemberList(latestByDevice) { const list = document.getElementById("memberList"); @@ -264,11 +262,8 @@
${status} @@ -295,6 +290,40 @@ } // =================================== +// 他ユーザーピン表示(★修正済) +// =================================== +async function showOtherUsers() { + const { data } = await supa + .from("locations") + .select("*") + .eq("group_name", currentGroup) + .order("updated_at", { ascending: false }); + + latestByDevice = {}; + data.forEach((r) => { + if (!latestByDevice[r.device_id]) latestByDevice[r.device_id] = r; + }); + + await checkHostAuto(); + showMemberList(latestByDevice); + + otherMarkers.forEach((m) => map.removeLayer(m)); + otherMarkers = []; + + Object.values(latestByDevice).forEach((r) => { + if (r.device_id === deviceId) return; + + const status = r.status || "移動中"; + + // ★ 修正:status を渡す + const mk = createLabeledMarker(r.lat, r.lng, r.user_name, false, status); + + mk.addTo(map); + otherMarkers.push(mk); + }); +} + +// =================================== // 共有待ち合わせ読み込み // =================================== async function loadSharedTarget() { @@ -455,11 +484,10 @@ // =================================== async function main() { loadParams(); - setupStatusButtons(); let lat = 35.681236, - lng = 139.767125; // 皇居 + lng = 139.767125; try { const pos = await getPosition();