はじめに
地理空間データをWebアプリケーションで活用するためには、ベクトルタイルの生成と配信が重要です。この記事では、Appleチップ環境（M1/M2/M3）を想定し、以下の流れを解説します。
-
.mbtilesファイルの生成 - タイルサーバーの起動（Dockerを使用）
- MapLibreでの地図表示
Appleチップに一部ツールがネイティブに対応していない場合がありそうなので、今回はDockerを使用することで環境をセットアップします。
一部はこちらの記事と重複する内容があるため、併せて参考にしてください。
使用するツール
-
tippecanoe: GeoJSONデータを.mbtiles形式に変換するツール。 - Docker: Appleシリコンでも簡単にタイルサーバーを立ち上げるためのツール。
- MapLibre: 軽量なオープンソースの地図表示ライブラリ。
注意: Dockerは環境に最適化されたバージョンをインストールしてください。Docker公式サイトを参照してください。
手順
1. .mbtilesファイルの生成
まず、地理空間データ（例: GeoJSON形式）から.mbtilesファイルを生成します。
以下のコマンドを実行して、GeoJSONデータ（例: roads.json）を.mbtiles形式に変換します。
tippecanoe -o roads.mbtiles --minimum-zoom=10 --maximum-zoom=14 roads.json
オプションの意味
- -o roads.mbtiles: 出力される.mbtilesファイルの名前。
- --minimum-zoom=10: 最小ズームレベル。
- --maximum-zoom=14: 最大ズームレベル。
tippecanoeはHomebrewを使用してインストール可能です。
brew install tippecanoe
2. タイルサーバーの起動（Dockerを使用）
生成した.mbtilesファイルをWebアプリで使用するには、タイルサーバーを起動して配信します。ここでは、Dockerを使用してlocalhostにタイルサーバーをセットアップしてみます。
- .mbtilesファイルの準備
生成したroads.mbtilesを任意のディレクトリに保存します。以下は、ホームディレクトリ内にtileserverフォルダを作成する例です。
mkdir ~/tileserver
mv roads.mbtiles ~/tileserver/
- Dockerコマンドでタイルサーバーを起動
以下のコマンドを実行してタイルサーバーを起動します。
docker run -it -v ~/tileserver:/data -p 8080:80 klokantech/tileserver-gl
- サーバーの確認
ブラウザで以下にアクセスし、タイルサーバーが正常に動作しているか確認します：
http://localhost:8080
サーバーが正常に動作していれば、roads.mbtilesがリストに表示されます。
補足: もしエラーが発生する場合はdocker buildを使用してローカルでイメージを再ビルドしてください。
3. MapLibreで地図を表示
最後に、タイルサーバーで提供されているタイルをMapLibreを使って表示します。
以下が簡単なサンプルコードです。index.htmlファイルを作成し、必要に応じて修正してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MapLibreで地図を表示</title>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"my-tiles": {
"type": "vector",
"tiles": ["http://localhost:8080/data/roads/{z}/{x}/{y}.pbf"]
}
},
"layers": [
{
"id": "roads-layer",
"type": "line",//例としてlineデータを使用
"source": "my-tiles",
"source-layer": "roads", // MBTiles内のレイヤー名
"paint": {
"line-color": "#FF5733",
"line-width": 2
}
}
]
},
center: [139.6917, 35.6895], // 中心座標（例: 東京）
zoom: 12
});
</script>
</body>
</html>
動作確認
- タイルサーバーが起動していることを確認
タイルサーバーが稼働している状態で、ブラウザでhttp://localhost:8080にアクセスします。 - HTMLをブラウザで開く
作成したindex.htmlをブラウザで開き、地図が正しく表示されるか確認します。
まとめ
Dockerを使うことでタイルサーバーを起動し、.mbtilesファイルをからMapLibreを使った地図表示ができました。
1. GeoJSONデータから.mbtilesファイルを生成。
2. Dockerでタイルサーバーを起動し、タイルを配信。
3. MapLibreを使ってタイルを読み込み、地図を表示。
今後スタイルのカスタマイズや、Webアプリケーションへの統合方、クラウドで実装する方法についても紹介していければと思います。
この手順が地理情報活用に少しでも参考になれば幸いです。