search

mapillary / mapillary-js

Interactive, extendable street imagery map experiences in the browser, powered by WebGL
https://mapillary.github.io/mapillary-js
MIT License
446 stars 85 forks source link

Image Cover Effect: Is it possible to force image to always "point" to the street? #590

Closed ivensgoncalves closed 1 year ago

ivensgoncalves commented 1 year ago

Basic information

MapillaryJS version: 4.1.1 When Mapillary instance dimension has larger width size compared to height size, image does apply "css cover effect" and street gets hidden for some images, having the impression camera is pointing to the sky.

And when user "corrects" the camera position, when he/she clicks the forward arrow, mapillary does re-center vertically the camera again. Is there a way to "keep" the angle of the camera when you move forward or backward?

I am aware of the LetterBox RenderMode, but I was trying to find a solution for full width render.

So, basically my 2 questions are:

  1. Is it possible to make camera always pointing to the street?
  2. If not, is it possible to "keep" camera angle after user manually corrects it?

Thanks in advance.

Steps to Reproduce Behavior

  1. Create mapillary Viewer instance with larger width compared to height
  2. Use some specific image ids, such as 317263166462858 or 791034201550956 or 824286068471618
  3. Open in the browser and activate mapillary instance: Camera will look like pointing to the sky

Code Sample

https://codesandbox.io/s/zealous-shadow-mwcrp9 (Open in new window to visualize it better)

Additional information

image

oscarlorentzon commented 1 year ago

@ivensgoncalves Thanks for the question.

There is currently no way to achieve achieve what you are asking for in a smooth way. With the Street camera controls the Viewer always centers the Viewpoint when moving to a new image.

It is possible to change the viewpoint non-smoothly programatically using the Viewer.setCenter method method (see the Viewer - Core Functionality - Viewpoint example), e.g. every time after a new image has been selected and the viewer has stopped moving (see the image and moveend events). For your use case I do not think that would result in a particularly nice behavior though. Also, with the Street camera controls active there is always the "risk" that it will bounce back towards the center depending on the undistortion model for the current image as well as the aspect ratio of the current image and the viewer container.

The proper solution (which is significantly more time consuming) is to add a new type of freer camera control that does not bounce towards the center of the image and maintains a lookat vector relative to the center of the image when transitioning between images. That camera control would be implemented as a new state next to the TraversingState which is the backing implementation for the Street camera controls.

ivensgoncalves commented 1 year ago

@oscarlorentzon Thank you for your detailed explanation.

I will try to follow your suggestion.