diff --git a/shonai_tiiki_map.js b/shonai_tiiki_map.js index 340cd4a..9d35ea1 100644 --- a/shonai_tiiki_map.js +++ b/shonai_tiiki_map.js @@ -1,5 +1,5 @@ document.addEventListener('DOMContentLoaded', () => { - const map = L.map('map').setView([38.855235,139.910744], 16); + const map = L.map('map').setView([38.855235, 139.910744], 16); // OSMタイル L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { @@ -12,50 +12,51 @@ header: true, complete: function(results) { results.data.forEach(row => { - if (row.latitude && row.longitude) { - const lat = parseFloat(row.latitude); - const lng = parseFloat(row.longitude); + if (row.緯度 && row.経度) { + const lat = parseFloat(row.緯度); + const lng = parseFloat(row.経度); - // 説明文(空欄は無視) - const descriptions = [row.description1, row.description2, row.description3] + // 説明1~説明9を動的にまとめてポップアップ用HTML生成 + const descriptions = Array.from({ length: 9 }, (_, i) => row[`説明${i + 1}`]) .filter(desc => desc && desc.trim() !== "") .map(desc => `

${desc}

`) .join(""); - // 画像処理(空欄は完全に無視、クリックでモーダル) + // 画像処理(空欄は無視、クリックでモーダル表示) let images = ""; - if (row.img1 && row.img1.trim() !== "") { - images += ``; + if (row.画像1 && row.画像1.trim() !== "") { + images += ``; } - if (row.img2 && row.img2.trim() !== "") { - images += ``; + if (row.画像2 && row.画像2.trim() !== "") { + images += ``; } // ポップアップ内容 const popupContent = ` `; - // アイコンをCSVから取得、なければデフォルト - const iconUrl = row.icon && row.icon.trim() !== "" ? row.icon : "images/defaultpin.png"; + // アイコン設定。CSVのアイコンが空ならデフォルト + const iconUrl = row.アイコン && row.アイコン.trim() !== "" ? row.アイコン : "images/defaultpin.png"; const customIcon = L.icon({ iconUrl: iconUrl, - iconSize: [32, 32], // アイコンサイズ - iconAnchor: [16, 32], // ピンの先端位置 - popupAnchor: [0, -32] // ポップアップの位置 + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] }); - // マーカー追加(独自アイコン付き) + // マーカー追加してポップアップをバインド L.marker([lat, lng], { icon: customIcon }).addTo(map).bindPopup(popupContent); } }); } }); + // モーダル表示関数 window.openModal = function(imageSrc) { const modal = document.getElementById('image-modal'); const modalImage = document.getElementById('modal-image'); @@ -63,12 +64,13 @@ modal.style.display = 'block'; }; + // モーダル非表示関数 window.closeModal = function() { const modal = document.getElementById('image-modal'); modal.style.display = 'none'; }; - // モーダル外をクリックして閉じる + // モーダル外クリックで閉じる window.onclick = function(event) { const modal = document.getElementById('image-modal'); if (event.target === modal) {