Page 1 of 1

Map responsive

Posted: Sun Feb 03, 2019 10:58 am
by edgar_ali
I've got a tour that have a map in the centre of the tour...I created a button that allows to hide and show the map whenever a click on that button..

Now the issue is that when I decrease the size of the browser or I see the tour on my mobile, the map does not resize according to the size of the browser/screen..

I was reading in the post that you can use a trigger "is Mobile" (in the logic block) to solve this problem...

So I went into the Map element, then into size and created a logic block

I created the following logic block:
trigger= is Mobile
comparison: = (equal)
value: true

using this website: http://iosres.com , I selected the logical resolution320x568

so if the value is 320x568, then the map resize...however when I decrease the size of the browser the size of the map does not decrease...

Should I do this differently??

Re: Map responsive

Posted: Mon Feb 04, 2019 10:09 am
by Tony
Hi Edgar,

If we break down what you want to do it would probably go like this...

a. The device is a mobile device, an smartphone
b. The orientation of the screen is portrait
c. The width of the screen viewport is 360px

So you need to select the container that holds your map elements and set a Scale Logic Block like the one below...

p2vr-scale3.jpg
p2vr-scale3.jpg (836.04 KiB) Viewed 3037 times

a. The first Trigger (Is Mobile) detects for a mobile device, the assumption being we don't want it to scale on a desktop
b. The second Trigger (Player Aspect Ratio) detects the orientation of the device < 1 = Portrait
c. The third Trigger (Player Width) determines when the change takes place <= means equal to or less than. You cannot use just = as it would only scale at that one particular point of size.

You would probably want to do a different set of Triggers for Landscape.

I've a sample file at https://rebrand.ly/gasworks-scale that shows a reduced map on mobile (portrait) but normal size on desktop

Tony

Re: Map responsive

Posted: Tue Feb 05, 2019 12:23 am
by edgar_ali
Tony:

I followed your steps as shown in this photographs

Image

Image

Then uploaded the tour in my phone using the app "Documents"

But the map still has the same size..

Any suggestions?

Re: Map responsive

Posted: Tue Feb 05, 2019 3:53 am
by Tony
Can you show me a screenshot of your Scaling Logic Block?

Also you don't seem to be using percentages on your map element. If you use percentages is just scales automatically to match the size of the viewport.

Re: Map responsive

Posted: Tue Feb 05, 2019 11:07 am
by edgar_ali
Tony:

In the skin tab "Position", I changed from pixels to percent, same in the size tab, and now it is working :)

If I want to add another condition...that the map resize when the desktop browser resize...

How can I do that?

I also have got some text boxes...Can I apply the same procedure that I did for the Map to the text boxes, so these resize in mobile devices?

Re: Map responsive

Posted: Wed Feb 06, 2019 3:11 am
by edgar_ali
As I said before now the logic block for the map is working and the size of the map decrease when the tour loads on a mobile...

I also tried to apply the logic block for the text boxes, however not sure if I have to apply to one element or to do it to all...let me explain further:

In my skin I have a container called "userdata", then within that container I have a text element called "description" and another element called "userdatabag"...

So do I need to apply the logic block to all of those?

I just tried applying the logic block to the container but it did not work.

Also, how can I do so the map is also responsive when decreasing the size of the bowser in the desktop?