React-Leafletでマーカーの上に文字をつけたい

「もうポップアップで良くない？」って言いたくなってもマーカーの上に文字を付けたい時があります.たしかにある方が見やすい.

どうやるか

とりあえずググるとDivIconを使う例が出てくる.

Customizing react-leaflet marker icons by using font awesome - Stack Overflow

これとかすごい.(Reactでない素のLeafletだけど)

Leaflet + OpenStreetMapで、地図にマーカー＆ラベル表示。サンプルソース。 - 晴歩雨描

よくわからんけどFeatureGroupもReact-Leafletで使えるらしい.

React-leafletの使い方メモ - Qiita

もっと楽な方法ないか

3流らしく手を抜きたい.こんな高度な機能は俺には使えない.

そこでTooltipを使うことにした.

こんな感じでMarkerに固定のTooltipを入れた.

Tooltipの中には要求に合わせて文字色とかのスタイルを入れたりする.

  return points.map(point => {
    return (
      <Marker
        key={point.point_id}
        position={[point.lat, point.lng]}
        icon={myMarkerIcon(config)}
      >
        <Tooltip
          sticky={false}
          permanent
          direction="top"
          className="tooltip-transparent"
        ><span style={{margin: 0, padding: 0, backgroundColor: '#ffff', color: 'red'}}>{point.name}</span></Tooltip>
      </Marker>
    )
  })

そして, CSSでTooltipの背景色を消す.

.leaflet-tooltip.tooltip-transparent {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
}

そうするとこんな感じで出てくる.

(ここでは「クロスランド小矢部」. どこだよ.)

あとは適当にアイコンサイズとかも見つつスタイルで調整すればそれっぽくなりそう.

小手先感がすごい.