Reactとleafletを使って地図の操作をしたかったので、なんとなくメモ。
Reactでleafletを使うときには、react-leafletを使うと便利。
[ドキュメント]
(Leaflet) 本家 直接操作するに仕様確認する
https://leafletjs.com/
(React Leaflet)
https://react-leaflet.js.org/
(React-leafletの使い方メモ) React Leafletのサンプルを解説してくれている感じ。
https://qiita.com/studio_haneya/items/fbb52fa03ab4f212ced0
[インストール]
(React本体、React-dom、Leaflet本体)
npm install react react-dom leaflet
(React-Leaflet)
npm install react-leaflet
(React-Leaflet Google Layer) GoogleMapを表示するなら
npm install --save react-leaflet-google-layer
[使い方]
- とにもかくにもインポート
(主なコンポーネント)
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
(GoogleMapを表示するなら追加）
import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
(Leaflet本体の機能を使うなら)
import L from 'leaflet' - OpenStreetMapを表示する
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
<TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
); - Google Mapを表示する
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
<ReactLeafletGoogleLayer apiKey='AIzaSyBF904Y-d2_yF4tXwHuji18VHSUDTwGUFI' type={'hybrid'} />
</MapContainer>
); - マーカーを表示する
MapContainerの子要素としてMaker要素を記載すると、地図表示時にマーカーを表示してくれる。Makerの子要素として、Popup要素を記載すると、地図上のマーカーをクリックした際に、表示するポップアップを設定できる。
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
<TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[51.505, -0.09]}>
<Popup>ポップアップメッセージ </Popup>
</Marker>
</MapContainer>
); - leaflet本体を直接操作する
初期表示だけであれば、react-leafletのコンポーネントを駆使していろいろとカスタマイズできるが、外部コンポーネントからのアクションで、地図内の要素を制御するのは出来なさそう。
leaflet本体にアクセスして、本体のメソッドなどを使うしかない。
MapContainerのwhenCreated属性に本体を取り出すための関数を設定することで、leaflet本体を取得できる。
以下の例では、状態管理要素を取得するuseStateを利用して、leaflet本体入手している。
地図とは違うボタン要素のクリックで実行する関数内で、leaflet本体を操作している。
(サンプル)
function Sample() {
//leaflet本体を格納するだけなら何でもよいが、状態管理のフック(useState)を使っている。
let [map,setMap]=useState(null);
//センター位置を変更するための処理
let setCenter=()=>{
map.setView([51.505, -0.09],map.getZoom());
};
//マーカーを地図に追加する
let addPoi=()=>{
L.marker([53.505, -0.09]).addTo(map);
} - //レンダー要素
return (
<>
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
<TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
<button onClick={()=>addPoi()}>マーカー追加</button>
<button onClick={()=>setCenter()}>センターを表示</button>
</>
)
}
