トップページ -> 最新情報技術の実習と研究ツール -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> Mapbox を使ってみる
[サイトマップへ]  

Mapbox を使ってみる

mapbox は,地図サービス・ソフトウエア開発キット,OpenStreetMap のデータから作られたタイルマップ、自前のタイルマップをサーバにアップロードできるサービス

利用条件は各自で確認してください. (学習用なのか、会員しか使えない有償のサービスを作る予定があるのかといったことを前もって決め、利用条件を各自の責任で確認すること)


mapbox のサインアップ

  1. mapbox の Web ページを開く

    https://www.mapbox.com

  2. 開始したいので「Start building」をクリック

  3. サインアップする

    Username (ユーザ名): 何でもよい.アルファベットと数字の組み合わせが良い

    Email: 電子メールアドレス

    パスワード: 8文字以上

  4. サインアップが終わったので Web ブラウザを閉じる

mapbox の Maps SDK を使ってみる

  1. mapbox の Web ページを開く

    https://www.mapbox.com

  2. 開始したいので「Start building」をクリック

  3. すでにサインアップ済みなので、サインインする

  4. サインアップしたときのユーザ名とパスワードを入れ、「Sign in」をクリック

  5. mapbox の Maps SDK が欲しいので、「Integrate Mapbox」をクリック

  6. JavaScript 版の Maps SDK が欲しいので、「JS Web」をクリック

  7. CDN (Content Delivery Network) を使いたいので,「Use the Mapbox CDN」をクリック

  8. HTML が表示されるので確認する

  9. エディタを使って .html 形式ファイルを作成.

    ファイルには、表示された HTML をコピー&ペースト.

    1.html」のように、拡張子が .html のファイル名で保存.

  10. 今作成している .html 形式ファイルに,次のように html, head, body のタグを書き加える.

  11. もとの Web ブラウザの画面で 「Next」をクリック

  12. 別の HTML が表示されるので確認する

  13. 今作成している .html 形式ファイルの body タグの直下に、コピー&ペーストする

  14. 確認のため、いま作成した .html ファイルを上書き保存したら、Web ブラウザで開く

  15. マウスの右ボタンを押しながらマウスを動かすと地図が移動し、マウスホイールで地図の縮尺が変わるので確認する

mapbox のタイルセット

ここでは 次の設定を行う

  1. mapbox の Web ページを開く

    https://www.mapbox.com

  2. エディタを使って, 次のファイルを作成し、保存する

    ※ 上で作成手順を示した 1.html に、 緯度・経度、ズームレベル、地図の大きさの設定を書き加えている

    Web ブラウザで確認する

  3. outdoors-v10 に書き換えてみる

    エディタを使って, 次のファイルを作成し、保存する

    Web ブラウザで確認する

  4. satellite-v9 に書き換えてみる

    エディタを使って, 次のファイルを作成し、保存する

    Web ブラウザで確認する

  5. satellite-streets-v10 に書き換えてみる

    エディタを使って, 次のファイルを作成し、保存する

    Web ブラウザで確認する