document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.891, 139.824], 13);
    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 pg1 = [			// Polygon: ポリゴン
	    [38.894,139.809],
	    [38.883,139.829],
	    [38.871,139.818],		// 終点と始点は連結される
	];
	var pgOpt1 = {			// polygonに与えるオプション
	    color: "blue",		// 線分の色
	    fillColor: "pink",		// 塗りつぶし部分の色
	    fillOpacity: 0.5		// 塗りつぶし部分の透明度
	};
 
	L.polygon(pg1, pgOpt1).addTo(mymap);
	
	
	
		var pg = [			// Polygon: ポリゴン
	    [38.889,139.853],
	    [38.882,139.845],
	    [38.890,139.846],
	    [38.893,139.855],		// 終点と始点は連結される
	];
	var pgOpt = {			// polygonに与えるオプション
	    color: "red",		// 線分の色
	    fillColor: "pink",		// 塗りつぶし部分の色
	    fillOpacity: 0.2		// 塗りつぶし部分の透明度
	};
	L.polygon(pg, pgOpt).addTo(mymap);
	
	
	var pg2 = [			
	    [38.910,139.832],
	    [38.915,139.846],
	    [38.919,139.841],
	];
	var pgOpt2 = {			
	    color: "red",		
	    fillColor: "pink",		
	    fillOpacity: 0.4		
	};
	L.polygon(pg2, pgOpt2).addTo(mymap);
	
	var pg3 = [			
	    [38.903,139.845],
	    [38.899,139.845],
	    [38.908,139.859],
	];
	var pgOpt3 = {			
	    color: "blue",		
	    fillColor: "pink",		
	    fillOpacity: 0.4		
	};
	L.polygon(pg3, pgOpt3).addTo(mymap);
	
	var marker1 = pg[0], marker2 = pg[1];
	var m1opt = {title: "その1"}, m2opt = {title: "その2"};
	var m1 = L.marker(marker1, m1opt).addTo(mymap);
	var m2 = L.marker(marker2, m2opt).addTo(mymap);
	m1.bindPopup("その1ですよ!");
	m2.bindPopup("その2ですよ!");
	
	var pgobj = L.polygon(pg, pgOpt).addTo(mymap);
	pgobj.bindPopup("danger!");
	var pgobj1 = L.polygon(pg1, pgOpt1).addTo(mymap);
	pgobj1.bindPopup("danger!");
	var pgobj2 = L.polygon(pg2, pgOpt2).addTo(mymap);
	pgobj2.bindPopup("danger!");
	 var pgobj3 = L.polygon(pg3, pgOpt3).addTo(mymap);
	pgobj3.bindPopup("danger!");
	
	
	
	
    var nTrial = 100
    var watchId = null;		// 最初はnullにしておく
    function stopGPS() {	// watchが動いていたら止めてnullにする
	console.log("watchId="+watchId);
	if (watchId != null) {	// nullかどうかで比較しないとだめ(初期値0)
	    navigator.geolocation.clearWatch(watchId);
	    document.getElementById("title").textContent = "stop";
	    gpsmarker.setPopupContent("停めました");
	}
	watchId = null;
    }
    function tryWatchGPS() {
	stopGPS();		// 二重で動かないように注意する
	watchId = navigator.geolocation.watchPosition(
	    onSuccess, onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
	document.getElementById("title").textContent = "START!!";
    }
    function onSuccess(pos) {	// GPS信号が取れたらここに来る
	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 = latlng.lat, y = latlng.lng;
	if(x > 38.884 && x < 38.889 && y > 139.8608 && y <139.8673){
	    alert("おめでとう!!");
	    stopGPS();
	}else {
	    document.getElementByID("title").textContent
		="裏庭に行ってみて!";
	}
	// ★★★★★ ここまでの latlng.lat と latlng.lng を
	// if文などで判定して、特定の場所に近づいたら「GOAL!」と
	// 表示するように変えてみよ。
    }
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します。";
	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }
    // STARTボタンに開始を仕込む
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    // STOPボタンに停止を仕込む
    document.getElementById("stop").addEventListener("click", stopGPS);
}, false);