RESIZING HERE MAPS-HELP
I'm building an Ionic app with HERE maps. When I change my phones orientation I call maps.getViewPort().resize(), but it doesn't work.I had set my div background where the map is to red and background is 100% width which is correct but maps don't scale.So I will be happy if you have some solutions.
Picture: Event when phones orientation is changed
Code of event:
Phone Screen :
Managed to find a solution. The problem was that screenOrientation function was called faster than maps would resize so adding a 250ms delay worked fine for me.
Related
Wanted to add pinch zoom feature in a ionic mobile app. So tried using the pinch-zoom-canvas javascript in npm. So my task was to show the canvas in a modal on clicking a image which can then be pinch zoomed. The problem is that it only works for the first time after that the modal is not showing the image in canvas. When inspected through chrome, the canvas's clientWidth and clientHeight is automatically setting to 0 after the first time. Tried to fix this by setting width and height through inline css and style.css, but not working.
This is the link to the pinch-zoom-canvas js in npm: https://www.npmjs.com/package/pinch-zoom-canvas
The sample function code used in the project
I am trying to implement photoswipe in a new website, but for the life of me, I can't figure out why the zoom button won't show up. I tried in chrome and IE. I can pinch to zoom in mobile, but that may just be the built in zoom capability of the mobile device.
Everything else seems to be working like a charm.
Have you tried using a test picture with a high resolution on your computer (over 1500x1500x)? When my picture is already at 100% width and height no zoom button is shown. When it's under 100% a zoom button is shown.
I'm pretty new to the Google Maps API.
I'm building a simple Maps App for our TV platform here at work, the TV uses a custom webkit browser and I've confirmed that the Maps API works well on it.
Currently when you load a simple app like this on our TV (Code is given in below links):
http://markpaul.name/dont-delete/other/sample-maps-app.html
You first need to use the mouse to "click" on the screen to "focus" the map. Only after this, the map embed "activates" and you can use the up, down, left, right keys to navigate the map.
The problem I have is this; on a TV you dont have a mouse so you cant "click" to "focus"!
Is there anyway you can programatically "focus" the Google Map so I can use the arrow keys on the remote (which usually map to the keyboard up, down, left, right keys) to navigate the map?
Thanks in advance,
Mark
UPDATE:
My code can be seen here - http://codepen.io/newbreedofgeek/pen/EaugH
The full screen app in codepen is here - http://codepen.io/newbreedofgeek/full/EaugH
The hosted full screen app (minus autogenerated CodePen markup in full screen codepen view) is here - http://markpaul.name/dont-delete/other/sample-maps-app.html
I checked you source code and my feel is that somewhere the map's position is getting changed. So by triggering the Google map's resize it would fix your problem.
google.maps.event.trigger(map, 'resize');
Add the above code after initializing the Google maps. This would fix the problem.
I have a problem similar to one described in the following questions.
KineticJS : scaling issue while using custom clipFunc on 2x pixel aspect display
In my application: (please try on retina ipad vs normal ipad or desktop browser, even iOS simulator would also do)
There is are two canvas layers, one of them contains a blanket group that I scale with pinch-zoom gesture in the range of 0.5x to 1.5x
On the retina screen my canvas gets zoomed out to 1/4 the screen when at 0.5x
Now, with the change suggested in the comments, I managed to make it scale it properly however touch events are no longer scaled accordingly. Any ideas whats going on here?
Note that it is working perfectly on non-retina screens.
Am using KineticJS 4.4.3 - as its was an academic project that began early this year for proof-of-concept and now I'm continuing it to make a complete application.
Thanks!
My problem got solved after I upgraded to KineticJS 4.7.4
It however broke the clipping code I had as clipFunc was deprecated but that's a different issue which was resolved by resetting clip parameters on dragmove event.
Not an efficient solution but it works for now!
What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6