document.addEventListener('DOMContentLoaded', () => {
  const map = L.map('map').setView([38.9175, 139.8353], 16);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

// カスタムアイコンを定義
  const customIcon = L.icon({
    iconUrl: 'images/marker-icon.png', // カスタムマーカー画像のパス
    iconSize: [32, 32], // マーカーのサイズ
    iconAnchor: [16, 32], // アイコンの「足」の位置
    popupAnchor: [0, -32] // ポップアップの表示位置
  });

// 店舗データ
const snacks = [
    { name: "スナック緑",
      lat: 38.91784466465069,
      lng: 139.83580858552295,
      description: "定休日:月曜日 営業時間 19:00〜0:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
      
    { name: "スナックLink",
      lat: 38.918328820566366,
      lng: 139.83473570196918,
      description: "定休日:なし 営業時間 20:00〜1:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックCherir",
      lat: 38.91731041980675,
      lng: 139.8348859056667,
      description: "定休日:日曜日 営業時間 20:00〜0:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    }
];

let markers = [];

  // マーカーを追加し、ポップアップを設定
  snacks.forEach(snack => {
    const markerIcon = L.icon({
      iconUrl: snack.icon || 'images/marker-icon.png', // 個別アイコンまたはデフォルトアイコン
      iconSize: [32, 32],
      iconAnchor: [16, 32],
      popupAnchor: [0, -32]
    });

    const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map);
    const popupContent = `
      <div class="popup-content">
        <h3>${snack.name}</h3>
        <p>${snack.description}</p>
        <button onclick="addToFavorites('${snack.name}')">お気に入りに追加</button>
      </div>
    `;
    marker.bindPopup(popupContent);
    markers.push({ marker, name: snack.name });
  });

// リスト追加機能
function addToFavorites(name) {
  const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
  favorites.push({ name, addedAt: new Date().toISOString() });
  localStorage.setItem('favorites', JSON.stringify(favorites));
  alert(`${name}を気になるお店リストに追加しました！`);
  };
});