Raster tiles not rendering colors correctly on map

2 weeks ago 17
ARTICLE AD BOX

I am working on rendering raster tiles on a web map, but I'm encountering an issue where the tiles do not display the expected colors. Instead, they appear either blank, black or incorrectly styled.

Environment:

Framework: React(JavaScript)

Map library: MapLibre GL JS

Data source: Raster tiles (converted from GRIB / other weather data)

Tile format: PNG

Problem

Colors are not visible

Tiles appear black / transparent

No errors in console

Code

map.addSource('raster-source', { type: 'raster', tile: [ 'https://localhost:9000/tiles/{z}/{x}/{y}.png' ] });

Tiles are generated from scientific data (GRIB -> PNG)

I suspect it may be related to missing color mapping or alpha channel

Question

What could cause raster tiles to render without visible color?

Is there something required in MapLibre for proper raster color rendering?

Expected result

Raster tiles should display proper color gradients based on the data
Read Entire Article