OpenMapTiles Map Server を使ってサイトに地図を埋め込む

# 概要

[OpenMapTiles.com](https://openmaptiles.com/) は、地図のタイルデータの販売、地図サーバ、地図APIのSDKを配布している会社です。
タイルデータはOpenStreetMapのデータを元に作られているようです。
地図サーバはdockerイメージが用意されているので、簡単にセットアップできます。

これらを利用して、Google Mapsなどの地図APIを使うのと同じように、自前で地図サーバを立てて、それを利用してサイトやモバイルアプリに地図を埋め込むことができます。

この記事では、配布されている OpenMapTiles Map Server を使って、地図サーバをセットアップし、別サイトに地図を埋め込むところまでの手順を説明します。


# 手順

## タイルデータをダウンロードする

https://openmaptiles.com/downloads/

↑このページから地図データをダウンロードします。国や都市単位でデータをダウンロードできます。
ここでは Osaka Kyoto を選んでみます。

<img width="737" alt="Downloads__OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/e2a3e377-8b84-7ef4-1275-f2e335f352d9.png">


OpenStreetMap vector tiles のダウンロードに進みます。

<img width="731" alt="Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/393cb99a-da0a-f43f-661e-954f60401608.png">


使用用途を聞かれます。Commercialにも使うことができますが、1タイルデータあたり10USDかかります。これと別に、すべての地図データを制限なくダウンロードできる 年間512USDのプランもあります。

<img width="1041" alt="OpenStreetMap_vector_tiles_of_Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps1.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/082cdac7-74b4-4e38-c8b9-956db1bb8c15.png">


今は評価に使いたいので、evaluation or personal non-commercial project を選びます。
評価目的ならOpenStreetMap vector tiles は無料でダウンロードできます。
ダウンロードして、地図サーバを動作させたいディレクトリに移動しましょう。

<img width="1042" alt="OpenStreetMap_vector_tiles_of_Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/6918aafa-5691-8c34-205b-d91dbffa53c2.png">


## OpenMapTiles Map Serverを起動する

タイルデータを置いたディレクトリで以下の docker コマンドを実行してください。

```
docker run --rm -it -v $(pwd):/data -p 8080:80 klokantech/openmaptiles-server
```

ブラウザで http://localhost:8080/ にアクセスします。インストールのウィザードが表示されます。

<img width="1015" alt="Wizard_と__無名____-_VIM_と_mapbox_gl_test.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/87b8d83e-f848-1ec7-9556-58c5ca02137d.png">
<img width="1018" alt="Wizard_と__無名____-_VIM.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/1e7e45ae-9069-6e1f-8f59-3d2b5849173b.png">


REGIONにダウンロードしたタイルデータが認識されてます。(かしこい)
CONTINUEで続行します。

<img width="1002" alt="Wizard.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/83588429-0752-9638-4489-ca0edd58d921.png">


すきなスタイルを選んでOK。

<img width="1003" alt="Wizard_と__無名____-_VIM 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/e385ad08-ad9d-7b42-302a-3fce5e1abf20.png">

<img width="954" alt="Wizard 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/66c907fa-46e2-73de-6917-3da28124bfc2.png">


これで地図サーバのセットアップが完了です。ディレクトリにconfig.jsonが生成されています。
VIEWERで地図が見れるので楽しんで下さい。

<img width="1049" alt="OpenMapTiles_Map_Server.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/42a1742b-19ed-7d09-2e2e-8c77a430fd09.png">



## 別サイトに地図を埋め込んでみる

https://github.com/kmdsbng/mapbox_gl_test

このリポジトリを clone してきて、

```
http-server -p 8090
```

などのコマンドで http server を起動して、ブラウザから http://localhost:8090/ にアクセスしてみてください。
埋め込まれた地図が見れたら成功です。

<img width="638" alt="map_ss.png" src="https://qiita-image-store.s3.amazonaws.com/0/529/1ba7bf0d-9cd1-0ef9-3a79-cde2665bbf4f.png">


style-cdn.json は、https://openmaptiles.org/docs/website/mapbox-gl-js/ で紹介されてる OSM Bright スタイルをコピって、タイルの参照先を http://localhsot:8080/ に書き換えたものです。

index.html に地図埋め込みを記述してます。これは https://openmaptiles.org/docs/website/mapbox-gl-js/ のサンプルを編集したものです。

# まとめ

OpenMapTiles.com は大変すばらしいプロダクトだと感じました。

地図APIは商用利用すると結構料金がかかります。
ログインが必要な会員用サイトで地図APIを利用しようとしたときの価格をざっとしらべたところ、


* Google Maps だとライセンスが年間120万から
* YOLPだとライセンスが年間100万から
* Bing maps だと年間125000トランザクションまでは無料で、それ超えると50万円から

これくらいかかります。従量課金制なので、利用量が増えるに従って料金も増加します。

それが、OpenMapTilesだとタイルデータを買い切りで6万円ほどでいくらでも地図データをダウンロードできるわけなので、サーバ管理できる人であればコスパが優れています。サーバセットアップが簡単なのもすばらしい。

なので地図APIの利用を検討する際に、OpenMapTiles.com も検討されてはいかがでしょうか。

以上です。