How to implement GMUClusterRenderer in Swift
If you included Google-Maps-iOS-Utils source files to your project there are one "dirty" way to change icon of marker.
Unfortunately there are no public methods to set custom icon, but you can change it in source file.
In Google Map Utils/Clustering/View/GMUDefaultClusterRenderer.m
- (void)renderCluster:(id<GMUCluster>)cluster animated:(BOOL)animated {
...
GMSMarker *marker = [self markerWithPosition:item.position
from:fromPosition
userData:item
clusterIcon:[UIImage imageNamed:@"YOUR_CUSTOM_ICON"]
animated:shouldAnimate];
...
}
Than you could setup your cluster manager (Swift)
private func setupClusterManager() {
let iconGenerator = GMUDefaultClusterIconGenerator()
let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
let renderer = GMUDefaultClusterRenderer(mapView: mapView,
clusterIconGenerator: iconGenerator)
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm,
renderer: renderer)
}
I found a clean solution for clustered markers, on Swift 4, to use a custom image for the cluster with the number of cluster inside:
class MapClusterIconGenerator: GMUDefaultClusterIconGenerator {
override func icon(forSize size: UInt) -> UIImage {
let image = textToImage(drawText: String(size) as NSString,
inImage: UIImage(named: "cluster")!,
font: UIFont.systemFont(ofSize: 12))
return image
}
private func textToImage(drawText text: NSString, inImage image: UIImage, font: UIFont) -> UIImage {
UIGraphicsBeginImageContext(image.size)
image.draw(in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))
let textStyle = NSMutableParagraphStyle()
textStyle.alignment = NSTextAlignment.center
let textColor = UIColor.black
let attributes=[
NSAttributedStringKey.font: font,
NSAttributedStringKey.paragraphStyle: textStyle,
NSAttributedStringKey.foregroundColor: textColor]
// vertically center (depending on font)
let textH = font.lineHeight
let textY = (image.size.height-textH)/2
let textRect = CGRect(x: 0, y: textY, width: image.size.width, height: textH)
text.draw(in: textRect.integral, withAttributes: attributes)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}
}
Than the setup for the cluster manager:
private func setupClustering() {
guard let mapView = self.mapView else { return }
let iconGenerator = MapClusterIconGenerator()
let renderer = MapClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
}
I also used a custom cluster renderer MapClusterRenderer.
In Swift 4.2 :
you can use GMUClusterRendererDelegate:
Add this extension to your controller and be sure that your controller is the delegate of GMUClusterRendererDelegate :
willRenderMarker will call each time a marker going to be render (both cluster marker and clusterItemMarker so you can check it by simple if).so you can modify it's icon and etc before showing it to user
extension YourController: GMUClusterRendererDelegate {
func renderer(_ renderer: GMUClusterRenderer, willRenderMarker marker: GMSMarker) {
// if your marker is pointy you can change groundAnchor
marker.groundAnchor = CGPoint(x: 0.5, y: 1)
if let markerData = (marker.userData as? PersonMarker) {
let icon = markerData.imageURL
marker.iconView = CustomMarkerView(forUrl: url)
}
}
}
And PersonMarker is your marker class that subclass NSObject and GMUClusterItem : (you can use default class of GMUClusterItem but if you need some other properties you can subclass it)
class PersonMarker: NSObject, GMUClusterItem {
var position: CLLocationCoordinate2D
var imageURL : String?
var name: String?
var userdId: String?
var lastSeen: String?
init(position: CLLocationCoordinate2D, url: String?, name: String?, userId: String?, lastSeen: String?) {
self.position = position
self.imageURL = url
self.name = name
self.userdId = userId
self.lastSeen = lastSeen
}
}
You can add PersonMarker to your GMUClusterManager like this :
let position = CLLocationCoordinate2D(latitude: item.latitude!, longitude: item.longitute!)
let person = PersonMarker(position: position, url: item.user?.avaterUrl, name: item.user?.name, userId: item.user?.userId, lastSeen: item.lastUpdate)
clusterManager.add(person)
I manage to find "clean" solution, even though it's still confusing. But it works!
1) Create .h file "MarkerManager"
#import <Foundation/Foundation.h>
@import CoreLocation;
#import "GMUClusterItem.h"
#import <GoogleMaps/GoogleMaps.h>
@interface MarkerManager: NSObject
@property (nonatomic) CLLocationCoordinate2D location;
@property (nonatomic, strong) GMSMarker *marker;
@end
2) Go to GMUDefaultClusterRenderer class in Google-Maps-iOS-Utils folder, import MarkerManager.h class find and change this method:
// Returns a marker at final position of |position| with attached |userData|.
// If animated is YES, animates from the closest point from |points|.
- (GMSMarker *)markerWithPosition:(CLLocationCoordinate2D)position
from:(CLLocationCoordinate2D)from
userData:(id)userData
clusterIcon:(UIImage *)clusterIcon
animated:(BOOL)animated {
GMSMarker *marker = [self markerForObject:userData];
CLLocationCoordinate2D initialPosition = animated ? from : position;
marker.position = initialPosition;
marker.userData = userData;
if (clusterIcon != nil) {
marker.icon = clusterIcon;
marker.groundAnchor = CGPointMake(0.5, 0.5);
}
//added
else {
MarkerManager *data = userData;
if(data != nil) {
marker.icon = data.marker.icon;
}
}
//ends here
marker.zIndex = _zIndex;
if ([_delegate respondsToSelector:@selector(renderer:willRenderMarker:)]) {
[_delegate renderer:self willRenderMarker:marker];
}
marker.map = _mapView;
if (animated) {
[CATransaction begin];
[CATransaction setAnimationDuration:kGMUAnimationDuration];
marker.layer.latitude = position.latitude;
marker.layer.longitude = position.longitude;
[CATransaction commit];
}
if ([_delegate respondsToSelector:@selector(renderer:didRenderMarker:)]) {
[_delegate renderer:self didRenderMarker:marker];
}
return marker;
}
3) Create new swift class, POIItem:
class POIItem: NSObject, GMUClusterItem {
var position: CLLocationCoordinate2D
@objc var marker: GMSMarker!
init(position: CLLocationCoordinate2D, marker: GMSMarker) {
self.position = position
self.marker = marker
}
}
4) Extend GMUDefaultClusterRenderer class and override markerWithPosition method:
import Foundation
import UIKit
class CustomMarkers: GMUDefaultClusterRenderer {
var mapView:GMSMapView?
let kGMUAnimationDuration: Double = 0.5
override init(mapView: GMSMapView, clusterIconGenerator iconGenerator: GMUClusterIconGenerator) {
super.init(mapView: mapView, clusterIconGenerator: iconGenerator)
}
func markerWithPosition(position: CLLocationCoordinate2D, from: CLLocationCoordinate2D, userData: AnyObject, clusterIcon: UIImage, animated: Bool) -> GMSMarker {
let initialPosition = animated ? from : position
let marker = GMSMarker(position: initialPosition)
marker.userData! = userData
if clusterIcon.cgImage != nil {
marker.icon = clusterIcon
}
else {
marker.icon = self.getCustomTitleItem(userData: userData)
}
marker.map = mapView
if animated
{
CATransaction.begin()
CAAnimation.init().duration = kGMUAnimationDuration
marker.layer.latitude = position.latitude
marker.layer.longitude = position.longitude
CATransaction.commit()
}
return marker
}
func getCustomTitleItem(userData: AnyObject) -> UIImage {
let item = userData as! POIItem
return item.marker.icon!
}
}
5) In MapViewController init POIItem in generateClusterItems method:
private func generateClusterItems() {
for object in DataManager.sharedInstance.mapItemsArray {
let doubleLat = Double(object.latitude)
let doubleLong = Double(object.longitude)
let latitude = CLLocationDegrees(doubleLat!)
let longitude = CLLocationDegrees(doubleLong!)
let position = CLLocationCoordinate2DMake(latitude, longitude)
let marker = GMSMarker(position: position)
let item = POIItem(position: position, marker: marker)
self.clusterManager.add(item)
item.mapItem = object
}
}
Inside the for loop you can call:
marker.icon = UIImage(named:"YOUR_IMAGE_NAME")
Now you can set logic to have more then one custom markers.