トップページ -> データベース関連技術 -> インタラクティブ,ダイナミックな地図(OpenStreetMap を利用) -> Mapbox を使ってみる
[サイトマップへ], [サイト内検索へ]

Mapbox を使ってみる

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

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


mapbox のサインアップ

  1. mapbox の Web ページを開く

    https://www.mapbox.com

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

    [image]
  3. サインアップする

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

    Email: 電子メールアドレス

    パスワード: 8文字以上

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


mapbox の Maps SDK を使ってみる

  1. mapbox の Web ページを開く

    https://www.mapbox.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [image]

mapbox のタイルセット

ここでは 次の設定を行う

  1. mapbox の Web ページを開く

    https://www.mapbox.com

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

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

    [image]

    Web ブラウザで確認する

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

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

    [image]

    Web ブラウザで確認する

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

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

    [image]

    Web ブラウザで確認する

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

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

    [image]

    Web ブラウザで確認する

    [image]

本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]