1

I am writing a JQuery Openlayers javascript web application that connects to a API, which exposes a million geo located points plus metrics and information about the points.

One metric is a points importance, so the points can be ordered and limited by this metric. I can request from the API a limited amount of points within a bounding box.

The application is to be mobile optimised, which means I need to detect the screen size, taking into account pixel density, and change the amount of points to be queried and displayed as markers to the user.

The markers are similar in size and look to google maps api marker/pin icon. The user can tap a marker and display a call out.

So for a iPhone 3g, 4 and 4S a limit of 20 would be fine, an iPad 50, but for a desktop it's possible that it should be related to the current size the user has chosen for the map.

The application is to be responsive to layout and the user can choose how many information panels to show, so it's possible on the iPad the limit should decrease as more panels are "unfolded". In fact the map is secondary, and this will be "foldable" too.

How do I determine the screen size of mobile/desktop devices, including taking into account retina displays (i.e. denser displays don't display more markers)?

Can I also determine the current map display area too?

Improve this question
2
  • For the map area, do you mean the width/height of the map or the geographic extent covered by the map at a given zoom level?
    – Below the Radar
    Aug 20, 2014 at 12:35
  • The Map div width and height in pixels so that I can determine how many 10 by 20 pixel marker icons I can optimally display. So 20 icons works well on an iphone 4 display. The iphone 3G has the same size screen, but less dense pixels so I need to take "retina" displays in account.
    – MichaelStoner
    Aug 20, 2014 at 12:45

1 Answer 1

Reset to default
1

For the map div sive you can use the getSize() function that returns a openLayers.Size instance that have width and height properties

see: http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.getSize

map = new.OpenLayers.Map('map');
size = map.getSize()
width = size.w
height = size.h
Improve this answer
1
  • Thanks, missed that, my bigger issue is detecting pixel density, but I think that might be solved using the view port meta tag.
    – MichaelStoner
    Aug 20, 2014 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.