nyantananban回答ポイント 500ptウォッチ 1

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

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

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• Cherenkov2012/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)
  	}
  });
  

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

  スター

  • 

    10件のコメントを見る

  • Cherenkov 2012/10/03 19:06:41

    HTML5がokならcanvasでいろいろできると思います。
    自分が作ったサイト
    Croppi! 画像を任意のサイズに楽ちんクロップ

    スター

  • nyantananban 2012/10/04 11:16:00

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

    スター

  • Cherenkov 2012/10/04 12:04:48

    あとfirefoxで動かない気がします

    スター

  • nyantananban 2012/10/04 13:27:59

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

    スター

  • Cherenkov 2012/10/04 13:55:16

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

    スター

  • Cherenkov 2012/10/09 17:09:12

    わかりました。たぶんバグを見つけました。
    mapbox.jsを以下のように修正してください。afterZoomで座標が取れるようになります。

    o.afterZoom(layers.eq(eq)[0], this.xPos, this.yPos, this);
    ↓
    o.afterZoom(current[0], this.xPos, this.yPos, this);
    

    スター

  • Cherenkov 2012/10/09 17:16:39

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

    スター

  • Cherenkov 2012/10/09 17:35:45

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

    スター

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

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

    スター

  • Cherenkov 2012/10/10 07:28:41

    「拡大縮小操作をしたときの拡大比率」を求めているようなのでさらに補足。
    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/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倍->1.5倍としてあります。ここらの比率は適当でいいみたいです。この画像のレイヤーは少なくとも２階層ないとダメだと言っています。当たり前の話ですが最低２階層ないと拡大縮小の意味がなくなってしまうので...。
  　注意点は、

  という空のブロックをそれぞれ入れておくことです。ここらの操作は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>

  スター

  • 

    4件のコメントを見る

  • a-kuma3 2012/10/07 18:04:27

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

    スター

  • nyantananban 2012/10/09 09:13:12

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

    スター

  • nyantananban 2012/10/09 09:15:02

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

    スター

  • 楽1978 2012/10/09 21:54:50

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

    スター

• nyantananban

  2012/10/09 10:26:20

  layerSplit: 4, // how many times to split each layer as a zoom level
  

  の部分が怪しいと思い、

  もしかしたらlayerSplit: 4だと

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

この質問へのコメント

質問の情報

登録日時

2012-10-03 15:02:15

終了日時

2012-10-10 15:05:03

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者16時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者116時間前
• 内定してほしいポケモンはいますか？匿名質問者17時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