CartoLayer QUERY

by felixp

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>OpenLayers + deck.gl</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
   <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
   <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: medium;
}

JavaScript

// Dynamic CARTO tileset example
// + basemap rendered using Openlayers with deck.gl overlay

deck.carto.setDefaultCredentials({
  accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI1YTVmYTRhZSJ9.L4klfTKQQ69yrOk_LhS3cgJMZ1gDiW2-cK0vkNhafxY',
  apiBaseUrl: 'https://gcp-us-east1.api.carto.com'
});

const colorBins = deck.carto.colorBins({
  attr: 'pop_density',
  domain: Array.from([0, 0.00001, 0.00005, 0.0001, 0.1, 1], x => x * 0.18),
  colors: 'PinkYl'
})

function getFillColor({properties: {pop_density}}) {
  return colorBins({
    properties: {pop_density: parseFloat(pop_density)}
  });
}

// deck.gl layers to display
const layers = [
  new deck.carto.CartoLayer({
    id: 'layer1',
    type: deck.carto.MAP_TYPES.QUERY,
    connection: 'se-bigquery',
    data: 'select geom, geoid, total_pop, households, cast(pop_density as float64) as pop_density from `cartodb-gcp-solutions-eng-team`.DEMO.joined_block_groups_2019',
    getFillColor,
    getLineColor: [255, 255, 255, 10],
    lineWidthMinPixels: 1,
    pickable: true,
    onClick: info =>
      // eslint-disable-next-line
      info.object && console.log(info.object.properties)
  })
];

// Create deck instance
const deckGL = new deck.Deck({
  initialViewState: {
    longitude: 0,
    latitude: 0,
    zoom: 1
  },
  controller: false,
  parent: document.getElementById('map'),
  style: {
    pointerEvents: 'none',
    'z-index': 1
  },
  layers
});

// Sync deck view with OL view
const deckLayer = new ol.layer.Layer({
  render: function({
    size,
    viewState
  }) {
    const [width, height] = size;
    const [longitude, latitude] = ol.proj.toLonLat(viewState.center);
    const zoom = viewState.zoom - 1;
    const bearing = (-viewState.rotation * 180) / Math.PI;
    const deckViewState = {
      bearing,
      longitude,
      latitude,
      zoom
    };
    deckGL.setProps({
      width,
      height,
      viewState: deckViewState
    });
    deckGL.redraw();
  }
});

// Create OL map with...