Adds support to animateToBearing and animateToViewingAngle ( IOS + Android ) #1544
Conversation
sandinosaso
force-pushed
the
AnimateToBearing-And-AnimateToViewingAngle
branch
2 times, most recently
from
b00f8fd
to
7006e3a
Compare
|
Thanks a lot for this! Looking forward to the Android support. |
|
Is this only possible with Google Maps on iOS? Can we add this to native maps as well? |
| @@ -64,6 +64,8 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres | |||
| |---|---|---| | |||
| | `animateToRegion` | `region: Region`, `duration: Number` | | |||
| | `animateToCoordinate` | `coordinate: LatLng`, `duration: Number` | | |||
| | `animateToBearing` | `bearing: Number`, `duration: Number` | | |||
| | `animateToViewingAngle` | `angle: Number`, `duration: Number` | | |||
There was a problem hiding this comment.
Add note about it only being available on Google maps for iOS.
There was a problem hiding this comment.
@christopherdro I think MapKit also allows you to set the bearing in degress, seems that they only call it differently (heading): https://developer.apple.com/documentation/mapkit/mkmapcamera
var heading: CLLocationDirection
The heading of the camera (measured in degrees) relative to true north.
I feel that bearing (https://en.wikipedia.org/wiki/Bearing_(navigation)) is a more proper name.
For the Viewing Angle of the camera I am not so sure if ViewingAngle is better than pitch (how MapKit on IOS call it):
var pitch: CGFloat
The viewing angle of the camera, measured in degrees.
I think is possible to add the support for MapKit (IOS provided) as I did for GoogleMaps, the only thing is I want to know your position regarding naming? Should we follow GoogleMap or MapKit name convention?
There was a problem hiding this comment.
I added support for the IOS native map...Basically, I do (for both animations) the difference is that in one I set some property on the camera before: Pitch (ViewAngle on GoogleMaps) and Heading (Bearing on GoogleMaps):
[AIRMap animateWithDuration:duration/1000 animations:^{
[mapView setCamera:mapCamera animated:YES];
}];
This is the commit: af3ff1e
There was a problem hiding this comment.
@christopherdro I addressed your PR comments :)
|
Guys I need feedback on the commit that adds support for IOS native map. The thing is that the animation is working ok when called for JS but I am experiencing a strange (or maybe not) behavior on my app. I am tracking user geolocation and when that changes I am centering the Map to his position (using animateToRegion) and rotating the map to the direction of move (using animateToBearing). My pseudo code is as follows: When using provider={GOOGLE_MAPS} everything works nice (as I showed in the gif on this PR) I am trying to figure out why is this happening but looking at MapKit code, but as I said I am not a Swift expert, not sure, I guess there is some batch processing of the animations and as they happen too quick I am not able to see the first one? Maybe my last commit is not doing well? and I am calling another Map instance? ...I am suspecting of something like that. I appreciate your comments :) |
|
Another thing I noticed is that Native MapKit on IOS does not show 3D like of building, it just rotates the map camera but I do not see same as when using GoogleMaps. Do you know guys if this is supported ? Example (on IOS using MapKit) of this.map.animateToViewingAngle(45) on this gif: The same code just with provider={PROVIDER_GOOGLE}: |
|
@mileung added Android support on the latest commit :)
|
sandinosaso
changed the title
sandinosaso
force-pushed
the
AnimateToBearing-And-AnimateToViewingAngle
branch
from
a78e112
to
12aa7fe
Compare
| @@ -220,6 +222,18 @@ public void receiveCommand(AirMapView view, int commandId, @Nullable ReadableArr | |||
| view.animateToCoordinate(new LatLng(lat, lng), duration); | |||
| break; | |||
|
|
|||
| case ANIMATE_TO_VIEWING_ANGLE: | |||
| angle = (float)args.getDouble(0); | |||
There was a problem hiding this comment.
I do not like the casting to float. I wonder if you guys know a better way of getting a float argument? Appreciate any help :)
There was a problem hiding this comment.
This isn't a huge deal. The cast has to happen at some point. There is usually a space after a type cast though.
|
@sandinosaso does this support passing in the bearing to the |
|
@EricPKerr this PR only support programmatically calling the I did not know about a discussion about the best approach to updating the map's viewport (via props or via methods) can you point me out the link where the discussion is being held? Regards. |
|
@sandinosaso there isn't really a discussion on this yet, but all of the examples I see for react-native-maps seem to favor using |
|
@EricPKerr I understand your concern, and I think is a topic to discuss (a new thread). For this particular PR I am doing I think having the ability to change the MapView camera (orientation/pitch/view-angle) programmatically is a MUST. If you plan your app to do some kind of Navigation feature (following user position, car driving, car parking, etc) you will need to call it programmatically, also not using Props allow me to do not do another render(). When changing camera orientation (programmatically and not doing a change on props) I am using same Map instance, so you do not need to force a re-render(). |
|
@sandinosaso I'm getting the following error with the last commit when i tried to run-android On ios it seems ok |
sandinosaso
force-pushed
the
AnimateToBearing-And-AnimateToViewingAngle
branch
from
12aa7fe
to
ecfc89b
Compare
|
@jonathanmauer Thanks you for trying and finding out that error. It worked for me because I was pointing directly to my local changes, I forgot to push a commit. I updated the PR, could you try again and let me know if it works now? |
|
@sandinosaso Its working now, but i have an strange bug. When the map angle is 45 in android, fitToCoordinates does not work. In ios its ok. For now, i have to use animateToViewingAngle after fitToCoordinates is complete. But it would be great if the angle could be 45(or any other) on app start edit ------------- Great job! Waiting for an release |
|
Can't wait for this to land, really appreciate the work here guys! |
|
@sandinosaso Hey, i have used it on android. But it returns, an error as " undefined is not a function(evaluating this._map.animateToBearing() ) " Can you help me to enable this feature clearly on android. I have configured all the settings what you have told on that fix. |
|
@thayanithik That error message makes me think that you are not pointing to the code on this PR. |
|
Nice work @sandinosaso. This is something I'd like to use ASAP. @christopherdro is there anything else this PR is waiting on? |
|
Great work @sandinosaso I've been trying to do this myself. |
|
Can't wait to have this merged! |
|
Anything that we can do to help move this along? Is there work going on to solve this on another thread somewhere? |
|
@aaronbuchanan I have the same question, maybe you are working on something similar or this is not the approach you guys want? Let me know, any feedback is appreciated I have heard nothing about why this is so quiet :) |
|
It feels like the owners might just be innundated, I've been maintaining my own fork that cobbles together a few fixes that are sitting on PRs right now but it's going to end badly if those things don't make it soon lol (sigh, it's true) 🍺 |
| @@ -220,6 +222,18 @@ public void receiveCommand(AirMapView view, int commandId, @Nullable ReadableArr | |||
| view.animateToCoordinate(new LatLng(lat, lng), duration); | |||
| break; | |||
|
|
|||
| case ANIMATE_TO_VIEWING_ANGLE: | |||
| angle = (float)args.getDouble(0); | |||
There was a problem hiding this comment.
This isn't a huge deal. The cast has to happen at some point. There is usually a space after a type cast though.
|
THANK YOU @gpeal !! |
|
Hi guys, facing an issue with certainely this PR, I have the message |
|
Cf the issue I was dropping (#1743), I would like to inform you that react-native-maps@0.17.0 (embedded in expo) doesn't work on ios nor android to animate bearing or viewing angle. Could we get deeper on this ? |
|
@sandinosaso Can you please share react native code like this image ? Because i have tried much way with your PR but not success |
|
Please share the code like the image Need it badly, Please help Thanks |
|
Thank you for working on this! Great feature |
|
@krunalpanchal @bacancy-suresh I can share code with you to behave like that example. What I am doing is: this.watchID = navigator.geolocation.watchPosition((position) => {
const animationPosition = getPositionWithOffset({ latitude: position.coords.latitude, longitude: position.coords.longitude }, { dn: 0, de: 0 });
const newRegion = {
latitude: animationPosition.latitude,
longitude: animationPosition.longitude,
latitudeDelta: LATITUDE_DELTA_CURRENT_POSITION,
longitudeDelta: LONGITUDE_DELTA_CURRENT_POSITION,
};
// const previousCoords = { latitude: this.state.region.latitude, longitude: this.state.region.longitude };
const distanceMoved = distanceBetweenPoints(this.state.latestUpdatePosition, position.coords);
const rotationAngle = getRotationAngle(this.state.latestUpdatePosition, position.coords);
console.log('Got new position, distanceMoved, rotationAngle', position, distanceMoved, rotationAngle);
const userCurrentPosition = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
};
if (distanceMoved > MIN_METERS_NEEDED_FOR_UPDATE_MARKERS) {
console.log('Going to call getNewMarkers with userCurrentPosition:', userCurrentPosition);
// If more than MIN_METERS_NEEDED_FOR_UPDATE_MARKERS meters then get new markers
this.props.getNewMarkers(userCurrentPosition.latitude, userCurrentPosition.longitude);
this.setState({
latestUpdatePosition: userCurrentPosition,
});
}
console.log('Called navigator.geolocation.watchPosition. distanceMoved, rotationAngle, userCurrentPosition:', distanceMoved, rotationAngle, userCurrentPosition);
this.setState({
distanceMoved,
rotationAngle,
userCurrentPosition,
});
this.map.animateToRegion(newRegion);
this.map.animateToBearing(rotationAngle);
this.map.animateToViewingAngle(45);
},
(error) => alert(error.message),
{ enableHighAccuracy: GEOLOCATION_HIGH_ACCURACY_ENABLED, timeout: GEOLOCATION_TIMEOUT_MS, maximumAge: GEOLOCATION_MAXAGE_MS, distanceFilter: GEOLOCATION_DISTANCE_FILTER_METERS }
);The idea is watch the position with the geolocation.watchPosition I have small value for the distanceFilter (so I am checking it every 10 meters the user moves)...then calculate the angle he is moving and how much it moved (I use the how much it moved to avoid too much re-renders by overriding the shouldComponentUpdate). Here is the function that calculate the angle to apply the this.map.animateToBearing(): const getRotationAngle = (previousPosition, currentPosition) => {
const x1 = previousPosition.latitude;
const y1 = previousPosition.longitude;
const x2 = currentPosition.latitude;
const y2 = currentPosition.longitude;
const xDiff = x2 - x1;
const yDiff = y2 - y1;
return (Math.atan2(yDiff, xDiff) * 180.0) / Math.PI;
};Let me know if that helps you guys, if not let me know what are the problem you have when using this functions. Regards. |
|
Hi Sandino, Also is it possible to share the code complete for the map animation, sorry I am new to RN so couldn't make it. |
|
@sandinosaso I tested your example and it seems that in general, animatetoRegion is resetting the bearing and it gives a weird animation due to that reason. Do you experience the same problem? Especially on android. On iOS it seems to work like it should |
|
@juergengunz Same issue. animateToRegion() is resetting the bearing in android. Please provide getPositionWithOffset() function code and if other things to be kept in mind while using animateToRegion() or animateToBearing(). |
|
@sandinosaso I used and imported your code however it doesn't work like you so much. It's not smooth like you and for that reason, would you mind sharing your code to display exactly What happens in your image included in Updating to get new markers as well. |
|
Does this works on Android ? |
|
@sandinosaso could you provide what you do in this function |
|
Sorry, @Eramirez06 years without seeing this. I just see this because a coworker used this library and I showed him this old PR :) I basically calculate distance between 2 points using geolib library. Hoping this help someone coming from the future ;) import Polyline from '@mapbox/polyline';
import geolib from 'geolib';
// Converts numeric degrees to radians
const toRad = (value) => (value * Math.PI) / 180;
// This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in meters)
const distanceBetweenPoints = (origen, destino) => {
const distance = geolib.getDistance(origen, destino);
return distance;
};
const getPositionWithOffset = ({ latitude: lat, longitude: lon }, { dn = 100, de = 100 }) => {
const R = 6371 * 1000; // Earth Radius in Km * 1000 = meters
// Coordinate offsets in radians
const dLat = dn / R;
const dLon = de / (R * Math.cos((Math.PI * lat) / 180));
// OffsetPosition, decimal degrees
const latO = lat + (dLat * (180 / Math.PI));
const lonO = lon + (dLon * (180 / Math.PI));
return { latitude: latO, longitude: lonO };
};
const getRotationAngle = (previousPosition, currentPosition) => {
const x1 = previousPosition.latitude;
const y1 = previousPosition.longitude;
const x2 = currentPosition.latitude;
const y2 = currentPosition.longitude;
const xDiff = x2 - x1;
const yDiff = y2 - y1;
return (Math.atan2(yDiff, xDiff) * 180.0) / Math.PI;
};
const convertRouteToPolyline = (route) => {
const points = Polyline.decode(route.overview_polyline.points);
const coords = points.map((point, index) => ({
latitude: point[0],
longitude: point[1],
}));
return coords;
};
const getMissingVertices = (point1, point2) => {
const missingVertice1 = {
latitude: (point1.latitude + point2.latitude + point2.longitude - point1.longitude) / 2,
longitude: (point1.longitude + point2.longitude + point1.latitude - point2.latitude) / 2,
}
const missingVertice2 = {
latitude: (point1.latitude + point2.latitude + point1.longitude - point2.longitude) / 2,
longitude: (point1.longitude + point2.longitude + point2.latitude - point1.latitude) / 2,
}
return { missingVertice1, missingVertice2 };
}
const getClosestPointOnLines = (pXy, polyline) => {
var minDist;
var fTo;
var fFrom;
var x;
var y;
var i;
var dist;
if (polyline.length > 1) {
for (var n = 1 ; n < polyline.length ; n++) {
if (polyline[n].latitude != polyline[n - 1].latitude) {
var a = (polyline[n].longitude - polyline[n - 1].longitude) / (polyline[n].latitude - polyline[n - 1].latitude);
var b = polyline[n].longitude - a * polyline[n].latitude;
dist = Math.abs(a * pXy.latitude + b - pXy.longitude) / Math.sqrt(a * a + 1);
} else {
dist = Math.abs(pXy.latitude - polyline[n].latitude)
}
// length^2 of line segment
var rl2 = Math.pow(polyline[n].longitude - polyline[n - 1].longitude, 2) + Math.pow(polyline[n].latitude - polyline[n - 1].latitude, 2);
// distance^2 of pt to end line segment
var ln2 = Math.pow(polyline[n].longitude - pXy.longitude, 2) + Math.pow(polyline[n].latitude - pXy.latitude, 2);
// distance^2 of pt to begin line segment
var lnm12 = Math.pow(polyline[n - 1].longitude - pXy.longitude, 2) + Math.pow(polyline[n - 1].latitude - pXy.latitude, 2);
// minimum distance^2 of pt to infinite line
var dist2 = Math.pow(dist, 2);
// calculated length^2 of line segment
var calcrl2 = ln2 - dist2 + lnm12 - dist2;
// redefine minimum distance to line segment (not infinite line) if necessary
if (calcrl2 > rl2)
dist = Math.sqrt(Math.min(ln2, lnm12));
if ((minDist == null) || (minDist > dist)) {
if (calcrl2 > rl2) {
if (lnm12 < ln2) {
fTo = 0;//nearer to previous point
fFrom = 1;
}
else {
fFrom = 0;//nearer to current point
fTo = 1;
}
}
else {
// perpendicular from point intersects line segment
fTo = ((Math.sqrt(lnm12 - dist2)) / Math.sqrt(rl2));
fFrom = ((Math.sqrt(ln2 - dist2)) / Math.sqrt(rl2));
}
minDist = dist;
i = n;
}
}
var dx = polyline[i - 1].latitude - polyline[i].latitude;
var dy = polyline[i - 1].longitude - polyline[i].longitude;
x = polyline[i - 1].latitude - (dx * fTo);
y = polyline[i - 1].longitude - (dy * fTo);
}
return { 'latitude': x, 'longitude': y, 'i': i, 'fTo': fTo, 'fFrom': fFrom };
}
export {
convertRouteToPolyline,
distanceBetweenPoints,
getPositionWithOffset,
getRotationAngle,
getMissingVertices,
getClosestPointOnLines,
}; |
|
@sandinosaso according to your previous code exampel I nead to get rotation angle % to a polyline route How can I do that according to these Geo functions ? |
First of all, thank you all guys for maintaining this awesome repo, it helps a lot to get started using Maps with ReactNative.
For those who are not familiar with the names of the functions this PR adds, Bearing is the direction or course of motion itself, and Viewing angle is the angle of the camera attached to the MapView.
This PR allows you to change the bearing dynamically (for example for apps that requires navigation features like Waze does) and also can change the map view angle (so you get like building shape kinda 3D).
This PR adds support for IOS (for now, I plan to do for Android soon). I am pushing this so if anyone can help with feedback or code for Android I appreciate it 👍.Updated: This PR adds full support for IOS (both native MapKit map and Google Maps) and Android.
Google Map Documentation for both methods is available here: https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_map_view.html#a5e59e999c9fa8222ecc8b9b45ce95976
I have no experience on Objective-C so they may be a better way of doing this, I just want to contribute trying to share something that worked for me :)
I attach a .gif trying to show the bearing effect (see how the map rotates towards the direction of motion), is hard to appreciate using a gif (it looks nice on real device when driving :)