'raster tiles from a custom source in ReactMapGL

I'm new to ReactMapGL library, I need to load openweathermap data on Mapbox map using ReactMapGL library following the way I have tried but it is not successful.

 <ReactMapGL
            {...viewport}
            width="100%"
            height="300px"
            transformRequest={transformRequest(credentials)}
            mapStyle={mapName}
            onViewportChange={setViewport}
          >          
            <Source id='weatherSource' type='raster' tiles={["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"]} tileSize={256}>
                  <Layer {...weatherLayer} />
            </Source>

            <div style={{ position: "absolute", right: 20, bottom: 20 }}>
              <NavigationControl showCompass={false} />
            </div>
          </ReactMapGL>

export const weatherLayer: LayerProps = {
  id: 'weatherLayer',
  type: 'raster',
  paint: {
    'fill-opacity': 0.7
  },
  minzoom: 0,
  maxzoom: 22
}

But I have tried the same approach using HTML it was a success.

<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 4,
    center: [-87.622088, 41.878781]
});

map.on('load', function(){
  map.addLayer({
    "id": "simple-tiles",
    "type": "raster",
    "source": {
      "type": "raster",
      "tiles": ["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"],
      "tileSize": 256
    },
    "minzoom": 0,
    "maxzoom": 22
  });
});

</script>

</body>

Solution 1:^[1]

I think that the problem is in the style definition. It should be like this, there is no fill-opacity property, for raster is raster-opacity:

const weatherLayer: LayerProps = {
  id: 'weatherLayer',
  type: 'raster',
    paint: {
    'raster-opacity': 0.5
  },
  'background-opacity': 0.9,
  minzoom: 0,
  maxzoom: 22,
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	4b0

'raster tiles from a custom source in ReactMapGL

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]