(() => {
function MyMap(id) {
    var mymap;
    function init(id) {
	mymap = L.map(id).setView([38.901220,139.831367], 14);
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	    attribution:
	    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
		contributors'
	}).addTo(mymap);
    }
   function mapObjs() {
	var pl = [			// Polyline: 連続線分
	    [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("大学についた!");
    }
    // ↓初期化時にすぐ実行される
    init(id);
    mapObjs();
};
document.addEventListener("DOMContentLoaded", function(){
    MyMap("mymap");}, false);
})();