(() => {
'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:
'© <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();
});
})();