jQuery Vector MapsはSVGで描かれた地図です。JavaScriptとの親和性が高いです。

HTML5から標準に取り入れられた技術の一つにSVGがあります。IllustratorなどもSVGで出力できますが、まだまだ利用範囲は広くありません。そこでSVGを使ったデモとしてjQuery Vector Mapsを紹介します。

デモです。右側の地図がベクターで描かれています。

こちらは世界地図。

ドイツのマップ。

ヨーロッパのマップ。マウスオーバー、クリックで色が変わります。

jQuery Vector MapsはSVGデータをそのまま取り込んで表示している訳ではなく、JavaScriptでレンダリング内容を指定しています。その結果マウスオーバーにも対応しているようですが、マップの作成が大変なのは否めません。とは言えズームやパンしても乱れない奇麗な地図というのは使い勝手が良さそうです。

jQuery Vector MapsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

SVGはベクターなので拡大、縮小しても奇麗なままですし、プログラムとの相性もいいです。逆にあくまでも座標などのデータの集合体であるためにイラストには使いづらいという問題があります。もしSVGがイラスト風なタッチを再現できるとすればゲームをはじめとして利用場面は拡大するでしょう。

HTML5が徐々に広まっているものの、その使われ方はまだまだ限定的です。単なるHTML構造の話であればHTML4のままでも良いのではないかと思ってしまいます。もっとHTML5ならではの使い方を考えるべきでしょう。WebGLやSVG、audio/videoなど魅力はたくさんあります。

jQuery Vector Maps - Resizable Scalable Vector Graphic (SVG) Maps for Modern Browsers

manifestinteractive/jqvmap