はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップスタイルを変更」についての解説です。このサンプルではスタイルを動的に変更する方法を例示しています。Mapboxのスタイルを体験するで軽く触れたサンプルと同じです。
また、Newsletterの購読はこちらからお申し込みいただけます。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版は新しいスタイルを使用しているのでこちらを参照します。
HTML/CSS
まずHTMLを見ていきましょう。
以下は地図を表示するエレメントです。
<div id="map"></div>
以下は左上に表示されているラジオボタンが並んでいるメニューです。
<div id="menu">
<input id="satellite-streets-v12" type="radio" name="rtoggle" value="satellite" checked="checked">
<!-- See a list of Mapbox-hosted public styles at -->
<!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
<label for="satellite-streets-v12">satellite streets</label>
<input id="light-v11" type="radio" name="rtoggle" value="light">
<label for="light-v11">light</label>
<input id="dark-v11" type="radio" name="rtoggle" value="dark">
<label for="dark-v11">dark</label>
<input id="streets-v12" type="radio" name="rtoggle" value="streets">
<label for="streets-v12">streets</label>
<input id="outdoors-v12" type="radio" name="rtoggle" value="outdoors">
<label for="outdoors-v12">outdoors</label>
</div>
CSSではそのメニューに関する設定が行われています。
#menu {
position: absolute;
background: #efefef;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
Mapの作成
次にJavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-streets-v12', // style URL
center: [-2.81361, 36.77271], // starting position [lng, lat]
zoom: 13 // starting zoom
});
HTMLエレメントを取得しています。layerListは左上のメニュー、inputsはメニューの中のラジオボタン群を指しています。
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
inputsについてループを回しているので、各ラジオボタンに対する設定をしています。input.onclickでラジオボタンがクリックされた際のイベントハンドラを登録しています。
for (const input of inputs) {
input.onclick = (layer) => {
...
};
}
ハンドラの中身を見てみます。layerはonlickのコールバック関数の引数です。実態はEventで、そのtargetプロパティはイベントが発生したHTMLエレメントが格納されています。各ラジオボタンにはidが付与されていたので、layer.target.idではそのidの値を取得しています。
map.setStyle('mapbox://styles/mapbox/' + layerId);
idの値はsatellite-streets-v12のようにスタイルIDだったので、それをそのままmapbox://styles/mapbox/に連結することでスタイルURLが完成します。最後にsetStyleにパラメータとして渡します。
map.setStyle('mapbox://styles/mapbox/' + layerId);
まとめ
スタイルを動的に変更する方法は「setStyleを呼ぶ」だけでした。簡単ですね。
Discussion