これは何？
埼玉県所沢市には、アニメ作品をモチーフにした、『光るマンホール』があるという。
JR武蔵野線 東所沢駅から北へ向かい、東所沢公園付近に至るまでの間に、全28基が設置されている。
それらを鑑賞して楽しむためのガイドブックとして、また、撮影した画像を地図上に重ね合わせて表示し、見て楽しむためのコンテンツとして、マップを作成しました。
今回、私としては初めての試みとして、マップを表示するためのライブラリとして、Mapboxを利用することにしました。
基本的には公式ドキュメントに記載されているサンプルほぼそのままに、SDKの機能を呼び出している（組み合わせた）のですが、一部、オリジナルの機能を実現するために、独自に実装した機能もあります。
説明スライド
特徴
- マップには、Mapbox GL JSを使用。3D風の、斜め見下ろし視点
- 28基のマンホールがある位置には、マーカーを配置。番号と作品イラストで分かりやすく
- マーカーをクリック（タップ）すると、ポップアップを表示。撮影したマンホールの画像を閲覧できる
- ユーザーの現在位置を表示できる（端末の位置情報を有効にした場合）
- ユーザーの移動に合わせて、軌跡を表示（グレーの線）
- 現在位置から各マンホールまでの、直線距離を表示（ポップアップの下部）
独自に実装した機能
- ユーザーの軌跡を線で表示する
- 位置情報の履歴を保持して、それをgeojson形式に整形、ラインとしてマップ上にレイヤーを描画
- 特定の座標（東所沢）へマップの表示範囲を移動するボタン
- 独自のコントロールを追加できる機能を使い、実装。クリックイベントに、マップの移動をするコールバック関数を登録した
- ヘルプを表示するボタン
- 上記同様、独自のコントロール。予めヘルプを書いておいたHTML要素を、表示/非表示切り替え、CSSでオーバーレイ表示している