Newer
Older
Loremap / Auto_editsys / user / data / yuza_wakimizu.js
@Kanan Homma Kanan Homma on 26 Sep 2018 3 KB add yuza.html

function okiro(){
    // data = $.csv.toObjects(Text);
    var timerInterval = 10000;	// GPS失敗で何秒後に再取得か
    var tmId = null;
    var nn = 0, countD = document.getElementById("countdown");
    
    var jsonmap = L.map("mymap");
    var layer = L.tileLayer(
	'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
	{attribution:
	 '&copy; <a href="//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html">国土地理院</a>'
	}).addTo(jsonmap);

    var point = L.marker().addTo(jsonmap);
    var stop = document.getElementById("stp");
    var gps = document.getElementById("str");
    var ser = document.getElementById("serif");
    var tm = document.getElementById("time");
    var nowTrying = null;
    
    function tryGetGPS() {
	clearTimer();
	countD.textContent = "START!"
	ser.textContent = "get GPS..."
	nowTrying = navigator.geolocation.getCurrentPosition(
    	    onSuccess, onError,{
    		maximumAge: 0, timeout: 3000, enableHighAccuracy: true})
    }
    
    function onemore() {
	if (nowTrying || tmId) {
	    info.textContent = "It already getting a GPS ...or 待機中です。";
	} else {
	    startTimer();
	}
    }
    function startTimer() {
	if (tmId==null){
    	    tmId = setTimeout(tryGetGPS, 5000);
    	    ser.textContent = "5秒後にGPS取得…";
	    tm.textConent = "ok";
    	}
    }
    function clearTimer() {
     	if (tmId) {
	    clearTimeout(tmId);
	    tmId = null;
	}
    }

    function countDown() {
	tryGetGPS();
    }
    
    function stopCountDown() {
	clearTimeout();
	countD.textContent = "stop";
     	ser.innerHTML = "startボタンをもう一度押すと始まります";
    }

    function onSuccess(pos) {
	nowTrying = null;
	// var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'#1199fb'});
	var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
	ser.textContent = "現在の位置は"+latlng+"です。";
	jsonmap.panTo(latlng);
	// L.marker([lat, lng],{icon: pulsingIcon}).addTo(geomap);
	point.setPopupContent("now").openPopup().setLatLng(latlng);
	var lat = latlng.lat, lng = latlng.lng;
    }
    function onError(err) {			// 失敗時
	nowTrying = null;
	ser.textContent = "現在位置の取得失敗.10秒後にもう一回";
	tmId = setTimeout(tryGetGPS, timerInterval);
    }
    


    var yuzalayer = new L.GeoJSON.AJAX("yuza_wakimizu.geojson",{
	onEachFeature: function(j, layer) {
	    let p = j.properties;
	    if (p) {
		let name = p.name, desc = p.description;
		if (p.name) {
		    if (desc) {
			// {{画像URL}} → <img src="画像URL"> に置換する
			desc = desc.replace(/{{(.*)}}/, '<img src="$1">')
		    }
		    let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
		    layer.bindPopup(popup);
		}
	    }
	}});
    yuzalayer.addTo(jsonmap);
    yuzalayer.on('data:loaded', function() {
	jsonmap.fitBounds(yuzalayer.getBounds());
	// alert(JSON.stringify(yuzalayer.toGeoJSON()));
	// yuzalayer.toGeoJSON() で元のGeoJSONが得られる
    });
    L.control.layers(null, {"遊佐湧水マーカー": yuzalayer}).addTo(jsonmap);
    
    gps.addEventListener("click",countDown , false);
    stop.addEventListener("click", stopCountDown, false);
};
document.addEventListener("DOMContentLoaded", okiro, false);