Dotted Polyline with Google Maps SDK for iOS using GMSSpriteStyle

Part 1: Introduction

Google has introduced an exciting addition to the GMSPolyline feature - the ability to utilize Sprites and Texture stroke styles to achieve better and more desired results.

One common challenge developers faced was creating rounded or dotted Polylines using GMSPolyline in iOS, as shown in the image below:

Dotted PolyLine sample

If you’d like to understand the difficulties faced before these features were introduced, you can refer to this article where the author attempts to achieve the desired results:

Dotted Polylines with Google Maps SDK for iOS

Part 2: Setup

Now, let’s dive into creating one by following Google’s documentation:

Google Maps iOS SDK Documentation

To get started, create a new Xcode project with a storyboard interface style. Name it as you desire; in this case, we'll use 'googlepolyline'.

Next, add Google Maps SDK to your project using either CocoaPods or your preferred method.

To install the Google Maps SDK using CocoaPods:

1. Navigate to your project directory where your googlepolyline.xcodeproj is located.
2. Open the terminal at this path and execute the command pod init.
3. Open the Podfile in your preferred text editor and add this line: pod 'GoogleMaps', '8.0.0'.
4. Finally, run pod install and open the newly created .xcworkspace file.
5. In AppDelegate.swift, import Google Maps.
6. In the didFinishLaunchingWithOptions method, add this line: GMSServices.provideAPIKey("your API key here").

Following these steps, your API is set up with the Google Maps SDK. If you encounter issues or prefer an alternative method, you can refer to the more detailed documentation here:

Google Maps SDK Configuration Guide

Part 3: Drawing a Normal Polyline

Now that Google Maps SDK is integrated let’s focus on the important part of adding Google Maps to a View Controller.

1. Open Main.storyboard, locate the ViewController, and add a UIView object on top of it.
2. Select the new view object, go to the right pane, open the identity inspector, and set it to conform to GMSMapView.
3. Open the assistant editor and drag the reference of the UIView object to the ViewController class to create an outlet named mapView.
4. Run the app, and you’ll see the map loaded.

Now, let’s add a Polyline with the default style:

Define a variable containing coordinates and place it above viewDidLoad:

private let coordinates = [
        CLLocationCoordinate2D(latitude: 39.862808, longitude: -4.0273727),
        CLLocationCoordinate2D(latitude: 39.8681019, longitude: -4.029378299999999),
        CLLocationCoordinate2D(latitude: 39.8675297, longitude: -4.0275807),
        CLLocationCoordinate2D(latitude: 39.8688577, longitude: -4.021535)
]

Create a function to draw a Polyline based on these coordinates:

private func drawPolyline() {
        let path = GMSMutablePath()
        for coordinate in coordinates {
            path.add(coordinate)
        }
        let polyline = GMSPolyline(path: path)
        polyline.strokeWidth = 10.0
        polyline.geodesic = true
        polyline.map = mapView
        let mapBounds = GMSCoordinateBounds(path: path)
        let cameraUpdate = GMSCameraUpdate.fit(mapBounds)
        mapView.moveCamera(cameraUpdate)
}

Explanation of the code:

1. Create a GMSMutablePath and add coordinates to it.
2. Create a GMSPolyline object using the path, set the stroke width, and add it to the mapView.
3. Ensure the camera zooms to the path where the Polyline is drawn.

Part 4: Drawing a Sprite Polyline

Now that Google Maps SDK is integrated let’s focus on the important part of adding Google Maps to a View Controller.

1. Open Main.storyboard, locate the ViewController, and add a UIView object on top of it.
2. Select the new view object, go to the right pane, open the identity inspector, and set it to conform to GMSMapView.
3. Open the assistant editor and drag the reference of the UIView object to the ViewController class to create an outlet named mapView.
4. Run the app, and you’ll see the map loaded.

Now, let’s add a Polyline with the default style:

Define a variable containing coordinates and place it above viewDidLoad:

private let coordinates = [
        CLLocationCoordinate2D(latitude: 39.862808, longitude: -4.0273727),
        CLLocationCoordinate2D(latitude: 39.8681019, longitude: -4.029378299999999),
        CLLocationCoordinate2D(latitude: 39.8675297, longitude: -4.0275807),
        CLLocationCoordinate2D(latitude: 39.8688577, longitude: -4.021535)
]

Create a function to draw a Polyline based on these coordinates:

private func drawPolyline() {
        let path = GMSMutablePath()
        for coordinate in coordinates {
            path.add(coordinate)
        }
        let polyline = GMSPolyline(path: path)
        polyline.strokeWidth = 10.0
        polyline.geodesic = true
        polyline.map = mapView
        let mapBounds = GMSCoordinateBounds(path: path)
        let cameraUpdate = GMSCameraUpdate.fit(mapBounds)
        mapView.moveCamera(cameraUpdate)
}

Explanation of the code:

1. Create a GMSMutablePath and add coordinates to it.
2. Create a GMSPolyline object using the path, set the stroke width, and add it to the mapView.
3. Ensure the camera zooms to the path where the Polyline is drawn.

Part 4: Drawing a Sprite Polyline

Now, let’s move on to adding a Polyline with a SpriteStyle:

Before we proceed, there are a few prerequisites to confirm for Sprite Style stroke to work. First, ensure that Metal rendering is enabled. Modify your AppDelegate.swift as follows:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        GMSServices.provideAPIKey("your API key here")
        GMSServices.setMetalRendererEnabled(true) // Enable metal rendering
        return true
}

In your View Controller’s viewDidLoad() method, check if the map supports GMSpriteStyle:

print("\\\\(mapView.mapCapabilities)")

If your console outputs something like GMSMapCapabilityFlags(rawValue: 4), it means GMSpritePolylines are supported.

Download this image, and save it into asset folder name it sprite5.

sprite5.png

Finally, to implement the SpriteStyle Polyline inside the drawPolyline method, use the following code:

private func drawPolyline() {
        let path = GMSMutablePath()
        for coordinate in coordinates {
            path.add(coordinate)
        }

        let polyline = GMSPolyline(path: path)
        polyline.strokeWidth = 30
        let image = UIImage(named: "sprite4")! // You can use any image
        let stampStyle = GMSSpriteStyle(image: image)
        let transparentStampStroke = GMSStrokeStyle.transparentStroke(withStamp: stampStyle)
        let span = GMSStyleSpan(style: transparentStampStroke)
        polyline.spans = [span]
        polyline.zIndex = 1
        polyline.map = mapView
        // Camera zoom to the location of the Polyline
        let mapBounds = GMSCoordinateBounds(path: path)
        let cameraUpdate = GMSCameraUpdate.fit(mapBounds)
        mapView.moveCamera(cameraUpdate)
}

Explanation:

1. Use GMSSpriteStyle to create a stamp image from the supplied image.
2. Use GMSStrokeStyle to create the transparentStrokeStyle, which achieves the desired result.
3. Create a single GMSStyleSpan and set it to the Polyline.

Feel free to reference the provided screenshot for additional guidance.

By following these steps, you’ll be able to create Polylines with SpriteStyle in your Google Maps iOS app.

If you found this article insightful and want to stay updated on more iOS development tips and tricks, consider following me on:

• https://www.linkedin.com/in/ajay-singh-thakur/
• https://medium.com/@ajaysinghthakur/about

Your support and connection are greatly appreciated, and I look forward to sharing more valuable insights with you!.