jQueryのプラグインMapboxに関してです。Mapboxでは画像のズームやドラッグ移動などができますが、画像操作を行ったあとの値を取得したいと思っています。

という空のブロックをそれぞれ入れておくことです。ここらの操作はjQueryがいろいろやってくれているのでそのまま素直に書いておけばOKです。



　この時点では、４つの画像がどーんと表示されてしまう状態なので、それを制御する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>