Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

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

このサイトにJQVMapがもつプロパティやメソッドが一覧になっています。

以下箇条書き

・各国はプロパティに、国名を「region」、ISO2の2桁コードを「code」を持つ

・特定の国のみ色を変えたい等の場合は以下のコードを、地図設定の<script>以降に記述する(この記述はアメリカのみを青色にしている)

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'}); 

 

などなど…