はじめに
react-simple-maps は、React で簡単にインタラクティブな地図を作成できるライブラリです。
この記事では react-simple-maps でできることと、その実装方法を解説します：
- 基本的な世界地図の表示
- マーカーの追加や地域のフィルタリング
- インタラクティブ機能
- データ可視化
説明を飛ばしたい方は今回のレポジトリ、Example ページをご覧ください。
環境構築
必要なパッケージのインストール
今回使用するライブラリをインストールします。
地図データの準備
今回は、TopoJSON 形式の地図データを以下の手順で使用します。
- Natural Earth にアクセス
- Admin 0 – Countries の「Download countries」をクリックしてダウンロード
- 解凍後、以下の 3 つのファイルを確認：
- ne_10m_admin_0_countries.shp（地理データ本体）
- ne_10m_admin_0_countries.prj（投影法情報）
- ne_10m_admin_0_countries.dbf（属性データ）
- mapshaper で上記3ファイルをまとめてアップロードすると、以下の画像のように世界地図が表示されます
- 右上の「Export」→ File format を「TopoJSON」に変更
- 「save to clipboard」にチェックを入れて Export
- 出力された TopoJSON を
public/world.jsonとして保存
基本的な世界地図の表示
まずはシンプルな世界地図を表示してみます。
このコードで以下のような地図が表示されます：
ComposableMap: 地図全体のコンテナコンポーネントGeographies: TopoJSON データを読み込んで地理情報を提供Geography: 各国を表す個別の地理要素
カスタマイズの方法
マーカーを追加する
特定の位置にマーカーを配置して、都市や重要な地点を表示できます。
以下のコードでは、東京都とニューヨークのマーカーを追加しています。
特定の地域を非表示にする
geo.propertiesには、国の名前や ISO コードなどの情報が含まれているので、これを使います。
例えば南極を非表示にしたい場合、地理データをフィルタリングします：
インタラクティブ機能の追加
同じように、マウスホバーで国名を表示することもできます。onClickでクリックしたときの処理も書けます。
国ごとにデータを可視化する
ここからは実際のデータを使って、各国の温室効果ガス排出量を色の濃淡で表現する地図を作成します。
データの準備
Climate Watch から温室効果ガス排出量のデータをダウンロードし、CSV ファイルを準備します。
CSV の読み込み方法についてはここでは省略しますが、詳細はGitHubを参照してください。
各国の地理データと CSV データを ISO コードで照合し、SVG の fill プロパティで排出量に応じた色を適用します。
まとめ
react-simple-mapsを使うことで、簡単にインタラクティブな世界地図を組み込むことができました！
ちなみに
Supabase ダッシュボードの Infrastructure の地図もreact-simple-mapsで実装されていました😊
