🗺️

React で地図から都道府県を選択できるようにする

2024/12/05に公開

Next.js

やりたいこと

Next.jsアプリケーションで、（簡略化された）日本地図を表示して、利用者に都道府県をクリックで選択させたい。

方針

日本地図SVG画像を表示する
使用するSVG画像は各都道府県ごとにグループ化されている
クリックされた（SVG内の）グループを取得して選択都道府県を得る
選択された都道府県を state で管理する
選択された都道府県の領域の色を変える
Next.js（15.x）でやりたい

Next.js プロジェクトを作成する

your-path % npx create-next-app@latest
✔ What is your project named? … nextjs-prefecture-selector
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
Creating a new Next.js app in /your-path/nextjs-prefecture-selector.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 372 packages, and audited 373 packages in 13s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created nextjs-prefecture-selector at /your-path/nextjs-prefecture-selector

地図を取得する

こちらの地図を利用させていただきます。

都道府県を選択するためなので、厳密な地図ではなく、こちらの地図を利用します。

取得した地図を眺める

取得した地図をエディタで開いてみます。

map-polygon.svg

<?xml version="1.0" encoding="utf-8"?>
<svg class="geolonia-svg-map" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <title>Japanese Prefectures</title>
  <desc>Created by Geolonia (https://geolonia.com/).</desc>
  <g class="svg-map">
    <g class="prefectures">
      <g class="okinawa kyusyu-okinawa prefecture" data-code="47">
        <title>沖縄 / Okinawa</title>
        <g>
          <path d="M144.9,456.4c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H144.9z"/>
        </g>
      </g>
      <g class="kagoshima kyusyu kyusyu-okinawa prefecture" data-code="46">
        <title>鹿児島 / Kagoshima</title>
          <path d="M99.3,912.7c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H99.3z"/>
      </g>
      <g class="miyazaki kyusyu kyusyu-okinawa prefecture" data-code="45">
        <title>宮崎 / Miyazaki</title>
        <path d="M167.8,821.5c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
      </g>
      <g class="oita kyusyu kyusyu-okinawa prefecture" data-code="44">
        <title>大分 / Oita</title>
        <path d="M167.8,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
      </g>
      <g class="kumamoto kyusyu kyusyu-okinawa prefecture" data-code="43">
        <title>熊本 / kumamoto</title>
        <path d="M99.3,730.2c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H99.3z"/>
      </g>
      <g class="nagasaki kyusyu kyusyu-okinawa prefecture" data-code="42">
        <title>長崎 / Nagasaki</title>
        <path d="M8,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H8z"/>
      </g>
      <g class="saga kyusyu kyusyu-okinawa prefecture" data-code="41">
        <title>佐賀 / Saga</title>
        <path d="M53.7,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H53.7z"/>
      </g>
      <g class="fukuoka kyusyu kyusyu-okinawa prefecture" data-code="40">
        <title>福岡 / Fukuoka</title>
        <path d="M99.3,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H99.3z"/>
      </g>
      <g class="kochi shikoku prefecture" data-code="39">
        <title>高知 / Kochi</title>
        <path d="M281.9,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
      </g>
      <g class="ehime sikoku prefecture" data-code="38">
        <title>愛媛 / Ehime</title>
        <path d="M281.9,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
      </g>
      <g class="kagawa shikoku prefecture" data-code="37">
        <title>香川 / Kagawa</title>
        <path d="M373.1,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
      </g>
      <g class="tokushima shikoku prefecture" data-code="36">
        <title>徳島 / Tokushima</title>
        <path d="M373.1,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
      </g>
      <g class="yamaguchi chugoku prefecture" data-code="35">
        <title>山口 / Yamaguchi</title>
        <path d="M281.9,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H281.9z"/>
      </g>
      <g class="hiroshima chugoku prefecture" data-code="34">
        <title>広島 / Hiroshima</title>
        <path d="M327.5,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H327.5z"/>
      </g>
      <g class="okayama chugoku prefecture" data-code="33">
        <title>岡山 / Okayama</title>
        <path d="M395.9,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H395.9z"/>
      </g>
      <g class="shimane chugoku prefecture" data-code="32">
        <title>島根 / Shimane</title>
        <path d="M327.5,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H327.5z"/>
      </g>
      <g class="tottori chugoku prefecture" data-code="31">
        <title>鳥取 / Tottori</title>
        <path d="M395.9,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H395.9z"/>
      </g>
      <g class="wakayama kinki prefecture" data-code="30">
        <title>和歌山 / Wakayama</title>
        <path d="M510,958.4c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-25.6c0-4.4-3.6-8-8-8H510z"/>
      </g>
      <g class="nara kinki prefecture" data-code="29">
        <title>奈良 / Nara</title>
        <path d="M555.7,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H555.7z"/>
      </g>
      <g class="hyogo kinki prefecture" data-code="28">
        <title>兵庫 / Hyogo</title>
        <path d="M441.6,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8H490c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H441.6z"/>
      </g>
      <g class="osaka kinki prefecture" data-code="27">
        <title>大阪 / Osaka</title>
        <path d="M510,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H510z"/>
      </g>
      <g class="kyoto kinki prefecture" data-code="26">
        <title>京都 / Kyoto</title>
        <path d="M510,638.9c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-6.6,0-12-5.4-12-12
          V647c0-4.4-3.6-8-8-8H510z"/>
      </g>
      <g class="shiga kinki prefecture" data-code="25">
        <title>滋賀 / Shiga</title>
        <path d="M601.3,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H601.3z"/>
      </g>
      <g class="mie kinki prefecture" data-code="24">
        <title>三重 / Mie</title>
        <path d="M601.3,775.8c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H601.3z"/>
      </g>
      <g class="aichi chubu prefecture" data-code="23">
        <title>愛知 / Aichi</title>
        <path d="M647,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H647z"/>
      </g>
      <g class="shizuoka chubu prefecture" data-code="22">
        <title>静岡 / Shizuoka</title>
        <path d="M738.2,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H738.2z"/>
      </g>
      <g class="gifu chubu prefecture" data-code="21">
        <title>岐阜 / Gifu</title>
        <path d="M647,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H647z"/>
      </g>
      <g class="nagano chubu prefecture" data-code="20">
        <title>長野 / Nagano</title>
        <path d="M715.4,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8H741c4.4,0,8-3.6,8-8v-71.2c0-6.6,5.4-12,12-12h2.7c4.4,0,8-3.6,8-8
          V601.3c0-4.4-3.6-8-8-8H715.4z"/>
      </g>
      <g class="yamanashi chubu prefecture" data-code="19">
        <title>山梨 / Yamanashi</title>
        <path d="M761,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H761z"/>
      </g>
      <g class="fukui chubu prefecture" data-code="18">
        <title>福井 / Fukui</title>
        <path d="M555.7,638.9c-4.4,0-8,3.6-8,8v25.6c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8
          v25.6c0,6.6-5.4,12-12,12H555.7z"/>
      </g>
      <g class="ishikawa chubu prefecture" data-code="17">
        <title>石川 / Ishikawa</title>
        <path d="M601.3,433.6c-4.4,0-8,3.6-8,8v139.6c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V441.6c0-4.4-3.6-8-8-8H601.3z"/>
      </g>
      <g class="toyama chubu prefecture" data-code="16">
        <title>富山 / Toyama</title>
        <path d="M647,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V510c0-4.4-3.6-8-8-8H647z"/>
      </g>
      <g class="niigata chubu prefecture" data-code="15">
        <title>新潟 / Niigata</title>
        <path d="M738.2,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8V490
          c0,6.6-5.4,12-12,12H738.2z"/>
      </g>
      <g class="kanagawa kanto prefecture" data-code="14">
        <title>神奈川 / Kanagawa</title>
        <path d="M829.5,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
      </g>
      <g class="tokyo kanto prefecture" data-code="13">
        <title>東京 / Tokyo</title>
        <path d="M829.5,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-2.7c0-6.6,5.4-12,12-12h25.6c4.4,0,8-3.6,8-8
          v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
      </g>
      <g class="chiba kanto prefecture" data-code="12">
        <title>千葉 / Chiba</title>
        <path d="M943.6,730.2c-4.4,0-8,3.6-8,8v208.1c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H943.6z"/>
      </g>
      <g class="saitama kanto prefecture" data-code="11">
        <title>埼玉 / Saitama</title>
        <path d="M783.9,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h139.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
      </g>
      <g class="gunma kanto prefecture" data-code="10">
        <title>群馬 / Gunma</title>
        <path d="M783.9,593.3c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8H848c1.5,0,3.7-3.1,3.7-8v-71.2c0-4.9-2.2-8-3.7-8H783.9z"/>
      </g>
      <g class="tochigi kanto prefecture" data-code="9">
        <title>栃木 / Tochigi</title>
        <path d="M859.4,593.3c-1.5,0-3.7,3.1-3.7,8v71.2c0,4.9,2.2,8,3.7,8h64.1c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H859.4z"/>
      </g>
      <g class="ibaraki kanto prefecture" data-code="8">
        <title>茨城 / Ibaraki</title>
        <path d="M943.6,593.3c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H943.6z"/>
      </g>
      <g class="fukushima tohoku prefecture" data-code="7">
        <title>福島 / Fukushima</title>
        <path d="M829.5,456.4c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8H829.5z"/>
      </g>
      <g class="yamagata tohoku prefecture" data-code="6">
        <title>山形 / Yamagata</title>
        <path d="M783.9,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
      </g>
      <g class="akita tohoku prefecture" data-code="5">
        <title>秋田 / Akita</title>
        <path d="M783.9,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
      </g>
      <g class="miyagi tohoku prefecture" data-code="4">
        <title>宮城 / Miyagi</title>
        <path d="M898,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H898z"/>
      </g>
      <g class="iwate tohoku prefecture" data-code="3">
        <title>岩手 / Iwate</title>
        <path d="M898,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H898z"/>
      </g>
      <g class="aomori tohoku prefecture" data-code="2">
        <title>青森 / Aomori</title>
        <path d="M783.9,228.2c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
      </g>
      <g class="hokkaido prefecture" data-code="1">
        <title>北海道 / Hokkaido</title>
        <path d="M783.9,0c-4.4,0-8,3.6-8,8v185.3c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-25.6c0-6.6,5.4-12,12-12H992c4.4,0,8-3.6,8-8V8
          c0-4.4-3.6-8-8-8H783.9z"/>
      </g>
    </g>
    <g class="boundary-line" stroke="#EEEEEE" stroke-width="12" stroke-linejoin="round" style="">
      <path d="M216.1,593.3H89.3c-1.1,0-2-0.9-2-2s0.9-2,2-2h126.9c4.4,0,8-3.6,8-8V454.4c0-1.1,0.9-2,2-2s2,0.9,2,2v126.9
        C228.2,587.9,222.8,593.3,216.1,593.3z"/>
    </g>
  </g>
</svg>

SVG ファイル内の <g> タグは、グループを表現します。
上位から、class属性を見てみると、sgv-map、prefectures、okinawa（以降、繰り返し各都道府県）のグループの階層になっています。
この階層を利用して、各都道府県を選択可能にしていきます。

地図を画面に表示する

まずは、この地図を画面に表示してみます。
都道府県選択用のコンポーネントを作成します。
現時点では中身は空っぽです。

src/components/prefecture-selector.tsx

"use client";

const PrefectureSelector = () => {
  return (
    <>
      ここに地図を表示します。
    </>
  );
}

export default PrefectureSelector;

作成したコンポーネントを表示してみます。
クライアント側で都道府県を選択させ、サーバ側へデータを送信する形での利用を想定しているので、"use client" とクライアントコンポーネントとして作成しています。

src/app/page.tsx

"use client";

import PrefectureSelector from "@/components/prefecture-selector";

export default function Home() {
  return (
    <div className="w-5/6 mx-auto">
      <PrefectureSelector />
    </div>
  );
}

最初の状態

次にダウンロードしたSVGファイルの中身をPrefectureSelectorの中にコピーします。
この際、以下の先頭行は不要なので削除します。
また、ReactではCSS クラスは"class"ではなく、"className"として定義する必要があるので、全て置き換えます。

<?xml version="1.0" encoding="utf-8"?>

次に、以下の置き換えを行います。

"stroke-width" -> "strokeWidth"
"stroke-linejoin" -> "strokeLinejoin"

これは、JSXやTSX内での属性名はキャメルケースで記述する必要があるためです。
ちょうど、記事を書かれている方がいらっしゃいました。

また、不要なstyleの指定部分を削除します。

src/components/prefecture-selector.tsx

"use client";

const PrefectureSelector = () => {
  return (
    <svg className="geolonia-svg-map" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
      <title>Japanese Prefectures</title>
      <desc>Created by Geolonia (https://geolonia.com/).</desc>
      <g className="svg-map">
        <g className="prefectures">
          <g className="okinawa kyusyu-okinawa prefecture" data-code="47">
          <title>沖縄 / Okinawa</title>
            <g>
              <path d="M144.9,456.4c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H144.9z"/>
            </g>
          </g>
          <g className="kagoshima kyusyu kyusyu-okinawa prefecture" data-code="46">
            <title>鹿児島 / Kagoshima</title>
            <path d="M99.3,912.7c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H99.3z"/>
          </g>
          <g className="miyazaki kyusyu kyusyu-okinawa prefecture" data-code="45">
            <title>宮崎 / Miyazaki</title>
            <path d="M167.8,821.5c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
          </g>
          <g className="oita kyusyu kyusyu-okinawa prefecture" data-code="44">
            <title>大分 / Oita</title>
            <path d="M167.8,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
          </g>
          <g className="kumamoto kyusyu kyusyu-okinawa prefecture" data-code="43">
            <title>熊本 / kumamoto</title>
            <path d="M99.3,730.2c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H99.3z"/>
          </g>
          <g className="nagasaki kyusyu kyusyu-okinawa prefecture" data-code="42">
            <title>長崎 / Nagasaki</title>
            <path d="M8,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H8z"/>
          </g>
          <g className="saga kyusyu kyusyu-okinawa prefecture" data-code="41">
            <title>佐賀 / Saga</title>
            <path d="M53.7,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H53.7z"/>
          </g>
          <g className="fukuoka kyusyu kyusyu-okinawa prefecture" data-code="40">
            <title>福岡 / Fukuoka</title>
            <path d="M99.3,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H99.3z"/>
          </g>
          <g className="kochi shikoku prefecture" data-code="39">
            <title>高知 / Kochi</title>
            <path d="M281.9,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
          </g>
          <g className="ehime sikoku prefecture" data-code="38">
            <title>愛媛 / Ehime</title>
            <path d="M281.9,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
          </g>
          <g className="kagawa shikoku prefecture" data-code="37">
            <title>香川 / Kagawa</title>
            <path d="M373.1,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
          </g>
          <g className="tokushima shikoku prefecture" data-code="36">
            <title>徳島 / Tokushima</title>
            <path d="M373.1,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
          </g>
          <g className="yamaguchi chugoku prefecture" data-code="35">
            <title>山口 / Yamaguchi</title>
            <path d="M281.9,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H281.9z"/>
          </g>
          <g className="hiroshima chugoku prefecture" data-code="34">
            <title>広島 / Hiroshima</title>
            <path d="M327.5,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H327.5z"/>
          </g>
          <g className="okayama chugoku prefecture" data-code="33">
            <title>岡山 / Okayama</title>
            <path d="M395.9,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H395.9z"/>
          </g>
          <g className="shimane chugoku prefecture" data-code="32">
            <title>島根 / Shimane</title>
            <path d="M327.5,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H327.5z"/>
          </g>
          <g className="tottori chugoku prefecture" data-code="31">
            <title>鳥取 / Tottori</title>
            <path d="M395.9,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H395.9z"/>
          </g>
          <g className="wakayama kinki prefecture" data-code="30">
            <title>和歌山 / Wakayama</title>
            <path d="M510,958.4c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-25.6c0-4.4-3.6-8-8-8H510z"/>
          </g>
          <g className="nara kinki prefecture" data-code="29">
            <title>奈良 / Nara</title>
            <path d="M555.7,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H555.7z"/>
          </g>
          <g className="hyogo kinki prefecture" data-code="28">
            <title>兵庫 / Hyogo</title>
            <path d="M441.6,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8H490c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H441.6z"/>
          </g>
          <g className="osaka kinki prefecture" data-code="27">
            <title>大阪 / Osaka</title>
            <path d="M510,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H510z"/>
          </g>
          <g className="kyoto kinki prefecture" data-code="26">
            <title>京都 / Kyoto</title>
            <path d="M510,638.9c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-6.6,0-12-5.4-12-12
              V647c0-4.4-3.6-8-8-8H510z"/>
          </g>
          <g className="shiga kinki prefecture" data-code="25">
            <title>滋賀 / Shiga</title>
            <path d="M601.3,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H601.3z"/>
          </g>
          <g className="mie kinki prefecture" data-code="24">
            <title>三重 / Mie</title>
            <path d="M601.3,775.8c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H601.3z"/>
          </g>
          <g className="aichi chubu prefecture" data-code="23">
            <title>愛知 / Aichi</title>
            <path d="M647,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H647z"/>
          </g>
          <g className="shizuoka chubu prefecture" data-code="22">
            <title>静岡 / Shizuoka</title>
            <path d="M738.2,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H738.2z"/>
          </g>
          <g className="gifu chubu prefecture" data-code="21">
            <title>岐阜 / Gifu</title>
            <path d="M647,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H647z"/>
          </g>
          <g className="nagano chubu prefecture" data-code="20">
            <title>長野 / Nagano</title>
            <path d="M715.4,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8H741c4.4,0,8-3.6,8-8v-71.2c0-6.6,5.4-12,12-12h2.7c4.4,0,8-3.6,8-8
              V601.3c0-4.4-3.6-8-8-8H715.4z"/>
          </g>
          <g className="yamanashi chubu prefecture" data-code="19">
            <title>山梨 / Yamanashi</title>
            <path d="M761,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H761z"/>
          </g>
          <g className="fukui chubu prefecture" data-code="18">
            <title>福井 / Fukui</title>
            <path d="M555.7,638.9c-4.4,0-8,3.6-8,8v25.6c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8
              v25.6c0,6.6-5.4,12-12,12H555.7z"/>
          </g>
          <g className="ishikawa chubu prefecture" data-code="17">
            <title>石川 / Ishikawa</title>
            <path d="M601.3,433.6c-4.4,0-8,3.6-8,8v139.6c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V441.6c0-4.4-3.6-8-8-8H601.3z"/>
          </g>
          <g className="toyama chubu prefecture" data-code="16">
            <title>富山 / Toyama</title>
            <path d="M647,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V510c0-4.4-3.6-8-8-8H647z"/>
          </g>
          <g className="niigata chubu prefecture" data-code="15">
            <title>新潟 / Niigata</title>
            <path d="M738.2,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8V490
              c0,6.6-5.4,12-12,12H738.2z"/>
          </g>
          <g className="kanagawa kanto prefecture" data-code="14">
            <title>神奈川 / Kanagawa</title>
            <path d="M829.5,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
          </g>
          <g className="tokyo kanto prefecture" data-code="13">
            <title>東京 / Tokyo</title>
            <path d="M829.5,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-2.7c0-6.6,5.4-12,12-12h25.6c4.4,0,8-3.6,8-8
              v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
          </g>
          <g className="chiba kanto prefecture" data-code="12">
            <title>千葉 / Chiba</title>
            <path d="M943.6,730.2c-4.4,0-8,3.6-8,8v208.1c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H943.6z"/>
          </g>
          <g className="saitama kanto prefecture" data-code="11">
            <title>埼玉 / Saitama</title>
            <path d="M783.9,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h139.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
          </g>
          <g className="gunma kanto prefecture" data-code="10">
            <title>群馬 / Gunma</title>
            <path d="M783.9,593.3c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8H848c1.5,0,3.7-3.1,3.7-8v-71.2c0-4.9-2.2-8-3.7-8H783.9z"/>
          </g>
          <g className="tochigi kanto prefecture" data-code="9">
            <title>栃木 / Tochigi</title>
            <path d="M859.4,593.3c-1.5,0-3.7,3.1-3.7,8v71.2c0,4.9,2.2,8,3.7,8h64.1c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H859.4z"/>
          </g>
          <g className="ibaraki kanto prefecture" data-code="8">
            <title>茨城 / Ibaraki</title>
            <path d="M943.6,593.3c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H943.6z"/>
          </g>
          <g className="fukushima tohoku prefecture" data-code="7">
            <title>福島 / Fukushima</title>
            <path d="M829.5,456.4c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8H829.5z"/>
          </g>
          <g className="yamagata tohoku prefecture" data-code="6">
            <title>山形 / Yamagata</title>
            <path d="M783.9,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
          </g>
          <g className="akita tohoku prefecture" data-code="5">
            <title>秋田 / Akita</title>
            <path d="M783.9,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
          </g>
          <g className="miyagi tohoku prefecture" data-code="4">
            <title>宮城 / Miyagi</title>
            <path d="M898,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H898z"/>
          </g>
          <g className="iwate tohoku prefecture" data-code="3">
            <title>岩手 / Iwate</title>
            <path d="M898,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H898z"/>
          </g>
          <g className="aomori tohoku prefecture" data-code="2">
            <title>青森 / Aomori</title>
            <path d="M783.9,228.2c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
          </g>
          <g className="hokkaido prefecture" data-code="1">
            <title>北海道 / Hokkaido</title>
            <path d="M783.9,0c-4.4,0-8,3.6-8,8v185.3c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-25.6c0-6.6,5.4-12,12-12H992c4.4,0,8-3.6,8-8V8
              c0-4.4-3.6-8-8-8H783.9z"/>
          </g>
        </g>
        <g className="boundary-line" stroke="#EEEEEE" strokeWidth="12" strokeLinejoin="round">
          <path d="M216.1,593.3H89.3c-1.1,0-2-0.9-2-2s0.9-2,2-2h126.9c4.4,0,8-3.6,8-8V454.4c0-1.1,0.9-2,2-2s2,0.9,2,2v126.9
            C228.2,587.9,222.8,593.3,216.1,593.3z"/>
        </g>
      </g>
    </svg>
  );
}

export default PrefectureSelector;

これで画面を確認すると、真っ黒な地図が表示されると思います。
白い逆L字部分は、沖縄県を気象予報の時みたいに表現する領域です。SVGファイル内では最後のグループとして定義されてます。
(以下の画像はダークモードで実行しているので、背景も黒くなっている)

真っ黒の地図

選択都道府県を管理する

選択された都道府県コードをstateで管理します。
呼び出し側でuseState()で定義して、作成したPrefectureSelectorに渡します。

src/app/page.tsx

"use client";

import { useState } from "react";
import PrefectureSelector from "@/components/prefecture-selector";

export default function Home() {
  const [prefectureCode, setPrefectureCode] = useState<string | null>(null);

  return (
    <div className="w-5/6 mx-auto">
      <PrefectureSelector
        prefectureCode={prefectureCode}
        setPrefectureCode={setPrefectureCode}      
      />
    </div>
  );
}

では、PrefectureSelector側を修正していきます。

prefectureCodeとsetPrefectureCode()を受け取るようにします。
各都道府県の背景色(PREFECTURE_DEFAULT_COLOR)、選択時の色(PREFECTURE_ACTIVE_COLOR)、ホバーされた際の色(PREFECTURE_HOVER_COLOR)を宣言します。
地図がクリックされた際の処理を行うhandleClick()を定義します。
- クリックされた親要素を検索して地図内にある都道府県コード(SVG の内部で、"data-code"として定義してある)を取得します。
- 取得できなかった場合は、都道府県以外が選択されたとして状態を変更しません。
- 都道府県コードが取得できた場合は、setPrefectureCode()を利用して、選択中の都道府県コードを更新します。
<svg>の中に<style>を追加します。
地図の背景色は以下のようなロジックで、選択されているかどうかで塗りつぶし色を切り替えています。

<g fill={props.prefectureCode === "47" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
  <path d="M144.9,456.4c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H144.9z"/>
</g>

コードの全体は以下の通りです。
ただし、国土交通省のサイトでは都道府県コードは2桁の文字（北海道は"01"）となっているので、それに倣い変更しています。

src/components/prefecture-selector.tsx

"use client";

const PREFECTURE_DEFAULT_COLOR = "#5fd35f";
const PREFECTURE_ACTIVE_COLOR = "red";
const PREFECTURE_HOVER_COLOR = "#2ca02c";

const PrefectureSelector = (props: { prefectureCode: string | null, setPrefectureCode: (value: string) => void }) => {

  const handleClick = (event: React.MouseEvent<SVGElement, MouseEvent>) => {
    let target = event.target as HTMLElement;

    // 親要素を探索して `data-code` を持つ要素を見つける
    while (target && !target.getAttribute("data-code")) {
      target = target.parentElement as HTMLElement;
    }

    const prefectureCode = target?.getAttribute("data-code");
    if (prefectureCode) {
      props.setPrefectureCode(prefectureCode);
    }
  };

  return (
    <svg
      className="geolonia-svg-map"
      viewBox="0 0 1000 1000"
      xmlns="http://www.w3.org/2000/svg"
      onClick={handleClick}
    >
      <style>
        {`
          path {
            stroke: #165016;
            stroke-width: 1;
            transition-duration: 200ms;
            cursor: pointer;
          }
          path:hover {
            fill: ${PREFECTURE_HOVER_COLOR};
          }
        `}
      </style>
      <g className="svg-map">
        <g className="prefectures">
          <g className="okinawa kyusyu-okinawa prefecture" data-code="47">
            <title>沖縄 / Okinawa</title>
            <g fill={props.prefectureCode === "47" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M144.9,456.4c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H144.9z"/>
            </g>
          </g>
          <g className="kagoshima kyusyu kyusyu-okinawa prefecture" data-code="46">
            <title>鹿児島 / Kagoshima</title>
            <g fill={props.prefectureCode === "46" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M99.3,912.7c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H99.3z"/>
            </g>
          </g>
          <g className="miyazaki kyusyu kyusyu-okinawa prefecture" data-code="45">
            <title>宮崎 / Miyazaki</title>
            <g fill={props.prefectureCode === "45" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M167.8,821.5c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
            </g>
          </g>
          <g className="oita kyusyu kyusyu-okinawa prefecture" data-code="44">
            <title>大分 / Oita</title>
            <g fill={props.prefectureCode === "44" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M167.8,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
            </g>
          </g>
          <g className="kumamoto kyusyu kyusyu-okinawa prefecture" data-code="43">
            <title>熊本 / kumamoto</title>
            <g fill={props.prefectureCode === "43" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M99.3,730.2c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H99.3z"/>
            </g>
          </g>
          <g className="nagasaki kyusyu kyusyu-okinawa prefecture" data-code="42">
            <title>長崎 / Nagasaki</title>
            <g fill={props.prefectureCode === "42" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M8,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H8z"/>
            </g>
          </g>
          <g className="saga kyusyu kyusyu-okinawa prefecture" data-code="41">
            <title>佐賀 / Saga</title>
            <g fill={props.prefectureCode === "41" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M53.7,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H53.7z"/>
            </g>
          </g>
          <g className="fukuoka kyusyu kyusyu-okinawa prefecture" data-code="40">
            <title>福岡 / Fukuoka</title>
            <g fill={props.prefectureCode === "40" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M99.3,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H99.3z"/>
            </g>
          </g>
          <g className="kochi shikoku prefecture" data-code="39">
            <title>高知 / Kochi</title>
            <g fill={props.prefectureCode === "39" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M281.9,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
            </g>
          </g>
          <g className="ehime sikoku prefecture" data-code="38">
            <title>愛媛 / Ehime</title>
            <g fill={props.prefectureCode === "38" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M281.9,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
            </g>
          </g>
          <g className="kagawa shikoku prefecture" data-code="37">
            <title>香川 / Kagawa</title>
            <g fill={props.prefectureCode === "37" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M373.1,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
            </g>
          </g>
          <g className="tokushima shikoku prefecture" data-code="36">
            <title>徳島 / Tokushima</title>
            <g fill={props.prefectureCode === "36" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M373.1,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
            </g>
          </g>
          <g className="yamaguchi chugoku prefecture" data-code="35">
            <title>山口 / Yamaguchi</title>
            <g fill={props.prefectureCode === "35" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M281.9,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H281.9z"/>
            </g>
          </g>
          <g className="hiroshima chugoku prefecture" data-code="34">
            <title>広島 / Hiroshima</title>
            <g fill={props.prefectureCode === "34" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M327.5,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H327.5z"/>
            </g>
          </g>
          <g className="okayama chugoku prefecture" data-code="33">
            <title>岡山 / Okayama</title>
            <g fill={props.prefectureCode === "33" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M395.9,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H395.9z"/>
            </g>
          </g>
          <g className="shimane chugoku prefecture" data-code="32">
            <title>島根 / Shimane</title>
            <g fill={props.prefectureCode === "32" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M327.5,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H327.5z"/>
            </g>
          </g>
          <g className="tottori chugoku prefecture" data-code="31">
            <title>鳥取 / Tottori</title>
            <g fill={props.prefectureCode === "31" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M395.9,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H395.9z"/>
            </g>
          </g>
          <g className="wakayama kinki prefecture" data-code="30">
            <title>和歌山 / Wakayama</title>
            <g fill={props.prefectureCode === "30" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M510,958.4c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-25.6c0-4.4-3.6-8-8-8H510z"/>
            </g>
          </g>
          <g className="nara kinki prefecture" data-code="29">
            <title>奈良 / Nara</title>
            <g fill={props.prefectureCode === "29" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M555.7,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H555.7z"/>
            </g>
          </g>
          <g className="hyogo kinki prefecture" data-code="28">
            <title>兵庫 / Hyogo</title>
            <g fill={props.prefectureCode === "28" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M441.6,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8H490c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H441.6z"/>
            </g>
          </g>
          <g className="osaka kinki prefecture" data-code="27">
            <title>大阪 / Osaka</title>
            <g fill={props.prefectureCode === "27" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M510,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H510z"/>
            </g>
          </g>
          <g className="kyoto kinki prefecture" data-code="26">
            <title>京都 / Kyoto</title>
            <g fill={props.prefectureCode === "26" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M510,638.9c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-6.6,0-12-5.4-12-12
                V647c0-4.4-3.6-8-8-8H510z"/>
            </g>
          </g>
          <g className="shiga kinki prefecture" data-code="25">
            <title>滋賀 / Shiga</title>
            <g fill={props.prefectureCode === "25" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M601.3,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H601.3z"/>
            </g>
          </g>
          <g className="mie kinki prefecture" data-code="24">
            <title>三重 / Mie</title>
            <g fill={props.prefectureCode === "24" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M601.3,775.8c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H601.3z"/>
            </g>
          </g>
          <g className="aichi chubu prefecture" data-code="23">
            <title>愛知 / Aichi</title>
            <g fill={props.prefectureCode === "23" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M647,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H647z"/>
            </g>
          </g>
          <g className="shizuoka chubu prefecture" data-code="22">
            <title>静岡 / Shizuoka</title>
            <g fill={props.prefectureCode === "22" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M738.2,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H738.2z"/>
            </g>
          </g>
          <g className="gifu chubu prefecture" data-code="21">
            <title>岐阜 / Gifu</title>
            <g fill={props.prefectureCode === "21" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M647,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H647z"/>
            </g>
          </g>
          <g className="nagano chubu prefecture" data-code="20">
            <title>長野 / Nagano</title>
            <g fill={props.prefectureCode === "20" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M715.4,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8H741c4.4,0,8-3.6,8-8v-71.2c0-6.6,5.4-12,12-12h2.7c4.4,0,8-3.6,8-8
                V601.3c0-4.4-3.6-8-8-8H715.4z"/>
            </g>
          </g>
          <g className="yamanashi chubu prefecture" data-code="19">
            <title>山梨 / Yamanashi</title>
            <g fill={props.prefectureCode === "19" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M761,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H761z"/>
            </g>
          </g>
          <g className="fukui chubu prefecture" data-code="18">
            <title>福井 / Fukui</title>
            <g fill={props.prefectureCode === "18" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M555.7,638.9c-4.4,0-8,3.6-8,8v25.6c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8
                v25.6c0,6.6-5.4,12-12,12H555.7z"/>
            </g>
          </g>
          <g className="ishikawa chubu prefecture" data-code="17">
            <title>石川 / Ishikawa</title>
            <g fill={props.prefectureCode === "17" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M601.3,433.6c-4.4,0-8,3.6-8,8v139.6c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V441.6c0-4.4-3.6-8-8-8H601.3z"/>
            </g>
          </g>
          <g className="toyama chubu prefecture" data-code="16">
            <title>富山 / Toyama</title>
            <g fill={props.prefectureCode === "16" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M647,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V510c0-4.4-3.6-8-8-8H647z"/>
            </g>
          </g>
          <g className="niigata chubu prefecture" data-code="15">
            <title>新潟 / Niigata</title>
            <g fill={props.prefectureCode === "15" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M738.2,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8V490
                c0,6.6-5.4,12-12,12H738.2z"/>
            </g>
          </g>
          <g className="kanagawa kanto prefecture" data-code="14">
            <title>神奈川 / Kanagawa</title>
            <g fill={props.prefectureCode === "14" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M829.5,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
            </g>
          </g>
          <g className="tokyo kanto prefecture" data-code="13">
            <title>東京 / Tokyo</title>
            <g fill={props.prefectureCode === "13" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M829.5,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-2.7c0-6.6,5.4-12,12-12h25.6c4.4,0,8-3.6,8-8
                v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
            </g>
          </g>
          <g className="chiba kanto prefecture" data-code="12">
            <title>千葉 / Chiba</title>
            <g fill={props.prefectureCode === "12" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M943.6,730.2c-4.4,0-8,3.6-8,8v208.1c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H943.6z"/>
            </g>
          </g>
          <g className="saitama kanto prefecture" data-code="11">
            <title>埼玉 / Saitama</title>
            <g fill={props.prefectureCode === "11" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h139.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
            </g>
          </g>
          <g className="gunma kanto prefecture" data-code="10">
            <title>群馬 / Gunma</title>
            <g fill={props.prefectureCode === "10" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,593.3c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8H848c1.5,0,3.7-3.1,3.7-8v-71.2c0-4.9-2.2-8-3.7-8H783.9z"/>
            </g>
          </g>
          <g className="tochigi kanto prefecture" data-code="09">
            <title>栃木 / Tochigi</title>
            <g fill={props.prefectureCode === "09" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M859.4,593.3c-1.5,0-3.7,3.1-3.7,8v71.2c0,4.9,2.2,8,3.7,8h64.1c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H859.4z"/>
            </g>
          </g>
          <g className="ibaraki kanto prefecture" data-code="08">
            <title>茨城 / Ibaraki</title>
            <g fill={props.prefectureCode === "08" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M943.6,593.3c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H943.6z"/>
            </g>
          </g>
          <g className="fukushima tohoku prefecture" data-code="07">
            <title>福島 / Fukushima</title>
            <g fill={props.prefectureCode === "07" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M829.5,456.4c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8H829.5z"/>
            </g>
          </g>
          <g className="yamagata tohoku prefecture" data-code="06">
            <title>山形 / Yamagata</title>
            <g fill={props.prefectureCode === "06" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
            </g>
          </g>
          <g className="akita tohoku prefecture" data-code="05">
            <title>秋田 / Akita</title>
            <g fill={props.prefectureCode === "05" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
            </g>
          </g>
          <g className="miyagi tohoku prefecture" data-code="04">
            <title>宮城 / Miyagi</title>
            <g fill={props.prefectureCode === "04" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M898,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H898z"/>
            </g>
          </g>
          <g className="iwate tohoku prefecture" data-code="03">
            <title>岩手 / Iwate</title>
            <g fill={props.prefectureCode === "03" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M898,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H898z"/>
            </g>
          </g>
          <g className="aomori tohoku prefecture" data-code="02">
            <title>青森 / Aomori</title>
            <g fill={props.prefectureCode === "02" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,228.2c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
            </g>
          </g>
          <g className="hokkaido prefecture" data-code="01">
            <title>北海道 / Hokkaido</title>
            <g fill={props.prefectureCode === "01" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
              <path d="M783.9,0c-4.4,0-8,3.6-8,8v185.3c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-25.6c0-6.6,5.4-12,12-12H992c4.4,0,8-3.6,8-8V8
                c0-4.4-3.6-8-8-8H783.9z"/>
            </g>
          </g>
        </g>
        <g className="boundary-line" stroke="#EEEEEE" strokeWidth="12" strokeLinejoin="round">
          <path d="M216.1,593.3H89.3c-1.1,0-2-0.9-2-2s0.9-2,2-2h126.9c4.4,0,8-3.6,8-8V454.4c0-1.1,0.9-2,2-2s2,0.9,2,2v126.9
            C228.2,587.9,222.8,593.3,216.1,593.3z"/>
        </g>
      </g>
    </svg>
  );
}

export default PrefectureSelector;

これで各都道府県が選択可能になります。

最初の状態

つづき

都道府県名が表示されてないので、実際には使いにくいと思います。
都道府県を追記する件については別で記述しました。

やりたいこと

方針

Next.js プロジェクトを作成する

地図を取得する

取得した地図を眺める

地図を画面に表示する

選択都道府県を管理する

つづき

Discussion