なんとなくメモ: leaflet

2021年5月30日日曜日

ReactとLeafletで地図の操作

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>
    </>
)
}