(() => {
function MyMap(id) {
    var mymap;
    function init(id) {
	// 例: コントロールレイヤ
	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>'
	    });
	mymap = L.map("mymap", {
	    layers: [gsiTile],
	    center: [38.8877,139.8363], zoom: 15, scrollWheelZoom: false
	});
	// 以下、コントロールレイヤの設定
	//   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
	var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
	//   ベースレイヤとオーバーレイレイヤをマップに追加
	L.control.layers(baseLayers).addTo(mymap);
    }
    function mapObjs() {
        var pl = [			// Polyline: 連続線分
            [38.89329,139.81881],
            [38.89327,139.81905],
            [38.89212,139.81900],
            [38.89211,139.81949],
            [38.89114,139.81954],
            [38.89115,139.82017],
            [38.88996,139.82061],
            [38.8844,139.8236],
            [38.8844,139.8236],
            [38.8831,139.8243],
            [38.88209,139.82514],
            [38.88147,139.82580],
            [38.8810,139.8266],
            [38.88065,139.82744],
            [38.88033,139.82889],
            [38.88021,139.83236],
            [38.88050,139.83550],
            [38.88075,139.83835],
            [38.8822,139.8379],
            [38.88304,139.83797],
            [38.88379,139.83849],
            [38.88444,139.83936],
            [38.89017,139.84797],
            [38.89122,139.84913],
            [38.89188,139.85013],
            [38.89096,139.85113],
            [38.89121,139.85153],
            [38.89212,139.85214],
            [38.89197,139.85260]
        ];
        var plProp = {			// polylineに与えるオプション
            color: "green",		// 線分の色
            opacity: 0.4,		// 線分の透明度
            weight: 9			// 線分の太さ
        };
        var plobj = L.polyline(pl, plProp).addTo(mymap);

        var pg = [			// Polygon: ポリゴン
            // 終点と始点は連結される
            [38.89267,139.85264],
            [38.89242,139.85328],
            [38.89127,139.85252],
            [38.89151,139.85189]
        ];
        var pgOpt = {			// polygonに与えるオプション
            color: "#ba55d3",		// 線分の色
            fillColor: "#ba55d3",		// 塗りつぶし部分の色
            fillOpacity: 0.2		// 塗りつぶし部分の透明度
        };
        var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

        var sIcon = L.icon({
            iconUrl: 'start.png',
            iconAnchor:	[15, 40],
        });
        var gIcon = L.icon({
            iconUrl: 'goal.png',
            iconAnchor:	[13, 40],
        });

        var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点
        var m1opt = {icon: sIcon, title: "東北公益文科大学"}, m2opt = {icon: gIcon, title: "イオン酒田南店"};
        var m1 = L.marker(marker1, m1opt).addTo(mymap);
        var m2 = L.marker(marker2, m2opt).addTo(mymap);

        /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
        plobj.bindPopup("東北公益文科大学からイオン酒田南店までの道のり");
        pgobj.bindPopup("イオン酒田南店ですよ！");
        m1.bindPopup("東北公益文科大学！");
        m2.bindPopup("イオン酒田南店！");
    }
    // ↓初期化時にすぐ実行される
    init(id);
    mapObjs();
};
document.addEventListener("DOMContentLoaded", function(){
    MyMap("mymap");}, false);
})();