ちょっとした小ネタ未満ですが、今後も使いそうなので自分のための備忘録としてまとめ。
React Leaflet で表示している地図の表示範囲を指定する方法についてです。
こちらの機能については、公式サイトにコード例がありました。
View bounds | React Leaflet
https://react-leaflet.js.org/docs/example-view-bounds
が、こちらは描画している矩形をクリックした時に、setBounds() を使って、その範囲が地図に納まるように縮尺を変えるという処理でした。
しかし私が実装したい機能ではクリック処理は必要なく、単純に初期読み込み時の縮尺が指定できれば良かったので、上記では若干合わない…。いや、使えるけど…。
で、調べたところ、単なる bounds というオプションがありました。
Example のページばかりを調べていたので気付くのが遅くなりました…。
こちらに表示したい範囲の緯度経度を指定すると、地図の初期読み込み時にその指定範囲が納まるように、地図の縮尺を調整してくれました。
サンプルコードは下記のとおりです。
const bounds = [[34.49452141,137.02728904], [35.06565481, 138.11321663]];
<Map
center={this.state.latlng}
bounds={bounds}>
......
</Map>
変数 bounds に地図の初期表示範囲を配列で指定しています。
1つ目のデータが、表示したい範囲の左上の緯度経度で、2つ目のデータが表示範囲の右下の緯度経度です。
こちらは state で管理してもOKです。
追加する項目は以上です！
本当にちょっとした小ネタではありますが、個人的にはとても便利なオプションでした。
が、表示したい範囲によっては、ズームレベルとの兼ね合いからか、かなり引きの状態で地図が表示される場合もありました。
その際は、地図のサイズ自体も調整するようにしてください。
以上、React Leaflet で地図を表示した際に、初期表示範囲を指定する方法についてでした。
ご参考になれば幸いです。
