const mymap = L.map("mymap").setView([38.9185, 139.8366], 13);

L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

// 公園データ
const parks = [
  {
    name: "日和山公園",
    coords: [38.9188, 139.8333],
    description: "高台にある景観の良い公園",
    image: "images/hiyoriyama.jpg",
    yuugu: ["すべり台", "ブランコ"]
  },
  {
    name: "光ヶ丘公園",
    coords: [38.9212, 139.8310],
    description: "広場や遊具が充実",
    image: "images/hikarigaoka.jpg",
    yuugu: ["すべり台", "ジャングルジム", "ブランコ"]
  },
  {
    name: "最上川ふるさと総合公園",
    coords: [38.9015, 139.8617],
    description: "スポーツ施設や遊具が豊富",
    image: "images/mogamigawa.jpg",
    yuugu: ["シーソー", "すべり台"]
  }
];

// マーカー保持用
let markers = [];

// マーカー作成関数
function showMarkers() {
  // 既存マーカー削除
  markers.forEach(marker => mymap.removeLayer(marker));
  markers = [];

  // チェックされた遊具
  const selected = Array.from(document.querySelectorAll('#filter input:checked')).map(cb => cb.value);

  parks.forEach(park => {
    if (park.yuugu.some(y => selected.includes(y))) {
      const marker = L.marker(park.coords).addTo(mymap);
      marker.bindPopup(`
        <strong>${park.name}</strong><br>
        ${park.description}<br>
        <img src="${park.image}" alt="${park.name}" width="200"><br>
        <em>遊具: ${park.yuugu.join(", ")}</em>
      `);
      markers.push(marker);
    }
  });
}

// 初期表示
showMarkers();

// チェックボックス変更時に再表示
document.querySelectorAll('#filter input').forEach(cb => {
  cb.addEventListener('change', showMarkers);
});