diff --git a/map/michi/michi.js b/map/michi/michi.js index 79e40e4..b3cd84b 100644 --- a/map/michi/michi.js +++ b/map/michi/michi.js @@ -1,52 +1,47 @@ -/* Add some objects on a Map */ -document.addEventListener("DOMContentLoaded", ()) => { - var mymap = L.map("mymap").setView([38.886800,139.838516], 14); - var gsiMap = //国土地理院タイル - L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',{ - attribution: - '国土地理院' - }).addTo(mymap); - var eiseimap = - L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { - attribution: - '地理院衛星画像' - }); - L.conttrol.scale().addTo(mymap); -} +document.addEventListener("DOMContentLoaded", () => { + var mymap = L.map("mymap").setView([38.89, 139.82], 14); + var gsimap = + L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: + '国土地理院' + }).addTo(mymap); + var gsiSatellite = + L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { + attribution: + '地理院衛星画像' + }); + var osmtopo = + L.tileLayer('//{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap contributions, SRTM | map style: © OpenTopoMap' + }); + L.control.scale().addTo(mymap); + //ここから好きな店へのルートを足す ラーメンたろう! + var ramenTaro = [ //地理院地図で右クリックして下に出る値をもらう + [38.894440,139.819973], + [38.896644,139.819919], + [38.903913,139.816604], + [38.904276,139.814882], + [38.904985,139.814919] + ]; + var taroProp = {color: "purple", opacity: 0.6, weight: 8}; + var taroRoute = L.polyline(ramenTaro, taroProp).addTo(mymap); //ルートの追加 + //お店を囲む + var taroPolygon = [ + [38.904944,139.814946], + [38.904944,139.814683], + [38.905048,139.814683], + [38.905048,139.814946] + ]; + var polyProp = { + color: "black", fillColor: "orange", fillOpacity: 0.5} + var taroTenpo = L.polygon(taroPolygon, polyProp).addTo(mymap); + taroTenpo.bindPopup("ここが店だよーおお"); -var pl = [ // Polyline: 連続線分 - [38.892123,139.818884], - [38.891187,139.819313], - [38.891780,139.823411], -]; -var plProp = { // polylineのプロパティを定義 - color: "red", // 線分の色 - opacity: 0.4, // 線分の透明度 - weight: 9 // 線分の太さ -}; -var plobj = L.polyline(pl, plProp).addTo(mymap); + L.control.layers( + {'地理院地図': gsimap, '地理院衛星画像': gsiSatellite, 'OSM Topo': osmtopo}, + {'たろうへの道順': taroRoute, + 'たろう店舗': taroTenpo} + ).addTo(mymap); -var pg = [ // Polygon: ポリゴン - [38.895,139.821], - [38.895,139.822], - [38.894,139.822], - [38.894,139.820], // 終点と始点は連結される -]; -var pgOpt = { // polygonに与えるオプション - color: "blue", // 線分の色 - fillColor: "pink", // 塗りつぶし部分の色 - fillOpacity: 0.2 // 塗りつぶし部分の透明度 -}; -var pgobj = L.polygon(pg, pgOpt).addTo(mymap); - -var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点 -var m1opt = {title: "その1"}, m2opt = {title: "その2"}; -var m1 = L.marker(marker1, m1opt).addTo(mymap); -var m2 = L.marker(marker2, m2opt).addTo(mymap); - -/* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */ -plobj.bindPopup("ポリラインですよ!"); -pgobj.bindPopup("ポリゴンですよ!"); -m1.bindPopup("その1ですよ!"); -// 次のようにあらかじめ1つのポップアップを開いておくことも可能 -m2.bindPopup("その2ですよ!").openPopup(); \ No newline at end of file +}, false); \ No newline at end of file