2014年5月19日

サッカースタジアムを地図に表示する

Mapbox のサイトに Building a store locator というチュートリアル記事があります。 Sweetgreen というアメリカ東海岸のサラダショップの店舗を表示する例です。

この記事をベースにして、表示データを日本のサッカースタジアムに置き換えたものを作成してみました。

Mapbox でベース地図を用意する

Mapbox でアカウントを作成すると地図プロジェクトを作成できます。 Map ID は account.handle 形式で、 account はユーザー名、 handle はプロジェクトごとに一意の ID です。

JavaScript を使って表示するには、 Leaflet をベースにした Mapbox.js を読み込み、地図オブジェクトを作成します。 mapbox.js と mapbox.css は Mapbox のサイトで配布されていますので、 以下のようなコードだけでタイル地図を表示できます。

<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<div id='map'>Map</div>
<script>
var map = L.mapbox.map('map', '${account.handle}')  // Replace with your MAP_ID.
            .setView([35.678056, 139.714722], 11);
</script>

データを用意する

Wikipedia のいくつかのページには位置情報が付与されています。 例えば、国立競技場 (国立霞ヶ丘陸上競技場) の場合は「位置」という情報があります。 Jリーグのスタジアム一覧は 公式サイト にありますので、これらのデータをエクセルなどのスプレッドシートでまとめて CSV 形式で保存します。

mapbox.js では、レイヤーに GeoJSON を読み込むメソッドがありますので、 もう一手間かけて CSV を GeoJSON 形式に変換します。 GeoJSON に変換しておくと、 geojson.io でデータ位置を確認できたり Github でそのまま表示してくれるなど、データ確認が簡単になるメリットもあります。

Python の場合は geojson パッケージがありますので、 pip で簡単にインストールできます。 以下のように記述すると FeatureCollection を生成できます。 複数データに対して FOR ループを回すスクリプトを用意することで CSV で保存しておいたデータを変換できますね。

import sys
from geojson import Feature, FeatureCollection, Point, dump

collection = []  # Data container.
lon, lat = 139.714722, 35.678056
p = Point((lon, lat))
f = Feature(geometry=p, properties={'name': '国立競技場'})
collection.append(f)
results = FeatureCollection(collection)
dump(results, sys.stdout)

扱うデータは JSON ですし、最終的には JavaScript のコードを書きますので、 データ処理に Node を使うのも良い選択肢だと思います。 npm Registry に登録されているパッケージを使うと簡単にデータを変換できるでしょう。

GeoJSON に変換する他の方法として、コマンドラインでは GEOS、GUI アプリケーションでは QGIS を使えます。 GEOS の ogr2ogr はキー名のマッピングなどがややこしいので、最初は QGIS を使う方法が良いでしょう。 QGIS を使って変換するには「ShapefileからTopoJSONを生成する」の記事で順を追って説明してくれています。

地図にデータを統合する

チュートリアルの成果物 のソースコードをダウンロードします。 以下の４点を書き換えて、後は好みでデフォルトの中心地点やスケールなどを調整すると出来上がりです。

  • 地図ID
  • 読み込む GeoJSON データのパス ('/foundations/data/examples/sweetgreen.geojson' を自分が作成したファイルパスへ変更)
  • アイコン画像 (チュートリアルではレストランの marker.png 画像になっています)
  • プロパティ名のマッピング処理

このチュートリアルでは、どのプロパティ名を左側のサイドバーでタイトルとするかなどを調整します。 ポップアップに表示する項目も調整すると奇麗な表示になるでしょう。

アイコンは サッカーのWebアイコン素材画像集 から探してみましょう。

出来上がりを置いたものがこちらになります。

終わりに

Mapbox のベース地図を使って日本のサッカースタジアムを表示してみました。 データを GeoJSON で保存すると簡単に描画できることが分かります。 もちろん、Google Maps の Data Layer でも GeoJSON を利用できます。「Google Map上にGeoJSONデータを表示する」が導入として分かりやすいでしょう。

共通となるデータ仕様を理解しておくことで、用途に合わせて地図サービスを使い分けることが簡単になってきたと言えます。 ユーザーはベンダーにロックオンされるリスクを抑え、サービスプロバイダーは相互接続性の向上が図れます。 Link Data などで組み合わせられたデータも活用できるでしょうから、便利な世の中になってきましたね。

ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)