Animated Routes with MKMapView

Creating delightful, animated routes for your user’s journey

Idan Boadana
Apr 11 · 4 min read
Gett together route

What you’ll end up with

A polyline animated on top of a Map View

The problem?

Unfortunately, the most common map providers like Apple or Google, do not provide an out-of-the-box solution to animate polylines. When you provide a polyline to any of these Map SDKs, all they would do is to simply render them immediately on the map.

Applying a Polyline

First, you should understand how to apply a single polyline to your map.

Creating a Polyline from an array of Coordinates
Basic polyline rendering of MKMapView
mapView.addOverlay(polyline)
An MKPolyline rendered on an MKMapView.

׳Animating your Polyline

Now that you have your basic polyline drawn on the map, you‘ll need to render the polyline in small segments to create the animation effect yourself.

Simplistic example of polyline segmentation in an accumulating manner.
Route animation method signature
Add a Drawing Timer for the Polyline segments
Final method

Did we squash that bug? 🐛

You can check how many MKPolyline objects are currently retained by your application by clicking the Debug Memory Graph icon while your app is running, and filter the results for MKPolyline. Easy peasy! 💪


Wrapping up

I hope you’ve enjoyed this quick post on how to easily achieve animated polyline drawing for your MKMapViews. As mentioned earlier, this technique applies to any other Map SDK — I encourage you to experiment with the various options.

Gett Engineering

Code, stories, tips, thoughts, experimentations from the day-to-day work of our R&D team.

Thanks to Shai Mishali, Shai Balassiano, and Gil Goldenberg.

Idan Boadana

Written by

Gett Engineering

Code, stories, tips, thoughts, experimentations from the day-to-day work of our R&D team.