はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ジオコーダーの追加」についての解説です。このサンプルではGeocoderプラグインの使い方を紹介しています。また、Newsletterの購読はこちらからお申し込みいただけます。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。
HTML/CSS
まずHTMLを見ていきましょう。
最初にGeocoderプラグインを読み込んでいます。
<!-- Load the `mapbox-gl-geocoder` plugin. -->
<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>
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
});
プラグイン本体であるMapboxGeocoderはIControlとして実装されているので、インスタンス化したものをaddControlで追加します。
// Add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);
MapboxGeocoderのインスタンス化ではいくつかのオプションが指定可能です。その中でaccessTokenは必須です。これはGeocoderプラグイン内部でGeocoding APIを呼び出す際に必要となるためです。Geocoding APIは住所等から座標を検索するためのAPIです。逆に座標から住所等を検索するAPIをReverse Geocoding APIといいます。
ちなみに、mapboxglは必須ではありません。しかし、markerオプションがtrueのときは必須で、かつmerkerオプションはデフォルトでtrueなので事実上必須です。merkerオプションは検索結果を選択したときにその場所にマーカーを表示するかどうかを指定するオプションです。マーカーを表示するにはMapオブジェクトが必要なので、mapboxglが必要となるわけです。ちなみに、markerをfalse指定せずにmapboxglを省略した場合、ワーニングは表示されるもののmarkerが自動的にfalseに設定されます。
他にもたくさんオプションがありますが、手頃なドキュメントが見つかりませんでした。以下のコードを参照いただくとコメントでオプションが全て解説されています。
まとめ
Geocoderプラグインを用いることで、Geocoding APIを使った検索機能が簡単に追加できました。
また、チュートリアルにもいくつかGeocoderプラグインを用いたものがあります。たとえばLocal search with the Geocoding APIは検索結果をマーカーではなくCircleレイヤーで表現しています。合わせてご参照ください。
Discussion