2014/05/20
canvasで日本地図を表示してくれるjQueryプラグインのJapanMap
時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。
jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、
マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。
Japan Mapのサイト↓
使い方
まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、
htmlのheadでjQueryとともに読み込みます。
|
1 2 3 4 5 6 | <head> ・・・ <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.japan-map.min.js"></script> ・・・ </head> |
htmlのbodyに地図を設置するdiv要素を設置します。
|
1 2 3 4 5 | <body> ・・・ <div id="map"></div> ・・・ </body> |
そして、javascriptで以下のように記述し、
設置したIDに対して、プラグインを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(function(){ //地域を設定 //{"code":[地域のコード], "name": [地域の名前], "color":[地域につける色], "hoverColor":[地域をマウスでホバーしたときの色], "prefectures":[地域に含まれる都道府県のコード]} var areas = [ {"code": 1 , "name":"北海道地方", "color":"#ca93ea", "hoverColor":"#e0b1fb", "prefectures":[1]}, {"code": 2 , "name":"東北地方", "color":"#a7a5ea", "hoverColor":"#d6d4fd", "prefectures":[2,3,4,5,6,7]}, {"code": 3 , "name":"関東地方", "color":"#84b0f6", "hoverColor":"#c1d8fd", "prefectures":[8,9,10,11,12,13,14]}, {"code": 4 , "name":"北陸・甲信越地方", "color":"#52d49c", "hoverColor":"#93ecc5", "prefectures":[15,16,17,18,19,20]}, {"code": 4 , "name":"東海地方", "color":"#77e18e", "hoverColor":"#aff9bf", "prefectures":[21,22,23,24]}, {"code": 6 , "name":"近畿地方", "color":"#f2db7b", "hoverColor":"#f6e8ac", "prefectures":[25,26,27,28,29,30]}, {"code": 7 , "name":"中国地方", "color":"#f9ca6c", "hoverColor":"#ffe5b0", "prefectures":[31,32,33,34,35]}, {"code": 8 , "name":"四国地方", "color":"#fbad8b", "hoverColor":"#ffd7c5", "prefectures":[36,37,38,39]}, {"code": 9 , "name":"九州地方", "color":"#f7a6a6", "hoverColor":"#ffcece", "prefectures":[40,41,42,43,44,45,46]}, {"code":10 , "name":"沖縄地方", "color":"#ea89c4", "hoverColor":"#fdcae9", "prefectures":[47]} ]; $("#map").japanMap( { areas : areas, //上で設定したエリアの情報 selection : "prefecture", //選ぶことができる範囲(県→prefecture、エリア→area) borderLineWidth: 0.25, //線の幅 drawsBoxLine : false, //canvasを線で囲む場合はtrue movesIslands : true, //南西諸島を左上に移動させるときはtrue、移動させないときはfalse showsAreaName : true, //エリア名を表示しない場合はfalse width: 800, //canvasのwidth。別途heightも指定可。 backgroundColor: "#ffffff", //canvasの背景色 font : "MS Mincho", //地図に表示する文字のフォント fontSize : 12, //地図に表示する文字のサイズ fontColor : "areaColor", //地図に表示する文字の色。"areaColor"でエリアの色に合わせる fontShadowColor : "black", //地図に表示する文字の影の色 } ); }); |
これで、日本地図を表示することができます。
地方も限定されておらず、自由に設定することができるのが便利です。
県のコードはJapan Mapを配布しているサイトでご確認いただけます。
また、プロパティのonSelectを設定することで、クリックしたときのアクションを設定することができます。
以下は、それぞれの地方へのリンクを設定した場合の例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(function(){ //リンク先を連想配列で設定 var areaLinks = { "北海道地方" : "area.php?area=北海道地方", "東北地方" : "area.php?area=東北地方", "関東地方" : "area.php?area=関東地方", "北陸・甲信越地方" : "area.php?area=北陸・甲信越地方", "東海地方" : "area.php?area=東海地方", "近畿地方" : "area.php?area=近畿地方", "中国地方" : "area.php?area=中国地方", "四国地方" : "area.php?area=四国地方", "九州地方" : "area.php?area=九州地方", "沖縄地方" : "area.php?area=沖縄地方", }; ・・・ $("#map").japanMap( { ・・・ onSelect:function(data){ //選択範囲をクリックしたときに実行 location.href = areaLinks[data.area.name]; //data.area.nameは選択したエリアの名前 }, } ); }); |
ただ弱点としては、レスポンシブでアクションを設定することができない点があります。
表示だけであれば、canvasの大きさを変更することで地図の大きさもそれに合わせて拡大縮小されるので問題無いのですが、
途中で大きさを変更した場合、ホバーやクリックの範囲がずれてしまいます。
そのため、IE9以上のPCサイトや、スマホやタブレットのサイトで、大きさを変更せずにすむレイアウトに利用するのが実用的かと思います。
Author Profile
SHARE
