人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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内の変数を読み解くカギを教えていただけないでしょうか。

●質問者: nyantananban
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●250ポイント ベストアンサー
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)
}
});

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


Cherenkovさんのコメント
HTML5がokならcanvasでいろいろできると思います。 自分が作ったサイト [http://croppi.heroku.com/:title=Croppi! 画像を任意のサイズに楽ちんクロップ]

nyantananbanさんのコメント
ありがとうございます。callAfter: でドラッグ終了時の座標がみつかりました! しかしafterZoom: では拡大縮小操作をしたときの拡大比率は得ることができませんでした。afterZoom: にもalertを入れて試してみたのですが、xcoord, ycoord共にundefinedです。 HTML5は使えないです、興味深いのですが残念です。

Cherenkovさんのコメント
あとfirefoxで動かない気がします

nyantananbanさんのコメント
確認してみましたが、Croppi!さんは私の環境でもfirefoxでは動かない気がしました。Mapboxのことでしたら自分の環境ではfirefoxでも動いております。 Croppi!のUIはとても参考になります。ありがとうございます。

Cherenkovさんのコメント
Mapboxについてfirefoxで動かないと思ったのですが、よく確認してみると、地図上でマウスホイールを回した際、正しくzoomせずページ自体がスクロールしていました。何度かグリグリするとそのうちzoomされました。

Cherenkovさんのコメント
わかりました。たぶんバグを見つけました。 mapbox.jsを以下のように修正してください。afterZoomで座標が取れるようになります。 >|javascript| o.afterZoom(layers.eq(eq)[0], this.xPos, this.yPos, this); ↓ o.afterZoom(current[0], this.xPos, this.yPos, this); ||<

Cherenkovさんのコメント
https://github.com/wayfarer/jQuery-Mapbox こちらから最新版の0.7を使ったほうがいいかも。 といっても同じバグが残っているようなので修正が必要ですが…。 あとコールバック引数levelが付け足されているので注意。 afterZoom: function(level, layer, xcoord, ycoord, viewport) {}

Cherenkovさんのコメント
o.afterZoom(current[0], this.xPos, this.yPos, this);の修正はVersion 0.6.0 betaの話です。0.7確認中ですが動かない…

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

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部分のコードを移植するかどちらかでしょうね…

2 ● みかん
●250ポイント

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>


a-kuma3さんのコメント
http://www.omnioo.com/omnioolab/2011/05/google-mapjquery-plugin.php ↑の内容を、そのまま貼り付けただけですね。 しかも、HTML なコードが含まれてるもんだから、一部しか表示されてないし。 ひどすぎる。

nyantananbanさんのコメント
ご回答...ありがとうございます? しかし上の回答者の方と同じポイント数が割り振られてしまうのは悲しいです。

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

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

質問者から
layerSplit: 4, // how many times to split each layer as a zoom level

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