iOS Mapbox SDK - How to add MGLPointAnnotation markers into a map layer

by Bernardo Henriques   Last Updated September 11, 2019 19:26 PM - source

I need to find a way to convert markets from MGLPointAnnotation to MGLShapeSource or similar, in order to add the markers to a map layer and have full control over how to display and cluster them on the map, for example.

I am building an iOS App using MapBox SDK v5.2. The App generates markers internally (title, subtitle, coordinates and icon image name) and the markers are displayed on the map with a callout when tapped. The markers are created using MGLPointAnnotation() and added to the map using mapView.addAnnotation().

But in order to have full control on how the markers are displayed, for example clustering them based on zoom level or toggling them ON/OFF, I need to add the markers to a Map layer, using for example MGLShapeSource and then style.addSource()and style.addLayer().

The problem is I cannot find a way to converter from MGLPointAnnotation to MGLShapeSource or similar. I have investigated this but the only solution I can think of is to have the marker information contained in a GeoJSON file. But I want to avoid that as the markers are generated within the App when its running, and not from an external read-only GeoJSON file.

Example on how one single poi is created:

let poi1 = MGLPointAnnotation() poi1.coordinate = CLLocationCoordinate2D(latitude: 38.788534, longitude: -9.494489) poi1.title = "poi1" poi1.subtitle = "This is the text for poi1" poiTitleImage[poi1.title!] = "icon1"

mapView.addAnnotation(poi1)

Tags : mapbox-ios


Answers 1


You can create an MGLShapeSource with an array of MGLPointAnnotation or MGLPointFeature objects. From there, you can add a clustered layer similar to this clustering example.

For example:

        var features = [MGLPointFeature]()
        for _ in 1...100 {
            let point = MGLPointFeature()

            let lat = Double(arc4random_uniform(180) / 2)
            let lon = Double(arc4random_uniform(360) / 2)

            point.coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)
            features.append(point)
        }
        let source = MGLShapeSource(identifier: "clusteredFeatures",
                                    features: features,
                                    options: [.clustered: true, .clusterRadius: 20])
        style.addSource(source)

jmkiley
jmkiley
September 11, 2019 19:25 PM

Related Questions



MapBox supercluster wrong cluster locations

Updated September 03, 2019 17:26 PM

Mapbox and "Places"

Updated July 28, 2017 10:26 AM


How to draw multiple lines on Mapbox GL JS

Updated June 20, 2018 12:26 PM