## はじめに `react-simple-maps` は、React で簡単にインタラクティブな地図を作成できるライブラリです。 https://www.react-simple-maps.io/ この記事では `react-simple-maps` でできることと、その実装方法を解説します： - 基本的な世界地図の表示 - マーカーの追加や地域のフィルタリング - インタラクティブ機能 - データ可視化説明を飛ばしたい方は[今回のレポジトリ](https://github.com/melodyclue/zenn-world-map)、[Example ページ](https://zenn-world-map.vercel.app/)をご覧ください。 ## 環境構築 ### 必要なパッケージのインストール今回使用するライブラリをインストールします。 ```bash # React用の地図ライブラリ pnpm add react-simple-maps # TypeScript用の型定義 pnpm add -D @types/react-simple-maps ``` ### 地図データの準備今回は、TopoJSON 形式の地図データを以下の手順で使用します。 1. [Natural Earth](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/) にアクセス 2. Admin 0 – Countries の「Download countries」をクリックしてダウンロード 3. 解凍後、以下の 3 つのファイルを確認： - ne_10m_admin_0_countries.shp（地理データ本体） - ne_10m_admin_0_countries.prj（投影法情報） - ne_10m_admin_0_countries.dbf（属性データ） 4. [mapshaper](https://mapshaper.org/) で上記3ファイルをまとめてアップロードすると、以下の画像のように世界地図が表示されます ![world](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/c35669cb-d57a-45fd-a87a-a89b9046c679.png) 5. 右上の「Export」→ File format を「TopoJSON」に変更 6. 「save to clipboard」にチェックを入れて Export 7. 出力された TopoJSON を `public/world.json` として保存 ![map-export](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/cde446d9-378b-4d65-a379-3d82a5d1ca5a.png) ## 基本的な世界地図の表示まずはシンプルな世界地図を表示してみます。 ```tsx 'use client' import React from 'react' import { ComposableMap, Geographies, Geography } from 'react-simple-maps' export const WorldMap = () => { return ( {({ geographies }) => geographies.map(geo => ( )) } ) } ``` このコードで以下のような地図が表示されます： - `ComposableMap`: 地図全体のコンテナコンポーネント - `Geographies`: TopoJSON データを読み込んで地理情報を提供 - `Geography`: 各国を表す個別の地理要素 ![world-map](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/9782050c-5bde-467a-92fe-498a6c123e79.png) ## カスタマイズの方法 ### マーカーを追加する特定の位置にマーカーを配置して、都市や重要な地点を表示できます。以下のコードでは、東京都とニューヨークのマーカーを追加しています。 ```tsx import { Marker } from 'react-simple-maps' const markers = [ { name: "Tokyo", coordinates: [139.6503, 35.6762] }, { name: "New York", coordinates: [-74.006, 40.7128] }, ] // ComposableMap 内に追加 {markers.map(({ name, coordinates }) => ( {name} ))} ``` ![marker](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/38018f84-e631-4cd9-9fff-848a47a81698.png) ### 特定の地域を非表示にする `geo.properties`には、国の名前や ISO コードなどの情報が含まれているので、これを使います。例えば南極を非表示にしたい場合、地理データをフィルタリングします： ```tsx geographies .filter(geo => geo.properties.NAME !== 'Antarctica') .map(geo => ( )) ``` ### インタラクティブ機能の追加同じように、マウスホバーで国名を表示することもできます。`onClick`でクリックしたときの処理も書けます。 ```tsx { console.log(geo.properties.NAME) }} onMouseEnter={() => { console.log(geo.properties.NAME) }} onMouseLeave={() => { // マウスが離れた時の処理 }} /> ``` ## 国ごとにデータを可視化するここからは実際のデータを使って、各国の温室効果ガス排出量を色の濃淡で表現する地図を作成します。 ### データの準備 [Climate Watch](https://www.climatewatchdata.org/ghg-emissions) から温室効果ガス排出量のデータをダウンロードし、CSV ファイルを準備します。 CSV の読み込み方法についてはここでは省略しますが、詳細は[GitHub](https://github.com/melodyclue/zenn-world-map)を参照してください。各国の地理データと CSV データを ISO コードで照合し、SVG の fill プロパティで排出量に応じた色を適用します。 ```tsx {({ geographies }) => geographies.map(geo => { // CSVデータから該当国を検索（ISO 3166-1 alpha-3 コードで照合） const cur = data.find(s => s.iso === geo.properties.ADM0_A3) const value = cur ? parseFloat(cur['2019']) : null return ( ) }) } ``` ![world-map-with-data](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/5a5b2317-31d3-4727-beb9-24579a34d446.png) ## まとめ `react-simple-maps`を使うことで、簡単にインタラクティブな世界地図を組み込むことができました！ ## ちなみに Supabase ダッシュボードの Infrastructure の地図も`react-simple-maps`で実装されていました😊 ![supabase-Infrastructure](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fa7ebec8-a448-4bdd-815e-9700a9284516/be6580f8-4907-47c0-b22b-e15df7ec68fa.png) ### 参考リンク - [Example ページ](https://zenn-world-map.vercel.app/) - [今回のレポジトリ](https://github.com/melodyclue/zenn-world-map) - [react-simple-maps 公式ドキュメント](https://www.react-simple-maps.io/) - [Natural Earth（地図データ）](https://www.naturalearthdata.com/) - [mapshaper](https://mapshaper.org/) - [Climate Watch（温室効果ガスデータ）](https://www.climatewatchdata.org/)

react-simple-mapsの活用パターン集