Change Map Height for Mobile Devices

Change Map Height for Mobile Devices 9 years 4 months ago #29325

Blake McClelland
Topic Author
Offline
Fresh Boarder
Posts: 16
Thank you received: 0

Hi!
I would like to know if there is a way to change the height of the map for mobile devices?
As mobile devices display the map above what is normally the side panel, is there a setting somewhere to make the map a little bigger on mobile devices?
The map height setting in the config doesn't seem to change anything on the mobile version.
Thanks!

Change Map Height for Mobile Devices 9 years 4 months ago #29332

Daniel Dimitrov Away Administrator Posts: 9618 Karma: 155 Thank you received: 1081	Hey Blake, There is no setting for this. The map takes I think 200px and leaves the rest for the menu. REgards, Daniel Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 9 years 4 months ago #29333

Blake McClelland Topic Author Offline Fresh Boarder Posts: 16 Thank you received: 0	Which file contains the parameter for the height? I just need to tweak the height as my map relies more on seeing the markers and less on the menu. Thanks Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 8 years 9 months ago #31616

Nadudvari Janos Offline Fresh Boarder Posts: 7 Thank you received: 0	Good question! Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 8 years 2 months ago #33507

Pete Stewart Offline Fresh Boarder Posts: 17 Thank you received: 0	Is there an answer to this questioon? I'd really prefer more map height on the mobile screen; where is the height being set? Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 8 years 2 months ago #33510

Daniel Dimitrov Away Administrator Posts: 9618 Karma: 155 Thank you received: 1081	media\com_hotspots\js\v4\apps\map\show\show_view.js this is where we set the height of the map. It's either 200px or 150px depending on the device. You can change the values in that file and then the map should be bigger. Regards, Daniel Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 8 years 2 weeks ago #33787

Jan Pihl
Offline
Fresh Boarder
Posts: 6
Thank you received: 0

I can't get this to work on my iPhone.
I have changed this file and to:

/**
 * Created by DanielDimitrov on 25.03.14.
 */
HotspotsManager.module("MapApp.Show", function (Show, HotspotsManager, Backbone, Marionette, $, _) {
 
	Show.MapView = HotspotsManager.Common.MapApp.MapView;
 
	Show.Map = HotspotsManager.Common.MapApp.Map.extend({
		resize: function() {
			var height = 500;
			if($(document.body).hasClass('hs-small-device')) {
				this.$el.css('width', '100%');
				if ($(window).height() < 480) {
					height = 450;
				}
				this.mapView.$el.css('height', height);
			} else {
				this.$el.css('width', '100%').css('width', '-='+this.widthRestriction+'px');
				this.mapView.$el.css('height', HotspotsManager.mainRegion.$el.height());
			}
			google.maps.event.trigger(this.mapObj, 'resize');
		}
	});
 
	var map;
	HotspotsManager.reqres.setHandler("map:object", function(){
		return (function(){
			if(!map){
				var model = HotspotsManager.request('map:entity');
				map = new Show.Map({model: model});
			}
			return map;
		}());
	});
});

But on my iPhone it is still very small.
I have deleted cache in joomla and on my iPhone.
see: padleopplevelser.no/index.php/no/turer/allplaces

Change Map Height for Mobile Devices 8 years 2 weeks ago #33791

Daniel Dimitrov
Away
Administrator
Posts: 9618
Karma: 155
Thank you received: 1081

Okay, Jan you are right.

You need to modify the media\com_hotspots\js\v4\apps\menu\show\show_view.js file as well.

When we have the .hs-small-device class apended to the body, the menu has a css top value applied which is equal to the height of the map. In the resize function just change

resize: function() {
			if($(document.body).hasClass('hs-small-device')) {
				var height = 200;
				if ($(window).height() < 480) {
					height = 150;
				}
				this.$el.css('height', HotspotsManager.mainRegion.$el.height()-height);
				HotspotsManager.menuRegion.$el.css('top', height);
			} else {
				this.$el.css('height', HotspotsManager.mainRegion.$el.height());
				HotspotsManager.menuRegion.$el.css('top', 0);
			}
 
			HotspotsManager.trigger('menu:resized', this);
		},

150 in the above code to whatever you need and then it should be correct.

Change Map Height for Mobile Devices 8 years 2 weeks ago #33794

Jan Pihl Offline Fresh Boarder Posts: 6 Thank you received: 0	Great - now it works perfect! Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 7 years 8 months ago #34569

Jan Pihl Offline Fresh Boarder Posts: 6 Thank you received: 0	Please Could you put this into the component, in a future update, it would be great not tho hardcode change this every time there is an update. Please Deareat Jan Pihl Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 7 years 3 days ago #35807

Kent Morrison Offline Fresh Boarder Posts: 8 Thank you received: 0	I cannot determine the FIRST edit documented here and the SECOND edit does not accomplish a solution. PLEASE DOCUMENT this "fix" and tell the rest of us how to GET A BIGGER MAP ON MOBILE ? The default map size on mobile is pitiful. Please ? THANK YOU! Kent Morrison Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 7 years 3 days ago #35808

Kent Morrison Offline Fresh Boarder Posts: 8 Thank you received: 0	Which file is this ? Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 6 years 11 months ago #35815

