【Leaflet】テキストを地図の上に描写する

Leafletでテキストを地図の上に描写したい！

概要

今回の記事では、Leafletでテキストを地図の上に描写する掲載する。

仕様書

環境

• Leaflet 1.7.1

手順書

Leafletの上にテキストを表示する方法はいろいろあるんだけども、この記事では透明な円をアンカーとしてその上のツールチップにテキストを表示する方法を挙げる。

var circle = L.circle([51.505, -0.09], {
    color: 'transparent',
    fillColor: 'transparent',
    fillOpacity: 0,
    radius: 1
}).addTo(map);

circle.bindTooltip("Nya-n!", {
    permanent: true,
    direction: 'center',
    className: 'text-on-map'
}).openTooltip();

ツールチップにスタイルシートのクラスを設定してスタイルをカスタマイズできるんだけども、フォント関連はそのまま設定できるが、backgroundやborder関連は!importantしないとスタイルが反映されなかった。

    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 16px;
    font-weight: bold;
    text-align: center;

まとめ（感想文）

地図上に独自のテキストを表示したい時に使えるかもね！