diff --git a/shonaifes.js b/shonaifes.js index f2380b2..bbe9a9c 100644 --- a/shonaifes.js +++ b/shonaifes.js @@ -1,10 +1,6 @@ document.addEventListener('DOMContentLoaded', () => { - - // 地図オブジェクトを作成し、中心座標とズームレベルを設定 const map = L.map('map').setView([38.9175, 139.8353], 16); - const markers = [];// 全てのマーカーを保存する配列（フィルタ用） - - // 地図タイルを読み込み（OpenStreetMap使用） + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); @@ -23,44 +19,48 @@ }).addTo(map).bindPopup('現在地'); }); } - - // ───── CSVファイルから店舗情報を読み込んでマーカーを配置 ───── - fetch('snack.csv') + +// カスタムアイコンを定義 + const customIcon = L.icon({ + iconUrl: 'images/.png', // カスタムマーカー画像のパス + iconSize: [32, 32], // マーカーのサイズ + iconAnchor: [16, 32], // アイコンの「足」の位置 + popupAnchor: [0, -32] // ポップアップの表示位置 + }); + + fetch('fes.csv') .then(response => response.text()) .then(text => { const rows = text.split('\n').filter(row => row.trim()); const headers = rows[0].split(',').map(h => h.trim()); - + for (let i = 1; i < rows.length; i++) { const values = rows[i].split(',').map(v => v.replace(/^"|"$/g, '').trim()); const data = {}; headers.forEach((key, index) => data[key] = values[index] || ''); - + const lat = parseFloat(data.latitude); const lng = parseFloat(data.longitude); if (isNaN(lat) || isNaN(lng)) continue; - - // 営業中アイコンか、休業中アイコンを選択 + const isOpen = !isClosedToday(data.description1) && isOpenNow(data.description2); - const iconPath = isOpen ? (data.icon || 'images/snack-icon.png') : 'images/favicon-door-32x32.png'; - + const iconPath = isOpen ? (data.icon || 'images/.png') : 'images/.png'; + const customIcon = L.icon({ iconUrl: iconPath, iconSize: [32, 32], iconAnchor: [16, 32], popupAnchor: [0, -32] }); - - // 店舗の説明文と画像 + const description = [data.description1, data.description2, data.description3, data.mama] .filter(Boolean) .map(d => d.trim()) .join('
'); - - const image1 = data.img1 && data.img1.trim() !== '' ? data.img1 : 'images/snacktitle.png'; - const image2 = data.img2 && data.img2.trim() !== '' ? data.img2 : 'images/snacktitle.png'; - - // ポップアップのHTML内容 + + const image1 = data.img1 && data.img1.trim() !== '' ? data.img1 : 'images/.png'; + const image2 = data.img2 && data.img2.trim() !== '' ? data.img2 : 'images/.png'; + const popupContent = `

${data.name.replace(/"$/, '')}

@@ -69,62 +69,71 @@
`; - + const marker = L.marker([lat, lng], { icon: customIcon }).addTo(map).bindPopup(popupContent); marker.isOpen = isOpen; - markers.push(marker);// フィルタ機能のために保存 + markers.push(marker); } }) .catch(error => { console.error('CSV読み込みエラー:', error); }); - - // ───── 「空いてる店だけ表示」ボタンのUIと機能 ───── - const toggleBtn = document.createElement('button'); - toggleBtn.textContent = '営業中の店を表示'; - toggleBtn.style.position = 'absolute'; - toggleBtn.style.top = '10px'; - toggleBtn.style.right = '10px'; - toggleBtn.style.zIndex = 1000; - toggleBtn.style.padding = '10px 10px'; - toggleBtn.style.background = '#f3e8ff'; - toggleBtn.style.color = '#3e004f'; - toggleBtn.style.border = '1px solid #3e004f'; - toggleBtn.style.cursor = 'pointer'; - document.body.appendChild(toggleBtn); - - let showingOnlyOpen = false; - toggleBtn.addEventListener('click', () => { - showingOnlyOpen = !showingOnlyOpen; - toggleBtn.textContent = showingOnlyOpen ? '全ての店を表示' : '営業中の店を表示'; - markers.forEach(marker => { - if (showingOnlyOpen) { - if (marker.isOpen) marker.addTo(map); - else map.removeLayer(marker); - } else { - marker.addTo(map); - } + +let markers = []; + + // マーカーを追加し、ポップアップを設定 + snacks.forEach(snack => { + const markerIcon = L.icon({ + iconUrl: snack.icon || 'images/.png', // 個別アイコンまたはデフォルトアイコン + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] }); + +const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map); + const popupContent = ` +
+

${snack.name}

+

${snack.description1 || ''}

+

${snack.description2 || ''}

+

${snack.description3 || ''}

+

${snack.mama || ''}

+ + + +
+`; + + marker.bindPopup(popupContent); + markers.push({ marker, name: snack.name }); }); -}); - -// ローカルストレージに店舗名を追加（お気に入り機能） -window.addToFavorites = function(name) { + +// リスト追加機能 +window.addToFavorites = function(name){ const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); favorites.push({ name, addedAt: new Date().toISOString() }); localStorage.setItem('favorites', JSON.stringify(favorites)); alert(`${name}を行きたいお店リストに追加しました！`); -}; - -// 画像モーダル表示用 -window.openModal = function(src) { - const modal = document.getElementById("modal"); - const modalImg = document.getElementById("modal-img"); - modal.style.display = "block"; - modalImg.src = src; -}; - -// モーダル閉じる -window.closeModal = function() { - document.getElementById("modal").style.display = "none"; -}; + }; + +// モーダルの開閉操作 +window.openModal = function (imageSrc) { + const modal = document.getElementById('image-modal'); + const modalImage = document.getElementById('modal-image'); + modalImage.src = imageSrc; // クリックした画像のソースを設定 + 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) { + modal.style.display = 'none'; + } +　}; +});