Mapbox GL JSでカスタムマーカーを追加する
このチュートリアルでは、Mapbox GL JSを使用して指定された場所にカスタムマーカーを追加するインタラクティブなウェブマップを構築する方法を学びます。また、これらのマーカーをクリックしたときに情報を表示するポップアップを追加します。
最終的なマップは次のようになります：
前提条件
このガイドに従うために必要なもの：
- フロントエンドの知識：フロントエンド開発（HTML、CSS、JavaScript）に多少慣れていること
- Mapboxアカウント：無料アカウントにサインアップまたはログインしてください account.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/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/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の例を参照してください。