Animated Routes with MKMapView
Creating delightful, animated routes for your user’s journey
Apple’s MapKit lets you place custom overlays on specific map coordinates, which will then be rendered as part of the map and will move along with any map panning and movements.
One of the types of overlays you can add is a Polyline. A polyline is basically a group of Coordinates describing a route on the map. For example, you could represent a route between two coordinates on the map, like so:
Rendering a Polyline is a relatively straightforward task, but we wanted to take it a step further and present an animated version of this route, to convey to the users a feeling of direction and distance to their destination.
In this blog post, you’ll build a naïve implementation to animate your MKPolyline route on top of a MKMapView. This isn’t necessarily the most optimized solution, but is merely for educational purposes.
What you’ll end up with
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.
Note: For this specific tutorial, you’ll use Apple’s MapKit. Even though other SDKs behave differently, the drawing technique will mostly remain the same :)
Assuming you have an array of coordinates, you’d want to instantiate a
You’ll be handling the rendering of the overlays in
MKMapViewDelegate’s delegate method —
You’ll want to provide a different renderer for different types of overlays, such as markers or polylines. For your specific case, you’ll simply render a polyline on the map:
Now that you have a renderer, all you need to do is to actually add a polyline to your
addOverlay will trigger the aforementioned delegate, which will cause the renderer to instantly apply the polyline on the map 😃
׳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.
The technique you’ll use for this post will be to cut the polyline into smaller polylines — segments — in succession, where each of the segments will include the previous one.
You’ll be using a repeating
Timer to iterate over your coordinates, and calculate the appropriate accumulated segments.
Timer property to your View Controller:
Time to create your animation method, where the beef of the work will be done. Add the following empty method to your View Controller:
The method will receive an array of coordinates, the total animation duration, and an optional completion closure.
Next, let’s set up some constants. Add the following code inside your new method:
Here, you decide how many segments to render the polyline with. The more coordinates you have, the higher the drawing resolution and smoothness will be.
Next, implement the timer logic. Add the following to your method immediately after the last piece of code:
That’s about it for the drawing logic! 🧙♀️🎉
Your new method will render your polyline in an animated way by splitting it into segments, as shown above and spacing out the drawing of each segment. Cool! 😎
Did you notice the bug, though?
We never remove the previous polyline segments that were rendered, which means all drawn polyline segments we drew will be rendered on the map along with the newest segment, and will also never be released from memory.
To fix our bug, add a variable to store the previous polyline segment that was drawn, and remove it from the map on each animation iteration. with that, your complete method should look like this, notice the new
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! 💪
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.
You can find the complete sample app on GitHub:
A simple implementation of route animation using MapKit. - idanboa/AnimatedRoute
See you next time!