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: "京田2丁目公園",
    coords: [38.87808, 139.835744],
    image: "images/mogamigawa.jpg",
     yuugu: ["水道", "ブランコ"],
    description: "水道、ブランコあり"
  },
  {
    name: "京田4丁目公園",
    coords: [38.871389, 139.833469],
     yuugu: ["すべり台", "ブランコ"],
    description: "滑り台、ブランコあり"
  },
  {
    name: "錦公園",
    coords: [38.881571, 139.83687],
     yuugu: ["すべり台", "ブランコ"],
    description: "鉄棒、砂場、滑り台、ブランコ、水飲み場あり。"
  },
  
];

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);
});