Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@kmdsbng

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

概要

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

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

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

手順

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

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

Downloads__OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png

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

Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png

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

OpenStreetMap_vector_tiles_of_Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps1.png

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

OpenStreetMap_vector_tiles_of_Osaka_Kyoto_OpenStreetMap_Tiles__GeoData_and_OpenData_Maps.png

OpenMapTiles Map Serverを起動する

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

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

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

Wizard_と__無名____-_VIM_と_mapbox_gl_test.png
Wizard_と__無名____-_VIM.png

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

Wizard.png

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

Wizard_と__無名____-_VIM 2.png

Wizard 2.png

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

OpenMapTiles_Map_Server.png

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

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

http-server -p 8090

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

map_ss.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 も検討されてはいかがでしょうか。

以上です。

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
19
Help us understand the problem. What is going on with this article?