diff --git a/web/map/test.mado/map.html b/web/map/test.mado/map.html new file mode 100644 index 0000000..d0a184a --- /dev/null +++ b/web/map/test.mado/map.html @@ -0,0 +1,30 @@ + + + + +公益大でおためし + + + + + + + + + + + + +
+ + + diff --git a/web/map/test.mado/map.js b/web/map/test.mado/map.js new file mode 100644 index 0000000..6bb3139 --- /dev/null +++ b/web/map/test.mado/map.js @@ -0,0 +1,26 @@ +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(mymap); + +var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ + onEachFeature: function(f, layer) { // このブロックは + let p = f.properties; // triangle-umap.js と同じ + if (p) { // + let name = p.name, desc = p.description; + let popup = "

" + name + "

" + "

" + (desc||"") + "

"; + layer.bindPopup(popup); // + } + } +}); + +// geojson外部ファイルの読み込みは次の行 +var gjl = omnivore.geojson("sample.geojson", null, customLayer); +// ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ +gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理 + mymap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント +}); +gjl.addTo(mymap); // マップに足す +//L.control.layers(null, {"Triangle": gjl}).addTo(mymap);