[Feature] Add multiple images from a url

[asar1]

I've already achieved clustering/un-clustering using circle layers of mapbox, and they can only load static images from the assets folder. is it possible to load image from a url and add it to circle layer? Or is there any other way to achieve this functionality.

[bobysdev]

Facing the same problem, Anyone got some solution for this?

[ZiZasaurus]

@asar1 are you referring to the iconImage property within symbol layers?

[asar1]

Yeah, Symbol layer's iconImage or circle layer's any property. Either works for me

[ZiZasaurus]

You can use the following code to retrieve and display url images as your iconImage:

        if let url = URL(string: "https://media.istockphoto.com/photos/red-apple-picture-id184276818?k=20&m=184276818&s=612x612&w=0&h=QxOcueqAUVTdiJ7DVoCu-BkNCIuwliPEgtAQhgvBA_g=") {
            let task = URLSession.shared.dataTask(with: url) { data, response, error in
                guard let data = data, error == nil else { return }

                DispatchQueue.main.async { /// execute on main thread
                    self.image = UIImage(data: data)

                    try! self.mapView.mapboxMap.style.addImage(self.image, id: "apple")

                    var symbolLayer = SymbolLayer(id: "symbol-layer")
                    symbolLayer.source = sourceID
                    symbolLayer.iconImage = .constant(.name("apple"))

                    try! self.mapView.mapboxMap.style.addSource(source, id: sourceID)
                    try! self.mapView.mapboxMap.style.addLayer(symbolLayer)

                }
            }

            task.resume()
        }

[asar1]

ok, i've got the idea. Thanks @ZiZasaurus. i have to load around 500+ images of users on the map, do you think that approach would be better in that scenario?

[sultan-ali786]

@asar1 did you find a solution for it ?

[ZiZasaurus]

This is not something that is currently handled out of the box by Mapbox, as it is not supported by the style spec, however, there are third-party libraries that can assist with managing asynchronous URL requests, such as SDWebImage.

[sultan-ali786]

@ZiZasaurus but how can we do it I need use images from URL when we un-cluster and use some static images when clustering can you please help here ?

[sultan-ali786]

is there any example or code which can help, we don't want to show any image but the markers with image (from URL)

[asar1]

This is not something that is currently handled out of the box by Mapbox, as it is not supported by the style spec, however, there are third-party libraries that can assist with managing asynchronous URL requests, such as SDWebImage.

Well i'm not having trouble in downloading and setting the images. I want that functionality in unclustered layer (could be circle or symbol layer), but the issue is that these layers could be 1000+ on the map.

So will i be downloading 1000+ images first to set on the map first like below?

try! self.mapView.mapboxMap.style.addImage(self.image, id: "apple")

[1ec5]

I want that functionality in unclustered layer (could be circle or symbol layer), but the issue is that these layers could be 1000+ on the map.

If you need arbitrary images to be loaded on demand rather than upfront when the style loads, consider listening for MapEvents.EventKind.styleImageMissing. In your event handler, you can kick off a network request for the image, then call Style.addImage(_:id:sdf:contentInsets:) asynchronously once you’ve obtained the image. This ensures the application only requests images that the user will actually see. To ensure that the event is fired, set the iconImage property to something unique per URL, such as the URL itself.

[ZiZasaurus]

I'll keep the issue open as a feature request.