maps-react チュートリアル

maps-react は、Geolonia Maps を React コンポーネントとして使うためのライブラリです。<Map> を JSX に置くだけで地図が出て、マーカーもデータも props と子要素で宣言的に書けます。React で作られたサイトやアプリケーションなら、Vite、Next.js、webpack などほとんどのビルド環境でそのまま動きます。

このチュートリアルでは、能力の梯子を下から順に登ります。各段は短く、必ず動くものを作ります。段5まで登りきると、自分のデータを色分けして載せた React アプリを、自分の URL で公開できるようになります。

1. 段0 地図を出す：<Map> コンポーネント1つで地図が出る
2. 段1 場所と視点：見たい場所、拡大率、傾きを props で指定する
3. 段2 データを載せる：自分の地点データ（GeoJSON）を重ねる
4. 段3 見た目を変える：データの属性に応じて点を色分けする
5. 段4 インタラクションを足す：クリックでポップアップを出す
6. 段5 公開する：ビルドして本番公開する

途中でつまずいても大丈夫です。各段に「うまくいかないとき」の確認ポイントを用意しています。

まずは 段0：地図を出す から始めましょう。