Newer
Older
2025-shino / map.js
const MAP_URL = "data/locations.json";
const POST_URL = "save_location.rb";

const map = L.map('map').setView([35.0, 135.0], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
}).addTo(map);

function sendLocation() {
  if (!navigator.geolocation) {
    alert("位置情報取得に対応していません");
    return;
  }
  navigator.geolocation.getCurrentPosition(
    pos => {
      const data = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude,
        time: new Date().toISOString()
      };

      fetch(POST_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data)
      })
      .then(resp => resp.json())
      .then(json => {
        if (json.status === "ok") {
          alert("位置情報を送信しました!");
          loadMarkers();
        } else {
          alert("送信に失敗しました");
        }
      })
      .catch(err => {
        console.error(err);
        alert("送信エラーが発生しました");
      });
    },
    err => {
      alert("位置情報取得エラー: " + err.message);
    },
    { enableHighAccuracy: true }
  );
}

function loadMarkers() {
  fetch(MAP_URL + "?t=" + Date.now())
    .then(res => res.json())
    .then(list => {
      // 既存マーカー削除
      map.eachLayer(layer => {
        if (layer instanceof L.Marker) map.removeLayer(layer);
      });
      // 再描画
      list.forEach(p => {
        L.marker([p.lat, p.lng]).addTo(map)
         .bindPopup("送信時刻: " + p.time);
      });
    })
    .catch(() => {
      console.log("データがまだありません");
    });
}

// 初回起動でマーカー読み込み
loadMarkers();