How to get animated polyline route in GMSMapView, so that it move along with map when map is moved?

Question

I have created animated polyline like CAShapeLayer by following code, I have added CAShapeLayer as sublayer to GMSMapiew but, if I move the map the layer won't moves. where to add the layer, so that it move along with map?

   func layer(from path: GMSPath) -> CAShapeLayer {
        let breizerPath = UIBezierPath()
        let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
        breizerPath.move(to: self.mapView.projection.point(for: firstCoordinate))
        for i in 1 ..< Int((path.count())){
            print(path.coordinate(at: UInt(i)))
            let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
            breizerPath.addLine(to: self.mapView.projection.point(for: coordinate))
        }

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = breizerPath.reversing().cgPath
        shapeLayer.strokeColor = UIColor.green.cgColor
        shapeLayer.lineWidth = 4.0
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineCap = kCALineCapRound
        shapeLayer.cornerRadius = 5
        return shapeLayer
    }

    func animatePath(_ layer: CAShapeLayer) {
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 6
        //pathAnimation.delegate = self
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
        pathAnimation.fromValue = Int(0.0)
        pathAnimation.toValue = Int(1.0)
        pathAnimation.repeatCount = 100
        layer.add(pathAnimation, forKey: "strokeEnd")
    }

Added to GoogleMapView by

    let shapelayer: CAShapeLayer = self.layer(from: path!)
    self.animatePath(shapelayer)
    self.mapView.layer.addSublayer(shapelayer)

try to add this line as `UIViewController's` view subview, not `GMSMapView` — JuicyFruit, Mar 09 '17 at 11:33

score 29 · Answer 1 · answered Mar 16 '17 at 11:43

SWIFT

Declartion

var polyline = GMSPolyline()
var animationPolyline = GMSPolyline()
var path = GMSPath()
var animationPath = GMSMutablePath()
var i: UInt = 0
var timer: Timer!

To Darw Route

