document.addEventListener("DOMContentLoaded", () => {
    /* tileの読み込み*/
    var mymap = L.map("mymap").setView([38.891, 139.824], 16);
    var osmTile =   //osmのタイル
    L.tileLayer('http://{s}.tile.osm.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 baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};

    L.control.layers(baseLayers).addTo(mymap);
    
    /* Add some objects on a Map */

    var pl = [			// Polyline: 連続線分
    [38.891404,139.820439],
    [38.891805,139.823395],
    [38.892532,139.823481],
    [38.892699,139.823674],
    [38.892724,139.824071],
    [38.892824,139.824446],
    [38.892265,139.824752],
    [38.892039,139.825181],
    [38.891601,139.825042],
    [38.891471,139.825133],
    [38.890870,139.824162],
    [38.891313,139.821716],
    [38.891404,139.820386]
    ];

    var plProp = {			// polylineに与えるオプション
    color: "green",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9			// 線分の太さ
    };
    var plobj = L.polyline(pl, plProp).addTo(mymap);

    var m1 = L.marker(pl[0],{title: "その1"}).addTo(mymap);
    var m2 = L.marker(pl[1],{title: "その2"}).addTo(mymap);
    var m3 = L.marker(pl[4],{title: "その3"}).addTo(mymap);
    m1.bindPopup("スタートですの");
    m2.bindPopup("池が見えますの");
    m3.bindPopup("花が見えますの");
    plobj.bindPopup("飯森山公園のお散歩ルートですの");
    

} , false);