Newer
Older
Loremap / dyn-map / ent.js
@HIROSE Yuuji HIROSE Yuuji on 6 Dec 2018 4 KB Temporary commit before pulling...
function entInit() {
    var baseLayer = {};
    var map_osm = new L.tileLayer(			// OpenStretMap
	'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution : '&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors | Generated with <a href="//www.gentei.org/~yuuji/software/geomapper/">geomapper</a>',
	maxZoom: 20, maxNativeZoom: 18
	});
    baseLayer["OpenStreetMap"] = map_osm;
    
    var map_gsi = new L.tileLayer( 			// 国土地理院
	'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	    attribution: "<a href='//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
	maxZoom: 20, maxNativeZoom: 18
	});
    baseLayer["地理院地図"] = map_gsi;

    var map_ort = new					// 地理院オルソ
    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
	attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
	maxZoom: 20, maxNativeZoom: 18
    });

    if (L.BingLayer) {
	var bing_key =
	    "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K";
	map_bing = new L.BingLayer(			// BingMap
	    bing_key, {type: "Road", culture: "ja",
		       maxZoom: 20, maxNativeZoom: 18});
	baseLayer["Bing Map"] = new L.BingLayer(
	    bing_key, {type: "Road", culture: "ja",
		       maxZoom: 20, maxNativeZoom: 18});
	baseLayer["Bing Map 衛星写真"] = new L.BingLayer(
	    bing_key, {type: "Aerial", culture: "ja",
		       maxZoom: 20, maxNativeZoom: 18});
	baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer(
	    bing_key, {type: "AerialWithLabels", culture: "ja",
		       maxZoom: 20, maxNativeZoom: 18});
    }
    var map = L.map('map', {layers: [map_gsi]}).setView([38.891, 139.824], 10);
    var mapControl = L.control.layers(baseLayer, null).addTo(map);
    L.control.scale().addTo(map);
    function round(n, d) {
	return Math.round(n * Math.pow(10, d))/Math.pow(10, d);
    }
    function updateLatLng(latlng) {
	document.getElementById("latlon").value =
	    round(latlng.lat, 5) + ", " + round(latlng.lng, 5);
    }
    map.on('contextmenu', function(e) {
	map.panTo(e.latlng);
	updateLatLng(e.latlng);
    });
    function updateLatLng_1(e) {updateLatLng(map.getCenter())}
    map.on('move', updateLatLng_1)
    // alert("DONE");
    function dbRespond(str) {
	if (this.readyState == 4) {		// 4のときデータ受信完了
	    var resp = JSON.parse(this.responseText);
	    var forms = ["name", "addr", "latlon", "description"];
	    var ename = resp["ename"];
	    if (ename == "") return;
	    for (var i of forms) {
		// alert(resp[i]+"la="+resp.lat+", lo="+resp.lon);
		document.getElementById(i).value = resp[i]||"";
	    }
	    // Why do we need twice to panTo correct position????
	    // NG: map.panTo([resp["lat"], resp["lon"]], {noMoveStart: true}).setZoom(15);
	    map.setView([resp["lat"], resp["lon"]], 16, {animate: true});
	    //map.flyTo([resp["lat"], resp["lon"]], 16)
	}
    }
    function doQuery() {
	var ename = document.getElementById("ename").value
	ename = ename.replace(/[^-a-z0-9._]/g, "")	// regularize
	if (entInit_mapitems[ename]) {
	    var conn = new XMLHttpRequest();
	    conn.open('GET', './ent.rb?get/'+ename);
	    conn.setRequestHeader(// 送信ヘッダを定義
		'Content-Type', 'application/x-www-form-urlencoded');
	    // 送信データは 変数1=値1&変数2=値2... で送るが、
	    // 値の部分に&などが入ってもよいよう encodeURIComponent() する
	    conn.send(null);
	    conn.onreadystatechange = dbRespond;// イベントリスナ登録
	}
    }
    document.getElementById("query-ename").addEventListener(
	'click', doQuery, false);
    function fill_byDefault(ename) {
	var forms = ["name", "addr", "latlon", "description"];
	// var ename = document.getElementById("ename").value;
	if (ename == "" || !entInit_mapitems[ename])
	    return;
	var elm = entInit_mapitems[ename];
	for (var i=0; i<forms.length; i++) {
	    document.getElementById(forms[i]).value = elm[forms[i]]||"";
	}
	var lat = elm['lat'], lon = elm['lon'];
	map.panTo([lat, lon]).setZoom(16);
    }
    /*
    document.getElementById("ename").addEventListener("input", function(e) {
	fill_byDefault(e.target.value);
    });
    */
}
// document.addEventListener('DOMContentLoaded', entInit);
entInit();
entInit_mapitems = null;