leaflet-omnivore テスト
leaflet-omnivore の考え方を理解するために、テストをしてみた。
結果
- テストに使ったCSVデータはdataSet/fukui_kindergarten/fukui_kindergarten.csv at master · shimizu/dataSet · GitHubを使用させていただいた。残念ながら、素のgithub.comはCORSを有効にしていないので、コピーを持たせて頂いている。
- アイコンにはhandygeospatial/cobmaki · GitHubのアイコンを使ってみたが、一般図の地図記号なので、該当する適切な記号がない。
解説
omnivore.csv( 'fukui_kindergarten.csv', {latfield: '緯度', lonfield: '経度', delimiter: ','}, L.geoJson(null, { pointToLayer: function(feature, latlng) { return L.marker(latlng, {icon: icon}); }, onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties['保育園名']); } }) ).addTo(map);
https://github.com/mapbox/leaflet-omnivore と http://leafletjs.com/examples/geojson.html を見て頂ければ、特に解説は必要ないかもしれない。
omnivore.csv の第一引数は CSV データのURL、第二引数は csv2geojson のオプションであり、第三引数は、マーカーのオプションを明記した L.geoJSON を customLayer として指定している。
分析
- 実は、CORSできるかどうかが(古くて新しい)課題。いまさらJSONPに戻る訳にはいかない(参考:Why JSONP is a terrible idea and I will never use it again)であろうが、実際にCORSを有効にしているサイトは少なく、データをオンラインでオープンアクセスしてくれるすべての方にCORSを有効にしてもらうことは当面難しいかもしれない。でも、オープンデータのサイトは、その定義からして、CORSを有効にしてもらってもいいのではないか。