(() => { // 例: GeoJSONファイルを leaflet-omnivore でロードする 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: '© 国土地理院' }).addTo(jsonmap); var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点) let p = f.properties; // ごとに、プロパティを取り出し if (p) { // description(概要)を let name = p.name, desc = p.description; let popup = "
" + (desc||"") + "
"; layer.bindPopup(popup); // ポップアップに設定する } } }); // geojson外部ファイルの読み込みは次の行 var gjl = omnivore.geojson("triangle-load.geojson", null, customLayer); // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理 jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント }); gjl.addTo(jsonmap); // マップに足す L.control.layers(null, {"Triangle": gjl}).addTo(jsonmap); })();