// 例: GeoJSONファイルを leaflet-ajax でロードする var jsonmap = L.map("map").setView([38.891, 139.824], 16); var layer = L.tileLayer( 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution: '© <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("parking.geojson", null, //↓がポップアップつきのカスタムレイヤ L.geoJson(null, {onEachFeature: setProperty})); // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ gjl.addTo(jsonmap); // マップに足す gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理 jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント }); L.control.layers(null, { "Triangle": gjl, }).addTo(jsonmap);