日本地図に特化したJapan Map
Japan Mapは、公式サイトにおいてMITライセンスで配布されています。ダウンロードファイルに含まれるJavaScriptファイル（jquery.japan-map.jsまたはjquery.japan-map.min.js）を参照するようHTMLファイルに記述します。
まず最もシンプルな利用法をリスト5に示します。JQVMapとほぼ同じ記述型式になっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- jQueryの読込 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Japan Mapの読込 ... （1） -->
<link href="js/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/japanmap/jquery.japan-map.min.js"></script>
<script>
$(function() {
$("#japanmap1").japanMap(); // 地図の設定 ... （2）
});
</script>
<title>JapanMapサンプル1</title>
</head>
<body>
<h1>JapanMapサンプル1</h1>
<!-- 地図を表示する要素 ... （3） -->
<div id="japanmap1"></div>
</body>
</html>
リスト5を実行すると日本地図が表示されます。
JQVMap同様、地図を表示するjapanMapメソッドにオプションを指定して表示型式を変更できます。主なオプションを表2に示します。なおJQVMapでは地図の幅／高さはHTML要素へ指定しましたが、Japan Mapではパラメータで指定します。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| width | 地図の幅 | 651 |
| height | 地図の高さ | 571 |
| color | 表示色、文字色 | "#a0a0a0" |
| backgroundColor | 背景色 | "transparent" |
| hoverColor | ホバー背景色 | （color指定の明るさ20%） |
| lineColor | 枠線色 | "#a0a0a0" |
| lineWidth | 枠線太さ | 1 |
| borderLineColor | 都道府県境界色 | "#ffffff" |
| borderLineWidth | 都道府県境界太さ | 0.25 |
| showsPrefectureName | 都道府県名表示 | false |
| movesIslands | 南西諸島を地図左上に表示 | false |
パラメータの設定例をリスト6に示します。
$("#japanmap1").japanMap({
width: 640,
height: 480,
color: "#5fd35f",
backgroundColor: "#f2fcff",
hoverColor: "#217821",
lineColor: "#7f7f7f",
lineWidth: 2,
borderLineColor: "#000000",
borderLineWidth: 1,
showsPrefectureName: true,
movesIslands: true,
});
リスト6のパラメータ設定を行うと、地図表示は図6のようになります。
さらに、都道府県や地域別に地図を色分けすることができます。まず地域ごとの表示内容をリスト7のように定義します。地域名をname、表示色をcolorとhoverColor、地域に属する都道府県をprefecturesにそれぞれ記述します。
// 地域ごとの表示分け
var areas = [
{code : 1, name: "北海道地方", color: "#7f7eda", hoverColor: "#b3b2ee",
prefectures: [1]},
{code : 2, name: "東北地方", color: "#759ef4", hoverColor: "#98b9ff",
prefectures: [2,3,4,5,6,7]},
{code : 3, name: "関東地方", color: "#7ecfea", hoverColor: "#b7e5f4",
prefectures: [8,9,10,11,12,13,14]},
// 以下略
];
リスト7で定義した地域を、japanMapメソッドのareasプロパティに設定します。
$("#japanmap1").japanMap({
width: 640,
// ...
areas : areas, // 地域定義を設定
showsAreaName : true // 地域名を表示する
});
リスト7、リスト8を実行すると、地図に定義された地域の色分けや名前が反映されます。
地図に対するマウスイベントはマウスオーバーとクリックに対応させるためのonHover、onSelectイベントハンドラが利用できます。イベントハンドラのdataパラメータからcode（コード）、name（名称）、area（所属する地域）の各プロパティを取得することができます。
// マウスが領域上を動く時
onHover: function(data){
$("#msg1").text("onHover: code= " + data.code + ", name= " + data.name +
", areaCode= " + data.area.code + ", areaName= " + data.area.name);
},
// 領域をクリックした時
onSelect : function(data){
alert("onSelect: code= " + data.code + ", name= " + data.name +
", areaCode= " + data.area.code + ", areaName= " + data.area.name);
}
リスト9を実行して領域をクリックすると、クリックされた都道府県や地域のコード・名称が表示されます。なお、サンプルコードにおいてクリック以外のイベント発生は地図下部に表示されるようになっています。
まとめ
本記事では、Webページ上に地図を表示するプラグインとして、世界地図を表示するJQVMapと、日本地図を表示するJapan Mapを紹介しました。これらは世界地図や日本地図を大まかに表示して国や地域、都道府県単位での表示や選択を行いたい場合に便利に利用できます。一方で国・地域・都道府県より範囲の狭い特定の場所（地点）の情報を表示するにはGoogleマップのような表示が便利です。次回は、Googleマップを簡易に利用できるjquery.gmap3を紹介します。
