JavaScriptを用いて東京都のインタラクティブな地図を作成する

出版日: 2024年6月17日

背景

現在のほとんどのアプリは、マップ内の要素をクリックまたはホバーすることで、インタラクティブなSVGマップを持っています。

フルフレッジのウェブ開発者になるためには、SVGやJavaScriptなどのシンプルなツールを使って、このようなインタラクティブなマップを作成する方法を知ることが重要です。

目的

このブログでは、東京都のSVGマップを使用し、市内の自治体にホバーすると情報が表示されるようにします。

このコードをあらゆる種類のSVGマップに適用することができます。東京である必要はまったくありません。

東京都を選んだ理由は、その自治体のSVGマップと、自治体にホバーしたときに表示できるランダムなデータを見つけることができたからです。

このコードでは主にJavaScriptと少しのSvelteを使用します。Svelteは使いやすさから選ばれましたが、その構文は簡単に純粋なバニラJavaScriptに戻すことができます。

自治体にホバーしたときに情報を表示するために使用するツールチップ関数には、ライブラリはインポートされていません。

方法

SVGファイル

東京のSVGマップから始めます。ここに、インターネット上のさまざまなソースを使用して作成したマップがあります。それは13KBのシンプルなSVGファイルで、自治体の地形、名前、自治体コードを提供します：

以下は実際のSVGです。

23特別区はbluevioletで塗られていますが、他の自治体はsteelblueで塗られています。私の2つの好きな色です :)

各自治体に名前とコードが割り当てられていることで、どの自治体にマウスがホバーしているかを特定できます。

SVGファイルはこちらで見つけることができます。

補足データ

現在、SVGファイルがあるので、ユーザーが自治体にホバーしたときに表示するデータが必要です。これには、統計局が提供する人口と世帯数のデータを使用しました。データは以下のようになります：

数字だけを表示するのは退屈なので、各自治体に写真を追加して、少し工夫しました。写真はWikipediaから取得しています（スクロールしてすべて見ることができます）。

千代田区

中央区

港区

新宿区

文京区

台東区

墨田区

江東区

品川区

目黒区

大田区

世田谷区

渋谷区

中野区

杉並区

豊島区

北区

荒川区

板橋区

練馬区

足立区

葛飾区

江戸川区

八王子市

立川市

武蔵野市

三鷹市

青梅市

府中市

昭島市

調布市

町田市

小金井市

小平市

日野市

東村山市

国分寺市

国立市

福生市

狛江市

東大和市

清瀬市

東久留米市

武蔵村山市

多摩市

稲城市

羽村市

あきる野市

西東京市

西多摩郡瑞穂町

西多摩郡日の出町

西多摩郡檜原村

西多摩郡奥多摩町

大島町

利島村

新島村

神津島村

三宅島三宅村

御蔵島村

八丈島八丈町

青ヶ島村

小笠原村

この写真のビューがとても気に入っています。スクロールすると、東京が都市から田舎、そして最後に島へと移り変わる様子を見ることができます。

東京が23の高度に都市化された区だけで構成されているわけではないと知ることは新鮮です。

人口データと写真を混ぜ合わせて、最終的なJSONファイルが以下のようになります。

フロントエンド - SVG

各パスが自治体を示すSVGマップができたので、パスにホバーしたときに関数をトリガーする機能を追加しましょう：

<script>
let data = [
	{
		code: 13102,
		name: '中央区',
		population: { m: 53336, f: 58124 },
		household: 64206,
		image: 'https://upload.wikimedia...'
	}, // ... 
]

function handleMouseover(key) {
	// Get the municipality that is hovered
	entity = data.filter((d) => d.code === key)[0];
}
</script>

<svg>
	<path
		on:mouseover={() => handleMouseover(13102)}
		d="m 636,223 7,5 8,1 9,-12 -2,-6 11,-8 -9,-8 -2,5 -17,-3 -11,13 v 7 z"
	/>
	<!-- ... -->
</svg>

上記の関数は、SVGファイル内のすべてのパスに添付されています。これで、ユーザーがどの自治体にホバーしているかを把握できます。

フロントエンド - インフォパネル

次に、ユーザーがホバーしている自治体の情報を表示するインフォパネルを作成しましょう。

Tailwindを使用することをお勧めします。これにより、スタイリングが非常に簡単になります。詳細は私の記事をご覧ください。

以下は、インフォパネルを作成するために使用するコードです：

<div class="flex rounded-xl overflow-hidden shadow-xl mx-auto my-8">
	<img
		class="h-100 w-[150px] min-w-[150px] max-w-[150px] object-cover"
		src="https://upload.wikimedia..."
		alt="中央区"
	/>
	<div class="px-8 py-4 flex gap-2 flex-col bg-white">
		<p class="text-3xl font-bold text-center">中央区</p>
		<div>
			<p class="text-xs text-slate-500 font-bold text-center">Population</p>
			<p class="text-xl text-center">111,460</p>
		</div>
		<div>
			<p class="text-xs text-slate-500 font-bold text-center"># Households</p>
			<p class="text-xl text-center">64,206</p>
		</div>
	</div>
</div>

このコードは、以下のような見栄えの良いパネルを生成します。これは、自治体にホバーしたときに表示するものです。

中央区

人口

111,460

世帯数

64,206

フロントエンド - ツールチップ

SVGとインフォパネルが準備できたので、残るは自治体にホバーしたときにインフォパネルを表示することだけです。

また、これをマウスの隣に「ツールチップ」形式で表示したいです。

以下のコードは、バニラJavaScriptを使用してツールチップを実装するためのものです。このコードの良い点は、画面を4つの象限に分割し、マウスの位置に応じてツールチップの位置を計算することです。

これは、ツールチップが画面外に出ないようにするためです。たとえば、マウスが画面の下部に近い場合、ツールチップはマウスの上に表示されます。一方、上部に近い場合は、ツールチップはマウスの下に表示されます。

この実装については別の記事を書きますので、興味がある方は後で私のブログをご覧ください。

<script>
function handleMouseMove(event) {
	let x = event.clientX;
	let y = event.clientY;
	let rect = container.getBoundingClientRect();

	info.style.top = y < innerHeight / 2 ? y - rect.top + 10 + 'px' : '';
	info.style.bottom = y < innerHeight / 2 ? '' : rect.bottom - y + 10 + 'px';

	info.style.left = x < innerWidth / 2 ? x - rect.left + 10 + 'px' : '';
	info.style.right = x < innerWidth / 2 ? '' : rect.right - x + 10 + 'px';
}
</script>

<svelte:window
	bind:innerWidth
	bind:innerHeight
	on:mousemove={(e) => handleMouseMove(e)}
/>