/* Add some objects on a Map */

document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.906831,139.848232], 14);
    var osm =
	L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution:
	    '<a href="http://osm.org/copyright">OpenStreetMap</a>'
	}).addTo(mymap);
    var eiseimap =
	L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
	    attribution:
	    '<a href="http://maps.gsi.go.jp/development/ichiran.html">地理院衛星画像</a>'
	});
    L.control.scale().addTo(mymap);



var pl = [			// Polyline: 連続線分
    [38.892123,139.818884],
    [38.891187,139.819313],
    [38.891196,139.820108],
    [38.894832,139.820037],
    [38.896669,139.819908],
    [38.898740,139.818878],
    [38.908698,139.835780],
    [38.910011,139.837418],
    [38.912316,139.839821],
    [38.913941,139.840522],
    [38.920297,139.842442],
    [38.920390,139.842213],
];

var plProp = {			// polylineのプロパティを定義
    color: "red",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9			// 線分の太さ
};
var plobj = L.polyline(pl, plProp).addTo(mymap);

// 酒田MFの方↓-------------------------------------------
var pg = [			// Polygon: ポリゴン
    [38.920469,139.842106],
    [38.920444,139.842417],
    [38.920256,139.842365],
    [38.920352,139.842074],	// 終点と始点は連結される
];
var pgOpt = {			// polygonに与えるオプション
    color: "blue",		// 線分の色
    fillColor: "yellow",		// 塗りつぶし部分の色
    fillOpacity: 0.2		// 塗りつぶし部分の透明度
};
var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点
var m1opt = {title: "その1"}, m2opt = {title: "その2"};
var m1 = L.marker(marker1, m1opt).addTo(mymap);
var m2 = L.marker(marker2, m2opt).addTo(mymap);

/* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
plobj.bindPopup("大学から酒田MFまでの道");
pgobj.bindPopup("とうちゃく");
m1.bindPopup("すたーと");
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
m2.bindPopup("酒田ミュージックファクトリー");

// 駐車場のポリゴン↓------------------------------------------------------------
var pg = [
    [38.921252,139.844661],
    [38.920593,139.845008],
    [38.920949,139.845824],
    [38.921469,139.845352],
];
var pgOpt = {			// polygonに与えるオプション
    color: "pink",		// 線分の色
    fillColor: "blue",		// 塗りつぶし部分の色
    fillOpacity: 0.2		// 塗りつぶし部分の透明度
};
var pgobj2 = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点
var m1opt = {title: "その1"}, m2opt = {title: "その2"};
var m3 = L.marker(marker2, m2opt).addTo(mymap);

pgobj2.bindPopup("駐車料金を忘れずに！");
m3.bindPopup("駐車場はここ");

// 駐車場までの道↓-----------------------------------
var pl = [			// Polyline: 連続線分
    [38.920297,139.842442],
    [38.921111,139.842646],
    [38.920980,139.843422],
    [38.921314,139.844563],
    [38.921002,139.844745],
];

var plProp = {			// polylineのプロパティを定義
    color: "blue",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9			// 線分の太さ
};
var plobj2 = L.polyline(pl, plProp).addTo(mymap);
plobj2.bindPopup("駐車場までの道");

L.control.layers(
	{'OSM': mymap, '地理院衛星画像': eiseimap},
	{'駐車場までの道': plobj2,
    '駐車場': pgobj2,
    'MFまでの道':plobj,
    'MF':pgobj,}
    ).addTo(mymap);
}, false);