今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。
ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると
画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。
ざっくりですが説明します。
ポップアップを表示するメソッドを作ったあとに
var el = document.createElement('div');
でピンのオブジェクトを生成します。
その後に
popup = new mapboxgl.Popup({offset: [16, 0]})
で、ポップアップオブジェクトを生成して使用可能にします。
次に、画像をポップアップとして扱うコードなのですが
.setHTMLメソッドを使って表示します。
本来は、htmlの文字列を表示する役割ですが、ここでは
src = '+image+'
引数のimageを取って中の画像のurlを渡すことができます。
ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて
そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。
後は
setLngLat([lmg,lat])
で、引数のlatとlngを渡せば撮影した場所にピンが立ちま
す。
以上ですが、ここでは肝だけ説明させていただきました。
mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので
慣れてきたらシムシティ感覚で楽しくなってくると思います！
