Displaying marker in middle of openstreetmap polygon (iOS)

Question

I'm trying to create an application which will display children playground. I found that open street map actually has pretty good data for this.

So I used the http://overpass-turbo.eu to extract the data.

I then am using mapbox to display the data. Unfortunately i'm a beginner with openstreetmap and associated SDKs.

The problem I'm running into is that some of those park are polygons. I just want to be able to display a marker on the map where the park is, not draw the shape of the park.

I followed this tutorial from mapbox to display circles on the data point, but it's drawing a circle on every coordinate in the polygons...

SO how can i either tell mapbox to add just an image in the center of the polygon? Do I have to modify the data I get from overpass? Can I query overpass differently to only get centroids?

Thanks for any pointers

EDIT I was asked to add code. Really the code does not have much yet, so i don't think it has much value here as I'm asking for what is teh best approach to the problem. This is the delegate to add teh source that contains the data (in swift)

    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

    let source = MGLVectorTileSource(identifier: "export-ddqmvm", configurationURL: URL(string: "mapbox://mobdesign.9zilzleo")!)
    style.addSource(source)

    let layer = MGLCircleStyleLayer(identifier: "landmarks", source: source)
    layer.sourceLayerIdentifier = "export-ddqmvm"
    layer.circleColor = NSExpression(forConstantValue: #colorLiteral(red: 0.67, green: 0.28, blue: 0.13, alpha: 1))
    layer.circleOpacity = NSExpression(forConstantValue: 0.8)
    style.addLayer(layer)

}

Also here is the tutorial I got this code from: https://www.mapbox.com/help/ios-dds-circle-layer/

Answer 1

I finally figured out that if I use MGLSymbolStyleLayer instead of MGLCircleStyleLayer, then the symbol is added only once for shape. Achieving the effect i was looking for.

Here is the code matching the above code:

    let markerLayer = MGLSymbolStyleLayer(identifier: "playgrounds", source: source)
    markerLayer.sourceLayerIdentifier = "export-ddqmvm"
    markerLayer.iconImageName = NSExpression(forConstantValue: "mapMarker")
    markerLayer.iconAnchor = NSExpression(forConstantValue: "bottom")
    markerLayer.iconAllowsOverlap = NSExpression(forConstantValue: "YES")

    style.addLayer(markerLayer)
    style.setImage(UIImage(named: "mapMarker")!, forName: "mapMarker")

I hope it helps someone else