はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ジオコーダの結果後にポイントを設定」についての解説です。このサンプルではGeocoderプラグインの使い方を紹介しています。また、Newsletterの購読はこちらからお申し込みいただけます。
以下が本サンプルのデモです。テキストボックスに地名等を入力して検索します。候補から一つ選択すると、その場所にピンがセットされカメラが移動します。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。また、英語版はMapbox GL JS v3が使用されています。
HTML/CSS
まずHTMLを見ていきましょう。
最初にGeocoderプラグインを読み込んでいます。
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
以下は地図を表示するエレメントです。
<div id="map"></div>
以下のスタイルは（いつからあるのか遡れませんでしたが）、現状では使われてないと考えられます。
<style>
#geocoder-container > div {
min-width: 50%;
margin-left: 25%;
}
</style>
Mapの作成
JavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
center: [-79.4512, 43.6568],
zoom: 13
});
Geocoderの作成
プラグイン本体であるMapboxGeocoderはIControlとして実装されているので、インスタンス化したものをaddControlで追加します。また、今回はmarkerオブションを指定しています。
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: 'orange'
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
markerオプションは以下の場所で使用されています。
これにより、以下のdefaultMarkerOptionsの設定を上書きしています。
また、このプションはそのままMarkerのオプションとして使用されます。
したがって、以下のような指定もできます.
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: "orange",
rotation: 45,
},
mapboxgl: mapboxgl
});
まとめ
Geocoderプラグインのmarkerオプションを指定することで、マーカーを操作できることがわかりました。
Geocoderプラグインの使い方については、以下の記事も合わせてご参照ください。
Discussion