function entInit() { var baseLayer = {}; var map_osm = new L.tileLayer( // OpenStretMap 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution : '© <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;