document.addEventListener("DOMContentLoaded", () => {
    // 例: コントロールレイヤ
    var mlCenter   = [38.9062, 139.84893];
    var otherPoint = [38.90927, 139.86128];
    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>'


	    
	});
    var markerLayer1 = L.marker(mlCenter);
    markerLayer1.bindPopup("<p>ぼくんち!</p>").openPopup();
    var markerLayer2 = L.marker(otherPoint);
    markerLayer2.bindPopup("<p>ヴァ先!</p>").openPopup();
    var mlmap = L.map("markerlayer", {
	layers: [gsiTile, markerLayer1, markerLayer2],
	center: mlCenter, zoom: 16, scrollWheelZoom: false
    });
   
    
    // 以下、コントロールレイヤの設定
    //   ベースレイヤはOSMと国土地理院2つをJSON形式で指定





    
    var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
    //   マーカーを2つオーバーレイレイヤに指定
    var ovlLayers  = {'マーク1': markerLayer1, 'マーク2': markerLayer2};
    //   ベースレイヤとオーバーレイレイヤをマップに追加
    L.control.layers(baseLayers, ovlLayers).addTo(mlmap);
}, false);	// HTML文書がロードされたら上のアロー関数を呼ばせる
