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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // 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() | |
| } | |
| } | |
| } | |
