Raster

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Raster</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

deck.carto.setDefaultCredentials({
  accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI4YmE2Nzk5NyJ9.eKN6tmDPQML5Yr2iu1B7z5ojC_flwbBLPlVMINwSZjE'
});

const deckgl = new deck.DeckGL({
  // Basemap style
  container: 'map',
  // Can also use 'positron', 'dark-matter' instead of voyager
  mapStyle: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",

  // Initial map location
  initialViewState: {latitude: 0, longitude: 0, zoom: 0},
  controller: true,

  // Visualization overlay
  layers: [
    new deck.carto.CartoLayer({
      type: 'raster',
      connection: 'bigquery',
      data: 'cartodb-data-engineering-team.jarroyo_raster.sdsc23_5_quadbin',
      getFillColor: d => {
        const {band_1} = d.properties;
        return [10 * (band_1 - 20), 0, 300 - 5 * band_1];
      },
      tileSize: 128,
      opacity: 0.5,
      loadOptions: {worker: true}
    })
  ]
});