Newer
Older
2024-Ikarashi / sushi.js
// 地図の初期化
    const map = L.map('map').setView([38.9122, 139.8360], 12);
     
    // タイルレイヤー(国土地理院)
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
      attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
      maxZoom: 18,
      minZoom: 5
    }).addTo(map);
     
    // スタンプスポット
    const stampSpots = [
      { name: "かっぱ寿司 酒田店", lat: 38.89569, lng: 139.85309 },
      { name: "かっぱ寿司 鶴岡店", lat: 38.73621, lng: 139.82331 }
    ];
     
    // 保存されたスタンプ情報を取得
    function getSavedStamps() {
      return JSON.parse(localStorage.getItem("stamps")) || {};
    }
     
    // スタンプ取得状況を保存
    function saveStamp(name) {
      const stamps = getSavedStamps();
      stamps[name] = true;
      localStorage.setItem("stamps", JSON.stringify(stamps));
    }
     
    // 地点に近いかを判定(メートル単位)
    function isWithinRange(lat1, lng1, lat2, lng2, rangeMeters = 300) {
      const R = 6371000; // 地球の半径(m)
      const toRad = deg => deg * (Math.PI / 180);
      const dLat = toRad(lat2 - lat1);
      const dLng = toRad(lng2 - lng1);
     
      const a = Math.sin(dLat / 2) ** 2 +
                Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                Math.sin(dLng / 2) ** 2;
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
     
      return R * c <= rangeMeters;
    }
     
    // スタンプスポットを地図に追加(取得済みかどうかを反映)
    function addStampMarkers() {
      const stamps = getSavedStamps();
     
      stampSpots.forEach(spot => {
        const marker = L.marker([spot.lat, spot.lng], {
          icon: L.icon({
            iconUrl: stamps[spot.name] ? 'stamp-icon-on.png' : 'stamp-icon-off.png',
            iconSize: [32, 32]
          })
        }).addTo(map);
     
        marker.bindPopup(`${spot.name}<br>${stamps[spot.name] ? "✅ スタンプ獲得済み" : "📍 まだ獲得していません"}`);
      });
    }
     
    // 現在地をかっぱ寿司 酒田店に設定
    function setKappaSushiLocation() {
      // ここで現在地として表示する座標を「かっぱ寿司 酒田店」に設定
      const userLat = 38.9275;  // かっぱ寿司 酒田店の緯度
      const userLng = 139.8361; // かっぱ寿司 酒田店の経度
     
      // 現在地マーカーを追加
      L.marker([userLat, userLng], {
        icon: L.icon({
          iconUrl: 'current-location-icon.png',  // 現在地アイコン(適宜画像を用意)
          iconSize: [24, 24]
        })
      }).addTo(map).bindPopup("📍 かっぱ寿司 酒田店").openPopup();
     
      const stamps = getSavedStamps();
      let newStampEarned = false;
     
      stampSpots.forEach(spot => {
        if (!stamps[spot.name] && isWithinRange(userLat, userLng, spot.lat, spot.lng)) {
          saveStamp(spot.name);
          newStampEarned = true;
          alert(`🎉 ${spot.name} に到着!スタンプを獲得しました!`);
        }
      });
     
      if (!newStampEarned) {
        alert("スタンプスポットの範囲内にいません。");
      }
     
      // 再描画(獲得済みアイコンへ)
      map.eachLayer(layer => {
        if (layer instanceof L.Marker) {
          map.removeLayer(layer);
        }
      });
      addStampMarkers();
    }
     
    // 初期処理
    window.addEventListener('load', () => {
      addStampMarkers();
      setKappaSushiLocation(); // ここで現在地としてかっぱ寿司 酒田店を設定
    });