🔍

Mapbox Newsletter WEEKLY TIPSの解説 -「ジオコーダの結果後にポイントを設定」

2024/02/18に公開

はじめに

この記事は、先日配信された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の作成

プラグイン本体であるMapboxGeocoderIControlとして実装されているので、インスタンス化したものをaddControlで追加します。また、今回はmarkerオブションを指定しています。

const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  marker: {
    color: 'orange'
  },
  mapboxgl: mapboxgl
});

map.addControl(geocoder);

markerオプションは以下の場所で使用されています。
https://github.com/mapbox/mapbox-gl-geocoder/blob/v5.0.0/lib/index.js#L1300

これにより、以下のdefaultMarkerOptionsの設定を上書きしています。
https://github.com/mapbox/mapbox-gl-geocoder/blob/v5.0.0/lib/index.js#L1297-L1299

また、このプションはそのままMarkerのオプションとして使用されます。
https://github.com/mapbox/mapbox-gl-geocoder/blob/v5.0.0/lib/index.js#L1301

したがって、以下のような指定もできます.

const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  marker: {
    color: "orange",
    rotation: 45,
  },
  mapboxgl: mapboxgl
});

まとめ

Geocoderプラグインのmarkerオプションを指定することで、マーカーを操作できることがわかりました。

Geocoderプラグインの使い方については、以下の記事も合わせてご参照ください。

https://zenn.dev/ottylab/articles/cfbc5754593f40/

GitHubで編集を提案
マップボックス・ジャパン合同会社

Discussion