ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

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

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

悩み

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

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

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

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

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

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

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

目次
  1. SVGを使って地図のエリアごとにリンクさせる方法(マウスオーバーで色を変える)
  2. SVGを使った地図のメリット
    1. Illustratorでイラスト化・簡略化した地図をそのまま使える
    2. レスポンシブ(サイズの大小)にも対応できる
    3. SVGファイル内のpathをそのまま操作するので位置精度が高い
    4. ひとつのSVGファイルだけで自由に操作できる(色やアニメーションなど)
  3. SVGを使った地図のデメリット
  4. 【古い方法】イメージマップ(クリッカブルマップ)
  5. まとめ

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の使い方など詳しくは以下の記事で解説しています。

【WordPress】jQueryの導入手順(読み込み、使い方)【JavaScript】

「jQuery」のはじめかたについて知りたいですか?この記事では「jQuery」の使い方(読み込み、書き方、チェック方法)について解説しています。あわせて、WordPressでの使い方についても解説します。ぜひご覧ください。

これでやりたい機能は完成です。

岐阜県地図

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

SVGを使った地図のメリット

Illustratorでイラスト化・簡略化した地図をそのまま使える

SVGファイルはIllustratorでデザインしたイラスト地図などをそのまま書き出せます。

Webサイトで使用するためにあらためてpathをとる必要もないのでとても便利です。

レスポンシブ(サイズの大小)にも対応できる

地図にかぎらずSVGの特徴ですが、ベクター画像なので、サイズに合わせた画像を用意する必要がなく、ぼやけたりすることがありません。

PC、タブレット、スマホも1つのファイルだけで大丈夫です。

SVGファイル内のpathをそのまま操作するので位置精度が高い

SVGファイル内のpathタグをリンクさせるには、普通のHTMLのようにaタグで囲むだけです。

どんなに複雑なpathでも気にする必要はありません。

ひとつのSVGファイルだけで自由に操作できる(色やアニメーションなど)

SVGファイルだと、JavaScriptやCSSで色やアニメーションの操作をすることができます。

jpg、pngなどの画像だと切り出した画像をあとから操作することができません。

SVGを使った地図のデメリット

SVGのデメリットはあまりありませんが、しいてあげるとすればSVGに対応していない古いブラウザでは使えないということがあります。

IE10とかIE9とかであれば、その仕様でWebサイトを制作すること自体がもうほぼ無いので、あまり気にする必要はないと思います。

【古い方法】イメージマップ(クリッカブルマップ)

HTML5以前からある、イメージマップ(クリッカブルマップ)という方法でSVGと同じようなことをすることができます。

イメージマップ(クリッカブルマップ)では、mapタグ、areaタグを使います。
詳しい使い方は以下サイトを参考にしてください。

このイメージマップ(クリッカブルマップ)には、以下のようなデメリットがあります。

  • 画像の上にリンクをのせるだけなので位置精度が低い
  • px単位で位置指定をするのでレスポンシブに弱い
  • 地図など複雑な画像だと位置合わせが難しい
  • 「一部のエリアの色を変える」という処理をするには、同じ大きさでエリアの色だけが違う画像をエリアの数だけ用意しないといけない

いろいろなツールを使うことでデメリットを解消することもできますが、やはりSVGよりは手間がかかります。

イメージマップ(クリッカブルマップ)のパスをかんたんにとることができるWebツールです。

「jQuery RWD Image Maps」でレスポンシブ対応について解説されています。

古いブラウザにどうしても対応しないといけないなど、よほど特別な事情がないかぎり、今後はSVGファイルを使うことで問題ないと思います。

コピペ用の都道府県一覧リストを以下の記事で紹介しています。

【コピペ用】都道府県一覧リスト Web制作の配列やフォームで使える

コピペで使える都道府県一覧リストを探していますか?Web制作(配列、フォームなど)で使えるいろいろなパターンの都道府県リストを用意しました。ぜひご覧ください。

まとめ

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

SVGで地図をつくることで以下のようなメリットがあります。

  • Illustratorでイラスト化・簡略化した地図をそのまま使える
  • レスポンシブ(サイズの大小)にも対応できる
  • SVGファイル内のpathをそのまま操作するので位置精度が高い
  • ひとつのSVGファイルだけで自由に操作できる(色やアニメーションなど)

SVGを使うことで複雑なエリアのリンクが実現することができます。
これにより、イメージマップ(クリッカブルマップ)のデメリットを解消することになります。