Newer
Older
stamp-2022 / koki / map.js
document.addEventListener("DOMContentLoaded", () => {
        var mymap = L.map("mymap").setView([38.919, 139.828], 17);
        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    	attribution:
    	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(mymap);
        
        var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap);
        gpsmarker.bindPopup("START").openPopup();
   
     
        var nTrial = 10;
        var watchId = null;
        var point = 0;
        var titen = [];
        var marker = [];
        let comment = [];
        var csvfile = "latlng.csv";
        
            function putValues(row) {
    	for (let key of Object.keys(row)) {
    	}
        }
        function init(){
    	fetch(csvfile).
    	    then((resp) => {
    		if (resp.ok) return resp.text();
    	    }).then((txt) => {
    		let csv = new CSV(txt,{header:true}).parse();
    		for (let x of csv){
    		    putValues(x);
    		    console.log(x);
    		    let p= L.latLng(x.lat,x.lng);
    		    titen.push(p);
    		    comment.push(x.comment);
    		    marker.push(L.marker(p).bindPopup(x.name).addTo(mymap));
    		}
    	    });;
        }
        init();
        
      
        
        //localstorage
        if (localStorage.getItem('sengoku')!=0){
    	let img = document.getElementById("image");
    	img.src = "image/sengoku.png"
        };
       
        //GPSの取得に関するコード
        function stopGPS() {
    	console.log("watchId="+watchId);
    	if (watchId != null) {
    	    navigator.geolocation.clearWatch(watchId);
    	    gpsmarker.setPopupContent("止めました");
    	}
    	watchId = null;
        }
        function tryWatchGPS() {
    	stopGPS();
    	watchId = navigator.geolocation.watchPosition(
    	    onSuccess,onError,{
    		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
        }
        function onSuccess(pos) {
    	var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
    	mymap.panTo(latlng);
    	console.log(latlng);
    	gpsmarker.setLatLng(latlng).setPopupContent(
    	    "ここは lat="+latlng.lat+", lng="+latlng.lng+"です"
    	).openPopup();
   	var x=L.latLng([38.89177, 139.81937]);
	console.log(latlng.distanceTo(x[0]));
	if (latlng.distanceTo(x) <30){
		let sengoku =localStorage.getItem('sengoku');
		if (sengoku ==0){
			alert("スタンプゲット!");
		}
		stampget();
	}
    }
    
        function onError(err) {
    	restN = "あと"+(--nTrial)+"回試行します";
    	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
    	if (nTrial <= 0) {
    	    navigator.geolocation.clearWatch(watchId);
    	}
        }
        
        //スタンプゲットの判定
        function stampget(){
    	let img = document.getElementById("image");
    	let sengoku = localStorage.getItem('sengoku')
    	if (sengoku == 0) {
    	    img.src = "image/sengoku.png";
    	    localStorage.setItem('sengoku',1);
    	}
        }
        function resetstamp() {
    	let img = document.getElementById("image");
    	localStorage.removeItem('sengoku');
    	localStorage.setItem('sengoku',0);
    	img.src = "image/img.png";
        }
        //マップクリックで移動できるようにする
        mymap.options.singleClickTimeout = 250;
        mymap.on('singleclick', function(e) {
    	if (true){
    	    latlng = L.latLng(e.latlng);
    	    gpsmarker.setLatLng(e.latlng);
    	    mymap.panTo(e.latlng);
    	    console.log(e.latlng);
    	    gpsmarker.setLatLng(e.latlng).setPopupContent(
    		"lat="+latlng.lat+", lng="+latlng.lng+""
    	    ).openPopup();
    	}
    	
    		for (var i in titen) {
	    if (latlng.distanceTo(titen[i]) < 30) {
		if (!judge[i]){
		    judge[i] = true;
		    let img = document.getElementById(`image${i}`);
		    img.src = "image/sengoku.png";
		    marker[i].setIcon(geticon).setPopupContent(comment[i]);
		}
	    }
	}
    });
        
        document.getElementById("start").addEventListener("click", tryWatchGPS);
        document.getElementById("stop").addEventListener("click", stopGPS);
        document.getElementById("reset").addEventListener("click", resetstamp);
    }, false);