Daniel Dimitrov Away Administrator Posts: 9618 Karma: 155 Thank you received: 1081	Hey Kent, Which is the first edit you refer to? Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 6 years 11 months ago #35825

Kent Morrison
Offline
Fresh Boarder
Posts: 8
Thank you received: 0

Daniel,
Thanks for this reply !
I have reviewed the forum entries regarding the map height on mobile devices (iphone, android phone) several times, and just cannot get the results that I want.
I have modified the file:
media/com_hotspots/js/v4/apps/map/show/show_view.js
so that the value "150" has been changed to "550"

and I have modified the file
media/com_hotspots/js/v4/apps/menu/show/show_view.js
so that the value "150" has been changed to "550"

and flushed the cache on browser and on server (joomla)

The map on my android phone is still tiny, very tiny.
I cannot show the new map to my client on mobile, he won't like it.

The map is beautiful on desktop, and I have almost figured out how to make Hotspots do everything that we need from a map.
Here it is, I'll be submitting it to you for promotional display when it goes live:
portstoplains.com/index.php/new-map

Please let me know how to increase the height of the map on smart phones ?
I have attached a photograph of the smart phone display (samsung galaxy 5)
Thank you!
Kent

Attachments:

Change Map Height for Mobile Devices 6 years 11 months ago #35859

Kent Morrison Offline Fresh Boarder Posts: 8 Thank you received: 0	Daniel, Still hoping for a method to increase map height on mobile. I cannot roll this new map out for my client until I get this issue resolved. Please let me know ? Thanks, Kent Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Change Map Height for Mobile Devices 6 years 11 months ago #35866

Daniel Dimitrov
Away
Administrator
Posts: 9618
Karma: 155
Thank you received: 1081

Hey Kent,
I don't know about your android device, but the changes are working. Maybe not the way you expect them to, but they work

The line that you've modified in both files looked like this:

if ($(window).height() < 480) {
					height = 550;
				}

$(window).height() - this is the height of the browser window. So, if the browser window height is smaller than 480px -> make the height of the map 550px. This works. Just make the browser window smaller.
It's most probably not working on your android phone, because it has a height of more than 480px

Also it doesn't really make sense if you have a height of 480px to have a map that is 550px in height. Then the user won't see the whole map all the time.

Regards,
Daniel

Change Map Height for Mobile Devices 6 years 11 months ago #35875

Simon Rodway
Offline
Fresh Boarder
Posts: 12
Thank you received: 0

Hi
I'd just like to add something to this discussion, as I just spent a bit of time getting my mobile display back to a reasonable size after upgrading Hotspots to the latest version.
It seems that you do have to change the line;

var height=200;

as well as the other values. It wasn't until I altered this line upwards that anything happened. Just though I'd add this.
Thanks
PS, would still be great to have this coded into the component somewhere, Daniel, as mobile use is pretty critical, and it seems a shame to have this small problem on such a great map extension....

Change Map Height for Mobile Devices 6 years 11 months ago #35880

Kent Morrison
Offline
Fresh Boarder
Posts: 8
Thank you received: 0

Daniel,
I have tried modifying all three values, and cannot get the proper results.
I'm afraid that I do not understand the variables here, or the logic involved.
Please help me to adjust this map so that it is a readable/useable height on mobile devices.
I also think that these parameters need to be available in the backend options, rather than making us tinker with the code and then have to re-tinker after each update.
ALSO - this link: mydevice.io/devices/
for sizes of various devices in px

ALSO - can the changes to these show_view.js files be accomplished with an override ?
If so, what would be the correct directories to create and use for the overrides ?

Thank you
Kent

Change Map Height for Mobile Devices 6 years 11 months ago #35889

Kent Morrison
Offline
Fresh Boarder
Posts: 8
Thank you received: 0

I have fiddled with these values (total trial and error, still makes no sense to me) and have arrived at an acceptable appearance on mobile as well as desktop.

For the file named :
media/com_hotspots/js/v4/apps/map/show/show_view.js
---
...
Show.Map = HotspotsManager.Common.MapApp.Map.extend({
resize: function() {
var height = 550;
if($(document.body).hasClass('hs-small-device')) {
this.$el.css('width', '100%');
if ($(window).height() < 641) {
height = 300;
...
---

For the file named :
media/com_hotspots/js/v4/apps/menu/show/show_view.js
---
...
resize: function() {
if($(document.body).hasClass('hs-small-device')) {
var height = 550;
if ($(window).height() < 641) {
height = 300;
...
---

I have saved these files within their respective directories with the files extension .WORKS, so that after updates I can go back and make the same changes again.

It would be VERY useful to know if this can be accomplished with OVERRIDES, and if so, what the exact folder and file name should be used to accomplish the override.

Thanks again for all of your help.
Regards,
Kent

Tiles

CMC

CMandrill

FFGate

CUpdater

CNotes

Mydigipass

CSlideshow

Pricing

Joomla! Development

Joomla! Security

App Development

Angular 2

Official releases

Developer releases

Languages

Help Desk

Support policy

Hotspots

Matukio Events

CComment

Ctransifex

CMC

CNotes

CMigrator

CMandrill

MyDigipass

CForms

CForms for WordPress

Video Tutorials

Changelogs

Matukio API Docs

Team

Joomla Commitment

Privacy Policy / Imprint

Notice

TOPIC: Change Map Height for Mobile Devices