【Leaflet】テキストを地図の上に描写する
2023-8-29
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;
まとめ(感想文)
地図上に独自のテキストを表示したい時に使えるかもね!