document.addEventListener("DOMContentLoaded", () => {
    // 例: コントロールレイヤ
    var mlCenter   = [38.891, 139.824];
    var otherPoint = [38.890, 139.822];
    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);
    var markerLayer2 = L.marker(otherPoint);
    var mlmap = L.map("markerlayer", {
	layers: [gsiTile, markerLayer1, markerLayer2],
	center: mlCenter, zoom: 16, scrollWheelZoom: false
    });
    /*     上記4行は以下のようにするのと同じ効果
	   var mlmap = L.map("markerlayer").setView(mlCenter, 16);
	   gsiTile.addTo(mlmap);
	   markerLayer1.addTo(mlmap);
	   markerLayer2.addTo(mlmap); */
    // 以下、コントロールレイヤの設定
    //   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
    var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
    //   マーカーを2つオーバーレイレイヤに指定
    var ovlLayers  = {'マーク1': markerLayer1, 'マーク2': markerLayer2};
    //   ベースレイヤとオーバーレイレイヤをマップに追加
    L.control.layers(baseLayers, ovlLayers).addTo(mlmap);
}, false);	// HTML文書がロードされたら上のアロー関数を呼ばせる