Newer
Older
stamp-2022 / koki / map.js
document.addEventListener("DOMContentLoaded", () => {


 var greenIcon= L.icon({
	iconUrl:"Hana.png",
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
	
    var tubomiIcon = L.icon({
    	iconUrl:"Tubomi .png",
    	iconSize:[75,75],
    	iconAnchor:[37,75],
    	popupAnchor:[0,-70]
        });

	
fetch("./AEDmapsmall.geojson")
.then(response => response.json())
.then(data => {
	L.geoJSON(data, {
      // カスタムアイコンを設定する
     pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: tubomiIcon});
      },
      // ポップアップを表示する
      onEachFeature: function(feature, layer){
        // 地物の名前を取り出す
        let name = feature.properties.設置場所;
        // ポップアップに名前を表示する
        layer.bindPopup(name);
      }
    }).addTo(mymap);
});
	
	
	
	
	
	
	
	
	
	
	
    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 map = L.map('mapcontainer');
    map.setView([113.89218,139.8378]);
    
    
    
    
    
 
 


    
    
    
    
    
   
    
    var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap);
    gpsmarker.bindPopup("START").openPopup();
  
    var nTrial = 10;
    var watchId = null;
    var point = 0;
    


   // var marker = L.marker([38.919584, 139.827638],{icon:tubomiIcon}).addTo(mymap).bindPopup("やあ");
   

// L.marker([38.919584, 139.827638], {icon: myIcon}).addTo(map);
   // var marker = L.marker([38.91979254135945, 139.82936561107638]). addTo(mymap).bindPopup("Hana.png");
   // var marker = L.marker([38.920251830383336, 139.8303955793381]). addTo(mymap).bindPopup("こんにちは");
   // var marker = L.marker([38.91865090803798, 139.82746660709384]). addTo(mymap);
    
   marker.on('click', function(){
   if (marker.getIcon() === tubomiIcon) {
      marker.setIcon(greenIcon);}
     
    });
  
   

    //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.919584, 139.827638]);
	          var X = L.latLng([38.91979254135945, 139.82936561107638]);
                  var X = L.latLng([38.920251830383336, 139.8303955793381]);
	console.log(latlng.distanceTo(x));
	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();
	}
	var x =L.latLng([38.919584, 139.827638]);
                  var X = L.latLng([38.91979254135945, 139.82936561107638]);
                  var X = L.latLng([38.920251830383336, 139.8303955793381]);
 

	console.log(latlng.distanceTo(x));
	if (latlng.distanceTo(x) < 30) {
	    let sengoku =localStorage.getItem('sengoku'); 
	    if (sengoku == 0) {
		alert("スタンプゲット!!");
	    }
	    stampget();
	}
	
    });
    
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    document.getElementById("reset").addEventListener("click", resetstamp);
}, false);