美しい世界地図をJavaScriptで描ける「jQuery Vector Maps」

世界地図を表示したい場合、フリー素材やGoogle Mapなどあるかと思いますが、ちょっと味気ないですよね。
jQuery Vector Mapsを利用すると手間少なく、かつイマドキ風の美しい世界地図を描画可能です。

sponsors

使用方法

jQuery Vector Mapsからファイル一式をダウンロード。
下記のように地図の指定をします。

<link rel="stylesheet" type="text/css" href="jqvmap.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.vmap.js"></script>
<script type="text/javascript" src="jquery.vmap.world.js"></script>
<script type="text/javascript" src="jquery.vmap.sampledata.js"></script>
<script>
$(function() {
	$('#id名').vectorMap({
	    map: 'world_en', //表示エリア world_en, usa_en, europe_en,germany_en
	    backgroundColor: null, //背景色
	    color: '#ffffff', //地域の色
	    hoverOpacity: 0.7, //マウスオーバー時の透過度
	    selectedColor: '#666666', //選択された時の色
	    enableZoom: true, //ズームさせるか
	    showTooltip: true, //吹き出しをだすか
	    values: sample_data, //色を付けたいエリア
	    scaleColors: ['#C8EEFF', '#006491'], //上記で指定した場所の色
	    normalizeFunction: 'polynomial' //色の分布
	});
});
</script>
最後に表示したい場所に以下を記述すれば完成です。
<div id="id名" style="width: 600px; height: 400px;"></div>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors