How to display different map sizes

Phoca Maps - displaying maps in Joomla! CMS
BMM01
Phoca Newbie
Phoca Newbie
Posts: 2
Joined: 27 Sep 2022, 11:14

How to display different map sizes

Post by BMM01 »

I am using Joomla 4.2.2 and PhocaMaps 4.0.0. Template is Rocket Theme Versla 1.5.0. Gantry version 5.5.14

I would like to have a 350 px x 600 px map on phone and a 900 px x 600 px map on tablet / desktop.

I figured that I could use the Gantry module hide / display suffix class to hide or display the module depending on screen resolution.

I created two maps - one with 350px x 600px and one with 900px x 600px.

I created two articles - one with the map reference 1 and the other with map reference 2.

I then created two different modules - one for each article. The first has the module suffix "visible-phone" and the second with "hidden-phone".

The module displayed changes as desired, but the map is the same size (350px x 600px) regardless of which module is displayed.

Any ideas on what the problem could be? Or another solution (mine is quite complicated).

Thanks

Tags:
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: How to display different map sizes

Post by Jan »

Hi, I think, the best way is only use the CSS, just create only one map and stylize the widht and height for it in CSS (per media query in CSS you can set different size for different views)

Jan
If you find Phoca extensions useful, please support the project
BMM01
Phoca Newbie
Phoca Newbie
Posts: 2
Joined: 27 Sep 2022, 11:14

Re: How to display different map sizes

Post by BMM01 »

Thanks Jan

Don't know why I didn't do this but I set the width to 100% and it works fine.

Thanks for a great extension.
Brett
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: How to display different map sizes

Post by Jan »

Ok, great to hear it.

Jan
If you find Phoca extensions useful, please support the project
Post Reply