Mapbox GL JSでカスタムマーカーを追加する
Prerequisite
フロントエンド開発の概念、Mapboxアカウント、およびIDE/コードエディタに慣れていること。
このチュートリアルでは、Mapbox GL JSを使用して指定された場所にカスタムマーカーを追加するインタラクティブなウェブマップを構築する方法を学びます。また、これらのマーカーをクリックしたときに情報を表示するポップアップを追加します。
最終的なマップは次のようになります:
前提条件
このガイドに従うために必要なもの:
- フロントエンドの知識:フロントエンド開発(HTML、CSS、JavaScript)に多少慣れていること
- Mapboxアカウント:無料アカウントにサインアップまたはログインし てください account.mapbox.com.
- IDE / コードエディタ:Visual StudioまたはSublime Textなどのプログラムを使用してHTMLファイルを編集します。
また、追加のガイダンスのために関連するビデオチュートリアルをご覧になることをお勧めします。
サンプルコードへのアクセス
チュートリアルに従わずにコードサンプル全体をコピーしたい場合は、ページの下部にあるコードスニペットを参照してください。