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を有効にしてもらってもいいのではないか。