diff --git a/map/renshu/mymap.js b/map/renshu/mymap.js index 6560584..5077940 100644 --- a/map/renshu/mymap.js +++ b/map/renshu/mymap.js @@ -1,9 +1,20 @@ document.addEventListener("DOMContentLoaded", () => { var mymap = L.map("mymap").setView([38.89, 139.82], 14); - L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { - attribution: - '国土地理院' - }).addTo(mymap); + 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 = [ //地理院地図で右クリックして下に出る値をもらう @@ -14,7 +25,7 @@ [38.904985,139.814919] ]; var taroProp = {color: "purple", opacity: 0.6, weight: 8}; - L.polyline(ramenTaro, taroProp).addTo(mymap); //ルートの追加 + var taroRoute = L.polyline(ramenTaro, taroProp).addTo(mymap); //ルートの追加 //お店を囲む var taroPolygon = [ [38.904944,139.814946], @@ -24,5 +35,13 @@ ]; var polyProp = { color: "black", fillColor: "orange", fillOpacity: 0.5} - L.polygon(taroPolygon, polyProp).addTo(mymap); + var taroTenpo = L.polygon(taroPolygon, polyProp).addTo(mymap); + taroTenpo.bindPopup("ここが店だよーおお"); + + L.control.layers( + {'地理院地図': gsimap, '地理院衛星画像': gsiSatellite, 'OSM Topo': osmtopo}, + {'たろうへの道順': taroRoute, + 'たろう店舗': taroTenpo} + ).addTo(mymap); + }, false);