blackberry / bbUI.js

BlackBerry UI look and feel JavaScript toolkit for WebWorks
Apache License 2.0
312 stars 192 forks source link

Openlayers show small map #957

Closed jcarabetta closed 11 years ago

jcarabetta commented 11 years ago

Hey, i don't know if this is an issue with bbui or the way maps load on Webworks apps but here is the problem: When i load an Openlayers map directly as an app (without bbui) it scales up the layers to show the text of the streets bigger (because of the dpi), but when i add it to my bbui app it shows as if it was in a desktop browser (text is so small you can hardly read it). It seems the problem is the meta viewport being set automatically, but im not really sure, do any of you know how can i fix this? Thank you.

Edit: I tested it and openlayers needs the viewport set at scale=1.0 and width=device-width to show the map at a scale you can read the text in the map, but bbUI sets the scale at 0.44 so it makes the map scale down. If i set the viewport manually for the page the map show fine, but the action bar grows in size, almost double. I hope you can help me because if i can't make the map larger i'll have to use another framework, and i prefer not to do that. Thanks!

tneil commented 11 years ago

bbUI requires the viewport to be set the way the toolkit initializes. The only thing I can think of to try and get around it would be to insert the map as part of an iframe that has the viewport set the way you need.

jcarabetta commented 11 years ago

I've tried using an iframe but it doesn't work, i read that iframe's can't set their parents meta tag. I've also tried setting the zoom of the div at 2, making it loot bigger, but the touch controls go out of bounds. The only solution at this moment involves changing the css of bbUI in that specific page to make the action bar smaller.

tneil commented 11 years ago

Unfortunately I don't think there is much that can be done... with the v1.0 work that we are doing we are leaving the zoom level as-is so that this wouldn't be a problem. But today I don't see any quick work around.

hendrik-dev commented 11 years ago

I ran into the same problem with the Google Maps API. I solved it by applying CSS zoom to the map canvas div and then adjusting the div's height and width according to the zoom amount.

It's only a workaround and still has some issues: Pinch to zoom gestures are not scaled by the zoom amount and places on the Google Map are not clickable (markers are however).

Glad to hear that this won't be needed anymore with v1.0.