Google Mapみたいに画像を拡大したり縮小したり移動したりできるプラグインを発見しました。英語サイトしか見つからなかったので翻訳を兼ねてメモしておきます。たぶんですがあまりにもバカデカイ画像ファイルだと容量的に問題あるんでしょうけど、解像度が非常に高く引き伸ばしてもかなり鮮明に映っているような画像を細部まで見せたい時は結構便利かもしれないです。しかしこんな機能を自分のサイトに実装できる時代になってしまったというのもスゴイ話ですね。 サンプル
プラグインの準備とダウンロード
プラグイン名は、Mapbox、フルネームはMapbox: Zoomable jQuery Map Pluginです。
http://wayfarerweb.com/jquery/plugins/mapbox/
このプラグインは、拡張機能としてマウスホイールをくるくるやってあげることで拡大縮小ができるようにMouse Wheel Extensionプラグインも同時に読み込んであげます。なのでまずは、以下のjQueryプラグインをダウンロードします。
Mapbox プラグイン ダウンロード
Mouse Wheel Extensionプラグイン ダウンロード
ダウンロードしたらjQueryを使えるようにします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./script/jquery.mapbox.js"></script>
私はGoogleが提供してくれているjQueryライブラリーを読み込んでしまっています。現在現時点で1.4.1が一番新しいはずです。それからダウンロードしたプラグインを読み込みます。任意のディレクトリから読み込んで設定してください。これで必要なプラグインとライブラリーの準備完了です。
CSSの設定
拡大縮尺比率にもよりますが、ここでは解説ページとちょっと比率を変えてやってみます。最小サイズが500px*500pxの正方形です。勿論スタイルシートは各デザインに合わせて調整してください。
HTMLの設定
次にHTMLの設定例ですが、ここでは先のCSSと連動して#viewportのブロックを作ってあげます。見ての通り最小サイズはbackgroundとして配置し拡大画像をdivで設定してゆきます。ここでは4つの画像をデフォルト->2倍->2倍->1.5倍としてあります。ここらの比率は適当でいいみたいです。この画像のレイヤーは少なくとも2階層ないとダメだと言っています。当たり前の話ですが最低2階層ないと拡大縮小の意味がなくなってしまうので...。
注意点は、
という空のブロックをそれぞれ入れておくことです。ここらの操作はjQueryがいろいろやってくれているのでそのまま素直に書いておけばOKです。
この時点では、4つの画像がどーんと表示されてしまう状態なので、それを制御するjQueryのコードを追加します。
jQueryのコードを追加
$(document).ready(function() { $("#viewport").mapbox({mousewheel: true}); }); </script>
という感じでコードを追加します。英文では、「たったこれだけ!(That's all!)」みたいな感じで大喜びしている感じが伺えます。しかし現にたったこれだけで出来てしまったので結構感動しました。しかしあんまり行きたくない飲み会の集合時間に間に合うか間に合わないかという時に急いでコードを書いていた時なので更に感動しました。
マウスホイールでころころしたくない人は、単に
$("#viewport").mapbox({mousewheel: true}); → $("#viewport").map();
と書き換えてくださいということです。
さらにいろいろ
モア・アドバンスド・セッティングができるそうです。いろいろ出来すぎて困っちゃうわけですが、とりあえずデフォルトの設定をどうぞということでした。以下のコードはデフォルトの設定なので付け加えてもMapboxには何も起きませんが、いろいろと設定を変えたい時に便利です。(実際には私はここまでしかやってません。ここまでで充分な機能です。)
$("#viewport").mapbox({ zoom: true, // does map zoom? pan: true, // does map move side to side and up to down? defaultLayer: 0, // starting at 0, which layer shows up first layerSplit: 4, // how many times to split each layer as a zoom level mapContent: ".mapcontent", // the name of the class on the content inner layer defaultX: null, // default positioning on X-axis defaultY: null, // default positioning on Y-axis zoomToCursor: true, // if true, position on the map where the cursor is set will stay the same relative distance from the edge when zooming doubleClickZoom: false, // if true, double clicking zooms to mouse position clickZoom: false, // if true, clicking zooms to mouse position doubleClickZoomOut: false, // if true, double clicking zooms out to mouse position clickZoomOut: false, // if true, clicking zooms out to mouse position doubleClickMove: false, // if true, double clicking moves the map to the cursor position clickMove: false, // if true, clicking moves the map to the cursor position doubleClickDistance: 1, // number of positions (determined by layerSplit) to move on a double-click zoom event clickDistance: 1, // number of positions (determined by layerSplit) to move on a click zoom event callBefore: function(layer, xcoord, ycoord, viewport) {}, // this callback happens before dragging of map starts callAfter: function(layer, xcoord, ycoord, viewport) {}, // this callback happens at end of drag after map is released "mouseup" beforeZoom: function(layer, xcoord, ycoord, viewport) {}, // callback before a zoom happens afterZoom: function(layer, xcoord, ycoord, viewport) {}, // callback after zoom has completed mousewheel: false /* requires mousewheel event plugin:
http://plugins.jquery.com/project/mousewheel*/ } ) </script>
気になるところでは、defaultLayerを中程の1とか2に設定するのもおもしろいかなと。また、doubleClickZoomをtrueにしておくとGoogle Mapライクになって結構いいかもとか。いろいろできそうです。
更にいろいろできるコード
<script type="text/javascript"> $("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option) $("#viewport").mapbox("zoom", 2);//zooms in 2 levels $("#viewport").mapbox("back");//zooms out 1 level $("#viewport").mapbox("back", 2);//zooms out 2 levels $("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first) $("#viewport").mapbox("left");//move the current layer left 10 pixels $("#viewport").mapbox("right");//move the current layer right 10 pixels $("#viewport").mapbox("up");//move the current layer up 10 pixels $("#viewport").mapbox("down");//move the current layer down 10 pixels $("#viewport").mapbox("left", 20);//move the current layer left 20 pixels $("#viewport").mapbox("right", 20);//move the current layer right 20 pixels $("#viewport").mapbox("up", 20);//move the current layer up 20 pixels $("#viewport").mapbox("down", 20);//move the current layer down 20 pixels $("#viewport").mapbox("center");//centers current layer $("#viewport").mapbox("center", { x: 200, y: 400 });//centers current layer at positions 200px, 400px on the x and y axis </script>