個人的にやっている案件で、観光マップみたいなものをつくらないといけないシチュエーションがあって、タイルサーバーたてるのやだなーと思って色々調べたらスタティックなタイル画像をホストすればいいじゃんということに気がついて、GitHub Pagesでやってみました。
サンプル
以下の URL でどうぞ。
地図用のタイル画像も含めて GitHub Pages でホストしています。
地図の元ネタは、TileMill というオープンソースの地図用のオーサリングソフトにサンプルでのっているものです。
仕組み
- GitHub に
.mbtilesフォーマットの地図データをコミット。 - Travis CI で
.mbtilesをパースして、タイル画像を生成し、GitHub Pages としてプッシュ。
.mbtiles というのは、Mapbox という企業が開発した地図データを保存するためのオープンなフォーマットです。
超簡単に説明すると地図を表示するための様々な情報を保存するためのファイル形式で、実態は SQLite なのでプラグラムからとても扱いやすいフォーマットになっています。これ発明した人まじに天才。
.mbtiles には、地図のタイル情報以外にも様々なメタデータが保存されています。
今回つくったものでは、JavaScript も生成しており、ズームレベルや地図の表示範囲、索引などもこのメタデータから読み込まれています。
やりかた
以下のプロジェクトをフォークしてください。
$ git clone git@github.com:madefor/static-tile-server.git
$ cd tile-server
つぎに、Python の pip で mb-util というツールをインストールしてください。
これは、.mbtiles をパースしてタイル画像を生成するのに必要です。
$ pip install mbutil
つぎに依存関係がある npm ライブラリをインストールしてください。
$ npm install
そしてビルド。これには少し時間がかかるはずです。
$ npm run build
ローカルで地図を見たい場合は、以下のコマンドを実行すると自動的にブラウザがたちあがって地図がひらくはず。
$ npm start
地図データの変更方法
地図データを変更するには、open-streets-dc.mbtiles というファイルを差し替えてください。
ファイル名が変わる場合には、 gulpfile.js 内でファイル名を指定していますのでそちらも修正してください。
それらが完了したら以下のコマンドで地図画像を生成してください。
$ npm run build
地図画像が生成されると、tilesというディレクトリ以下にタイル画像と metadata.json というファイルが生成されています。
その中の id の値をコピーして、index.html の中の地図を貼りつけたい要素の id 属性の値にペーストしてください。
<div id="open-streets-dc" style="width: 100%; height: 100%;"></div>
この方法のメリット
- Google Map の利用規約等にしばられない。
- デザインが自由自在。
- スタティックな画像をホストするので高速に地図を配信可能。
- タイルサーバーが不要。
- オープンソースのエコシステムを活用できる。
デメリット
- 大きな地図はむり。最大でも市町村単位ぐらいが限界です。
- そもそも
.mbtilesを作るのが大変。 - GitHub や Travis CI などのファイルサイズ、ビルド時間などの制限に注意。
.mbtiles を作る部分はほんとにめんどくさくて、スタイルを修正するための環境作りも大変だし、それができあがったあとに .mbtiles フォーマットでダウンロードするのも市町村単位の地図なら数時間かかってしまいます。
いちおう Docker をつくったので、環境構築はちょっとはマシになりましたがそれでも大変ですね。。。
スタイルの変更作業時はベクタータイルベースでプレビューするようにして、そのあと Apache の mod_tile で構築した環境からタイル画像をかきあつめるみたいな開発環境を作ってみようかと思いますが、もし OSM 界隈の人がこの記事をみてこうしたらいいのでは？というアイディアがあればぜひ教えていただけるとうれしいです。