I’m using Mapbox in my iOS application, and I’m currently displaying markers on my Points of Interest (POIs) using the code below. I want to customize these markers to display images from the feature properties instead of a marker icon.

Here’s the code I have so far:

1. Adding a Vector Layer with a Marker to show on POIs:

func addVectorLayer(_ mapboxMap: MapboxMap) {
    try? mapProxy?.map?.addImage(UIImage(named: "icon")!, id: "data-image")
    var source = VectorSource(id: "vector-tileset")
    source.url = MapViewLabels.vectorSourceURL

    try? mapboxMap.addSource(source)

    var layer = SymbolLayer(id: "vector-tileset-layer", source: "vector-tileset")
    layer.sourceLayer = "data-bpvgqv"
    layer.iconImage = .constant(.name("data-image"))
    layer.iconAnchor = .constant(.bottom)
    layer.iconOffset = .constant([0, 12])
    try? mapProxy?.map!.addLayer(layer)
}

2. Tapping on the Layer to Get Feature Properties:

Map()
.onLayerTapGesture(MapViewModel.MapViewLabels.circleLayerId) { feature, context in
    layerTapped(feature, context: context)
}

private func layerTapped(_ feature: QueriedFeature, context: MapContentGestureContext) -> Bool {
    guard let properties = feature.feature.properties else { return false }
    print(properties)
    return true
}

I have URLs to images in the feature properties of my POIs. Instead of displaying the default marker icon, I want to show these images. How can I modify my code to achieve this?

Here’s an example of the feature properties:

{
  "type": "reserve",
  "imageUrl": "https://example.com/image.png",
  "lat": "6.980000019073486",
  "lon": "30.57999992370605",
  "id": "268",
  "pageTitle": "Shambe_National_Park"
}

I have tried to get features by using below code but it gives me empty list.

map?.querySourceFeatures(for: "vector-tileset", options: .init(sourceLayerIds: ["data-bpvgqv"], filter: [:]), completion: { result in
   print(result)
})

Any guidance on how to replace the default marker with the images from the feature properties would be greatly appreciated. I want to show images like reference image.

desired output