JS と CSS でカスタマイズできてモバイルでも使いやすい SVG の日本地図データを公開しました!

Posted by miya on May 18, 2020 · 1 min read

ウェブ制作の仕事をしていた時に数回あるのですが、ナビゲーションに日本地図を使いたいって言われて、泣きながらクリッカブルマップを作った経験とかありません?

今夜も数百回、数千回ものクリックを繰り返して、せっせと日本地図の 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;
}


Geolonia では、ウェブ地図や位置情報を利用したウェブアプリケーションや、モバイルアプリケーションの開発を承っています。

お問い合わせ