// 例: ImageOverlay

var leftBottom = [38.917316, 139.827386],
    rightTop = [38.935,139.857030];
var map = L.map("imagemap").setView(leftBottom, 15);
map.setMaxBounds([leftBottom, rightTop]);	//写真外にスクロールしない
map.setMinZoom(12).setMaxZoom(22);		//ズーム倍率範囲設定
var imageUrl = '../src/images/ajisai.jpg',
    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>'
    }).addTo(map);
L.control.layers(
    {'地理院地図': gsiLayer},
    {'画像':	   imageLayer}).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)