React-Leaflet 独自のコントロールを表示する

React-Leafletで、地図の四隅に独自のコントロールを置く方法です。

ボタンを追加するサンプル

簡単にボタンを地図の右上に表示するサンプルコードである。

まず、ボタンを表示するカスタムコントロールを作る。

function MyControl() {

  const onClick = (e) => {
    console.log("click")
  }

  return (
    <div className="leaflet-top leaflet-right">
      <div className="leaflet-control leaflet-bar">
        <button onClick={onClick}>ボタン</button>
      </div>
    </div>
  )
}

export default MyControl

使い方は普通の Reactコンポーネントと同じで、<MapContainer> 内にカスタムコントロールを配置するだけである。

function App() {
  const [position, setPosition] = useState<LatLngTuple>([35.710304502694505, 139.81029660578832])

  return (
    <MapContainer center={position} zoom={17} scrollWheelZoom={false} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <MyControl/>
    </MapContainer>
  )
}

■ 実行結果

コントロールの表示位置

地図上でのカスタムコントロールの表示位置は、次の className で制御できる。

現在地を表示するボタンを追加する

現在地を地図上に表示するサンプルコードを作ってみよう。

まず、ボタンを押したら現在地を表示するコントロールを実装する。

現在値の取得は、JavaScirpt標準の navigator.geolocation.getCurrentPosition で取得できる。

位置情報の取得に成功した場合は、map.setView を使い現在地の緯度経度を地図上の中心に表示する。また、ユーザーが現在地の取得を拒否した場合はエラーが発生するので、エラー処理も実装すること。

function CurrentPosition() {
  
  const map = useMap()

  //現在地を取得
  const onClick = (e) => {
    navigator.geolocation.getCurrentPosition(
      position => {
        map.setView([position.coords.latitude, position.coords.longitude])
      },
      () => {
        alert("現在地の取得に失敗しました")
      })
  }

  return (
    <div className="leaflet-top leaflet-right">
      <div className="leaflet-control leaflet-bar">
        <button onClick={onClick}>現在地を表示</button>
      </div>
    </div>
  )
}

export default CurrentPosition

<MapContainer> 内に、上で作成したコントロールを配置する。

function App() {
  const [position, setPosition] = useState<LatLngTuple>([35.710304502694505, 139.81029660578832])

  return (
    <MapContainer center={position} zoom={17} scrollWheelZoom={false} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <CurrentPosition/>
    </MapContainer>
  )
}