func drawRoute(routeDict: Dictionary<String, Any>) {

        let routesArray = routeDict ["routes"] as! NSArray

        if (routesArray.count > 0)
        {
            let routeDict = routesArray[0] as! Dictionary<String, Any>
            let routeOverviewPolyline = routeDict["overview_polyline"] as! Dictionary<String, Any>
            let points = routeOverviewPolyline["points"]
            self.path = GMSPath.init(fromEncodedPath: points as! String)!

            self.polyline.path = path
            self.polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
            self.polyline.strokeWidth = 3.0
            self.polyline.map = self.mapView

            self.timer = Timer.scheduledTimer(timeInterval: 0.003, target: self, selector: #selector(animatePolylinePath), userInfo: nil, repeats: true)
        }
    }

To Animate Path

func animatePolylinePath() {
        if (self.i < self.path.count()) {
            self.animationPath.add(self.path.coordinate(at: self.i))
            self.animationPolyline.path = self.animationPath
            self.animationPolyline.strokeColor = UIColor.black
            self.animationPolyline.strokeWidth = 3
            self.animationPolyline.map = self.mapView
            self.i += 1
        }
        else {
            self.i = 0
            self.animationPath = GMSMutablePath()
            self.animationPolyline.map = nil
        }
    }

Don't forgot to stop timer in viewWillDisappear

self.timer.invalidate()

Output

HI in os version 10.3.1(iphone 5) its not working perfect. some times become slow and fast running in device. In iphone 6 it become slow in os 10.3.1 while in os 10.0 its working. — Nisha, Oct 10 '17 at 14:45
It causing memory problem if app is in background timer still running and causing app terminate with memory consumption — JeeVan TiWari, Aug 30 '18 at 05:53
Have you tried with this with shot route. The animation is not smooth for short route like 2-3 kms. — Mahendra, Aug 06 '19 at 08:54
I agree with @Mahendra. In short routes, the animation is very quick. Can we slow it down anyhow? — Sagun Raj Lage, Jan 21 '20 at 08:46
@SagunRajLage You have to maintain the animation time with respect to the distance between two points. — Ahsan, Sep 21 '21 at 10:39

score 20 · Accepted Answer · answered Mar 16 '17 at 05:24

20

I am create GMSPath animation with path coordinate

Objective C

interface

@interface MapWithTracking () 

@property (weak, nonatomic) IBOutlet GMSMapView *mapView;

@property (nonatomic,strong) GMSMutablePath *path2;

@property (nonatomic,strong)NSMutableArray *arrayPolylineGreen;

@property (nonatomic,strong) GMSPolyline *polylineBlue;

@property (nonatomic,strong) GMSPolyline *polylineGreen;

@end

implementation

-(void)viewDidLoad {
    _arrayPolylineGreen = [[NSMutableArray alloc] init];
    _path2 = [[GMSMutablePath alloc]init];
}

Get a GMSPath and create a blue polyline.

-(void)createBluePolyline(GMSPath *path) {

       // Here create a blue poly line
      _polylineBlue = [GMSPolyline polylineWithPath:path];
      _polylineBlue.strokeColor = [UIColor blueColor];
      _polylineBlue.strokeWidth = 3;
      _polylineBlue.map = _mapView;

       // animate green path with timer
       [NSTimer scheduledTimerWithTimeInterval:0.003 repeats:true block:^(NSTimer * _Nonnull timer) {
             [self animate:path];
       }];

}

Animate a Green Polyline

Adding coordinate to path 2 and assign to map

-(void)animate:(GMSPath *)path {

    dispatch_async(dispatch_get_main_queue(), ^{
        if (i < path.count) {
            [_path2 addCoordinate:[path coordinateAtIndex:i]];
            _polylineGreen = [GMSPolyline polylineWithPath:_path2];
            _polylineGreen.strokeColor = [UIColor greenColor];
            _polylineGreen.strokeWidth = 3;
            _polylineGreen.map = _mapView;
            [arrayPolylineGreen addObject:_polylineGreen];
            i++;
        }
        else {
            i = 0;
            _path2 = [[GMSMutablePath alloc] init];

            for (GMSPolyline *line in arrayPolylineGreen) {
                line.map = nil;
            }

        }
    });
}

answered Mar 16 '17 at 05:24

Harshal Valanda

5,331
26
63

I've checked your code, it's pretty easy to read. But I've one question, Is Polyline will always draw after 3 milliseconds? I mean if latitude and longitude are complex structure then it will take time to draw on path. (depend on main thread load) – Bhavin Chauhan Oct 16 '17 at 11:36
You can set second as per your requirement. If there is a more complex structure of path then it work like charm because in main thread we are not doing a complicated operation. you can also doing it background thread but animation is not working like charm. – Harshal Valanda Oct 16 '17 at 11:42
yes problem is that if I use this animation with 3 millisecond then it's not always same animation in all devices. I've used DispatchQueue for this operation. Is it fine or I need to use nsTimer? Can you please advice me? – Bhavin Chauhan Oct 16 '17 at 11:47
In above case i will use timer because i added a new path coordinate in every 0.003 seconds so it is working in all devices. from my point of view time is easy way for use that kind operation. – Harshal Valanda Oct 16 '17 at 11:54
i will just add new point and `Polyline` into map and remove after competition. you can find the way for using only one `polyline` so its using low memory and improve performance also. in above case i using a array of polyline. – Harshal Valanda Oct 16 '17 at 11:58
Yes I've used same code and I also required same operation you did. But problem is that when there is rounded path like circle and road path is not easy to drive(like strait road) then it's not animation proper and also polyline takes more time then 3 milliseconds even I set it to 3 millisecond time. Can you please suggest me? – Bhavin Chauhan Oct 16 '17 at 12:44
also I've checked when we draw path more than 30 kms and road are not strait forward then it's taking more time. – Bhavin Chauhan Oct 16 '17 at 12:46
Yeah this take more time because when road is round than path have a more coordinate then the strait road. you can try to skip one coordinate to draw path it is only one possible way. – Harshal Valanda Oct 16 '17 at 12:51
you can also see in above example if path is strait then line go fast then the round path and distance also increases then the round path – Harshal Valanda Oct 16 '17 at 12:53
how to stop timer sir? – kemdo Mar 26 '18 at 12:53
1

@kemdo set timer as `NSTimer * myTimer = [NSTimer scheduledTimerWithTimeInterval:110.0 target:self selector:@selector(targetMethod:) userInfo:nil repeats:YES];` Stop timer `[myTimer invalidate];` – Harshal Valanda Mar 26 '18 at 12:59

score 3 · Answer 3 · answered May 06 '18 at 22:51

This is an adaptation of the code from Elangovan

The changes that I did was to remove the var from the class to be just in the function and also removed the #selector that is no longer need in iOS >= 10.

var timerAnimation: Timer!
var mapView:GMSMapView?



    func drawRoute(encodedString: String, animated: Bool) {

        if let path = GMSMutablePath(fromEncodedPath: encodedString) {

            let polyline = GMSPolyline(path: path)
            polyline.strokeWidth = 3.0
            polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
            polyline.map = Singleton.shared.getMapView()

            if(animated){
                self.animatePolylinePath(path: path)
            }
        }
    }

    func animatePolylinePath(path: GMSMutablePath) {

        var pos: UInt = 0
        var animationPath = GMSMutablePath()
        let animationPolyline = GMSPolyline()
        self.timerAnimation = Timer.scheduledTimer(withTimeInterval: 0.003, repeats: true) { timer in

            pos += 1
            if(pos >= path.count()){
                pos = 0
                animationPath = GMSMutablePath()
                animationPolyline.map = nil
            }
            animationPath.add(path.coordinate(at: pos))
            animationPolyline.path = animationPath
            animationPolyline.strokeColor = UIColor.yellow
            animationPolyline.strokeWidth = 3
            animationPolyline.map = self.mapView
        }
    }


    func stopAnimatePolylinePath() {

        self.timerAnimation.invalidate()
    }

score 2 · Answer 4 · answered Mar 14 '17 at 14:41

2

Move the layer whenever the map moves by implementing the delegate mapView:didChangeCameraPosition:.

answered Mar 14 '17 at 14:41

Jon Rose

8,373
1
30
36

I have created breizerpath path from GMSPath coordinates and created CAShapeLayer from breizerpath. how to change layer frame to cameraPosition? @Jon – Elangovan Mar 15 '17 at 05:13
You can convert from coordinate to point and a point to coordinate using the projection property on the GMSMapView. see https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_projection – Jon Rose Mar 15 '17 at 06:47
@JonRose can u provide code which you have used to animate or move layer? – jayant rawat Feb 14 '20 at 09:16
@Elangovan did u get any solution? – jayant rawat Mar 12 '20 at 07:25

score 0 · Answer 5 · answered Mar 15 '17 at 07:04

0

You need to use GMSPolyline for this. Create a GMSPolyline instance, set your GMSMapView instance to be it's parent map.

GMSPolyline* routeOverlay = // config
routeOverlay.map = // my GMSMapView instance

That's all. You don't need to do anything extra to make it move with the map camera movement. It does that automatically.

answered Mar 15 '17 at 07:04

Tarun Tyagi

9,364
2
17
30

The question asks for a way to animate that path which I don't think you can do with a GMSPolyline – Jon Rose Mar 15 '17 at 07:18
@JonRose You can create a GMSPolyline instance with a GMSPath instance. You can create a GMSPath with the encodedPath string received from Google Places APIs for finding the route between two locations. I assume Elangovan is already using this setup. – Tarun Tyagi Mar 15 '17 at 07:44
Can you animate that path? – Jon Rose Mar 15 '17 at 07:50
@JonRose Animating GMSPolyline isn't possible. A workaround is to use CAShapeLayer for drawing animation and as soon as the animation completes, use an actual GMSPolyline. Reference - http://stackoverflow.com/questions/38221641/how-do-i-animate-gmspolyline-in-google-maps-ios – Tarun Tyagi Mar 15 '17 at 07:59
great idea. Now let say you want the animation to be constantly repeating so it is always on the screen. How do you get the shapeLayer to move when the map moves? – Jon Rose Mar 15 '17 at 08:36
I have not encountered such use case. The question didn't mention it either. However in that case, we need to make shapeLayer follow map's movement. – Tarun Tyagi Mar 15 '17 at 08:59

score 0 · Answer 6 · answered Aug 18 '18 at 11:22

You can create a variable for shapeLayer and use the GMSMapViewDelegate methods mapView(_ mapView: GMSMapView, willMove gesture: Bool) and mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) to add and remove the layer from the map. There are two downsides to this approach, first is that the layer doesn't animate when the map is being dragged(moved) and second downside is that the layer always sits on top of all other map elements like markers, road names, POIs etc. I couldn't find a way to add this layer as a sublayer directly to the ground overlay. You can find the full code below:

