Mapbox を使ってみる

【概要】Mapboxは、地図サービスとソフトウェア開発キット（SDK）を提供するプラットフォームである。OpenStreetMapのデータから作成されたタイルマップを利用できる。また、独自のタイルマップをサーバにアップロードする機能も備えているが、本記事では扱わない。本記事では、サインアップからMaps SDKの導入、タイルセットの設定までを解説する。利用条件については、学習目的か商用目的かなど、用途に応じて各自の責任で確認すること。

【目次】

  1. Mapbox のサインアップ
  2. Mapbox の Maps SDK を使ってみる
  3. Mapbox のタイルセット

Mapbox のサインアップ

Mapboxのサービスを利用するには、アカウントの作成が必要である。サインアップは無料で行える。

  1. Mapbox の公式Webページを開く

    https://www.mapbox.com

  2. 「Start building」をクリックして、アカウント作成を開始する
    Mapbox公式サイトのトップページ
  3. サインアップ画面で必要事項を入力する

    Username（ユーザ名）: アルファベットと数字の組み合わせで設定する

    Email: 電子メールアドレスを入力する

    Password: 8文字以上のパスワードを設定する

    サインアップ画面
  4. サインアップが完了したら、Webブラウザを閉じる

Mapbox の Maps SDK を使ってみる

Maps SDK（Software Development Kit）は、Webページやアプリケーションに地図機能を組み込むためのライブラリである。このセクションでは、HTMLファイルにMapboxの地図を表示する方法を解説する。

  1. Mapbox の公式Webページを開く

    https://www.mapbox.com

  2. 「Start building」をクリックする
    Mapbox公式サイトのトップページ
  3. サインアップ済みのため、サインインを選択する
    サインイン画面への遷移
  4. サインアップ時に設定したユーザ名とパスワードを入力し、「Sign in」をクリックする
    サインイン画面
  5. Maps SDKを導入するため、「Integrate Mapbox」をクリックする
    Integrate Mapboxボタンの選択
  6. JavaScript版のMaps SDKを使用するため、「JS Web」をクリックする
    JS Webの選択
  7. CDN（Content Delivery Network: コンテンツ配信ネットワーク）を利用するため、「Use the Mapbox CDN」をクリックする
    Use the Mapbox CDNの選択
  8. HTMLコードが表示されるので、内容を確認する
    表示されたHTMLコード
  9. エディタを使用して.html形式のファイルを新規作成し、表示されたHTMLコードを貼り付ける

    ファイル名は「1.html」のように、拡張子を.htmlとして保存する。

    エディタでのHTMLファイル作成
  10. 作成した.htmlファイルに、html、head、bodyの各タグを追加する
    html、head、bodyタグの追加
  11. Mapboxの画面に戻り、「Next」をクリックする
    Nextボタンのクリック
  12. 追加のHTMLコードが表示されるので、内容を確認する
    追加のHTMLコード表示
  13. 表示されたコードを、作成中の.htmlファイルのbodyタグ直下に貼り付ける
    bodyタグ直下へのコード追加
  14. ファイルを上書き保存し、Webブラウザで開いて動作を確認する
    Webブラウザでの表示確認
  15. 地図の操作を確認する。マウスの右ボタンを押しながらドラッグすると地図が移動し、マウスホイールを回転させると地図の縮尺が変化する
    地図の操作確認

Mapbox のタイルセット

タイルセット（Tileset）とは、地図の見た目を定義するスタイルのことである。Mapboxでは用途に応じた複数のタイルセットが提供されており、用途に応じて切り替えることができる。

このセクションでは、以下の設定を行う。

Mapboxが提供する主なタイルセットは以下のとおりである。

詳細はhttps://www.mapbox.com/mapbox-gl-js/api/を参照すること。

  1. 前セクションで使用したMapboxのWebページを引き続き使用する

    https://www.mapbox.com

  2. エディタを使用して、前セクションで作成した1.htmlに緯度・経度、ズームレベル、地図の大きさの設定を追加し、保存する
    設定を追加したHTMLファイル

    Webブラウザで表示を確認する。

    設定反映後の地図表示
  3. タイルセットをoutdoors-v10に変更する

    エディタで該当箇所を書き換え、ファイルを保存する。

    outdoors-v10スタイルのコード

    Webブラウザで表示を確認する。

    outdoors-v10スタイルの地図表示
  4. タイルセットをsatellite-v9に変更する

    エディタで該当箇所を書き換え、ファイルを保存する。

    satellite-v9スタイルのコード

    Webブラウザで表示を確認する。

    satellite-v9スタイルの地図表示
  5. タイルセットをsatellite-streets-v10に変更する

    エディタで該当箇所を書き換え、ファイルを保存する。

    satellite-streets-v10スタイルのコード

    Webブラウザで表示を確認する。

    satellite-streets-v10スタイルの地図表示