jQuery Mapael – jQuery x Raphaëlな地図描画ライブラリ // MOONGIFT Archived

JavaScriptと連携できる地図が欲しかった方は要チェック！ Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。実際の例としてはフランスの地図を扱ったものが多くなっています。マウスオーバーでハイライトされます。さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。人口の多い町や都市を描いています。こういった外部データとの連携も容易です。最後はフランスではなく世界地図のデモです。国ごとにデータを色分けして表示、なんてのも実現できます。使い方はシンプルで、例えば世界地図を描画する場合は

<div class="container">
    <div class="map">Alternative content</div>
</div>

というHTMLを用意して、

$(".container").mapael({
  map : {
    name : "world_countries"
  }
});

といった感じに呼び出すだけです。とても手軽ですね。Alternative contentというコンテンツがある通り、クローラーやJavaScript非対応の場合は別なコンテンツを表示することも考慮されています。 SVGのメリットとしてはズームしたり回転させることはもちろん、JavaScriptとの連携も簡単に実現できることでしょう。インタラクティブな地図を使えば面白いコンテンツの見せ方が実現しそうです。 jQuery MapaelはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 jQuery Mapael http://www.neveldo.fr/mapael/ neveldo/jQuery-Mapael https://github.com/neveldo/jQuery-Mapael