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

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

1. `.mbtiles`ファイルの生成
2. タイルサーバーの起動（Dockerを使用）
3. MapLibreでの地図表示

Appleチップに一部ツールがネイティブに対応していない場合がありそうなので、今回はDockerを使用することで環境をセットアップします。

一部は[こちら](https://qiita.com/AshMap/items/8fa6d7ed71adcab0ef5b)の記事と重複する内容があるため、併せて参考にしてください。

## 使用するツール

- **`tippecanoe`**: GeoJSONデータを`.mbtiles`形式に変換するツール。
- **Docker**: Appleシリコンでも簡単にタイルサーバーを立ち上げるためのツール。
- **MapLibre**: 軽量なオープンソースの地図表示ライブラリ。

> 注意: Dockerは環境に最適化されたバージョンをインストールしてください。[Docker公式サイト](https://www.docker.com)を参照してください。


## 手順

### 1. `.mbtiles`ファイルの生成

まず、地理空間データ（例: GeoJSON形式）から`.mbtiles`ファイルを生成します。

以下のコマンドを実行して、GeoJSONデータ（例: `roads.json`）を`.mbtiles`形式に変換します。

```bash
tippecanoe -o roads.mbtiles --minimum-zoom=10 --maximum-zoom=14 roads.json
```

オプションの意味

- -o roads.mbtiles: 出力される.mbtilesファイルの名前。
- --minimum-zoom=10: 最小ズームレベル。
- --maximum-zoom=14: 最大ズームレベル。

>tippecanoeはHomebrewを使用してインストール可能です。
```bash
brew install tippecanoe
```

### 2. タイルサーバーの起動（Dockerを使用）

生成した.mbtilesファイルをWebアプリで使用するには、タイルサーバーを起動して配信します。ここでは、Dockerを使用してlocalhostにタイルサーバーをセットアップしてみます。

- .mbtilesファイルの準備

生成したroads.mbtilesを任意のディレクトリに保存します。以下は、ホームディレクトリ内にtileserverフォルダを作成する例です。

```bash
mkdir ~/tileserver
mv roads.mbtiles ~/tileserver/
```

- Dockerコマンドでタイルサーバーを起動

以下のコマンドを実行してタイルサーバーを起動します。

```bash
docker run -it -v ~/tileserver:/data -p 8080:80 klokantech/tileserver-gl
```

- サーバーの確認

ブラウザで以下にアクセスし、タイルサーバーが正常に動作しているか確認します：

```bash
http://localhost:8080
```

サーバーが正常に動作していれば、roads.mbtilesがリストに表示されます。

>補足: もしエラーが発生する場合はdocker buildを使用してローカルでイメージを再ビルドしてください。

### 3. MapLibreで地図を表示

最後に、タイルサーバーで提供されているタイルをMapLibreを使って表示します。

以下が簡単なサンプルコードです。index.htmlファイルを作成し、必要に応じて修正してください。

```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アプリケーションへの統合方、クラウドで実装する方法についても紹介していければと思います。

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