/* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */
 
document.addEventListener("DOMContentLoaded", () => {
var mymap = L.map("mymap").setView([38.928, 139.848], 14);
    //16...ズームのやつだっけ
    var gsimap=
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
 
    //レイヤーで使うの定義
 var tirieisei =
	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); 
 
//div id mymap
 
/*ポリゴンつくります*/
 
var pg = [			// Polygon: ポリゴン
    [38.9328,139.8499],
    [38.9327,139.8531],
    [38.9350,139.8518],
    [38.9347,139.8503],
   	// 終点と始点は連結される
];
var pgOpt = {			// polygonに与えるオプション
    color: "blue",		// 線分の色
    fillColor: "pink",		// 塗りつぶし部分の色
    fillOpacity: 0.3		// 塗りつぶし部分の透明度
};
var pgobj = L.polygon(pg, pgOpt).addTo(mymap);
 
/*線引きます*/
var pl = [			// Polyline: 連続線分
    [38.9214,139.8464],
    [38.9329,139.8476],
    [38.9327,139.8513]
];
var plProp = {			// polylineのプロパティを定義
    color: "tomato",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9			// 線分の太さ
};
 
   var plobj = L.polyline(pl, plProp).addTo(mymap);
 
 
/*ポップアップ表示する*/
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("車気をつけよう");
pgobj.bindPopup("お疲れ様です(^^)");
m1.bindPopup("駅裏です");
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
m2.bindPopup("酒田西高").openPopup();
 
    //レイヤー書き込む
 
var mymap = L.map("mymap", {
layers: [gsiTile, m1, m2, plobj, pgobj],
center: mlCenter, zoom: 16, scrollWheelZoom: false
});
// 以下、コントロールレイヤの設定
//   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
//   マーカーを2つオーバーレイレイヤに指定
var ovlLayers  = {'B研': m1, 'セブンイレブン': m2, 'B研からセブン': plobj, 'セブン' : pgobj};
//   ベースレイヤとオーバーレイレイヤをマップに追加
L.control.layers(baseLayers, ovlLayers).addTo(mymap);
 
}, false);