前の記事 ≪:2009年に発見した秀作アイコンのまとめ
次の記事 ≫:カラフルで美しい光の描画Photoshopチュートリアル

GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」

2009年12月01日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」。
自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。

マウスホイールでズームし、ドラッグして地図移動が可能

 

ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。



設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。
オプションも多数あるのでカスタマイズも出来ます。



ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高いですね。

以下のエントリを参照してください。
Mapbox: the jQuery Map
関連の記事検索:jQuery, map, 画像
スポンサード リンク

By.KJ : 2009年12月01日 09:59 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)