mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.07k stars 2.21k forks source link

Could not load image because of The source image could not be decoded Error when adding WMTS layer #11465

Open sanidhya-singh opened 2 years ago

sanidhya-singh commented 2 years ago

mapbox-gl-js version: 2.6.1

browser: Chrome v 97.0.4692.99

Steps to Trigger Behavior

add WMTS layer to map as "raster" (using NOAA imagery in example)

Link to Demonstration

https://codepen.io/sanidhya-pratap-singh/pen/JjOKpqV

Expected Behavior

All tiles should be rendered

Actual Behavior

All tiles are not rendered correctly. Tiles are missing altogether or showing old image from lower zoom level. Constant error in browser console

Error: Could not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.

Screenshot 2022-02-03 at 4 44 18 PM

Screenshot 2022-02-03 at 5 20 07 PM

ianlin17 commented 2 years ago

I am facing the same issue, the weird thing is that it works on local but failed after deployed to S3. I've tried to add the images into controller by mapController.addImage() then set this in iconImage of SymbolOptions

jasonwoo commented 2 years ago

hey,

I think your jumbled tiles might be related to loading multiple tile urls in addLayer. These endpoints all contain different content so loading individually is probably necessary. See:

https://github.com/mapbox/tilejson-spec/tree/master/1.0.0

// REQUIRED. An array of tile endpoints. {z}, {x} and {y} are replaced with // the corresponding integers. If multiple endpoints are specified, clients // may use any combination of endpoints. All endpoints MUST return the same // content for the same URL. The array MUST contain at least one endpoint.

Still seeing the error in the console but the tiles seem to look ok.

alamenai commented 1 week ago

I'm facing the same issue!