Mapbox を使ってみる

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 ブラウザで確認する