var leftBottom = [38.892933, 139.818393],
    rightTop = [38.894298, 139.819937];
var map = L.map("mymap").setView(leftBottom, 1);
map.setMaxBounds([leftBottom, rightTop]);	//写真外にスクロールしない
//map.setMinZoom(5).setMaxZoom(15);		//ズーム倍率範囲設定
var imageUrl = 'matu.png',
    imageBounds = [leftBottom, rightTop];
var imageLayer = L.imageOverlay(
  imageUrl, imageBounds, {opacity: 0.5}).addTo(map);
var gsiLayer =
    L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution:
	'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',maxZoom: 20, maxNativeZoom: 18
    }).addTo(map);


var customLayer = L.geoJson(null, {	// omnivoreに引き渡すGeoJSONレイヤ
    style: function (feature){
    	return feature.properties._umap_options;
    },
    onEachFeature: function(f, layer) {	// レイヤ上に配置する feature(地点)
	let p = f.properties;		// ごとに、プロパティを取り出し
	if (p) {			// description(概要)を
	    let name = p.name, desc = p.description;
	    let popup = "<h3>" + name + "</h3>" + "<p>" + (desc||"") + "</p>";
	    layer.bindPopup(popup);	// ポップアップに設定する
	}
    }
});

// geojson外部ファイルの読み込みは次の行
var gjl = omnivore.geojson("sample.geojson", null, customLayer);
// ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
gjl.on("ready", function() {	// 'ready' イベントに読み終わったときの処理
    map.fitBounds(gjl.getBounds());	// 読み取り失敗時は 'error' イベント
});
gjl.addTo(map);		// マップに足す

L.control.layers(
    {'地理院地図': gsiLayer},
    {'画像':	   imageLayer},
    {"アイコン ": gjl}
).addTo(map);


// クリックした緯度経度を出すようにしておくと marker 位置が探しやすい
// map.on("click", function(e) {
//     // id="latlng-span" の要素を探して内部のHTML記述を書き変える
//     document.getElementById("latlng-span").innerHTML = e.latlng;
// });
// function addButtonEvent() {
//   var btns = document.getElementsByTagName("button");
//   if (btns) {
//     for (var i=0; i<btns.length; i++) {
//       btns[i].addEventListener("click", function(e) {
// 	imageLayer.setOpacity(e.target.value)
//       });
//     }
//   }
// }
//document.addEventListener("DOMContentLoaded", addButtonEvent)