Rotating map according to device heading
Hi there,
Does anyone know's if there is an function like in the native maps app, that let's you rotate the map according the heading from the compass? And is it for android and iPhone?
6 Answers
-
Sure thing. Try this:
Ti.Geolocation.addEventListener('heading', function(e) { if (e.success) { var t = Ti.UI.create2DMatrix(); t = t.rotate(360-e.heading.magneticHeading); map.transform = t; } });
-
This helped me, but when I change the map orientation, it doesn't change the controls orientation; so, the map changes fine but the controls are disordered. Is there any solution?
-
Anyone?
-
The heading can be jerky if the device's orientation is changing quickly. To smooth out the readings, you can
use a lowpass filter or this handy compassSmoother//Smoothe MagneticHeading function createCompassSmoother(smoothingFactor) { var compassSmoother = {}; var headingVector = []; compassSmoother.smooth = function(newHeading) { var newHeadingVector = [ Math.cos(newHeading * Math.PI / 180), Math.sin(newHeading * Math.PI / 180)]; if (headingVector.length == 0) { headingVector = newHeadingVector; } else { headingVector[0] = headingVector[0] * (1-smoothingFactor) + smoothingFactor * newHeadingVector[0]; headingVector[1] = headingVector[1] * (1-smoothingFactor) + smoothingFactor * newHeadingVector[1]; } return ((Math.atan2(headingVector[1], headingVector[0]) * 180/Math.PI) + 360) % 360; } return compassSmoother; } var compassSmoother = createCompassSmoother(0.22); var t = Ti.UI.create2DMatrix(); t = t.rotate(bearing - compassSmoother.smooth(e.heading.magneticHeading));
SmoothingFactor should be between (0 and 1]
By choosing an appropriate smoothingFactor you can determine how quickly the compass settles in on a reading. Hi factors settle quickly, but jerky, low factors slowly and smoother
-
The readings are not frequent enough or accurate enough to smoothly animate. But at least is doesn't do the 180 degree flip flop as it crosses from 359 to 0. I think we might be able to smooth it further by reading the accelerometer.
-
We probably need to use an animation instead of just the transform.