Recreating Apple's current location dot with Google Maps

A few months ago I was tasked with recreating the stock current location dot from Apple Maps with the Google Maps iOS SDK. At the time, the SDK didn't support animated views on the map. This meant I had to do some hackry where I was placing UIViews on top of the map view, and then synchronising their positions to match the map coordinates of the map view. It was ugly. The main problem with this approach is that there was a delay between the map moving, and the relevant callback to update the dot's position.

Since then Google maps for iOS has come along way. I've noticed that Uber's app doesn't have this delay (for the dot, the cars still lag), so I thought it was worthwhile having another crack at the implementation.

	//
	// ViewController.swift
	// CurrentLocation
	//
	// Created by Jonathan Dalrymple on 13/05/2017.
	// Copyright © 2017 float-right. All rights reserved.
	//
	import UIKit
	import GoogleMaps
	class CurrentLocationView: UIView {
	private class CircularView: UIView {
	override class var layerClass: AnyClass {
	return CAShapeLayer.self
	}
	private var shapeLayer: CAShapeLayer? {
	get {
	if let shape = self.layer as? CAShapeLayer {
	return shape
	}
	return nil
	}
	}
	override init(frame: CGRect) {
	super.init(frame: frame)
	super.backgroundColor = .clear
	}
	required init?(coder aDecoder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	override func layoutSubviews() {
	super.layoutSubviews()
	let path = UIBezierPath(roundedRect: self.bounds,
	cornerRadius: self.bounds.width * 0.5).cgPath
	self.shapeLayer?.path = path
	}
	override var backgroundColor: UIColor? {
	set (newValue){
	self.shapeLayer?.fillColor = newValue?.cgColor
	}
	get {
	if let color = self.layer.backgroundColor {
	return UIColor(cgColor: color)
	}
	return nil
	}
	}
	}
	private let baseView = CircularView()
	private let dotView = CircularView()
	private let rangeView = CircularView()
	override init(frame: CGRect) {
	super.init(frame: frame)
	self.addSubview(self.rangeView)
	self.addSubview(self.baseView)
	self.addSubview(self.dotView)
	self.rangeView.backgroundColor = UIColor.blue.withAlphaComponent(0.25)
	self.baseView.backgroundColor = .white
	self.dotView.backgroundColor = .blue
	}
	required init?(coder aDecoder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	override func layoutSubviews() {
	super.layoutSubviews()
	self.rangeView.bounds = self.bounds
	self.rangeView.center = self.center
	self.baseView.bounds = CGRect(x: 0, y: 0, width: 32, height: 32)
	self.baseView.center = self.center
	self.dotView.bounds = CGRect(x: 0, y: 0, width: 20, height: 20)
	self.dotView.center = self.center
	}
	func startAnimating() {
	let dotPulse = CABasicAnimation(keyPath: "transform")
	dotPulse.byValue = CATransform3DMakeScale(0.8, 0.8, 1)
	dotPulse.duration = 1.25
	dotPulse.repeatCount = .infinity
	dotPulse.autoreverses = true
	self.dotView.layer.add(dotPulse, forKey: "pulsate")
	let rangePulse = CABasicAnimation(keyPath: "transform")
	rangePulse.fromValue = CATransform3DMakeScale(0.1, 0.1, 1)
	rangePulse.duration = 2.5
	rangePulse.repeatCount = .infinity
	self.rangeView.layer.add(rangePulse, forKey: "pulsate")
	let fadeOut = CABasicAnimation(keyPath: "opacity")
	fadeOut.toValue = 0.0
	fadeOut.duration = 2.5
	fadeOut.repeatCount = .infinity
	self.rangeView.layer.add(fadeOut, forKey: "fadeOut")
	}
	}
	class ViewController: UIViewController, GMSMapViewDelegate {
	lazy var mapView: GMSMapView = {
	let view = GMSMapView()
	view.delegate = self
	return view
	}()
	lazy var currentLocationMarker: GMSMarker = {
	let marker = GMSMarker(position: CLLocationCoordinate2D(latitude: 0, longitude: 0))
	let annotationView = CurrentLocationView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))
	marker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
	marker.iconView = annotationView
	return marker
	}()
	override func viewDidLoad() {
	super.viewDidLoad()
	GMSServices.provideAPIKey("INSERT YOUR GMS API KEY")
	self.view.addSubview(self.mapView)
	let location = CLLocationCoordinate2D(latitude: 51, longitude: 0)
	self.currentLocationMarker.position = location
	self.currentLocationMarker.map = self.mapView
	}
	override func viewDidLayoutSubviews() {
	super.viewDidLayoutSubviews()
	self.mapView.frame = self.view.bounds
	}
	func mapViewSnapshotReady(_ mapView: GMSMapView) {
	if let v = self.currentLocationMarker.iconView as? CurrentLocationView {
	v.startAnimating()
	}
	}
	}

view raw currentLocation.swift hosted with ❤ by GitHub