Raster

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Raster v9</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

/* .setDefaultCredentials({
});
 */
console.log(deck.carto);
debugger;

const dataSource = deck.carto.rasterSource({
  accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfbHFlM3p3Z3UiLCJqdGkiOiJiMTAyZjgzYyJ9.R2P-6K41Sr3O8lRnJ14I4y9UDfR6xaQPWVpL383lXcE',
  connection: '3dtiles-demo',
  tableName: 'cartobq.public_account.temperature_raster_int8_new'
});


let min = 4.2;
let max = 4.8;

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: 50.1, longitude: 14.45, zoom: 11},
  controller: true,

  // Visualization overlay
  layers: [
    new deck.carto.RasterTileLayer({
      dataSource,
      getFillColor: d => {
        const {band_1} = d.properties;
        return [10 * band_1, 100 + 10 * (band_1 - 20), 0];
      },
      tileSize: 256,
      opacity: 0.5
    })
  ]
});