Ramesh Sharma Ramesh Sharma - 1 year ago 181
Objective-C Question

Move the annotation on Map like Uber iOS application

I am working on a project where I need to create the similar iOS application to UBER and OLA where the car is moving based on the location. I'm looking for some kind of Library which can make Cars move and take turn smoothly just like OLA. For now I was able to move car from one latitude-longitude to another. But the complex part is how to turn and make sure the car face to front when moving to direction.

Please find the below screenshot for the same.


Answer Source

Actually I had also one requirement in my previous iOS application, so please find the below url for download the code and review it.

Link : https://www.dropbox.com/s/4jj8em1o786qa9j/TestAnnotationMoving.zip?dl=0

Environment : Xcode 8 and Objective-C

Highlight of the code which I had done it.

For accomplished the functionality for moving the car same as Uber iOS application, you need to first calculate the angle between from old location and new location. Please find the below code for how to calculate it.

- (float)angleFromCoordinate:(CLLocationCoordinate2D)first
                toCoordinate:(CLLocationCoordinate2D)second {

    float deltaLongitude = second.longitude - first.longitude;
    float deltaLatitude = second.latitude - first.latitude;
    float angle = (M_PI * .5f) - atan(deltaLatitude / deltaLongitude);

    if (deltaLongitude > 0)      return angle;
    else if (deltaLongitude < 0) return angle + M_PI;
    else if (deltaLatitude < 0)  return M_PI;

    return 0.0f;

Then apply the angle to the particular annotation for moving. Please find the below code for the same.

float getAngle = [self angleFromCoordinate:oldLocation toCoordinate:newLocation];

//Apply the new location for coordinate.        
myAnnotation.coordinate = newLocation;

//For getting the MKAnnotationView.
AnnotationView *annotationView = (AnnotationView *)[self.mapView viewForAnnotation:myAnnotation];

//Apply the angle for moving the car.
annotationView.transform = CGAffineTransformMakeRotation(getAngle);

Please find the below GIF representation, how it looks on the map.


For accomplished the functionality I had created the .csv file where I had added 1000 records of latitude and longitude.

Note : You get the angle based on the location, so sometimes it happens you does not get the proper angle due to location as it is totally depend on your location.

Hope it works for you!!!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download