ウェブ制作の仕事をしていた時に数回あるのですが、ナビゲーションに日本地図を使いたいって言われて、泣きながらクリッカブルマップを作った経験とかありません？
今夜も数百回、数千回ものクリックを繰り返して、せっせと日本地図の UI を作るウェブ制作者のみなさんのために SVG フォーマットでつくった日本地図を公開します。
https://github.com/geolonia/japanese-prefectures
うちの API の中に組み込もうと思って作ったのですが、いい感じの API を思いつけなかったので、皆さん自力で JS なり CSS なりをご用意ください。笑
特徴
- 各レイヤーは都道府県ごとにグループ化してあります。
- 都道府県名、八地方区分名を class 属性の値としてセットしてありますので、CSS で都道府県や地方別に色分けすることができます。
data-codeという属性に都道府県コードが格納されています。（大阪府の例: data-code=”27”）- 地図は4種類あり、たとえば map-polygon.svg はモバイルでも使いやすいようになっています。
サンプル
使用例
イエメシ - https://iemeshi.jp/
使い方
以下のような JS で任意の要素（この例では #map）に表示することができます。この例では、各都道府県の上にマウスオーバーで、その都道府県の色が赤くなります。
const map = "https://raw.githubusercontent.com/geolonia/japanese-prefectures/master/map-polygon.svg"
const container = document.querySelector( '#map' )
const res = await fetch( map )
if ( res.ok ) {
const svg = await res.text()
container.innerHTML = svg
const prefs = document.querySelectorAll( '.geolonia-svg-map .prefecture' )
prefs.forEach( ( pref ) => {
// マウスオーバーで色を変える
pref.addEventListener( 'mouseover', ( event ) => {
event.currentTarget.style.fill = "#ff0000"
} )
// マウスが離れたら色をもとに戻す
pref.addEventListener( 'mouseleave', ( event ) => {
event.currentTarget.style.fill = ""
} )
// マウスクリック時のイベント
pref.addEventListener( 'click', ( event ) => {
location.href = `https://example.com/${event.currentTarget.dataset.code}` // 例（大阪）: https://example.com/27
} )
} )
}
以下は、CSS の例です。
.geolonia-svg-map
{
width: 100%;
}
.geolonia-svg-map .prefecture
{
fill: #f7f7f7;
stroke: #666666;
cursor: pointer;
}
.geolonia-svg-map .boundary-line
{
stroke: #999999;
}