日本地図を地方にアクションを分ける~クリッカブルマップ~

2018年1月30日

 

どうも、

運転が苦手な@version1です。

 

今回は
仕事で地図の中でクリックされた座標を元にアクションを分けるという機能を実装する必要が
あったので、それの方法を調べてみました。

 

 

〜クリッカブルマップ〜座標でアクションを分ける、難しそう・・・

 

 

どうやらクリッカブルマップというのを使うと地図の中でアクションを分けることが実現できるようです。

 

 

が、、、
 
「え、難しそう」
これが第一印象でした。
でも、意外とそうでもないみたいです。

 

 

文章でいうと

  1. いつものようにimgタグを貼り付けて画像を表示する。

  2. その下にmapタグを貼り付ける。(そこで座標を指定する。)

  3. imgタグにusemap属性とmapタグのname属性に対応する名前をつける。

 


2で指定した座標の画像ごとにアクションを分けることができます。

あれ、でも

ちょっと待って座標を指定するとかヒョロっと言っているけどそこが一番大変なんじゃないの?

というツッコミが入ると思うので
コードを貼り付けます。

 

 

<div class="map_japan">
  <img src="img/color_ken_nashi.gif" usemap="#ImageMap" alt="" />
  <map name="ImageMap">
    <area shape="poly" coords="695,20,779,96,816,82,806,104,811,117,831,118,783,140,741,143,716,168,661,132,633,142,611,127,625,144,638,161,620,159,593,171,590,162,598,145,589,133,592,119,614,114,623,111,619,100,626,96,636,104,656,106,663,85,676,82,673,83" alt="hokkaido" />
    <area shape="poly" coords="632,169,652,177,647,178,641,191,662,235,629,296,611,295,601,315,606,337,532,337,531,325,553,309,562,290,553,279,579,248,583,229,576,229,573,223,589,215,582,197,632,169,632,169" alt="tohoku" />
    <area shape="poly" coords="594,350,532,339,504,341,489,357,499,363,500,377,515,394,504,401,509,411,524,410,539,421,560,417,574,401,587,399,577,381,577,381" alt="kanto" />
    <area shape="poly" coords="494,430,510,417,504,402,514,393,500,378,497,365,489,358,503,342,528,336,528,324,552,310,562,290,552,282,502,321,455,330,447,338,434,331,453,309,450,307,429,312,419,340,378,365,378,370,369,378,355,372,358,382,369,389,397,376,397,395,407,399,414,417,421,422,421,422" alt="cyubu" />
    <area shape="poly" coords="409,405,406,397,396,394,393,374,366,387,354,372,354,364,314,362,318,372,303,388,306,399,321,399,335,409,327,437,355,455,393,432,403,433,410,426,410,426" alt="kansai" />
    <area shape="poly" coords="315,367,246,360,187,384,182,392,156,390,152,405,176,413,213,420,222,403,230,409,260,409,266,403,286,407,306,400,301,401" alt="cyugoku" />
    <area shape="poly" coords="264,420,282,410,307,420,312,436,291,446,280,454,265,443,245,445,239,453,228,458,223,469,209,463,205,456,208,443,194,433,217,429,235,414,244,422,242,422" alt="shikoku" />
    <area shape="poly" coords="81,419,154,406,152,415,169,423,177,420,182,425,169,432,174,438,183,438,184,445,180,451,190,455,139,510,106,517,86,501,98,469,94,443,82,437,82,437" alt="kyushu" />
  </map>
</div>

 

 
「え。。。正気?なんか数字が一杯並んでいるけど」
 

と心配される方もいるかも

しれませんが、

実は下のツールを使うと、

 

自分で、切り取る図形を選択しながらクリッカブルマップの座標を
取得できます。

HTML Imagemap Generator – dreamseeker

 

使い方としては、
①画像アップロード
②モード選択(日本地図の場合は多角形モードでやりました)
③各地方の境界線をツールを使ってなぞっていく

と言った感じです。
割と地味な作業ですが難しくはないです。

 

 

レスポンシブにも対応するクリッカブルマップ

 

 

上の手順で頑張って、
座標を立てたにも関わらず、
Webページのものについては、
必ずレスポンシブという障害があります。
(画面の大きさも変われば、座標の位置も変わるよね。。)

 

が、
これも、
jQuery-rwdImageMaps
というライブラリを使えば解決できます。

 

使い方としては、


$(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });

 

のような感じで、
簡単に画像要素を指定するだけです。

これで、
画面の大きさを変えても
このライブラリが座標を良い感じに変更してくれます。

 

 

 

成果物

 

 

という事で、
今回この技術を使って、
簡単なデモを作りました。

 

 

日本地図をクリックするとクリックされた
地方の県名の一覧が表示されるという
簡単なものです。

 

 

gitで公開しているので、
よかったら見てみてください。
https://version-1.github.io/imagemap/
(今は簡単なものであればgit上で簡単なページで作れるんですね。)

 

 

日本地図から地域を選択する

 

 

以上です!!