Move the annotation on Map like Uber iOS application

Question

I am working on a project where I need to create a 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 turns smoothly just like OLA. For now, I was able to move the car from one latitude-longitude to another. But the complex part is how to turn and make sure the car face to the front when moving to the direction.

Please find the below screenshot for the same.

Kopeisk

Answer 1

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

Environment: Xcode 11 and Swift 5

Link: https://github.com/ram2386/Track-Car

Highlight of the code in which I had done it.

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

func angleFromCoordinate(firstCoordinate: CLLocationCoordinate2D, 
    secondCoordinate: CLLocationCoordinate2D) -> Double {
    
    let deltaLongitude: Double = secondCoordinate.longitude - firstCoordinate.longitude
    let deltaLatitude: Double = secondCoordinate.latitude - firstCoordinate.latitude
    let angle = (Double.pi * 0.5) - atan(deltaLatitude / deltaLongitude)
    
    if (deltaLongitude > 0) {
        return angle
    } else if (deltaLongitude < 0) {
        return angle + Double.pi
    } else if (deltaLatitude < 0) {
        return Double.pi
    } else {
        return 0.0
    }
}

//Apply the angle to the particular annotation for moving
let getAngle = angleFromCoordinate(firstCoordinate: oldLocation, secondCoordinate: newLocation)

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

//Getting the MKAnnotationView
let annotationView = self.mapView.view(for: myAnnotation)

//Angle for moving the car
annotationView?.transform = CGAffineTransform(rotationAngle: CGFloat(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 totally depends on your location.

I hope it works for you!!!

Carmon

@RamkrishnaSharma plus 1 for explaining this, can we use this with gmsmapview also ? – Scrofula

it will be very greatfull to deliver ans for gmsmapview, please let me know by mention name. – Scrofula

@RamkrishnaSharma i am getting error no interface for both methods angleFromCoordinate and getAngle, can you help me out ? – Scrofula

@Scrofula : Did you add the both(angleFromCoordinate and getAngle) method in your controller? – Carmon

@Scrofula : I have added the "angleFromCoordinate" method on above post just look it and getAngle I have took the variable name. – Carmon

@RamkrishnaSharma thanks i got the angles but there is no smooth move of gms pin bettw coordinates, it will be very nice if you can provide any solution for that. – Scrofula

@RamkrishnaSharma there is problem getting angle's, the car is moving forward from back side. – Scrofula

@Scrofula : Please check your coordinate, it might possible that you do not get the right coordinate, and as I had already mentioned that it is totally based on the coordinate, as I had already implemented same in my application too and the animation part is smooth. – Carmon

@RamkrishnaSharma i am getting coordinate exactly lat & long from server and i am showing another device location to my device don't know why it is happening and animation is not smooth, really thanks for your valued time :) – Scrofula

@RamkrishnaSharma hi, i again tested this functionality but unfortunately not getting smooth move of vehicle and the direction of vehicle is from back side. How do i pass the new and old location please help i am really needful. – Scrofula

I had attached the source code of the application, where I had defined how to use it old and new location, still if you do not achieve the smooth annotation then email([email protected]) me your source code file I will review the code and updaye u asap. – Carmon

@RamkrishnaSharma- Everything is fine except when car is moving and approaching from one to another location car gets outside of View's bounds. How to always center car in map – Expect

@iEinstein: You need to use the "center" property of "MKCoordinateRegion" for Apple Map and Google map you can use "camera" property of "GMSCameraPosition" class. – Carmon

@RamkrishnaSharma How we can draw a path from array of coordinates (Latitude and Longitude) so that users can see the path in a mapview – Triumph

@veereshkumbar: You can search the sample application on the gitHub(github.com/varshylmobile/MapManager) or cocoacontrols(cocoacontrols.com). – Carmon

@RamkrishnaSharma: do u have swift code for this google maps process ? i wrote in swift according to your code but the car moving animation didn't work – Augustus

the link for google maps gives me error We can’t find what you’re looking for. dropbox.com/s/a5ts108lh5rr1gd/GoogleMap.zip?dl=0 – Cracksman

How can I zoom map while car is moving? Even if I set 'isZoomEnabled' true then also it does not allow while it moving. Can any one have idea? Also I want to see details on taping on car annotation view. – Retinol

You need to apply the zoom based on their current moving path, I mean based on latitude and longitude. – Carmon