(() => {
// 例: GeoJSONファイルを leaflet-ajax でロードする
var jsonmap = L.map("load-json").setView([38.891, 139.824], 16);
var layer = L.tileLayer(
    'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
    {attribution:
     '&copy; <a href="//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html">国土地理院</a>'
    }).addTo(jsonmap);

function setProperty(f, layer) { // カスタムレイヤ作成用の関数
    let p = f.properties;	 // 受け取ったfeatureから
    if (p) {			 // ポップアップを生成する
	let name = p.name, desc = p.description;
	let popup = "<h3>" + name + "</h3>" + "<p>" + (desc||"") + "</p>";
	layer.bindPopup(popup);
    }
}

// geojson外部ファイルの読み込みは次の行
var gjl = omnivore.geojson("triangle-load.geojson",
			   null,
			   //↓がポップアップつきのカスタムレイヤ
			   L.geoJson(null, {onEachFeature: setProperty}));
// ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
gjl.addTo(jsonmap);		// マップに足す

// Google Map KML のロードとレイヤ貼り付け
var kml = omnivore.kml("googlemap.kml",
		       null,
		       //↓がポップアップつきのカスタムレイヤ + 色を緑に
		       L.geoJson(null, {
			   style: {color: "green", weight: 8},
			   onEachFeature: setProperty
		       }))
    .addTo(jsonmap);

// GPSログ GPX のロードとレイヤ貼り付け
var gpx = omnivore.gpx("sakanan.gpx",
		       null,
		       //↓がポップアップつきのカスタムレイヤ + 色を緑に
		       L.geoJson(null, {
			   style: {color: "purple", weight: 8, opacity: 0.5},
			   onEachFeature: setProperty
		       }))
    .addTo(jsonmap);
gpx.on("ready", function() {	// 'ready' イベントに読み終わったときの処理
    jsonmap.fitBounds(gpx.getBounds());	// 読み取り失敗時は 'error' イベント
});

L.control.layers(null, {
    "Triangle": gjl,
    "Googlemap KML": kml,
    "GPX Log":	gpx
}).addTo(jsonmap);
})();