SpryMapはGoogle Mapsみたいなスクロール地図サイトを作ることができるちょっとしたJavaScriptのライブラリ。

デカめの画像を1枚用意して、SpryMapライブラリを使うと、スクロール画像な仕組みをサクっとつくれる。

ためしにやってみた。
SpryMap サンプル

ほんとは1つのページに6枚の地図スクロール領域を作ろうとしたけど、SpryMapは1ページ内で複数のスクロール画像を扱うようにはできてないっぽいのであきらめ。

地図の画像はこのへんのWebAPI → Yahoo!デベロッパーネットワーク - 地図 - スタティックマップ ← を使って生成。APIで生成できる最大画像サイズが2000x2000ピクセルなのでそのサイズで。

Ref.
-SpryMap - lightweight javascript click and drag map script | candrews.net
-Click-and-drag map using javascript | candrews.net

tags: zurazure

Posted by NI-Lab. (@nilab)