Webサイトを作成していると世界地図を表示させる機会もあるかもしれません。
世界地図の画像を貼り付けたり、グーグルマップなどで世界地図を表示させたりという手もありますが、もう少しお洒落に世界地図を表示させたい…というときに簡単便利なのがこのjQueryプラグイン「JQVMap（jQuery Vector Maps）」。
拡大縮小させても画像が粗くならないScalable Vector Graphics (SVG)が利用されていて、拡大・縮小可能な綺麗な世界地図が描かれます。
サンプルはこちら
→ お洒落な世界地図を表示するjQueryプラグイン「JQVMap」サンプル
地図の左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。
設定方法は続きをご覧ください。
【設定方法】
まずはこちらのjQuery Vector Mapサイトからファイルを一式ダウンロードします。
＜ｈｅａｄ＞部分に以下を記述します。ファイルのパスに注意。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<link href="css/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.vmap.js"></script> <script src="js/jquery.vmap.world.js"></script> <script src="js/jquery.vmap.sampledata.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: '#333333', color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial' }); }); </script> |
そして＜ｂｏｄｙ＞部分の世界地図を表示させたいところで、
|
1 |
<div id="vmap" style="width: 600px; height: 400px;"></div> |
と記述すればお洒落に世界地図が表示されます。
以下はサンプルのソースです。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQVMap - 世界地図サンプル</title> <link href="css/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.vmap.js"></script> <script src="js/jquery.vmap.world.js"></script> <script src="js/jquery.vmap.sampledata.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: '#333333', color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial' }); }); </script> </head> <body> <h1>お洒落な世界地図を表示するjQueryプラグイン「JQVMap（jQuery Vector Maps）」サンプル</h1> <p>左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。 </p> <div id="vmap" style="width: 600px; height: 400px;"></div> </body> </html> |
あわせてお読みください
tablecloth.jsは、Tableで作った表をお洒落に演出するjQueryプラグインです。 表はテーブルを使用して作成されることが多いと思いますが、そのま…
MyjQueryPlugins BackToTop pluginページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Bac…
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。 テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すこと…
コメントを残す