Newer
Older
2022-yuuji / map / renshu / mymap.js
@HIROSE Yuuji HIROSE Yuuji on 9 Dec 2022 1 KB Add layerControl
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:
	    '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
	}).addTo(mymap);
    var gsiSatellite =
	L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
	    attribution:
	    '<a href="http://maps.gsi.go.jp/development/ichiran.html">地理院衛星画像</a>'
	});
    var osmtopo =
	L.tileLayer('//{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
	    attribution:
	    '&copy; OpenStreetMap contributions, SRTM | map style: &copy; 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("ここが店だよーおお");

    L.control.layers(
	{'地理院地図': gsimap, '地理院衛星画像': gsiSatellite, 'OSM Topo': osmtopo},
	{'たろうへの道順':	taroRoute,
	 'たろう店舗':		taroTenpo}
    ).addTo(mymap);

}, false);