JQueryで世界地図を実装できる「JQVMap」
お久しぶりです。
かねてからプログラマーになりたいなぁと思っていて、以前はiOSアプリケーションを作成していましたが、今度はWebアプリを作ろうかなぁと思い勉強中です。
なお、アイデアを実現するには技術的にハードルが高く絶賛挫折中です。みんなどうやって技術を高めていくんだろうね。
さて、今作ろうとしているWebアプリは世界地図を搭載する必要があり、最初はGoogle Map APIとシェープファイル(≒.kmlファイル)を活用する方法を検討していました。しかしこれが実装してみると非常に動作が重く、実用に耐えませんでした。
そこで何か良いものがないかと調べると、JQueryで世界地図を実装出来るライブラリがありました。(最初からこっちにしとけば良かった…)
Clickable Maps in JavaScript | Interactive Maps | JQVMap
日本語での解説などが非常に少なかったので、拙筆ながらここで紹介させて頂きます。
JQVMapはいくつかのJavaScriptファイルとJQueryをインポートすれば手軽に実装出来て動作が軽いライブラリです。
・具体的な記述方法
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#bbddff',
color: '#ffffff',
hoverOpacity: 0.8,
selectedColor:"#ffff88",
showTooltip:true,
multiSelectRegion:true,
enableZoom: false,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'linear',
onLoad : function (element, code, region)
{
},
onRegionOver : function (element, code, region)
{
},
onRegionOut : function (element, code, region)
{
},
onRegionSelect: function(element, code, region)
{
},
onRegionDeselect: function(element, code, region)
{
}
});
});
</script>
<div id="vmap"></div>
※ ファイルのインポートは省略しています。
<script>〜</script>で実装する地図のプロパティを設定し、<div>〜</div>に実装されます。
onLoadなどは、各タイミングで実行される関数です。
このサイトにJQVMapがもつプロパティやメソッドが一覧になっています。
以下箇条書き
・各国はプロパティに、国名を「region」、ISO2の2桁コードを「code」を持つ
・特定の国のみ色を変えたい等の場合は以下のコードを、地図設定の<script>以降に記述する(この記述はアメリカのみを青色にしている)
;
などなど…