1. >
  2. Strolyの使い方
  3. >
  4. ビューワーについて
  5. >
  6. マップの初期表示範囲を調整する。

マップの初期表示範囲を調整する。

初期表示範囲を設定することが可能です。

マップのURL末尾にパラメータを追加することで、初期表示される範囲を自由に設定することができます。

例えば、この機能を用いることで、最初からマップの中央を拡大または縮小して表示したり、特に見せたい場所にズームするなど、任意の場所を最初から表示することが可能になります。

ここでは2通りの方法をご紹介します。

1.マップの中心部分を拡大または縮小して表示する方法

マップの中心部分を拡大または縮小して表示するためのオプションです。URLの末尾に、以下の形式でパラメータを追加することで設定可能です。

&zoom=XX(”&“はパラメータをつなげる文字。XXの部分は1〜6の整数が入ります)

例えば、このニューヨークのマップ(https://stroly.com/viewer/1512719519/?room=stroly)の全体を表示したい場合は、“XX”の部分に入る数字を小さくします。(数字が小さくなるほど、広い範囲が表示されるようになります)

以下のように設定(zoom=2)すると、マップのほぼ全体を表示することが可能です。

https://stroly.com/viewer/1512719519/?room=stroly&zoom=2

また「zoom=6」の場合は、マップの中心部がほぼ最大限拡大されて表示されます。

https://stroly.com/viewer/1512719519/?room=stroly&zoom=6

このように「zoom=XX」のXXの部分に入る数字の大小によって、表示範囲の大きさを変更することが可能です。 ただし、この機能によって拡大されるのはマップの中心部のみです。(周辺部を指定して拡大することはできません)また、実際にどの程度の範囲が表示されるかについてはマップによって異なります。 中心部ではないマップ上の好きな部分を指定して表示する場合は、次の方法がおすすめです。

2.マップ上の好きな部分を拡大または縮小して表示する方法

先ほどご紹介した方法とは異なり、マップ上の好きな部分を指定して表示することが可能なオプションです。具体的には、表示したい範囲をマップ画像上のXY座標(下図)を用いて指定します。

&xybounds=x1,y1,x2,y2(x1,y1,x2,y2はそれぞれ左・上・右・下の境界線の座標)

マップ画像上のXY座標は左上の角を原点として、x座標が左から右向き、y座標が上から下向きに大きくなるよう設定され、その数字はマップの寸法(px)と対応しています。

例えば縦2000px、横3000pxの画像の場合、左上の角はx=0, y=0、右上の角はx=3000, y=0、左下の角はx=0, y=2000、右下の角はx=3000, y=2000となります。

このように画像上の座標を用いて表示範囲を設定することで、マップ上のどの範囲であっても初期表示とすることが可能です。例えば以下のような設定ができます。

https://stroly.com/viewer/1512719519/?room=stroly&xybounds=0,0,800,1000

指定できる座標の範囲は、元のマップ画像ファイルの大きさに準拠します。そのため、マップの画像ファイルのpx数を把握する必要があります。

より細かい範囲まで拡大する必要がある場合、アップロードされるマップの画像はより大きなサイズである必要があります。一般にStroly上では、マップの画像サイズとズームレベルの関係は以下の通りとなっています。

  • ズームレベル1(1段階拡大可能): 画像長辺512px以上
  • ズームレベル2(2段階拡大可能): 画像長辺1,024px以上
  • ズームレベル3(3段階拡大可能): 画像長辺2,048px以上
  • ズームレベル4(最大限拡大可能): 画像長辺4,096px以上

これらの方法は、組み合わせても利用できます。

https://stroly.com/viewer/1512719519/?room=stroly&zoom=5&xybounds=0,0,800,1000

マップを利用する際に活用してみてください。

その他のお問い合わせについては、こちらのフォームからご連絡ください。