Dotted Polylines with Google Maps SDK for iOS

In this post we’re going to take a look at how to create polylines consisting of circles for a Google Map on iOS. The inspiration for this stems from the development of a new product at door2door, where we decided to use polylines with this design to communicate walking paths to the user.

In Google’s own Maps app, walking directions are represented by a sequence of blue circles, and therefore as a developer utilising the Google Maps SDK it would make sense to be consistent with that design.

So surely Google would include the ability to stylise a polyline in this way in their SDK, right? Well, partially right: it’s possible in the Android SDK.

In the Google Maps SDK for Android, you can apply a stroke pattern to a PolylineOptions object in the form of a list of PatternItem objects.

That’s it! The closest you can get to this type of functionality in iOS is initialising a GMSStyleSpans object with an array of GMSStrokeStyle objects and an array representing the lengths of these strokes.

This styles the polyline so that it consists of shorter lines separated by spaces.

Of course, this is not quite what we’re after. Instead of spaced-out lines, we want spaced-out dots, or circles. In order to achieve this, we have to abandon the idea that we can somehow customise a GMSPolyline in this fashion, and instead turn to another class: GMSCircle.

Let’s assume we have our polyline. Instead of directly putting it on the map, we want to first transform it into an array of GMSCircle objects. Here is the solution I came up with to do this:

That’s a fair few lines of Swift, so let’s walk through what’s going on here in a nutshell.

We’re iterating through the indexes of the coordinates that make up the polyline’s path in order to create start and end locations (startLocation and endLocation) for each section of the polyline. We calculate the distance between these, and use that to work out the change in latitude and longitude (intervalLatIncrement and intervalLngIncrement) for 1 metre along the path. We then iterate through the intervals along the distance between the two locations, and at each interval work out a coordinate (circleCoordinate).

Now to draw some circles! If this is not the first circle we’re drawing, we compare the locations of the circle we want to draw and the previously drawn circle. If they are closer together than our intervalDistanceIncrement, that being the minimum distance we want between each circle, then we continue the execution of the loop. If however this is not the case, we draw a new circle, and hey presto, that’s the bulk of the logic!

Nothing too crazy, eh? That being said, there’s still a little more work to be done, but we’re nearly there now.

You may be wondering what circleRadiusScale is, and why we need it when setting a radius for our circle. This is to ensure that our circles appear the same size on the map regardless of the zoom level of the map, that being how far in or out the user has zoomed on the map. This is easily calculated by dividing 1 by the number of points on the screen that represent 1 metre.

As we are making use of this scale, we need to remove and then recreate the polyline every time the position of the map is changed. Putting the code we wrote above in a function and calling that function from this GMSMapViewDelegate callback ensures we do exactly that.

Finally, we need to also call our function when the view first loads, set our view controller as the map’s delegate and of course provide a variable polyline.

We’re done! We’ve written all the Swift we need to craft a beautiful dotted line on Google Maps! No more is this art form reserved only for Google’s own developers.

In case you’d like these code snippets nicely bundled in one place, you can find just that here on GitHub.