Clustering MGLAnnotations Images on iOS mapbox using MGLPointCollectionFeature - ios

Question

Using latest Mapbox iOS SDK. Custom MGLAnnotations with different images that all appear correctly. I am setting annotations like so:
self.mapView.addAnnotations(annotations)
self.setupClustering(for:annotations)
Trying to implement example provided by mapbox using MGLPointCollectionFeature instead of GeojSON file.
Hardcoding with to a large number to make sure that clustering occurs. Actual width of the icon is 29.
EDIT: no clustering, circler with number does not appear
let clusterSource = MGLShapeSource(identifier: "clusterSource", shape: nil, options: [.clustered: true, .clusterRadius: 100])
func setupClustering(for annotations:[MGLAnnotation]) {
let coordinates = annotations.map { $0.coordinate }
let allAnnotationsFeature = MGLPointCollectionFeature(coordinates: coordinates, count: UInt(coordinates.count))
self.clusterSource.shape = allAnnotationsFeature
}
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
self.mapView.style?.addSource(self.clusterSource)
// Color clustered features based on clustered point counts.
let stops = [
2: UIColor.lightGray,
5: UIColor.orange,
10: UIColor.red
]
// Show clustered features as circles. The `point_count` attribute is built into
// clustering-enabled source features.
let circlesLayer = MGLCircleStyleLayer(identifier: "clusteredItems", source: self.clusterSource)
circlesLayer.circleRadius = NSExpression(forConstantValue: NSNumber(value: Double(100) / 2))
circlesLayer.circleOpacity = NSExpression(forConstantValue: 0.75)
circlesLayer.circleStrokeColor = NSExpression(forConstantValue: UIColor.white.withAlphaComponent(0.75))
circlesLayer.circleStrokeWidth = NSExpression(forConstantValue: 2)
circlesLayer.circleColor = NSExpression(format: "mgl_step:from:stops:(point_count, %#, %#)", UIColor.lightGray, stops)
circlesLayer.predicate = NSPredicate(format: "cluster == YES")
self.mapView.style?.addLayer(circlesLayer)
// Label cluster circles with a layer of text indicating feature count. The value for
// `point_count` is an integer. In order to use that value for the
// `MGLSymbolStyleLayer.text` property, cast it as a string.
let numbersLayer = MGLSymbolStyleLayer(identifier: "clusterNumbers", source: self.clusterSource)
numbersLayer.textColor = NSExpression(forConstantValue: UIColor.white)
numbersLayer.textFontSize = NSExpression(forConstantValue: NSNumber(value: Double(100) / 2))
numbersLayer.iconAllowsOverlap = NSExpression(forConstantValue: true)
numbersLayer.text = NSExpression(format: "CAST(point_count, 'NSString')")
numbersLayer.predicate = NSPredicate(format: "cluster == YES")
self.mapView.style?.addLayer(numbersLayer)
}

Answer 1

It looks like you're initializing your MGLShapeSource with shapes instead of features (https://docs.mapbox.com/ios/api/maps/6.0.0/Classes/MGLShapeSource.html#/c:objc(cs)MGLShapeSource(im)initWithIdentifier:features:options:). This is preventing your points from clustering because any MGLFeature instance passed into this initializer is treated as an ordinary shape, causing any attributes to be inaccessible to an MGLVectorStyleLayer when evaluating a predicate or configuring certain layout or paint attributes.
Additionally, for clustering, you would want to use point shapes as mentioned here. At the moment, you're using MGLPointCollectionFeatures instead of MGLPointFeatures, which means that instead of having 5 point features with 5 features, each with their own attributes, you have a point collection feature containing five points with one feature that has the same attribute.
If you create arrays of MGLPointFeatures instead, you can use these in the features parameter for your shape source initializers.
I’ve included an example below:
var unclusteredFeatures = [MGLPointFeature]()
for coordinate in coordinates {
let point = MGLPointFeature()
point.coordinate = coordinate
unclusteredFeatures.append(point)
}
let source = MGLShapeSource(identifier: "Features",
features: unclusteredFeatures,
options: [.clustered: true, .clusterRadius: 20])
style.addSource(source)