/* Add some objects on a Map */
document.addEventListener("DOMContentLoaded", () => {
var pl = [			// Polyline: 連続線分
    [38.895127,139.819371],
    [38.894903,139.819361],
    [38.894907,139.819951],
    [38.896461,139.819897],
    [38.897229,139.819586],
    [38.898849,139.818916],
    [38.903195,139.816936],
    [38.903950,139.816582],
    [38.904418,139.814345],
    [38.904576,139.814356],
    [38.904551,139.814620],
    [38.904706,139.814587]
];
var plProp = {	
    stroke:true,		// polylineに与えるオプション
    color: "#D92B04",		// 線分の色
    opacity: 0.7,		// 線分の透明度
    weight: 9			// 線分の太さ
};
// var plobj = L.polyline(pl, plProp).addTo(mymap);

// var pg = [			// Polygon: ポリゴン
//     [38.904586,139.814572],
//     [38.904589,139.814415],
//     [38.904768,139.814447],
//     [38.904760,139.814849],
//     [38.904647,139.814844],
//     [38.904647,139.814571]	// 終点と始点は連結される
// ];

// var pgOpt = {	
//     stroke:true,		// polygonに与えるオプション
//     color: "black",		// 線分の色
//     fillColor: "yellow",		// 塗りつぶし部分の色
//     fillOpacity: 0.5
//     // clickable:false	// 塗りつぶし部分の透明度
// };

// var osmTile =	// OSMのタイル
// 	L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// 	attribution:
// 	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
// contributors'
// 	});

// 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 mymap = L.map("mymap").setView([38.901020,139.817119], 15);
gsiTile.addTo(mymap);

// var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = pl[0], marker2 = pg[0], marker3 = pl[7];// polylineとpolygon各々の始点
var m1opt = {title: "その1"}, m2opt = {title: "その2"},m3opt={title: "その３"};

var m1 = L.marker(marker1, m1opt).addTo(mymap);
// var m2 = L.marker(marker2, m2opt).addTo(mymap);
var m3 = L.marker(marker3, m3opt).addTo(mymap);
// var circle1 = L.circle(pl[11],{radius: 200,
    // color:'', fillColor: '#399ade'}).addTo(mymap);
// /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
// 次のようにあらかじめ1つのポップアップを開いておくことも可能

m1.bindPopup("公益大学カフェテリア側駐車場スタート！！！").openPopup();
// m2.bindPopup("〒998-0054 山形県酒田市宮野浦２丁目３−３ 酒田市宮野浦学区コミュニティ防災センター");
m3.bindPopup("斜め左方向です");
// plobj.bindPopup("多分坂道");
// circle1.bindPopup("目的地周辺です");

var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
//   マーカーを2つオーバーレイレイヤに指定
var ovlLayers  = {'マーク1': markerLayer1, 'マーク2': markerLayer2};
//   ベースレイヤとオーバーレイレイヤをマップに追加
L.control.layers(baseLayers, ovlLayers).addTo(mymap);
}, false);	// HTML文書がロードされたら上のアロー関数を呼ばせる