×

Notice

The forum is in read only mode.
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Change Map Height for Mobile Devices

Change Map Height for Mobile Devices 2 years 10 months ago #29325

  • Blake McClelland
  • Blake McClelland's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • 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 2 years 10 months ago #29332

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 154
  • 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

Change Map Height for Mobile Devices 2 years 10 months ago #29333

  • Blake McClelland
  • Blake McClelland's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • 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

Change Map Height for Mobile Devices 2 years 3 months ago #31616

  • Nadudvari Janos
  • Nadudvari Janos 's Avatar
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
Good question! :)

Change Map Height for Mobile Devices 1 year 8 months ago #33507

  • Pete Stewart
  • Pete Stewart's Avatar
  • Offline
  • Fresh Boarder
  • 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?

Change Map Height for Mobile Devices 1 year 8 months ago #33510

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 154
  • 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

Change Map Height for Mobile Devices 1 year 6 months ago #33787

  • Jan Pihl
  • Jan Pihl's Avatar
  • Offline
  • Fresh Boarder
  • 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 1 year 6 months ago #33791

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 154
  • 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 1 year 6 months ago #33794

  • Jan Pihl
  • Jan Pihl's Avatar
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 6
  • Thank you received: 0
Great - now it works perfect!

Change Map Height for Mobile Devices 1 year 2 months ago #34569

  • Jan Pihl
  • Jan Pihl's Avatar
  • Offline
  • Fresh Boarder
  • 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

Change Map Height for Mobile Devices 6 months 1 week ago #35807

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • 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

Change Map Height for Mobile Devices 6 months 1 week ago #35808

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 8
  • Thank you received: 0
Which file is this ?

Change Map Height for Mobile Devices 6 months 3 days ago #35815

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 154
  • Thank you received: 1081
Hey Kent,
Which is the first edit you refer to?

Change Map Height for Mobile Devices 6 months 2 days ago #35825

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • 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 5 months 3 weeks ago #35859

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • 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

Change Map Height for Mobile Devices 5 months 3 weeks ago #35866

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 154
  • 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 5 months 3 weeks ago #35875

  • Simon Rodway
  • Simon Rodway's Avatar
  • Offline
  • Fresh Boarder
  • 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 5 months 3 weeks ago #35880

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • 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 5 months 2 weeks ago #35889

  • Kent Morrison
  • Kent Morrison's Avatar
  • Offline
  • Fresh Boarder
  • 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
  • Page:
  • 1
Time to create page: 0.146 seconds