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();