Tiles render with black background on Android/iOS that is not present on web.

[mcclen]

Attached screen shot of simulator. The tile was added to simple map with only a background layer. Same sort of thing happens with more detailed, multi-layer maps. Depending on the zoom level the size of the back box changes.

The tile seems fine on the web with browsers.

Thoughts on how to eliminate this effect?

Here's my environment:

react-native info info React Native Environment Info: System: OS: macOS 10.14.4 CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz Memory: 6.04 GB / 24.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 11.7.0 - ~/.nvm/versions/node/v11.7.0/bin/node npm: 6.9.0 - ~/.nvm/versions/node/v11.7.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 23.0.1, 27.0.3, 28.0.3 System Images: android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.3 AI-182.5107.16.33.5314842 Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: ^0.59.1 => 0.59.2 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

[SteveBamelis]

@mcclen , did you ever manage to get this sorted out?

We are having the same issue on our devices. If we look throught web link (http) we do not have this. There was a moment that Edge browser was also showing this black area but now with the latest version this is gone.

So, it is on a device, running the app (build in react native), that is representing this black area.

[Kamony]

the problem is that your tile server is serving the tiles as JPG files. JPG does not support alpha channel so edges are filled with black color instead.

Solution is to set tile template url to return png files If possible.

In my case i had to set MapboxGL.RasterSource's tileUrlTempates as tileUrlTemplates={['http://a.tiles.mapbox.com/v4/{YOUR_ID}/{z}/{x}/{y}.png?access_token={TOKEN}]} notice the .png suffix.

this solution however lead to another problem with network permissions which i solved by following this stack overflow issue

[mcclen]

No, did not solve.

On May 19, 2021, at 1:18 AM, Kamony @.***> wrote:

the problem is that your tile server is serving the tiles as JPG files. JPG does not support alpha channel so edges are filled with black color instead.

Solution is to set tile template url to return png files If possible.

In my case i had to set MapboxGL.RasterSource's tileUrlTempates as tileUrlTemplates={['http://a.tiles.mapbox.com/v4/{YOUR_ID}/{z}/{x}/{y}.png?access_token={TOKEN}]} notice the .png suffix.

this solution however lead to another problem with network permissions which i solved by following this stack overflow issue https://stackoverflow.com/questions/32631184/the-resource-could-not-be-loaded-because-the-app-transport-security-policy-requi — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nitaliano/react-native-mapbox-gl/issues/1594#issuecomment-843863790, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB7WXZWUQ5IYDBCA6GBFYLTONX5FANCNFSM4HIO3FCA.

[rumicuna]

I see that adding .png to the end is documented, but when I try doing that I get this back from mapbox: {"message":"Not Found"} Did mapbox stop supporting png images for tiles?