Blog

canvasで日本地図を表示してくれるjQueryプラグインのJapanMap

時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。

jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、

マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。

Japan Mapのサイト↓

Japan Map ( jQuery plugin )

DEMO

 

使い方

まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、

htmlのheadでjQueryとともに読み込みます。

 

htmlのbodyに地図を設置するdiv要素を設置します。

 

そして、javascriptで以下のように記述し、

設置したIDに対して、プラグインを実行します。

これで、日本地図を表示することができます。

地方も限定されておらず、自由に設定することができるのが便利です。

県のコードはJapan Mapを配布しているサイトでご確認いただけます。

 

また、プロパティのonSelectを設定することで、クリックしたときのアクションを設定することができます。

以下は、それぞれの地方へのリンクを設定した場合の例です。

 

ただ弱点としては、レスポンシブでアクションを設定することができない点があります。

表示だけであれば、canvasの大きさを変更することで地図の大きさもそれに合わせて拡大縮小されるので問題無いのですが、

途中で大きさを変更した場合、ホバーやクリックの範囲がずれてしまいます。

そのため、IE9以上のPCサイトや、スマホやタブレットのサイトで、大きさを変更せずにすむレイアウトに利用するのが実用的かと思います。

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