Jumbled up viewpoint when scrolled vertically

[kunalm]

If I use an image like this http://f.fwallpapers.com/images/marina-bay-sands-panorama-singapore.jpg and scroll up or down I can see jumbled up viewpoints. Like both side of the image have merged into one single point. But when I use the image in your example it works fine. I even copied the same settings from your markers example. still have the same problem.

Here's the setting I am using:

psViewer = new PhotoSphereViewer({ panorama: pathToImg, container: 'psv-view-wrap', move_inertia: false, navbar: false, gyroscope: true, autoload: true, time_anim: true, latitude_range: [2, 2], default_fov: 50, mousewheel: false, });

Any option to allow vertical movement but to a certain limit only? I tried using latitude_range: [2 ,2 ] but then also have the same issue. Using latutude_range: [1,1] doesn't let me scroll up/down at all.

Also any option to limit horizontal movement to extreme left/right or the image? I guess I need to use the longitude_range option. But a bit confused what values to use.

[mistic100]

This viewer is for equirectangular projected images, yours is just a panorama !!!

If you want this to work you will have to inject XMP tags in your image to tell the viewer the full sphere has been cropped in a smaller image, and it will paint the cropped parts in black.

The XMP payload is a follow

<rdf:Description rdf:about="" xmlns:GPano="http://ns.google.com/photos/1.0/panorama/">
    <GPano:UsePanoramaViewer>True</GPano:UsePanoramaViewer>
    <GPano:CaptureSoftware>Photo Sphere</GPano:CaptureSoftware>
    <GPano:StitchingSoftware>Photo Sphere</GPano:StitchingSoftware>
    <GPano:ProjectionType>equirectangular</GPano:ProjectionType>
    <GPano:PoseHeadingDegrees>350.0</GPano:PoseHeadingDegrees>
    <GPano:InitialViewHeadingDegrees>90.0</GPano:InitialViewHeadingDegrees>
    <GPano:InitialViewPitchDegrees>0.0</GPano:InitialViewPitchDegrees>
    <GPano:InitialViewRollDegrees>0.0</GPano:InitialViewRollDegrees>
    <GPano:InitialHorizontalFOVDegrees>75.0</GPano:InitialHorizontalFOVDegrees>
    <GPano:CroppedAreaLeftPixels>90</GPano:CroppedAreaLeftPixels>
    <GPano:CroppedAreaTopPixels>128</GPano:CroppedAreaTopPixels>
    <GPano:CroppedAreaImageWidthPixels>2300</GPano:CroppedAreaImageWidthPixels>
    <GPano:CroppedAreaImageHeightPixels>1042</GPano:CroppedAreaImageHeightPixels>
    <GPano:FullPanoWidthPixels>4000</GPano:FullPanoWidthPixels>
    <GPano:FullPanoHeightPixels>2000</GPano:FullPanoHeightPixels>
</rdf:Description>

You must modify the last six numbers to values that works for this particular image. More information here https://developers.google.com/streetview/spherical-metadata?hl=en

Use your favorite search engine to find a software that can inject XMP tags.

---

But I highly doubt it's interesting to use PhotoSphereViewer for such image, there are other JS libs to display simple panoramas with panning and zooming.

[mistic100]

You can actually inject this config without using XMP tags :

new PhotoShereViewer({
  container: 'viewer',
  panorama: 'my-image.jpg',
  pano_data: {
          // potential size of the full sphere projection
          full_width: 6000,
          full_height: 3000,
          // actual size of the image
          cropped_width: 3840,
          cropped_height: 1200,
          // position of the real image in the projection
          cropped_x: 1080,
          cropped_y: 900
  }
})