jQuery Vector Mapsで世界地図を表示
jQuery Vector Maps（JQVMap）は世界地図を表示するjQueryプラグインで、公式サイトからダウンロードできます。ライセンスはMITライセンスとGPLライセンスのどちらかを選択できます。ダウンロードファイルに含まれるCSSファイル（jqvmap.css）とJavaScriptファイル（jquery.vmap.js、jquery.vmap.min.js、jquery.vmap.packed.jsのいずれか）を参照するようHTMLファイルに記述します。
特にオプションを指定せずにJQVMapで世界地図を表示する例をリスト1に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- jQueryの読込 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- JQVMapの読込 ... （1） -->
<link href="js/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/jqvmap/jquery.vmap.packed.js"></script>
<script src="js/jqvmap/maps/jquery.vmap.world.js"></script>
<script>
$(function() {
$("#vmap1").vectorMap(); // 地図の設定 ... （2）
});
</script>
<title>JQVMapサンプル1</title>
</head>
<body>
<h1>JQVMapサンプル1</h1>
<!-- 地図を表示する要素 ... （3） -->
<div id="vmap1" style="width:640px; height:480px;"></div>
</body>
</html>
（1）でJQVMapを読み込んでいます。CSSファイル、JavaScriptファイルのほか、世界地図データファイル（jquery.vmap.world.js）を読み込む必要があります。地図を表示するdiv要素（3）に対して、vectorMapメソッド（2）で地図を設定しています。
リスト1を実行すると世界地図が表示されます。左上ボタンによる拡大・縮小やマウスによるスクロールも可能です。
vectorMapメソッドには連想配列（ハッシュ）を引数に与えてオプションを指定することができます。主なオプションを表1に示します。なおmap（表示する地図の種類）にはworld_en（世界地図）のほか、usa_en（米国）, europe_en（ヨーロッパ）germany_en（ドイツ）が指定可能です。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| map | 表示する地図の種類 | "world_en"（世界地図） |
| backgroundColor | 背景色 | "#a5bfdd" |
| color | 地形の表示色 | "#f4f3f0" |
| selectedColor | 選択した国や地域の表示色 | "#c9dfaf" |
| borderColor | 地形の枠色 | "#818181" |
| hoverOpacity | マウスオーバー時の透過 | 0.25 |
| enableZoom | ズームボタンの有効状態 | true |
| showTooltip | 国や地域名ツールチップの表示 | true |
パラメータの設定例をリスト2に示します。
$("#vmap1").vectorMap({
map: "world_en",
backgroundColor: "#7f7f7f",
color: "#ffffff",
selectedColor: "#666666",
borderColor: "#000000",
hoverOpacity: "0.5",
enableZoom: true,
showTooltip: true,
});
リスト2のようにパラメータを設定することで、地図の外見は図2のように変化します。
マウスオーバーやマウスクリックに反応させるためにはリスト3のようにイベントハンドラを設定します。イベントハンドラの引数から、対応する国や地域のコード・名称を取得できます。
$("#vmap1").vectorMap({
// ラベルが表示された時
onLabelShow: function(event, label, code) {
$("#msg1").text("onLabelShow: label= " + label.text() + ", code= " + code);
},
// マウスが領域上を動く時
onRegionOver: function(event, code, region) {
$("#msg2").text("onRegionOver: code= " + code + ", region= " + region);
},
// マウスが領域を離れた時
onRegionOut: function(event, code, region) {
$("#msg2").text("onRegionOut: code= " + code + ", region= " + region);
},
// 領域をクリックした時
onRegionClick: function(event, code, region) {
alert("onRegionClick: code= " + code + ", region= " + region);
}
});
リスト3を実行して領域をクリックすると、onRegionClickイベントによりクリックした国や地域のコード・名称が表示されます。実際に活用する際には、取得された国や地域の情報を用いて何らかの処理を行うことになります。なお、サンプルコードにおいてクリック以外のイベント発生は地図下部に表示されるようになっています。
今回紹介するプラグインのなかでJQVMapのみが備える機能として、国や地域に対応する数値に応じて地図を色分け表示させることができます。国や地域により異なる統計値を視覚的に表示したい場合に便利に活用できます。例えばリスト4は国別平均寿命を表示するコードです。
// 国別の平均寿命 ... （1）
var sample_data = {"jp":83,"us":77.97,"cn":72.71,"ru":67.68, "kr":80.00}
$(function() {
$("#vmap1").vectorMap({
values: sample_data, // サンプルデータ指定 ... （2）
scaleColors: ['#ffd5d5', '#ff0000'], // 表示色の指定 ... （3）
normalizeFunction: 'linear' // 色の補完方法を指定 ... （4）
});
});
表示の元となる数値は（1）のように国コードと関連づけた型式で用意します。数値が格納されたオブジェクトを（2）で設定しています。（3）は表示色の指定で、この例では#ffd5d5と#ff0000の間で色が変化します。（4）は色の補完方法で、ここではlinear（＝数値と色の変化が比例）を指定しています。
リスト4を実行すると図4のように、数値に応じて国や地域が色分けされます。
JQVMapでは世界地図のほか、アメリカやヨーロッパなどの地図表示に対応していますが、残念ながら日本地図には対応していません。そこで次に日本地図を表示するJapan Mapプラグインを紹介します。
