Mapbox Newsletter WEEKLY TIPSの解説 -「ポップアップを表示」

はじめに

この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ポップアップを表示」についての解説です。また、Newsletterの購読はこちらからお申し込みいただけます。

ポップアップとは吹き出しのような見た目を持つオブジェクトで、通常マーカー等と組み合わせて使用します。マーカーやフィーチャーをクリックした際に、それに関する説明を表示するような用途で使用します。

コードを確認

まずExamplesのコードを見に行きましょう。

日本語サイト

英語サイト

基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。

HTML

まずHTMLを見ていきましょう。

以下は地図を表示するエレメントです。

<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: [-96, 37.8],
  zoom: 3
});

Popupの追加

Popupクラスをインスタンス化してポップアップを作成します。オプションがいくつか設定できますが、ここではcloseOnClickをfalseとしています。これがtrueのときはPopup外のマップをクリックした際に自動的にPopupが消えます。setLngLatは表示位置、setHTMLは中に表示するHTML要素を記述します。最後にaddToで地図に追加します。

const popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat([-96, 37.8])
  .setHTML('<h1>Hello World!</h1>')
  .addTo(map);

使い方は簡単ですね！

Popupの実装方法を知る

Popupクラスは以下で実装されています。早速中身を見ていきましょう。

setText / setHTML

setText、setHTMLはPopupの中身を指定するメソッドです。

setTextはユーザーが指定した文字列をwindow.document.createTextNode(text)を実行してテキストノードに変換しています。setHTMLは少し複雑なことをしていますが、ユーザーが定義したHTMLをそのまま使用します。setHTMLに関しては以下のようにドキュメントに記載されていますが、HTMLをサニタイジングしません。したがって、クロスサイトスクリプティングの危険性があるのでユーザーの入力値をそのままsetHTMLに使用しないほうが良いです。

This method does not perform HTML filtering or sanitization, and must be used only with trusted content.

どちらも最終的にsetDOMContentを呼んでいます。これはPopupを表現するdivエレメントの下にユーザーが指定したText/HTMLを追加する処理を行っています。

イベント処理

Popupはopen/closeイベントを取得できます。以下のようにonメソッドを用いてイベントハンドラを登録します。map.on('load', ()=>{})と同じ形式です。

popup.on('open', () => {
  console.log('popup was opened');
});

以下はsetText, setHTMLのサンプルです。Popup1はsetTextを使用しており、closeイベントでalertを表示します。Popup2/Popup3はsetHTMLを使用しています。Popup2はtableを使用しています。Popup3は<a href="javascrit:...">を使用してクロスサイトスクリプティングが発生しうるシナリオを例示しています。

まとめ

「ポップアップを表示」はPopクラスの簡単な使い方を示すサンプルでした。Popupは単独で使うことよりもMarkerと組み合わせて使うことが多いです。これについてはまた別の記事でご紹介できればと思います。