maps-react チュートリアル

maps-react は、Geolonia Maps を React コンポーネントとして扱うためのライブラリです。<Map> を JSX に配置すると地図が描画され、マーカーとデータは props と子要素で宣言的に記述します。React で構築したサイトとアプリケーションであれば、Vite、Next.js、webpack など大半のビルド環境で動作します。ただし Next.js では、Map をクライアントコンポーネントの中に配置する必要があります。

このチュートリアルは6つの Step で構成されています。各 Step は独立して動作するコードで完結します。Step 5 まで進むと、属性に応じて色分けしたデータを載せた React アプリを、自分の URL で公開するところまで到達します。

1. Step 0 地図を表示する: <Map> コンポーネント1つで地図を描画する
2. Step 1 初期位置とズームの設定: 中心座標、拡大率、傾きを props で指定する
3. Step 2 GeoJSON データの追加: 地点データ（GeoJSON）を重ねる
4. Step 3 データに応じたスタイルの適用: データの属性に応じて点を色分けする
5. Step 4 イベント処理とポップアップ: クリックでポップアップを表示する
6. Step 5 ビルドと本番公開: ビルドして本番環境に公開する

各 Step の末尾には、想定される失敗と確認手順をまとめた「うまくいかないとき」を用意しています。

最初の手順は Step 0: 地図を表示する です。