document.addEventListener("DOMContentLoaded", ()=>{ const G_KETA = 6, LSkey = "markers"; var gnssWatchID = null, gnssCount = {}; var mymap, infobox, btnGet, btnSTOP; var yellowIcon; var gsiLayer = L.tileLayer( 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 18 }); var gsiPhoto = L.tileLayer( 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {attribution: '© <a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 18}); var osmLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 20, maxNativeZoom: 18 }); var offlineLayerGsiPhoto = L.imageOverlay( "img/koekimap.png", [[38.895855, 139.816143], [38.891178, 139.82215]] ); var offlineLayerOSM = L.imageOverlay( "img/osm-koekimap.png", [[38.895492, 139.816593], [38.890816, 139.822602]] ); var baseLayers = { "(オフライン用)大学周辺地理院空中写真": offlineLayerGsiPhoto, "(オフライン用)大学周辺OSM": offlineLayerOSM, OpenStreetMap: osmLayer, 地理院地図: gsiLayer, 地理院空中写真: gsiPhoto, }; function workerInit() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./serviceworker.js') .then(function() { console.log('service worker registered'); }); } } var stoPrefix = "dkm_"; var LS = { "getItem": (i)=>{return localStorage.getItem(stoPrefix+i);}, "removeItem": (i)=>{return localStorage.removeItem(stoPrefix+i);}, "setItem": (k,v)=>{return localStorage.setItem(stoPrefix+k, v);}, "reset": ()=>{ for (let p of Object.keys(localStorage)) { console.log(`LS=${p}`); if (p.startsWith(stoPrefix)) localStorage.removeItem(p); } } } function appendLsMarker(latlng) { let lat = latlng.lat, lng = latlng.lng, oldval = (LS.getItem(LSkey)||"[]"); newval = [lat, lng]; console.log(`newval = ${newval}`); console.log(`lsval = ${oldval.length}`); try { let list = JSON.parse(oldval); console.log(`list=${list}`); list.push(newval); LS.setItem(LSkey, JSON.stringify(list)); console.log(`cur=${JSON.stringify(list)}`); } catch (e) { // Just ignoring } } function restoreLsMarkers() { let lslist = LS.getItem(LSkey); if (!lslist) return; lastMarker.remove(); // Not required when restoring mode LS.reset(); try {lslist = JSON.parse(lslist)} catch(e) {return;} for (let ll of lslist) { let latlng = L.latLng(ll); lastMarker = L.marker(latlng); mvMarker(latlng); kokoMemo(); } dispInfo(`${lslist.length}地点のマーカを復元しました。`); } function removeLsMarkers(marker) { let ll = marker.getLatLng(), lat = ll.lat, lng = ll.lng, lsval = LS.getItem(LSkey), found, newval; if (!lsval) return; try {lsval = JSON.parse(lsval);} catch(e) {return;} newval = lsval.filter((e) => {return e[0] != lat||e[1] != lng}); LS.setItem(LSkey, JSON.stringify(newval)); } var markers = [], lastMarker, popupOpenedMarker; function rmMarker(mrk) { if (mrk) { removeLsMarkers(mrk); mrk.remove(); popupOpenedMarker = null; } } function mvMarker(ll) { let s = `北緯=${ll.lat.toFixed(G_KETA)}<br>東経=${ll.lng.toFixed(G_KETA)}`; if (lastMarker) lastMarker.setLatLng(ll); else { lastMarker = L.marker(ll); } let div = document.createElement("div"), p = document.createElement("p"), btn = document.createElement("button"); p.innerHTML = s; btn.textContent = "《このマーカを消す》"; btn.addEventListener('click', (e)=>{rmMarker(popupOpenedMarker)}); div.appendChild(p); div.appendChild(btn); console.log(`s=${s}`); lastMarker.bindPopup(div); lastMarker.on('popupopen', (e)=>{ let p = e.target.getPopup().getContent().querySelector("p"); console.log(`marked = ${p.textContent}`); if (p) dispInfo(p.innerHTML.replace("<br>", ", ")); popupOpenedMarker = e.target; }); lastMarker.addTo(mymap); } function mvMarkerByGNSS(latlng) { mymap.panTo(latlng); mvMarker(latlng); } function mvMarkerByClick(e) { mvMarker(e.latlng); } function kokoMemo() { if (lastMarker) { markers.push(lastMarker); let ll = lastMarker.getLatLng(), lat = ll.lat.toFixed(G_KETA), lng = ll.lng.toFixed(G_KETA), pop = lastMarker.getPopup(); let msg = `記録地点はここよ: 北緯 ${lat}, 東経 ${lng}`; lastMarker.setIcon(yellowIcon).bindPopup(pop); dispInfo(msg); lastMarker = null; appendLsMarker(ll); } else { alert("設定できるマーカーはまだないの."); } } function resetMarkers() { let m; if (markers.length==0) { dispInfo("まだ何一つ覚えていない..."); return; } if (confirm("ほんとに消していいの?")) { while (m=markers.shift()) { rmMarker(m); } LS.reset(); dispInfo("さらば思い出の地"); } } function mapInit() { infobox = document.getElementById("info"); mymap = L.map("mymap", baseLayers).setView([38.894, 139.81976], 18); L.control.scale().addTo(mymap); // 縮尺表示追加 lastMarker = L.marker(mymap.getCenter()); lastMarker.setPopupContent("Hi!").addTo(mymap); btnGet = document.getElementById("get"); btnSTOP = document.getElementById("stop"); if (btnGet) btnGet.addEventListener("click", getGNSS, false); if (btnSTOP)btnSTOP.addEventListener("click", stopGNSS, false); // Create yellow Icon yellowIcon = L.icon({ iconUrl: "img/Yellow.png", iconSize: [40, 41], iconAnchor: [10, 41], popupAnchor: [3, -41] }); L.control.layers(baseLayers).addTo(mymap); offlineLayerGsiPhoto.addTo(mymap); mymap.on('click', mvMarkerByClick); document.getElementById("memo").addEventListener("click", kokoMemo); document.getElementById("reset").addEventListener( "click", resetMarkers); restoreLsMarkers(); } function dispInfo(msg) { info.innerText = msg; } function clearWatchGNSS() { // 位置取得ボタンを元に戻す navigator.geolocation.clearWatch(gnssWatchID); gnssWatchID = null; btnGet.classList.remove('running'); btnGet.disabled = false; dispInfo("衛星信号取得停止"); } function getGNSS(ev) { if (gnssWatchID) { dispInfo("もう探索中なの、急かしても無駄よ."); return; } gnssWatchID = navigator.geolocation.watchPosition( onSuccess, onError, { maximumAge: 0, timeout: 8000, enableHighAccuracy: true }); setTimeout(clearWatchGNSS, 10000); btnGet.classList.add('running'); btnGet.disabled = true; dispInfo("取得中..."); } function stopGNSS(ev) { clearWatchGNSS(); dispInfo("衛星信号捕捉を停止しました."); } function onSuccess(pos) { // 成功時のコールバック。関数名は何でもよい。 // pos.coords に位置情報が入る。LeafletのLatLngに変換する。 //onSuccessL(L.latLng([pos.coords.latitude, pos.coords.longitude])); console.log([pos.coords.latitude, pos.coords.longitude]); mvMarkerByGNSS(L.latLng([pos.coords.latitude, pos.coords.longitude])); } function onError(err) {// 失敗時のコールバック lastMarker.setPopupContent("取得失敗:"+restN).openPopup(); dispInfo("空がよく見える位置でないと駄目なのよ"); dispInfo("衛星信号捕捉は中止するわね.") clearWatchGNSS(); } workerInit(); mapInit(); });