はじめに
2024年春リリースでSearch SDKsの発表がありました。その中で現在ベータ版で公開中のMapbox Search JSの使い方についてみていきます。
Mapbox Search JSとは
Mapbox Search JSはMapboxのSearchサービスをJavaScript環境で使用するためのライブラリです。サービスとしてはAddress Autofill、Search Box、Geocodingの3種類に対応しています。
- Autofill: Autofill API (日本未対応) を使用して不完全な住所情報から完全な住所を得る機能
- Search Box: Search Box API (日本のPOI・住所検索対応) を使用して住所・POI名称等から座標情報を得る機能
- Geocoding: Geocoding APIを使用して住所・POI名称等から座標情報を得る、またはその逆に座標から住所を得る機能
Search Box APIについては以下の記事でも取り上げているのでご参照ください。
また用途に合わせてCore、React、Webの3種類のライブラリが存在します。
- Core: UIなしでSearchサービスを使用するためのライブラリ。WebやReactの中でも利用
- Web: 一般的なWeb用のUIを提供するライブラリ。Reactの中でも利用
- React: React用のUIを提供するライブラリ
Search Box/Web のコードを確認
それでは早速Search BoxのWebを試してみます。サンプルコードは以下を使用します。
以下が本サンプルのデモです。
HTML/CSS
一番最初にAssembly.cssを読み込んでいますが、このサンプルでは使用していないのでなくても大丈夫です。
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
以下はSearch JSを読み込んでいます。deferを使用しているので、非同期に読み込まれます。
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.21/web.js">
以下はMapbox GL JSを読み込んでいます。v2を読み込んでいますが、もちろんv3(v3.4.0等)でもOKです。
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
以下は地図を表示するエレメントを作成しています。
<div id="map" style="position: absolute; width: 100%; height: 100%"></div>
Mapの作成
JavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。日本向けのデモのために地名を日本語表示するスタイルを指定しています。通常のStreets v12やMapbox GL JS v3ならStandardでもOKです。
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox-search-web/cl5l944i6000k14o4ing22srv',
center: [139.77, 35.68],
zoom: 6
});
Search Boxの作成
Search JSをdeferで読み込んでいるため、読み込み完了後に処理を開始するように記述しています。deferを用いない場合は // 実際の処理 の部分を直接記述します。ただし、その場合はSearch JSを読み込んでから地図の表示を行うので、回線環境によってはすこし地図の表示に時間がかかる可能性があります。
const searchJS = document.getElementById('search-js');
searchJS.onload = function () {
// 実際の処理
};
それでは // 実際の処理をみていきます。
new MapboxSearchBox()でSearch Boxのインスタンスを作成し、更にアクセストークンを設定します。
const searchBox = new MapboxSearchBox();
searchBox.accessToken = ACCESS_TOKEN;
また、optionsでSearch Box APIのオプションを指定します。日本のPOI検索等を行う場合にはlanguage、 countryを指定します。特に、country: 'JP'の設定は必ず行ってください。
searchBox.options = {
language: 'ja',
country: 'JP'
};
検索ボックスで検索すると候補一覧が表示されますが、以下では候補から選択した場所にマーカーを表示するための設定を行っています。MapboxSearchBox#markerのデフォルトはtrueですが、ここでは明示的にtrueをしています。また、MapboxSearchBox内部ではMapbox GL JSを用いてマーカーの処理を行うため、MapboxSearchBox#mapboxglを指定します。
searchBox.marker = true;
searchBox.mapboxgl = mapboxgl;
MapboxSearchBoxはIControlを実装しているため、Map#addControlで地図上に追加します。
map.addControl(searchBox);
Search Box/Web のカスタマイズ
カスタマイズを試してみます。
テーマの変更
検索ボックス部分のテーマをカスタマイズできます。variablesは定義済みのテーマを変更できます。ここではテキストの文字色と背景色を変更しています。cssTextは定義済み以外のスタイルを適用したい場合に直接CSSとして記述する文字列を指定します。ここではマウスカーソルが重なったタイミングで背景色を変更しています。
searchBox.theme = {
variables: {
colorText: "red",
colorBackground: "gold"
},
cssText: "input:hover { background: lightyellow; }"
};
マーカーの変更
MapboxSearchBox#markerにMarkerOptionsを指定することで、マーカーをカスタマイズできます。MarkerOptionsはMapbox GL JSのMarkerのインスタンス作成時のオプションです。
以下のMapbox GL JSのサンプルコードで作成されているマーカーを実装してみましょう。
まず、HTMLに以下のスタイルを追加します。
<style>
.marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/pin.svg');
background-size: cover;
cursor: pointer;
}
</style>
次に、searchBox.marker = true;を以下のように変更します。
const el = document.createElement("div");
el.className = "marker";
const size = 100;
el.style.width = `${size}px`;
el.style.height = `${size}px`;
searchBox.marker = {
element: el,
rotationAlignment: "horizon",
offset: [0, -size / 2]
};
デモ
以上のカスタマイズのデモです。
まとめ
Serach JSのSearch Box/Webを試してみました。簡単にSearchの機能をWebアプリにいれることができました。
Discussion