How to do clustering with Google Maps in iOS

Khoa Pham
Khoa Pham
Nov 6, 2019 · 2 min read

Basic with Google Maps

Add to Podfile pod 'GoogleMaps'

Add a custom marker

import GoogleMapsfinal class StopMarker: GMSMarker {
let stop: Stop
init(stop: Stop) {
self.stop = stop
super.init()
self.title = stop.name
self.position = stop.toCoordinate()

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
imageView.layer.cornerRadius = 15
imageView.image = UIImage(named: "pin")
self.iconView = imageView
}
}

Show markers

func handle(stops: [Stop]) {
self.stops = stops
stops
.map({ StopMarker(stop: $0) })
.forEach {
$0.map = mapView
}

}

Assigning $0.map = mapView means telling GMSMapView to start rendering markers

Handle tap

extension ViewController: GMSMapViewDelegate {
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
zoomIn(coordinate: marker.position)
return false
}

func mapView(_ mapView: GMSMapView, didTapInfoWindowOf marker: GMSMarker) {
guard let stopMarker = marker as? StopMarker else {
return
}

let detailViewController = StopDetailViewController(stop: stopMarker.stop)
presentPanModal(detailViewController)
}
}

Clustering

Add google-maps-ios-utils manually by following googlemaps/google-maps-ios-utils:Swift.md@master

Otherwise, with CocoaPods, we get error

[!] The 'Pods-MyApp' target has transitive dependencies that include static binaries: (/Users/khoa/Projects/MyApp/Pods/GoogleMaps/Base/Frameworks/GoogleMapsBase.framework, /Users/khoa/Projects/MyApp/Pods/GoogleMaps/Maps/Frameworks/GoogleMaps.framework, and /Users/khoa/Projects/MyApp/Pods/GoogleMaps/Maps/Frameworks/GoogleMapsCore.framework)

Add ClusterItem

import Foundation
import CoreLocation
class ClusterItem: NSObject, GMUClusterItem {
let position: CLLocationCoordinate2D
let stop: Stop

init(stop: Stop) {
self.stop = stop
self.position = stop.toCoordinate()
}
}

Set up cluster manager

let iconGenerator = GMUDefaultClusterIconGenerator()
let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
renderer.delegate = self
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
clusterManager.setDelegate(self, mapDelegate: self)

Default algorithm GMUNonHierarchicalDistanceBasedAlgorithm

A simple clustering algorithm with O(nlog n) performance. Resulting clusters are not
* hierarchical.
* High level algorithm:
* 1. Iterate over items in the order they were added (candidate clusters).
* 2. Create a cluster with the center of the item.
* 3. Add all items that are within a certain distance to the cluster.
* 4. Move any items out of an existing cluster if they are closer to another cluster.
* 5. Remove those items from the list of candidate clusters.
* Clusters have the center of the first element (not the centroid of the items within it).

Make ClusterItem and add to clusterManager. In the end, call clusterManager.cluster()

func handle(stops: [Stop]) {
self.stops = stops
stops
.map({ StopMarker(stop: $0) })
.forEach {
let item = ClusterItem(stop: $0.stop)
clusterManager.add(item)
}

clusterManager.cluster()
}

By default, clusterManager uses renderer to render default pin marker. Implement GMUClusterRendererDelegate to use our custom StopMarker

extension ViewController: GMUClusterRendererDelegate {
func renderer(_ renderer: GMUClusterRenderer, markerFor object: Any) -> GMSMarker? {
switch object {
case let clusterItem as ClusterItem:
return StopMarker(stop: clusterItem.stop)
default:
return nil
}
}
}

Finally handle tapping on cluster and cluster item

extension ViewController: GMUClusterManagerDelegate {
func clusterManager(_ clusterManager: GMUClusterManager, didTap cluster: GMUCluster) -> Bool {
print("tap cluster")
return false
}

func clusterManager(_ clusterManager: GMUClusterManager, didTap clusterItem: GMUClusterItem) -> Bool {
print("tap cluster item")
return false
}
}

Fantageek

Simple apps that make sense

Khoa Pham

Written by

Khoa Pham

My apps https://onmyway133.github.io/

Fantageek

Fantageek

Simple apps that make sense

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade