[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
Post on:2014年5月16日
sponsors
日本の都道府県の地図をクリッカブルマップで表示する純国産のjQueryのプラグインを紹介します。
地図自体はCanvasで描かれているので、画像を用意する必要はありません。
Japan Mapのデモ
デモはCanvas対応ブラウザでご覧ください。
各都道府県をホバーするとハイライトし、クリックすると名称が表示されます。
名称は「東京都」「Tokyo」の漢字表記と英語表記に対応しています。
作者様がカラフル版のデモもアップしてくれたので、追加しました。
こちらは名称が最初から表示された状態です。
Japan Mapの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトを外部ファイルとして記述します。
<head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head>
Step 2: HTML
日本地図を配置するdivをセットします。
<body> ... <div id="map-container"></div> ... </body>
Step 3: JavaScript
jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。
<script>
$(function(){
$("#map-container").japanMap({
onSelect : function(data){
alert(data.name);
}
});
});
</script>
スクリプトのオプションでは、地図のサイズやカラーを変更できます。
- width (default: 651)
- 地図の幅
- heigth (default: 571)
- 地図の高さ
- color (default: #a0a0a0)
- 地図のカラー
- hoverColor (default: red)
- ホバー時のカラー
- backgroundColor (default: #eef8ff)
- 背景のカラー
- lineColor (default: #a0a0a0)
- 地図の枠のラインのカラー
- lineWidth (default: 1)
- 地図の枠のラインのサイズ
- borderLineColor (default: #ffffff)
- 県境のボーダーのカラー
- borderLineWidth (default: 0.25)
- 県境のボーダーのサイズ
地図のCanvasには、下記を使用しているとのことです。
sponsors
