I can not find a way to update the image of the annotation like the snap chat have during clustering

[sultan-arshi]

I want to use clustering and want to show the markets/annotations in dynamic way Means I have a URL of the picture and I want to use the URL for image when unclustering but could not find a way to do that I am using v 10 the sample is from the sand chat which is doing it

[JenishKananiLime]

Just download image then once downloaded add to mapbox style using add image api and then use the image I’d to show

[sultan-arshi]

how it is possible if there are hundreds of images but let say we are going to do it but during clustering/unClustering we can not use image data. we can only provide the icon name which is string, something like below

var unclusteredLayer = SymbolLayer(id: "unclustered-point-layer")

        // Filter out clusters by checking for `point_count`.
        unclusteredLayer.filter = Exp(.not) {
            Exp(.has) { "point_count" }
        }
        unclusteredLayer.iconImage = .constant(.name("user1"))

how we can use image data in unclusteredLayer.iconImage = .constant(.name("user1")) as we get Data when we download an image

[JenishKananiLime]

unClusteredLayer.iconOffset = .expression(iconOffSetExpression)

      let exp = Exp(.match) {
        Exp(.get) { "isSelected" }
        "true"
        Exp(.match) {
          Exp(.get) { "selectedImageID" }
          "0selected"
          "0selected"

          "1selected"
          "1selected"

          "2selected"
          "2selected"

          Exp(.match) {
            Exp(.get) { "category" }

            "mandatory_parking_spots"
            "selectedMandatoryPinIconImage"

            "preferred_parking_spots"
            "selectedPinIconImage"

            "selectedPinIconImage"
          }
        }

        "false"
        Exp(.match) {
          Exp(.get) { "unselectedImageID" }
          "0unselected"
          "0unselected"

          "1unselected"
          "1unselected"

          "2unselected"
          "2unselected"

          Exp(.match) {
            Exp(.get) { "category" }

            "mandatory_parking_spots"
            "unselectedMandatoryPinIconImage"

            "preferred_parking_spots"
            "unselectedPinIconImage"

            "unselectedPinIconImage"
          }
        }

        Exp(.match) {
          Exp(.get) { "category" }

          "mandatory_parking_spots"
          "unselectedMandatoryPinIconImage"

          "preferred_parking_spots"
          "unselectedPinIconImage"

          "unselectedPinIconImage"
        }
      }

      unClusteredLayer.filter = Exp(.not) {
        Exp(.has) {
          "point_count"
        }
      }

      unClusteredLayer.source = sourceId
      unClusteredLayer.id = layerId
      unClusteredLayer.iconImage = .expression(exp)

here is an example what we we do to show different images of different pins

[ZiZasaurus]

Closing this issue but please feel free to reopen if you experience additional issues with this behavior.