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

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

使用方法 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で描ける「jQuery Vector Maps」サンプル

sponsors

記事作成:
記事URL:

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