Zenn
🗺️

Mbtilesファイルを生成してMapLibre（Web）で地図を表示する方法（M3環境）

2024/12/04に公開
Docker
MapLibre
mbtiles
tippecanoe
tech

はじめに

地理空間データをWebアプリケーションで活用するためには、ベクトルタイルの生成と配信が重要です。この記事では、Appleチップ環境（M1/M2/M3）を想定し、以下の流れを解説します。

  1. .mbtilesファイルの生成
  2. タイルサーバーの起動（Dockerを使用）
  3. 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>

動作確認

  1. タイルサーバーが起動していることを確認
    タイルサーバーが稼働している状態で、ブラウザでhttp://localhost:8080にアクセスします。
  2. HTMLをブラウザで開く
    作成したindex.htmlをブラウザで開き、地図が正しく表示されるか確認します。

まとめ

Dockerを使うことでタイルサーバーを起動し、.mbtilesファイルをからMapLibreを使った地図表示ができました。
1. GeoJSONデータから.mbtilesファイルを生成。
2. Dockerでタイルサーバーを起動し、タイルを配信。
3. MapLibreを使ってタイルを読み込み、地図を表示。

今後スタイルのカスタマイズや、Webアプリケーションへの統合方、クラウドで実装する方法についても紹介していければと思います。

この手順が地理情報活用に少しでも参考になれば幸いです。

Discussion