Map window adjustment in Mobile View

[rajesh@nearestate.in]

Hi
Iam trying to adjust map window in mobile view, but tour is appearing behind Map window, can't we adjust map window and tour window proportionately. I Mean Tour window should adjust screen with map window (should not go behind Map).

using 3D arrow hotspot component customized skin with Google maps window

1.jpeg (81.32 KiB) Viewed 1109 times

Please help.

Rajesh
Pano2VR Pro 7.1.1a
windows 11 pro

[Tony]

Hi Rajesh,

Yes, you will have to use margins. Martin has posted a tutorial that you can find here viewtopic.php?p=73070#p73070

Cheers,

Tony

[rajesh@nearestate.in]

Hi Tony
Thanks for sharing valuable information.

Its working superb for adjusting map window according to devices aspect ratios without covering Panorama.
But here my requirement is "In desktop/laptops, Map window should be sub container of Panorama, when comes to mobile devices, it should be works like Margin concept (like what you shared) without need of mouse click "

Simply in one line > When tour starts, if it desktop/laptop > Map window should appear as sub container > if its Mobile > Map window should works like Margin (map should automatically placed in Margin )"

Step 1: (Desktop/Laptop)

2.png (1.3 MiB) Viewed 1064 times

Step 2: (Mobile devices)

1.jpeg (81.32 KiB) Viewed 1064 times

[Hopki]

I had a bit more of a think about it.
Using a variable to detect the player width you only need one map element which makes it more dynamic when rotating the phone.
The margin is set by using a variable changed and then the action filter.
Also when viewed on a desktop, so a screen wider than 1024px the map element also positions itself 10px from the bottom and left.
Regards,

[rajesh@nearestate.in]

Hi Hopki,
Excellent working, what exactly we are looking is you delivered with "Map_2".

Thanks alot.

[Tony]

Hi Rajesh & Martin,

Funny I've been playing with this today and I just went to the forum to post my example and Martin has beaten me to it.

I've just published a version that uses a single map as Martin does in his example. I've gone a bit further and added in the margin changes as well.

You can test it out here: https://tonyredhead.link/marginmap. Because of the screen real estate I've set the iPad to be same as the desktop.

I've checked on Desktop/iPhone/iPad/Pixel5 and it looks good.

Desktop

htm-3.png (3.46 MiB) Viewed 1031 times

iPad

htm-3.png (3.46 MiB) Viewed 1031 times

iPhone

htm-4.png (836.12 KiB) Viewed 1031 times

Pixel5

htm-6.png (822.75 KiB) Viewed 1031 times

Cheers,

Tony

[rajesh@nearestate.in]

Hi Hopki
Looking for little better user experience like below

Desktop > like in this below image, there are "Toggle Full screen" icons on both panorama & Map (Note: when we click on Panorama Full screen, Map should be hidden and vice versa for Map also)

Desktop_1.png (690.58 KiB) Viewed 1015 times

Mobile > Here also there is a Feature of Toggle Full screen & Escape Full screen is there (pls observe in video file)

2_Mobile.jpeg (125.28 KiB) Viewed 1015 times

WhatsApp Video 2024-09-03 at 7.22.10 PM.mp4

(2.18 MiB) Downloaded 40 times

Thanks
Rajesh

[Tony]

Hi Rajesh,

I'm a bit confused as you have two different Desktop layouts now! Can you explain a bit more what's going on with the desktop layout?

Tue Sep 03, 2024 4:00 pm "Step 1: (Desktop/Laptop)" you have a small map in the bottom left hand corner.

Wed Sep 04, 2024 1:04 am "Desktop Image" you have a large map the same size as the panorama.

Tony

[rajesh@nearestate.in]

Hi Tony
just looking for for better user experience, as Iam going through Google street View user experience, I felt it was good.

So just want to to with Sep 4th requirement, which is google street view like interface.

Thanks
rajesh

[Tony]

Hi,

So just want to to with Sep 4th requirement, which is google street view like interface.

Okay, I think this is more inline with what you are trying to achieve. https://tonyredhead.link/marginmapgoogle

Desktop

marginmap-1.jpg (1.75 MiB) Viewed 912 times

Mobile

marginmap-5.jpg (1.3 MiB) Viewed 912 times

Tony

[rajesh@nearestate.in]

Hi Tony,
Excellent this is what we are looking exactly. I appreciate your excellency in pano2VR.

Can I get downloadable skin please.

Thanks
Rajesh

[Tony]

Hi,

I'm still working on the skin and I've just created a responsive version (some funny bits still). https://tonyredhead.link/marginmapresponsive

Here are some screenshots.

Desktop: Landscape

marginmap-0.jpg (1.61 MiB) Viewed 863 times

Desktop: Portrait

marginmap-1.jpg (1.49 MiB) Viewed 863 times

iPad: Landscape

marginmap-3.jpg (1.42 MiB) Viewed 863 times

iPad: Portrait




Mobile Phone: only portrait at the moment.

marginmap-2.jpg (1.5 MiB) Viewed 863 times

[Tony]

Hi,

Last Update almost there: https://tonyredhead.services/P2VR/MARGINS/RESPONSIVE/

Tony

[Tony]

HI,

Most recent update. https://tonyredhead.services/P2VR/MARGI ... E/CHIRPOY/

marginmap-0.png (2.3 MiB) Viewed 576 times

Tony