Mapbox GL JSでカスタムマーカーを追加する
このチュートリアルでは、Mapbox GL JSを使用して指定された場所にカスタムマーカーを追加するインタラクティブなウェブマップを構築する方法を学びます。また、これらのマーカーをクリックしたときに情報を表示するポップアップを追加します。
最終的なマップは次のようになります:
前提条件
このガイドに従うために必要なもの:
- フロントエンドの知識:フロントエンド開発(HTML、CSS、JavaScript)に多少慣れていること
- Mapboxアカウント:無料アカウントにサインアップまたはログインしてください console.mapbox.com.
- IDE / コードエディタ:Visual StudioまたはSublime Textなどのプログラムを使用してHTMLファイルを編集します。
また、追加のガイダンスのために関連するビデオチュートリアルをご覧になることをお勧めします。
チュートリアルに従わずにコードサンプル全体をコピーしたい場合は、ページの下部にあるコードスニペットを参照してください。
ステップ1:HTMLファイルを作成する
新しいHTMLファイルを作成し、index.html
という名前を付けます。
ステップ2:マップを初期化する
index.html
ファイルにコードを追加してマップを初期化します。
- コードエディタで
index.html
ファイルを開きます。 - 次のコードをコピーしてファイルに貼り付けます。
- 貼り付けた後、
mapboxgl.accessToken
が公開アクセス トークンに割り当てられていることを確認してください。この値はpk
で始まります。YOUR_MAPBOX_ACCESS_TOKEN
と表示されている場合は、アカウントにログインしてコードスニペットを再度コピーします。トークンはログイン中にコ ードスニペットに自動的に追加されます。
- ブラウザで
index.html
ファイルを開くと、デフォルトのMapbox Globe(地球儀)が表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Mapbox GL JSでカスタムマーカーを追加する</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
<!--ステップ5-3のコードはここに入ります-->
<!--ステップ7のコードはここに入ります-->
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
//ステップ3のコードはここに入ります
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v11',
center: [-96, 37.8],
zoom: 3
});
//ステップ4のコードはここに入ります
</script>
</body>
</html>
上記のとおり、Mapbox GL JS の Map
はいくつかのオプションを定義してインスタンス化されています:
container
: マップが表示されるページ上の<div>
要素のid
。 この場合、<div>
のid
は'map'
です。style
: マップ スタイルのスタイル URL。この場合、スタイル URLmapbox://styles/mapbox/light-11
を持つ Mapbox Light マップを使用します。center
:[経度, 緯度]
形式の地図の初期の中心点。zoom
: マップの初期ズーム レベル。
ステップ3:GeoJSONデータを読み込む
次に、GeoJSON オブジェクトを作成して、マーカーをマップ上のどこに表示するかを決定しましょう。
GeoJSONは、ポイント、ラインストリング、ポリゴンなどのジオメトリとその関連データプロパティを保存できるWebフレンドリーな空間データ形式です。次の手順に従って、GeoJSON 形式のポイント データを使用してマーカーの配置場所を決定します。
- コード内の
// ステップ3のコードはここに入ります
と書かれている箇所を見つけます。 - 次のコードスニペットをコピーして貼り付け、コメント行を置き換えます。
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77.032, 38.913]
},
properties: {
title: 'Mapbox',
description: 'ワシントンD.C.'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.414, 37.776]
},
properties: {
title: 'Mapbox',
description: 'サンフランシスコ、カリフォルニア州'
}
}
]
};
多くのGeoJSONデータがある場合は、インラインで追加するのではなく外部ファイルとして読み込むとよいでしょう。リモートでホストされている場合はそのURLにリンクするか、ローカルまたはサードパーティのAPIからロードするためにfetchを利用することができます。
ステップ4:デフォルトのマーカーを地図に追加する
GeoJSONデータ内の各ポイントにマーカーを作成して添付しましょう。 ここではデフォルトのマーカーを使用し、ステップ5でマーカーをカスタマイズします。
次の手順に従います:
- マーカーを追加するために、次のコードをコピーして貼り付け、
//ステップ4のコードはここに入ります
と書かれている箇所に置き換えます。- これはスクリプト内の
Map
オブジェクトのインスタンス化の終わりの後、</script>
タグの前にあります。
- これはスクリプト内の
index.html
ファイルを保存して、ブラウザを更新し、地図の東海岸と西海岸に配置された2つのデフォルトマーカーを表示します。
// マーカーを地図に追加
for (const feature of geojson.features) {
// ステップ5-1のコードはここに入ります
// 各機能のためのマーカーを作成し地図に追加
new mapboxgl.Marker().setLngLat(feature.geometry.coordinates).addTo(map); // この行をステップ5-2のコードに置き換えてください
// ステップ6のコードはここに入ります
}
あなたのデフォルトのマーカーは、以下の画像のように表示されます:
ステップ5:マーカーをカスタマイズしスタイルを設定する
デフォルトのマーカーを作成したので、カスタムHTML要素を追加して外観を制御できます。
ステップ5-1:各ポイントに空のdivを作成する。
Marker
のコンストラクタに空のdiv
を渡して、各ポイントのHTML DOM要素を作成しましょう。これにより、GeoJSONデータにリストされている場所に各div
が添付されます。
次のコードセグメントを// ステップ5-1のコードはここに入ります
と書かれている場所に追加します。
// 各機能のためのHTML要素を作成
const el = document.createElement('div');
el.className = 'marker';
ステップ5-2:空のdivをマーカーのコンストラクタに渡します。
次に、 // この行をステップ5-2のコードに置き換えてください
と終了する行のコードを次のコードセグメントに置き換えます:
new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
これにより、空のdiv
がコンストラクタに渡されます。
ステップ5-3: CSSを追加してマーカーのスタイルを設定します。
マーカーのスタイルを指定する必要がありますので、div
が各ポイントで何かをレンダリングするようにしましょう。これにより、各マーカーに画像が追加され、それらが50x50ピクセルの均一なサイズに調整され、カーソルが要素の上にあるときに画像が変わり、ユーザーがその要素と対話できることがわかります。
これを行うには、次のCSSコードをコピーして、ステップ5-1でコメントされていたstyleセクションのヘッダに貼り付けます。
.marker {
background-image: url('https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
ステップ6:マーカーにポップアップを添付する
次に、ポップアップを追加するために必要なJavaScriptを追加しましょう。これらは各ポイントの情報を含み、マーカーがクリックされたときにポップアップを表示します:
- 次のコードを
</script>
タグの終わりの直前、// ステップ6のコードはここに入ります
と書かれている場所にコピーして貼り付けます。- この例では、GeoJSONデータの
title
とdescription
プロパティを表示していますが、保存して表示するデータを自由にカスタマイズできます。
- この例では、GeoJSONデータの
- ファイルを保存してブラウザを更新します。
- マーカーをクリックしてポップアップの表示を確認します。
new mapboxgl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // ポップアップを追加
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
)
.addTo(map);
mapboxgl.Popup
メソッドを使用してポップアップを宣言する際に offset
値を追加していることに注目してください。これにより、ポップアップがマーカーの真上ではなく近くに位置するようにします。
ステップ7:CSSを使用してポップアップのスタイルを設定する
最後に、ポップアップのスタイルを設定して、より整然と表示させましょう。
次のCSS
コードをコピーして、ステップ5-3の.marker
宣言の下にあるstyle
タグ内に貼り付けてください。
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
最終製品
カスタムデータとスタイリングを使用して、Mapbox GL JSでインタラクティブなマーカー マップを作成しました。
完成したインタラクティブマップ
完成したコードスニペット
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo: Add custom markers in Mapbox GL JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker {
background-image: url('https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '{{MAPBOX_ACCESS_TOKEN}}';
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-77.032, 38.913]
},
'properties': {
'title': 'Mapbox',
'description': 'Washington, D.C.'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox',
'description': 'San Francisco, California'
}
}
]
};
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v11',
center: [-96, 37.8],
zoom: 3
});
// add markers to map
for (const feature of geojson.features) {
// create a HTML element for each feature
const el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
)
.addTo(map);
}
</script>
</body>
</html>
次のステップ
Mapbox GL JS を使用してプロジェクトを作成したので、Web アプリケーションを拡張するために他のチュートリアルをチェックすることをお勧めします:
- ポイントをマップに追加する Mapbox StudioとMapbox GL JSを使用。
- ストアロケーターを作成する Mapbox GL JSを使用。
- 時間の経過に伴う変化を表示する Mapbox GL JSを使用。
- Turf.jsを使用してデータを分析するとMapbox GL JS。
プロジェクトを拡張する方法や始めるためのコードのアイデアについては、Mapbox GL JSの例を参照してください。