LoginSignup
23
8

More than 1 year has passed since last update.

Smart MapsAdvent Calendar 2022Day 10
@yuiseki(yuiseki yuiseki)

3分のブラウザ操作で、いますぐ無料でベクトルタイル地図をBuild, Deploy, Hostingしよう

Last updated at Posted at 2022-12-10

必要なもの

  • GitHubのユーザーアカウントを作っていること
  • GitHubにログインしていること

とにかく一度やってみてください

  • ベクトルタイルって何？とか、何が嬉しいの？とか、どうやってるの？とかいった細かいことはすべて後回しにして、とにかく一回やってみましょう、やってみてください
  • 3分のブラウザ操作だけでできるので、時間の無駄にはならないと保証します！
  • まずはちょっと手を動かすだけで地図ができあがるという達成感を味わいましょう！
  • 感動できる！　この喜びを分かち合おう！

yuiseki/vector-tile-builder リポジトリをテンプレートとして使います

1. 地域を決める（10秒）

  • 今回は、コソボ共和国の地図を作ることにします
    • 2023年のFOSS4Gはコソボ共和国での開催らしいので…
      • （FOSS4Gというのは、地図ソフトウェアの世界規模のカンファレンスです）
  • 「geofabrik kosovo」でググります
    • https://download.geofabrik.de/europe/kosovo.html がヒットしました
    • europe/kosovo というパスを覚えておきます
    • kosovo-latest.osm.pbf のファイルサイズが File size: 22.4 MB と表示されていることを確認します
      • 他の地域を対象にする場合、このファイルサイズに注意してください
      • 対象地域が広大すぎると yuiseki/vector-tile-builder では扱えません
  • 別にコソボ共和国の地図は作りたくはないんだよねという方のために、他の地域の例も挙げておきます
    • asia/japan/chubu
    • asia/japan/chugoku
    • asia/japan/hokkaido
    • asia/japan/kansai
    • asia/japan/kanto
    • asia/japan/kyushu
    • asia/japan/shikoku
    • asia/japan/tohoku

2. GitHubリポジトリを作る（30秒）

  • yuiseki/vector-tile-builder リポジトリの「Use this template」ボタンをクリックします
    • https://github.com/yuiseki/vector-tile-builder を開きます
    • 「Create a new repository」をクリックします
    • リポジトリ名を決めます
      • vector-tile-kosovo にしましょう
    • 「Create repository from template」をクリックします
    • テンプレートからリポジトリができあがるのを待ちます……

Image from Gyazo

3. 設定ファイル .env を編集してコミット（30秒）

  • yuiseki/vector-tile-builder は、 .env ファイルの内容に基づいて、構築するベクトルタイルの対象地域を設定できます
  • .env ファイルを編集して、ベクトルタイルの対象地域をコソボ共和国に変更しましょう
    • ルートディレクトリにある .env ファイルをクリックします
    • .env ファイルの内容が表示されます。鉛筆アイコンの編集ボタン（Edit this file）をクリックします
    • .env ファイル内の REGION を europe/andorra から europe/kosovo に書き換えます
    • 「Commit changes」をクリックします

Image from Gyazo

4. ベクトルタイルが構築されるのを待ちます（80秒）

  • yuiseki/vector-tile-builder は、変更がコミットされると、GitHub Actionsによって自動でベクトルタイルが構築されるようになっています
  • 構築されたベクトルタイルは、リポジトリの gh-pages というブランチにコミットされます
  • 構築には少し時間が掛かるので、待ちます……

Image from Gyazo

5. GitHub Pagesを有効化する（30秒）

  • 構築されたベクトルタイルをWeb上に公開するためには、リポジトリのGitHub Pagesを有効化する必要があります
    • リポジトリの「Settings」をクリックします
    • 左の設定項目一覧から、「Pages」をクリックします
    • 「Build and deployment」の「Branch」で、 gh-pages を選択して、「Save」をクリックします

Image from Gyazo

6. ブラウザでGitHub Pagesを開く（10秒）

  • GitHub Pagesは、 https://<USER-NAME>.github.io/<REPO-NAME>/ というURLにGitHub Pagesとして公開されます
  • 今回は yuiseki というアカウントで vector-tile-kosovo というリポジトリを作ったので、以下ができあがったベクトルタイルWeb地図のURLです
  • https://yuiseki.github.io/vector-tile-kosovo/

Image from Gyazo

限界と応用方法

  • GitHub Pagesにはファイル数と容量の上限があるため、「地球全体」「日本全体」などのベクトルタイルをデプロイすることは無理です
  • しかし、 asia/japan/kanto や asia/japan/kansai といった、国全体より細かい地方ならデプロイすることができます
  • ぜひ他にも、自分が住んでいる地域や、旅行に行ったことのある地域のベクトルタイル地図を作ってみましょう
  • GitHubは公開リポジトリならいくら作っても無料なので、上記の手順を繰り返して、ベクトルタイル地図を作りまくりましょう！

技術的な説明

ここから簡単に技術的な説明をしますが、 必ず上記に示した手順で一つ以上は自分のベクトルタイル地図を作って触ってみてから読み進めて下さい。
説明だけ読んでも時間の無駄です。

