Newer
Older
2025-shino / fog.js
(() => {
  'use strict';

  document.addEventListener("DOMContentLoaded", () => {

    const START_POS = [38.891, 139.824];
    const FOG_RADIUS = 40; // 霧解除半径(m)

    const titleEl = document.getElementById("title");
    const startBtn = document.getElementById("start");
    const stopBtn = document.getElementById("stop");

    let map;
    let playerMarker;
    let watchId = null;

    // 解除済みエリア
    const revealedLayers = L.layerGroup();

    function initMap() {
      map = L.map("locationmap", { tap: true })
        .setView(START_POS, 16);

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

      revealedLayers.addTo(map);

      playerMarker = L.marker(map.getCenter()).addTo(map);
      playerMarker.bindPopup("STARTを押して探索開始").openPopup();

      // PC検証用:クリックで移動
      map.on("click", (e) => {
        updateLocation(e.latlng);
      });
    }

    function revealFog(latlng) {
      const circle = L.circle(latlng, {
        radius: FOG_RADIUS,
        color: "#4fc3f7",
        fillColor: "#4fc3f7",
        fillOpacity: 0.4,
        weight: 1
      });

      revealedLayers.addLayer(circle);
    }

    function updateLocation(latlng) {
      map.panTo(latlng);
      playerMarker.setLatLng(latlng);

      revealFog(latlng);

      playerMarker
        .setPopupContent("探索中… 霧を解除しています")
        .openPopup();
    }

    function onSuccess(pos) {
      updateLocation(
        L.latLng(pos.coords.latitude, pos.coords.longitude)
      );
    }

    function onError() {
      playerMarker
        .setPopupContent("位置情報を取得できません")
        .openPopup();
    }

    function startWatch() {
      stopWatch();
      watchId = navigator.geolocation.watchPosition(
        onSuccess,
        onError,
        { maximumAge: 0, timeout: 3000, enableHighAccuracy: true }
      );
      titleEl.textContent = "探索中";
    }

    function stopWatch() {
      if (watchId !== null) {
        navigator.geolocation.clearWatch(watchId);
        watchId = null;
        titleEl.textContent = "STOP";
        playerMarker
          .setPopupContent("探索を停止しました")
          .openPopup();
      }
    }

    startBtn.addEventListener("click", startWatch);
    stopBtn.addEventListener("click", stopWatch);

    initMap();
  });
})();