オープンデータを地図上に表示してみる

以前オープンデータを活用したサイトを WordPress で作ってみる で、位置情報が含まれたオープンデータを地図上に表示する方法を模索しましたが、Leaflet.jsを使うと便利らしい。

Leaflet は広く使われているWeb地図のためのJavaScriptライブラリである。 2011年に最初にリリースされた[2]。 モバイルとデスクトップのプラットフォームのほとんどに対応し、HTML5とCSS3に対応している。 OpenLayersやGoogle Maps API（英語版）とともに最も人気のあるJavaScript地図ライブラリの一つであり、FourSquare、Pinterest、Flickrなどの有名なサイトで使われている。 Leafletを使うと、GISの知識のない開発者でも容易にタイルベースのWeb地図を表示できる。またGeoJSONから地物データを読み込んでスタイリングしたり、インタラクティブなレイヤーを作ることができる（クリックするとポップアップが表示されるマーカーなど）。 LeafletはVladimir Agafonkinによって開発されている。Vladimir Agafonkinは2013年からMapboxに加わっている [3]。

Leaflet – Wikipedia

まずはオープンデータのCSVからGeoJSONを生成。

その GeoJSON を Leaflet.js に読み込ませるには

HTML

[css]
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

#map {
width: 100%;
height: 100%;
}
[/css]
[javascript]
//. 掛川の緯度経度（初期位置）
var lat = 34.721884;
var lng = 138.01500141620636;

var map = null;
var marker = null;

$(function () {
//. 掛川城を中心とした地図を OpenStreetMap データで表示
map = L.map(‘map’).setView([lat, lng], 11);
L.tileLayer(
‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution: ‘Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a>’,
maxZoom: 18
}
).addTo(map);

$.getJSON(‘https://raw.githubusercontent.com/inqsite/kakegawa_geojson/kakegawa_geojson/siyakusyosisyo.geojson’, function (data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
var field = ‘名称: ‘+feature.properties.name+ ‘<br>’+
‘住所: ‘+feature.properties.address+ ‘<br>’+
‘電話番号: ‘+feature.properties.tel+ ‘<br>’+
‘<a href="’+feature.properties.url+ ‘" target="_blank">ホームページ</a>’;

layer.bindPopup(field);
}
});
geojson.addTo(map);
});
});
[/javascript]
で、こんな地図を表示することができます。

See the Pen Leaflet.js GeoJSONTEST by inqsite (@inqsite) on CodePen.

CodePen に JSONファイルをアップロードするやり方がわからなかったので、GitHub にアップロードした GeoJSON を読み込ませています。