Mapbox-gl-native: Transparency in raster overlays is not supported

[cammace]

Using the same source and layer settings in this GL JS example but getting a black tile background. Here's what it looks like on Android:

cc: @ivovandongen

[friedbunny]

The black borders should be transparent, but the raster image format we’re using (JPG) does not support transparency, which is a known issue that exists in every gl-native-based SDK. The solution will be to serve a raster format that allows for transparency and then add support for that format here in core.

• JPG is efficient (both in size and decode time) but does not support an alpha channel.
• PNG does support alpha, but is not size efficient.
• WebP is theoretically efficient and does support alpha, but our efforts to implement support in core have shown that it is quite slow to decode. See https://github.com/mapbox/mapbox-gl-native/issues/3572.

Indeed, this is a wider platform problem: the GL-JS example you linked to is broken in the same way in Safari (because there is no WebP support and we serve that browser JPGs):

You’re probably using Chrome, which Mapbox detects and serves WebP raster tiles.

[jfirebaugh]

WebP is theoretically efficient and does support alpha, but our efforts to implement support in core have shown that it is quite slow to decode. See #3572.

Is there more detail about "quite slow to decode" somewhere? I don't see any reference to performance issues in #3572.

[friedbunny]

Is there more detail about "quite slow to decode" somewhere? I don't see any reference to performance issues in #3572.

@jfirebaugh It looks like @brunoabinader and @kkaefer came to that conclusion elsewhere while working on Qt, which (last I heard), resulted in us yanking WebP decoding from that platform.

[kkaefer]

We were evaluating JPEG vs. WebP decoding speeds and many platforms (like iOS) have highly optimized JPEG decoders that take advantage of hardware features for FFT et al; WebP doesn't have that sort of optimization on those platforms. That being said, we should not remove WebP support because there are valid uses cases for it, despite it being slower to decode (~2-3× in some cases).

[mb12]

Currently in memory caching is disabled for Raster sources in native. Enabling it might help with performance since it would avoid re decoding and re uploading the texture to Gpu every time the tile goes out and re appears in view port.

[mikelmaron]

Pinging here. Friend reported this issue to me just recently. Fix on the horizon?

[edgarmacas]

Some solution for android, How to enable cache Raster in sdk Android

[kkaefer]

Noting here that raster caching was enabled in https://github.com/mapbox/mapbox-gl-native/pull/7091

[mmuelder]

We're also looking forward to a fix.

GL JS version works perfectly fine:

Android and iOS however do not:

[friedbunny]

GL JS version works perfectly fine

@mmuelder See https://github.com/mapbox/mapbox-gl-native/issues/5856#issuecomment-237379739 — browser support for semi-transparent tiles (via WebP) is currently limited to Chrome.

[phfeitosaa]

I am having the same problem in my application. I already tried to create a tileset with the vector type, but the image quality was very poor in the smartphone. Has anyone managed to find a solution to this?
If anyone can help, I would appreciate it.

[robotjosh]

Is there another way to load a raster in mapbox for ios/android? I can't have these black borders.

[kuchmiyalex]

Is there any solution coming on horizon or this feature won't work on iOS at all?

[robotjosh]

I don't think they plan on fixing this soon. The workaround is to load
these geotiff into map box as a resource and add a line of code to load
that resource into the map box interface.

-Josh

On Mon, Aug 7, 2017 at 1:57 AM, kuchmiyalex [e-mail]
wrote:

Is there any solution coming on horizon or this feature won't work on iOS
at all?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-native/issues/5856#issuecomment-320584282,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABM7hg01LEJ5Ff9xwJgkDnccd0sHFkLcks5sVrVagaJpZM4Jb5N6
.

[kuchmiyalex]

@robotjosh Can you help me get this working? I'm adding geotiff into Mapbox Studio as a tileset, then adding it in a new layer in new style. Then using new style in iOS demo app. Got the same black background issue anyways. Is that approach you meant?

[asheemmamoowala]

@kuchmiyalex - in case your image(s) are not very large, you could use the 'Image' source type that was added in #1350. While it is mostly complete, it will not be available until the next major SDK release for iOS/Android.

[warrenhharding]

Hi there, is there any update on this issue yet?

[robotjosh]

No but the workaround is simple enough.

On Sat, Nov 11, 2017 at 1:37 AM, Warren [e-mail] wrote:

Hi there, is there any update on this issue yet?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-native/issues/5856#issuecomment-343647155,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABM7hp1A-leWTrGZvx7Rni3rGZbVFgO-ks5s1U67gaJpZM4Jb5N6
.

[baptistae]

Hi, just wondering if this issue has been resolved. If so how was it done?

[khannah]

Hi, we are having the same issue :(

[mmuelder]

I don't really see why this issue was closed, I'm also hoping for a fix / transparency support, a wokaround that requires coding shouldn't be the answer imho. But this is a mapbox.com/studio problem, not one of the mapbox gl code because it supports png with transparency (if you host the tiles yourself for example). Not sure where the right repo would be though.

[asheemmamoowala]

this is a mapbox.com/studio problem, not one of the mapbox gl code because it supports png with transparency (if you host the tiles yourself for example). Not sure where the right repo would be though.

@mmuelder This issue is still open, but there are no current plans to work on it. For questions or issues related to other mapbox products contact support. Thank you!

[mmuelder]

@asheemmamoowala Oh right its open, I got it wrong, sorry :)

[byroncoetsee]

Hi All,
Sorry for opening this again but since there's no effort to fix the problem because there's a "simple enough work around", can someone please link to some help regarding this workaround?

Maybe @robotjosh can give some insight?

The workaround is to load these geotiff into mapbox as a resource (on the device or in studio somewhere?) and add a line of code to load that resource into the mapbox interface (A line of code?)

Thanks.
Again, sorry for reopening this but if this is going to be the closest to a solution for something which is pretty serious, there needs to actually be some followable steps.

[RameshAran]

Still not clear about the fix. Any help on this will be appreciated as its such a bad user experience.

[asheemmamoowala]

@RameshAran This can be done with an Image Source if the image is not too large.

[johnhaup]

If I upload a GeoTiff as a tile set in studio, is there any way to render it on mobile where the transparency will work?