ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Googleマップライクに画像をマウスでドラッグできるようにする。

[/s2If]

SpryMapはJavaScript/jQuery製のオープンソース・ソフトウェア。Googleマップの操作は色々な場面で応用できる。オンラインで閲覧するチラシでも使えるし、大きな写真で自分の好きな場所を閲覧する時にも使うことができる。


Screen-shot 381.png

ドラッグして見る場所を変更する

 

実際のGoogleマップの画像はタイル上になっているため、サーバ側も合わせて複雑な仕組みが必要になる。だが大きな一枚の画像を見せるだけならばSpryMapが使えるだろう。

SpryMapはjQueryを使って巨大な画像をドラッグで移動しつつ閲覧できるソフトウェアだ。ズームイン/ズームアウトのような機能はなく、画像も一枚で済むのが手軽だ。そのため実際の画像も巨大なものでなければならない。


Screen-shot 382.png

元画像は大きい

 

デモではゲームの地図を表示しているが、地図に限らず利用できるだろう。オプションもあるが、基本的な利用だけであればさほど難しくなさそうだ。画像をただ表示するだけでなく、このような工夫を凝らすとさらに魅力が増すはずだ。

 

MOONGIFTはこう見る

SpryMapは使い道を挙げればきりがない程、利用できそうだ。単純に考えれば画像を多用するようなサイト(イラスト、ECサイト、アパレル系)などでも効果的な演出が考えられる。ただし一般的なWeb操作とは言えないので、適切な説明を必要とするあろう。

 

デモ

 http://candrews.net/sandbox/spryMap/

[/s2If]

via SpryMap – Google Maps-like Click and Drag Window [ WebAppers ]

SpryMap | candrews.net

 http://candrews.net/sandbox/spryMap/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2