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

http://wayfarerweb.com/js/mapbox.js

以下のサイトのような、
(1)「画像をアップロード」
(2)「アップロードした画像をブラウザ上でリサイズ・移動」
(3)「リサイズ・移動した値をPHPのグラフィックライブラリ(GD)に送り、元画像を変形、表示」
という仕組みを作りたいと思っています。
http://originalcanbadge.com/
PHP部分は作れそうなのですが、(2)から(3)へ数値を渡す部分で困っています。

Mapbox.jsを読んでみていますが、どこの変数が画像の移動ピクセル数や拡大比率になっているのか読み取ることができません。

ここの下部のサンプルでは、操作パネルのボタンで数ピクセルずつ動かすことが出来ているので、ここで操作したときの数値がどこの変数に代入されているのかが知ることが出来ればヒントになりそうです..
http://wayfarerweb.com/jquery/plugins/mapbox/

参考になりそうなサイトや、Mapbox.js内の変数を読み解くカギを教えていただけないでしょうか。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/10/03 15:02:15
  • 終了:2012/10/10 15:05:03

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/10/03 19:04:11

ポイント250pt
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 

このあたりの仕組みを使えばいいのでは。

$("#viewport2").mapbox({ 
	省略
	callAfter: function(layer, xcoord, ycoord, viewport) {
		alert('x:'+xcoord+', '+'y:'+ycoord)
	}
});

のようにすればドラッグが終了した時点での座標を得られるはずです。
もっといいプラグインがありそうですが…

他8件のコメントを見る
id:Cherenkov

0.7はどこかでafterZoom属性がデフォルトに上書きされちゃうみたいです。
http://wayfarerweb.com/jquery/plugins/mapbox/
からダウンロードできるバージョンを上記の修正を行い使ったほうがよさそうです。

2012/10/09 18:17:47
id:Cherenkov

「拡大縮小操作をしたときの拡大比率」を求めているようなのでさらに補足。
version 0.7のafterZoom: function(level, layer, xcoord, ycoord, viewport) {}
の引数のlevelが拡大比率のようです。

afterZoomが上書きされるバグは特定できていない状態で、mapbox.jsを直接書き換えながら確認したところ、
zoomを行うと、levelは0~3で変化しました。layerSplit: 4と対応していると思います。

がんばって0.7のバグを修正するか、0.6betaにlebel部分のコードを移植するかどちらかでしょうね…

2012/10/10 07:28:41

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/10/03 19:04:11ここでベストアンサー

ポイント250pt
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 

このあたりの仕組みを使えばいいのでは。

$("#viewport2").mapbox({ 
	省略
	callAfter: function(layer, xcoord, ycoord, viewport) {
		alert('x:'+xcoord+', '+'y:'+ycoord)
	}
});

のようにすればドラッグが終了した時点での座標を得られるはずです。
もっといいプラグインがありそうですが…

他8件のコメントを見る
id:Cherenkov

0.7はどこかでafterZoom属性がデフォルトに上書きされちゃうみたいです。
http://wayfarerweb.com/jquery/plugins/mapbox/
からダウンロードできるバージョンを上記の修正を行い使ったほうがよさそうです。

2012/10/09 18:17:47
id:Cherenkov

「拡大縮小操作をしたときの拡大比率」を求めているようなのでさらに補足。
version 0.7のafterZoom: function(level, layer, xcoord, ycoord, viewport) {}
の引数のlevelが拡大比率のようです。

afterZoomが上書きされるバグは特定できていない状態で、mapbox.jsを直接書き換えながら確認したところ、
zoomを行うと、levelは0~3で変化しました。layerSplit: 4と対応していると思います。

がんばって0.7のバグを修正するか、0.6betaにlebel部分のコードを移植するかどちらかでしょうね…

2012/10/10 07:28:41
id:sanada33 No.2

みかん回答回数293ベストアンサー獲得回数32012/10/06 20:12:52

ポイント250pt

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>

他2件のコメントを見る
id:nyantananban

もうすぐ回答受付を終了してしまいますが、
Mapboxで拡大縮小操作をしたときの拡大比率を得られる方法がわかりましたら、ご回答をお願いしたいです。

2012/10/09 09:15:02
id:maya70828

>質問者様へ
この回答の下に表示されるポイントを配分しないにチェックを入れれば、ポイント配分なしにできますよ。

2012/10/09 21:54:50
id:nyantananban
layerSplit: 4, // how many times to split each layer as a zoom level

の部分が怪しいと思い、
もしかしたらlayerSplit: 4だと
zoomやbackが呼び出された時の動作が100%・200%・400%・800%のわかりやすい4段階になっちゃったりなんかして!と思いいじってみましたが、そんなうまい話はありませんでした。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません