Engineering

Oct 01, 2017

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

どうも、運転が苦手な@version1です。

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

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

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

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

文章でいうと

  1. いつものようにimgタグを貼り付けて画像を表示する。
  2. その下にmapタグを貼り付ける。(そこで座標を指定する。)
  3. imgタグにusemap属性とmapタグのname属性に対応する名前をつける。

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

あれ、でも

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

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

  <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上で簡単なページで作れるんですね。)

Japan Map

以上です!!

関連記事

記事検索

気になるサイト内の記事を検索する

プロフィール

バンクーバー在住のフルスタックエンジニアです。React, Ruby on Rails, Go などでお仕事しています。職場がトロントなので日本、トロント、バンクーバーの三つの時天空を操って生活しています。

プロモーション