◉ jQuery プラグインjquery.vector-map.jsを使って、拡大可能な世界地図を作ってみた。

日頃、あまり縁がないもので、世界の国名と所在地がどうもあやふや。とくにアフリカ、中東、南アメリカがよく分からない。

各国の詳細を調べるなら、検索したり、Googleマップを見れば良いのだが、もっとアバウトに世界全体を眺めて、だいたいの位置がつかめれば良い…といった程度の世界地図がなかなか見つからない。そこで自分用に世界地図を作ってみることに。

jQuery プラグインjquery.vector-map.jsを使った世界地図が自分の要望を満たしてくれそうだし、割と簡単にできそうなのでこれを利用して作った。

jquery.vector-map.js

拡大、縮小しても画像が劣化しないベクターデータ（svg）を使って、地図を表示してくれるjQueryプラグイン。

そして外出時にも眺めることができるようにwebにアップ。

各国にマウスオーバーすると、色を変えて強調し、ラベルで国名を表示してくれる。左側の「+」ボタンで拡大可能。「-」ボタンは拡大したもの元に戻す場合に利用。拡大時にはGoogleマップのように地図上をずるずるドラッグして位置の変更も可能なので、国が密集している地域では大きく拡大できる。

なお、ラベル表示される国名は英語表記。プラグインをダウンロードした際のファイルに含まれるworld-en.jsの内容を書き換えれば日本語表記もできるが、ちょっとたいへんなので今回は割愛。

地図の色は、デフォルトのグレー系から、jquery.vector-map.jsのパラメーターを書き換えて、色替え。また、「+」「-」ボタンや、国名表示のラベルの背景色は、CSSで書き換えできる。

→ ベクターな世界地図サンプル

そのほか、ダウンロードファイルには、ヨーロッパ、アメリカ、ドイツの地図も含まれている。白地図からsvgにおこせば、日本の地図も作成可能、でもそれはかなり時間があるときの話。

→ プラグイン配布先：jVectorMap