Webp Tiles Appear with a black boarder

[paulsUsername]

Webp tiles with transparent tiles are presented with a black boarder on the iOS app. They look fine in GL JS, but on the iOS SDK they have a large black boarder.

Any solution to this?

[OdNairy]

Hey @paulsUsername Can you provide a sample code to reproduce the issue and name the SDK version

[paulsUsername]

Hey!

Would you expect that the iOS SDK should support transparency from WebP tiles?

The tile format we uploaded to Mapbox studio was WebP. Interestingly, if we upload in PNG format we don't have the issue.

So here is a screenshot from Mapbox studio of the map with transparency:

Below is the style URL:

mapbox://styles/hiiker-mapbox/clrqlal5u00c501pl7wm0b02g (public)

Code to add to map (v11.1.0):

class ViewController: UIViewController {
    
    internal var mapView: MapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let centerCoordinate = CLLocationCoordinate2D(latitude: 53.5, longitude: -7.5)
        let camera = CameraOptions(
            center: centerCoordinate,
            zoom: 5
        )
        let options = MapInitOptions(
            cameraOptions: camera,
            styleURI: StyleURI(
                rawValue: "mapbox://styles/hiiker-mapbox/clrqlal5u00c501pl7wm0b02g"
            )
        )
        
        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        view.addSubview(mapView)
    }
}

Screenshot results from the app:

[1ec5]

WebP isn’t supported on iOS; you’re actually looking at a PNG the server returned instead.

mapbox/mapbox-gl-native#5856

[paulsUsername]

@1ec5 One alternative is to use the static tiles API, but would I be correct in saying that you cannot download static tiles (due to lack of mapbox:// URL)?

[paulsUsername]

But also just for full clarity for anyone else, given the correct tileset in a style (i.e. not a webp one) the iOS SDK does support transparency:

[OdNairy]

WebP isn’t supported on iOS; you’re actually looking at a PNG the server returned instead.

iOS platform support WebP images since iOS 14. I was able to manually add WebP with an alpha channel with a transparent background. I've used that sample.

Unfortunately, I've received 404 errors with @paulsUsername sample code.

[1ec5]

Is that an image source connected to a server-side upload? Does the Raster Tiles API return WebP these days for iOS or just PNG? At least at one point, it used to return PNG because of missing WebP support on iOS.

[paulsUsername]

@1ec5 So if you are using the raster tiles API you can explicitly set the type (i.e. webp, png, png8) but when it is a mapbox scheme style, I don't know how to check (even the tile URLs are just mapbox://).

When using the style on the gl js framework, it does return webps as part of the style.

But the very strange thing is, If I upload my data to mapbox studio as PNGs it works perfectly with transparency. But if I upload a webp tileset (and add it to a style) transparency on the app does not work.

We have created a work around but uploading tilesets that are a mix of png and jpeg (which seems to cause no issues). Where there is transparency we leave the tile as a PNG, where there is no transparency we convert to JPEG.

So you get the benefit of small uploadable tilesets and pretty much all of the benefit of WebP (reduced file size).

That looks to me like @OdNairy added that image locally rather than returning through the server.

[OdNairy]

@paulsUsername yep, I've added a local WebP to check if renderer supports WebP format in general. However, @1ec5 is right, and server converts WebP into PNG (JPEG?). I recommend you stick to the workaround you've found already while we investigate the actual WebP support.

[1ec5]

Oh yeah, it’s probably JPEG, now that you mention it. That sounds like a neat workaround by the way.