Newer
Older
system / yuugu.js
// 地図初期化
const mymap = L.map('map').setView([38.8915, 139.8212], 16);

// タイル読み込み(OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(mymap);

// 遊具データ(手動で定義)
const playgroundItems = [
  { park: "花の公園", type: "ブランコ", latlng: [38.8915, 139.8212] },
  { park: "花の公園", type: "滑り台", latlng: [38.8918, 139.8215] },
  { park: "中央公園", type: "シーソー", latlng: [38.8921, 139.8205] },
  { park: "中央公園", type: "ブランコ", latlng: [38.8923, 139.8203] },
  { park: "緑の丘公園", type: "滑り台", latlng: [38.8909, 139.8220] }
];

// マーカー管理用
let markers = [];

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

  // フィルタに合ったマーカーを追加
  playgroundItems.forEach(item => {
    if (filter === 'all' || item.type === filter) {
      const marker = L.marker(item.latlng).addTo(mymap);
      marker.bindPopup(`${item.park} の ${item.type}`);
      markers.push(marker);
    }
  });
}

// 初期表示(全て)
showMarkers("all");

// セレクトボックス変更時
document.getElementById("typeFilter").addEventListener("change", function () {
  const selectedType = this.value;
  showMarkers(selectedType);
});