nuxt-leafletの「l-popup」「l-tooltip」について

みなさんこんにちは！
イザナギです。
さて、今回も前回に引き続き「leaflet」に関する話題です。
「l-popup」「l-tooltip」について書いていきたいと思います。
nuxt-leafletまたはvue2-leafletには「l-popup」「l-tooltip」のコンポーネントが存在します。

l-popupとは

名前からも想像できると思いますが、ポップアップを表示できる機能です。

このように、マーカーの上をクリックするとポップアップが表示されます。
コードとしては以下の通りです。（一部抜粋してます）

<l-marker :lat-lng="marker.lat">
    　　　<l-popup :content="marker.contents"></l-popup>
</l-marker>

「l-marker」の中に「l-popup」を入れています。
contentの中に文字や値を入れれば、ポップアップの文字を変えることができます。

l-tooltipについて

tooltipとは、ポップアップとは違いマウスを乗せただけで表示できます。

こんな感じで、表示できます。
コードも先ほどとあまり変えずに

<l-marker :lat-lng="marker.lat">
　　　<l-tooltip :content="marker.contents"></l-tooltip>
</l-marker>

「l-popup」の部分を「l-tooltip」に変換しただけですね。

まとめ

今回は「leaflet」の「l-popup」「l-tooltip」について紹介しました。
私はポップアップが好きなので、「l-popup」を採用しました。
でも、いろいろ「leaflet」に調べてきましたが、やはりカスタマイズ性が高そうですね。
今度も、また何かありましたら紹介していきたいと思います。（今度は線をひいてみたいと考えております！）
それでは、今回は短いですがここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！