import {DeckGL} from '@deck.gl/react';
import {RasterTileLayer} from '@deck.gl/carto';
import {rasterSource} from '@carto/api-client';

function App({viewState}) {
  const data = rasterSource({
    accessToken: 'XXX',
    connectionName: 'carto_dw',
    tableName: 'cartobq.public_account.temperature_raster'
  });

  const layer = new RasterTileLayer({
    data,
    getFillColor: d => {
      const {band_1} = d.properties;
      return [10 * (band_1 - 20), 0, 300 - 5 * band_1];
    }
  })

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/carto

import {RasterTileLayer} from '@deck.gl/carto';
new RasterTileLayer({});

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>

<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>

new deck.carto.RasterTileLayer({});