React Leafletで凡例を表示する

leafletの実装について少しメモ。

背景

PythonやRのleafletパッケージだと簡単に凡例をつけられた覚えがあるが、Reactで実装しているとそういう関数は見当たらなかった。

自分で実装する方法を探していたところ

How to add a legend to the map using react leaflet? - CodeSandbox

など、いくつか解説サイトを見つけた。

それらのサイトでは、L.DomUtil.createで凡例のdivを作ってL.control().addTo(map) で地図に紐づける実装だったが、バージョンが現行とはだいぶ違うためか再現できなかった。

なので自分で実装する方法を探した。

実装

コードを一部抜粋するとこんな感じ

const Legend = () => {
  // 自作の凡例のdiv
  return (
    <div
      style={{ backgroundColor: "rgb(255, 255, 255, 0.8)", margin: "10px 10px 25px", padding: "10px" }}
      className="leaflet-bottom leaflet-right"
    >
      {/* LegendContent には凡例に書く内容が入っている想定 */}
      <LegendContent />
    </div>
  )
}

function App() {
  const position: LatLngExpression = [51.505, -0.09]

  return (
    <MapContainer center={position} zoom={13} scrollWheelZoom={false} style={{ height: "300px", width: "600px" }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 自作のLegendを MapContainer 内に置く */}
      <Legend />
    </MapContainer>
  )
}

export default App

実装の考え方は以下の通り：

• React Leafletでは、<MapContainer></MapContainer> の間に要素を入れれば地図に追加される。
  • つまり、addTo(map)を書く必要はない。
  • 自作のLegendの要素を作って<MapContainer></MapContainer>に入れればいい
• 自作のLegendの要素はReactの普通のコンポーネント作成方法に則り、JSX.Elementなどで作ればいい
• その際に className="leaflet-bottom leaflet-right" などをつけると、自分でcssを書かずとも凡例の位置を指定できて楽

コード全文

github.com

環境

• react: 18.3.1
• react-leaflet: 4.2.1
• leaflet: 1.9.4