ベクトルタイル地図とは

  • まず、地図は、縮尺という概念が重要です
    • あなたは地球儀を手にしています
      • 地球儀は、地球という惑星表面の大陸や海や国家の位置関係を把握する際には便利です
      • しかし、自分の現在地から一番近い駅を探す際には、役に立ちません
      • 地球儀は、一つの縮尺しか提供しないためです
    • 次に、あなたは紙の日本地図ポスターを手に入れました
      • その日本地図ポスターは、机に広げたり壁に貼り付けたりするような、一枚の大きな紙です
      • この地図は、地球儀よりは詳しく、日本の都道府県の位置関係を把握する際には便利です
      • しかしやはり、自分の現在地から一番近い駅を探す際には、役に立ちません
      • 紙の日本地図もやはり、一つの縮尺しか提供しないためです
    • あなたはついに、紙の日本地図帳を手に入れました
      • 紙の日本地図帳は、一冊の本です
      • たくさんのページがあり、それぞれのページには、様々な場所の地図が、様々な縮尺で載っています
      • ここでついに、自分の現在地から一番近い駅を探せるようになりました
      • 紙の日本地図帳は、極めて細かい縮尺で、すべての線路や駅や道路を表現することができるためです
  • いまや、ブラウザやスマホで閲覧できるデジタル地図は、紙の地図帳よりも遥かに便利です
    • ページをめくる必要すらなく、なめらかにズームやスクロールをして、様々な縮尺で、様々な場所の地図を閲覧できます
  • デジタル地図を実現するためのデータ構造は、実のところ地図帳と似ています
    • つまり、紙の地図帳と同じように、様々な縮尺での、様々な場所の地図を、あらかじめページに分割してあります
    • 紙の地図帳と違うのは、画面上でのユーザーの操作に応じてそれらのページを結合してみせることで、ページをめくるという行為を不要にしている点です
  • 地図における縮尺という概念の重要性が伝わったでしょうか
  • なめらかにズームやスクロールできるデジタル地図を実現するためには、様々な縮尺での、様々な場所の地図のデータを配信する必要があります
  • なめらかにズームやスクロールできるデジタル地図として、主流なデータ形式が二つあります
    • ラスタータイル形式とベクトルタイル形式です
    • ラスタータイル形式は、様々な縮尺での、様々な場所の地図を、あらかじめ静止画として分割しておく方式です
    • ベクトルタイル形式は、様々な縮尺での、様々な場所の地図を、あらかじめベクターデータとして分割しておく方式です
  • ラスタータイル形式は、シンプルなデータ形式ですが、ベクトルタイル形式と比べて、いくつかデメリットがあります
    • ベクトルタイル形式よりも多くのデータ容量や通信量が必要となる
    • ラスタータイル形式は、あらかじめ静止画として用意されているため、あとから柔軟に見た目を変更することができない
  • ベクトルタイル形式は、ラスタータイル形式と比べると、以下のデメリットがあると言えるでしょう
    • ベクトルタイル形式は、見た目に関する情報を含んでいないため、閲覧端末側で描画処理をする必要がある
    • ベクトルタイル形式は、人工衛星画像の地図のような、そもそもベクターデータ化できない地図には向いていない
  • 以上をまとめると、ベクトルタイル地図とは、様々な縮尺での、様々な場所の地図を、あらかじめベクターデータとして分割しておき、それを閲覧端末側で描画している地図です

ここまで書いて疲れたのでここから下は適当です！

ベクトルタイル地図の元となるオープンデータは？

  • yuiseki/vector-tile-builder では、Geofabrik という企業が提供してくれているデータを使わせていただいています
    • Geofabrik は、 OpenStreetMap のデータを毎日スナップショットとして保存し、地域や国や地方ごとに分割して配布してくれています
      • OpenStreetMap とは、誰でも自由に地図を使えるよう、みんなでオープンデータの地理情報を作るプロジェクトです
  • yuiseki/vector-tile-builder では、 tilemaker というオープンソースソフトウェアを使って、Geofabrik社が配布してくれているOpenStreetMapのデータを、ベクトルタイル形式のデータに変換しています

ベクトルタイル地図の描画

  • ベクトルタイル形式は、様々な縮尺での、様々な場所の地図情報を、点や線や多角形といった形状情報や文字情報のみで持っているデータ形式です
  • ベクトルタイル形式のデジタル地図は、閲覧端末側で描画処理を実行する必要があります
  • このために yuiseki/vector-tile-builder では OpenMapTiles Scheme と、 Mapbox Style Specification という仕様に従っています
  • OpenMapTiles Scheme は、OpenStreetMapのデータをベクトルタイル形式のデータにする際に従っておくべき業界標準の仕様です
    • 上述の tilemaker がベクトルタイル形式のデータに変換する際に、この OpenMapTiles Scheme に従ったデータを出力するよう設定しています
  • Mapbox Style Specification は、Webブラウザやスマートフォンでベクトルタイル形式のデータを描画する際に、どのデータをどのように描画するかを指定するための、業界標準の仕様です
    • yuiseki/vector-tile-builder では、 ベクトルタイルデータがOpenMapTiles Schemeに準拠している前提で、どのデータをどのように描画するかをYAMLファイルで定義しており、それを charites というオープンソースソフトウェアを使って Mapbox Style Specification に変換しています

はい以上です！
今日はみなさん、ベクトルタイル地図が作れて良かったですね！

また次の記事でお会いしましょう！

23
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
23
8