// 地図の初期化
const map = L.map('map').setView([38.9122, 139.8360], 13);
// 国土地理院の地図タイルレイヤーを追加
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
maxZoom: 18,
minZoom: 5
}).addTo(map);
// 地図をクリックしてマーカーと情報ウィンドウを追加
map.on('click', (e) => {
const { lat, lng } = e.latlng;
addMarker(lat, lng);
});
// マーカーとコメント入力ウィンドウを追加
function addMarker(lat, lng) {
// マーカーの作成
const marker = L.marker([lat, lng]).addTo(map);
// ポップアップ(情報ウィンドウ)を作成
const popupContent = `
<div class="info-window">
<p>活動日記を入力してください:</p>
<textarea id="comment" rows="3" style="width:100%;"></textarea>
<button onclick="saveComment('${lat}', '${lng}')">保存</button>
</div>
`;
marker.bindPopup(popupContent).openPopup();
}
// コメントを保存し、右側の履歴に追加
function saveComment(lat, lng) {
const comment = document.getElementById("comment").value;
const timestamp = new Date().toLocaleString(); // 現在日時を取得
// コメント履歴に追加するHTML要素を作成
const commentEntry = `
<div class="history-entry">
<p><strong>日時:</strong> ${timestamp}</p>
<p><strong>場所:</strong> 緯度 ${lat}, 経度 ${lng}</p>
<p><strong>活動日記:</strong> ${comment}</p>
</div>
`;
document.getElementById("comments-list").innerHTML += commentEntry;
}