var polyLineShapeLayer:CAShapeLayer?

 var layerAdded = false

 var path = GMSPath()

 var polyLine:GMSPolyline!



// Add regular polyline to the map 

func addPolyLineWithEncodedStringInMap(_ encodedString:String) {
        self.polyLine = GMSPolyline(path: self.path)
        polyLine.strokeWidth = 3.8
        self.polyLine.strokeColor = .black
        polyLine.map = googleMapView

        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {
            self.addPolyLineShapeLayerToMapView()
            self.layerAdded = true
        }

    }


// Add CAshapeLayer to map 

  func layer(from path: GMSPath) -> CAShapeLayer {
        let breizerPath = UIBezierPath()
        let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
        breizerPath.move(to: self.googleMapView.projection.point(for: firstCoordinate))
        for i in 1 ..< Int((path.count())){
            print(path.coordinate(at: UInt(i)))
            let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
            breizerPath.addLine(to: self.googleMapView.projection.point(for: coordinate))
        }

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = breizerPath.cgPath
        shapeLayer.strokeColor = UIColor.lightGray.withAlphaComponent(0.8).cgColor
        shapeLayer.lineWidth = 4.0
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineJoin = kCALineJoinRound
        shapeLayer.lineCap = kCALineCapRound
        shapeLayer.cornerRadius = 5
        return shapeLayer
    }

    func animatePath(_ layer: CAShapeLayer) {
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 2
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        pathAnimation.fromValue = Int(0.0)
        pathAnimation.toValue = Int(1.0)
        pathAnimation.repeatCount = 200
        layer.add(pathAnimation, forKey: "strokeEnd")
    }

    func addPolyLineShapeLayerToMapView(){

        polyLineShapeLayer = self.layer(from: self.path)

        if let polyLineShapeLayer = polyLineShapeLayer{
            self.animatePath(polyLineShapeLayer)
            self.googleMapView.layer.addSublayer(polyLineShapeLayer)
            polyLineShapeLayer.zPosition = 0

        }

    }


// Delegate methods to control the polyline 


// whenever map is about to move, if layer is already added, remove the layer from superLayer 

    func mapView(_ mapView: GMSMapView, willMove gesture: Bool) {
        if layerAdded{
            DispatchQueue.main.async {
                self.polyLineShapeLayer?.removeFromSuperlayer()
                self.polyLineShapeLayer = nil
            }
        }
    }

// when map is idle again(var layerAdded:bool ensures that additional layer is not added initially when the delegate method is fired) add new instance of polylineShapeLayer to the map with current projected coordinates. 

    func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
        if self.layerAdded{
            self.addPolyLineShapeLayerToMapView()
        }

    }

How to get animated polyline route in GMSMapView, so that it move along with map when map is moved?

6 Answers6

Linked