write ahead log

ロールフォワード用

React-Leafletを使って地図の中央位置を変更したい

追記

丁寧に探すと公式にやり方が書いてあった。

react-leaflet.js.org


React-Leafletを使って地図を表示することになったが、どうにも地図のCenter位置を変更できない。

地図を出すときに以下のようにcenterは指定できるけど、どうも初期表示時の座標らしい。

そういうわけでmapCenterの値が変わっても地図の中央位置は変わらない。

export default function MapComponent({ mapCenter }) {
  const zoom = いい感じの倍率
  const height = いい感じの高さ
  const attribution = '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
  const url = 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'
  
  return (
    <MapContainer
      center={mapCenter}
      zoom={zoom}
      <TileLayer attribution={attribution} url={url} />
    </MapContainer>
  )
}

調べるとuseMapというhookがあって、panTo()を呼び出すと移動できるっぽい。

リアクティブっぽくやりたいので以下のようにした。

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

// こいつはjsxを返さない
// ただ地図を移動するだけの存在
function ChangeMapCenter({ position }) {
  const map = useMap()
  map.panTo(position)

  return null
}

export default function MapComponent({ mapCenter }) {
  const initialCenter = いい感じの座標
  const zoom = いい感じの倍率
  const height = いい感じの高さ
  const attribution = '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
  const url = 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'
  
  return (
    <MapContainer
      center={initialCenter}
      zoom={zoom}
      <TileLayer attribution={attribution} url={url} />
      <ChangeMapCenter position={mapCenter} />
    </MapContainer>
  )
}

React-Leafletは3.2.2だった。

昔のバージョンだとたぶんuseMapはない。