document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.89, 139.82], 14);
    var osmTile =
	L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution:
	    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
	}).addTo(mymap);
    var gsiTile =
	L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	    attribution:
	    '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'	 
	});

    var pl =[
	[38.921748,139.845850],
	[38.920964,139.843383],
	[38.921807,139.839048],
	[38.919962,139.838684],
	[38.912391,139.834929],
	[38.908717,139.835830],
	[38.898665,139.818921],
	[38.896653,139.819951],
	[38.893981,139.820015]
    ];
    var plProp = {			// polylineのプロパティを定義
	color: "red",		// 線分の色
	opacity: 0.4,		// 線分の透明度
	weight: 9			// 線分の太さ
    };
    var plobj = L.polyline(pl, plProp).addTo(mymap);

    var pg = [			// Polygon: ポリゴン
	[38.894548,139.818513],
	[38.894715,139.819887],
	[38.892093,139.820187],
	[38.892027,139.818299],	// 終点と始点は連結される
    ];
    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: "酒田駅"}, m2opt = {title: "大学"};
    var m1 = L.marker(marker1, m1opt).addTo(mymap);
    var m2 = L.marker(marker2, m2opt).addTo(mymap);

    /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
    plobj.bindPopup("酒田駅から大学までの道ですよ!");
    pgobj.bindPopup("東北公益文科大学ですよ!");
    m1.bindPopup("スタート!").openPopup();
    // 次のようにあらかじめ1つのポップアップを開いておくことも可能
    m2.bindPopup("大学についた!");

    L.control.layers(
	{'OpenStreetMap': osmTile, '国土地理院': gsiTile},
    ).addTo(mymap);

}, false);
