<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>位置共有マップ（Leaflet版）</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map { width: 100%; height: 500px; }
</style>
<script>
let group = new URLSearchParams(location.search).get("group");
let map;
let markers = [];
function initMap() {
map = L.map('map').setView([35.0, 135.0], 15);
// OSMタイルを使用
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 現在地取得
navigator.geolocation.getCurrentPosition(pos => {
const lat = pos.coords.latitude;
const lng = pos.coords.longitude;
// ★地図中心を現在地に移動
map.setView([lat, lng], 17);
// ★自分のマーカー
L.marker([lat, lng]).addTo(map).bindPopup("自分");
// ★サーバーへ送信
fetch("http://roy.e.koeki-u.ac.jp/~c123139/mycgi/map1/save_location.rb", {
method: "POST",
body: new URLSearchParams({ group, lat, lng })
});
// ★他ユーザー読み込み
loadOthers();
setInterval(loadOthers, 3000);
}, err => {
alert("現在地取得に失敗しました。HTTPS の GitBucket からアクセスしてください。");
console.error(err);
});
}
function loadOthers() {
fetch("http://roy.e.koeki-u.ac.jp/~c123139/mycgi/map1/load_locations.rb?group=" + group)
.then(res => res.json())
.then(data => {
// 古いマーカー削除
markers.forEach(m => map.removeLayer(m));
markers = [];
// 新しいマーカー表示
data.locations.forEach(user => {
let marker = L.marker([user.lat, user.lng]).addTo(map);
marker.bindPopup(user.id);
markers.push(marker);
});
});
}
</script>
</head>
<body onload="initMap()">
<h2>グループ「<span id="gname"></span>」の位置共有（OSM版）</h2>
<div id="map"></div>
<script>
document.getElementById("gname").textContent = group;
</script>
</body>
</html>
