浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

mapboxのポップアップについて

今回は、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は柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

  • この記事いいね! (0)