fesmap / pj
forked from Ray8/pj
Newer
Older
pj / map.js
// 店舗データ
const snacks = [
    { id: 1, name: "スナック緑", lat: 38.91784466465069, lon: 139.83580858552295, type: "定休日:月曜日 営業時間 19:00〜0:00" },
    { id: 2, name: "スナックLink", lat: 38.918328820566366, lon: 139.83473570196918, type: "定休日:なし 営業時間 20:00〜1:00" },
    { id: 3, name: "スナックCherir", lat: 38.91731041980675, lon: 139.8348859056667, type: "定休日:日曜日 営業時間 20:00〜0:00" }
];

// 地図の初期設定
const map = L.map('map').setView([38.9178, 139.8351], 16);

// OpenStreetMapのタイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// マーカーを格納する配列
let markers = [];

// スナックのマーカーを追加
function addMarkers() {
  snacks.forEach(snack => {
    const marker = L.marker([snack.lat, snack.lon]).addTo(map);
    marker.bindPopup(createPopupContent(snack));
    markers.push(marker);
  });
}

// ポップアップの内容を作成
function createPopupContent(snack) {
  const div = document.createElement('div');
  div.innerHTML = `
    <h3>${snack.name}</h3>
    <p> ${snack.type}</p>
    <button onclick="addToFavorites(${snack.id})">お気に入りに登録</button>
  `;
  return div;
}

// お気に入り登録用のローカルストレージ管理
function addToFavorites(id) {
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
  const snack = snacks.find(s => s.id === id);
  if (snack && !favorites.some(f => f.id === id)) {
    favorites.push({...snack, dateAdded: new Date().toISOString()});
    localStorage.setItem('favorites', JSON.stringify(favorites));
    alert(`${snack.name}をお気に入りに追加しました。`);
  }
}

// 検索機能
document.getElementById('search').addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();
  snacks.forEach((snack, index) => {
    if (snack.name.toLowerCase().includes(searchTerm) || snack.type.toLowerCase().includes(searchTerm)) {
      markers[index].addTo(map);
    } else {
      map.removeLayer(markers[index]);
    }
  });
});

// ジオロケーション
function showUserLocation() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
      const userLocation = [position.coords.latitude, position.coords.longitude];
      L.marker(userLocation).addTo(map)
        .bindPopup("あなたの現在地")
        .openPopup();
      map.setView(userLocation, 13);
    });
  }
}

// 初期化
addMarkers();
showUserLocation();