2021.12.28 2022.06.01

【SVG】地図のエリアごとにリンクさせる方法（マウスオーバーで色を変える）

この記事は、最初の投稿から3年以上が経過しています。

最終更新から962日が経過しています。

「Webサイトで複雑な形の地図をエリアごとにリンクさせたい」

「イメージマップ(クリッカブルマップ)以外に地図エリアをリンクさせる方法ってないの？」

こんな悩みにお答えします｡

じつは､SVG形式でつくったイラスト地図を使うことで､複雑な形の地図でもエリアごとにリンクさせることができます｡

以前はイメージマップ(クリッカブルマップ)という方法で実現させていたことですが､SVGを使うことでよりかんたん､きれいにつくることができるようになっています｡

マウスオーバーで地図エリアの色が変わるデモ

この記事では､以下の解説をしています｡

SVGを使って地図のエリアごとにリンクさせる方法(マウスオーバーで色を変える)
SVGで地図をつくるメリット
SVGで地図をつくるデメリット
【古い方法】イメージマップ(クリッカブルマップ)

記事を読み終えると､WebサイトにSVGを使った動的な地図をつくることができ､ユーザーが使いやすい操作をさせることができるようになります｡

目次

SVGを使って地図のエリアごとにリンクさせる方法(マウスオーバーで色を変える)
SVGを使った地図のメリット
SVGを使った地図のデメリット
【古い方法】イメージマップ(クリッカブルマップ)
まとめ

SVGを使って地図のエリアごとにリンクさせる方法(マウスオーバーで色を変える)

Webサイトで地図を使うときによくある機能として､地図上の一部エリアをマウスオーバーすると色が変わる､さらにテキストとも連動させるということがあります｡

この機能をつくっていきます｡

マウスオーバーで地図エリアの色が変わるデモ

以下のような地図をIllustratorでつくります｡

「Illustratorをうまく使えない」という人は､「イラレ　地図　フリー」「ai　地図　無料」などで検索するといろいろ見つかると思います｡
リアルに近い地図から､簡略化されたものまでいろいろあるので好みのものでかまいません｡

Illustratorで用意した場合は､SVG形式で切り出します｡

ここからはコーディングです｡

まず､リンクボタンを

<ul class="city-list">
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.takayama.lg.jp/" data-city="takayama" target="_blank">高山市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.tajimi.lg.jp/" data-city="tajimi" target="_blank">多治見市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.ena.lg.jp/" data-city="ena" target="_blank">恵那市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.minokamo.gifu.jp/" data-city="minokamo" target="_blank">美濃加茂市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.toki.lg.jp/" data-city="toki" target="_blank">土岐市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.kani.lg.jp/" data-city="kani" target="_blank">可児市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.city.kaizu.lg.jp/" data-city="kaizu" target="_blank">海津市</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://town.wanouchi.gifu.jp/" data-city="wanouchi" target="_blank">輪之内町</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="http://www.town.ibigawa.gifu.jp/" data-city="ibigawa" target="_blank">揖斐川町</a>
  </li>
  <li class="city-list__item">
    <a class="city-list__link link" href="https://www.town-ono.jp/" data-city="ono" target="_blank">大野町</a>
  </li>
</ul>

以下のように､imgタグのsrcにSVGファイルを指定します｡

<img class="map-gifu desvg" src="map-gifu.svg" width="600" height="660" alt="岐阜県">

SVGファイルを操作できるようにするためdeSVGを使います｡
基本､以下をfooter下などに書いておけば大丈夫です｡

<script src="//cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>
<script>
window.addEventListener("load", function(){
  deSVG(".desvg", true);
});
</script>

deSVGの使い方など詳しくは以下の記事で解説しています｡

SVGをCSSで色変更する！deSVGでインラインSVGに変換！

imgタグのSVGファイルをCSSで色変更したいですか？この記事では、SVGファイルを使うメリット、imgタグのSVGファイルをインラインSVGに変換できるJavaScriptライブラリ「deSVG」の使い方を解説しています。ぜひご覧ください。

objectタグも使えるかなと思いましたが､jQueryの操作がうまくできませんでした｡

SVGタグをそのままHTMLに貼り付けるということもできますが､HTML全体の見通しが悪くなるので外部ファイルにして読み込むほうが制作しやすいと思います｡

ここからSVGファイルを編集します｡

次に､SVGファイル内のpathタグにclass､data属性などを書いていきます｡
どのエリアをどんな名前にするのかの作業なのでここは地道に手作業しかないかなと思います｡

ここではclassに「city」､data-city属性にそれぞれの名前をつけていきます｡

この地図の場合､文字や線など実際に操作したいエリアとは関係ないpathも含まれているため､ブラウザの開発ツールなどを使って位置を確認しながらclassなどの属性を書いていきます｡

<path class="cls-2 city" data-city="ena" d="･･････････････････････････">
<path class="cls-2 city" data-city="takayama" d="･･････････････････････････">
･
･
･

次に､リンクさせたいpath(エリア)をaタグで囲んでいきます｡

これは普通のHTMLのように指定していけば大丈夫です｡

SCG地図の使いまわしや､リンクの増減に対応するために､jQueryで動的にaタグを追加したかったのですが､どうもうまくいかず手入力です｡
(IE11だとうまくいってるのにChromeだとaタグが追加されないという不思議)

SVG内のリンクは「xlink:href」を使うという情報もあったのですが､現在は非推奨になっているようです｡

MDN Web Docs： xlink:href

<a href="https://www.city.ena.lg.jp/" target="_blank">
<path class="cls-2 city" data-city="ena" d="･･････････････････････････">
</a>
<a href="https://www.city.takayama.lg.jp/" target="_blank">
<path class="cls-2 city" data-city="takayama" d="･･････････････････････････">
</a>
･
･
･

ここからjQueryのプログラムを書いていきます｡

mouseoverとmouseoutの処理を書いていきますが､JavaScriptでやることはactiveクラスの追加､削除の切り替えのみです｡
実際の指定はCSSで行います｡

deSVGを使ってJavaScriptで追加したタグになるため少し複雑な書き方になっています｡

ボタンと地図上のリンクどちらにマウスオーバーしても動作するようにします｡

マウスオーバーした場所からdata-city属性の値を取得します｡

この属性を持つタグすべて(ここでは地図のエリアとボタン)のclass属性に「active」を追加します｡

マウスアウトの処理もほぼ同じです｡

<script>
$(function(){
  $( "body" ).on("mouseover", ".city, .link", function(){
    var city = $(this).data("city");
    $( "[data-city='" + city + "']" ).addClass("active");
  });
  $( "body" ).on("mouseout", ".city, .link", function(){
    var city = $(this).data("city");
    $( "[data-city='" + city + "']" ).removeClass("active");
  });
});
</script>

あとは､CSSで色を指定するだけです｡

SVGは色の指定方法などが違うので注意が必要です｡

HTMLで背景色はbackground-colorで指定しますが､SVGでは塗りつぶしを意味するfillで指定します｡

また､SVGファイル内にもCSS指定がある場合､上書きできない可能性もあります｡
うまくいかない場合は､SVGファイルに直書きするか､!importantで上書きする必要があるかもしれません｡

.city-list__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #185772;
  background: #80ceac;
  border-radius: 50%;
  transition: background .5s;
}
.city-list__link.active,
.city-list__link:hover{
  background: #F3DF63;
}

.city{
  fill: #80ceac;
  transition: fill .5s;
}
.city.active{
  fill: #F3DF63;
}

jQueryの使い方など詳しくは以下の記事で解説しています｡