Point 2D layer type

Author: felixpalmer

test/apps/carto-trajectories/app.tsx

@@ -6,15 +6,15 @@ import {MapboxOverlay} from '@deck.gl/mapbox';
 
 import {DeckProps } from '@deck.gl/core';
 import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
-import {TrajectoryTileLayer, colorCategories, colorContinuous} from '@deck.gl/carto';
+import {TrajectoryTileLayer, VectorTileLayer, colorCategories, colorContinuous} from '@deck.gl/carto';
 import {normalizeTimestamp} from '@deck.gl/carto/layers/trajectory-utils';
 
 import RangeInput from './range-input';
 
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
 const apiBaseUrl = 'https://gcp-us-east1-19.dev.api.carto.com';
-const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTYxMzMzNTIsImV4cCI6MTc1NjIxOTc1Miwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.EjzngAetlti0h2swo58o5qUPYKbrTd7EqVrFwk0KwHEPate15HINCvoNKKW5ythu3q916YW9J9SwDWsZqGevrhW8jFP7fnJyuV8zTXbFmtV_QtfjJnNBVide25qVoF57iCd0CnNV8_y8brrJ_mk2JRaqe6YDWN6Z36b6AK4KCN9QI4R3K8Xf5JwbwToUNAbQIAhMuPQVxCYmeMJej42WnkbldztuwblTPmGJQrMoHRkiMsGkMtRuK7XCrYWWbyq9uCN0VVNEpPF7VWw-5mI06qf9ndlwRsWPFg1NkjNDUsCeFs_K8A-GcoGtgvKDT_2uGjA9MELh4GXReSNdAPMiGw';
+const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTYzNjc4MDMsImV4cCI6MTc1NjQ1NDIwMywic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.sGTGkTacpHSe-elWWNVZq_4Lln43cOirJS1KKXefyAc43zFt433X_Hi007ZmkKR4_nq-iKf5nwKH0EbHI3JQuY2Zko-qRoTiqY7OeKo5u0m6rUY9QEHAsyOIuvL0gGuAWT_k0AMXCAx-fASioFl_U5qrxDihtROnL_LJdULe5P8-yMryTmnAwusej3ZgLr9gVWNNDVtjuum-C85SJaNfEnrpeDPyWJWTFUTu7FboS0NYEHexJyJXUoDW5LS1M46QvtcahPEqTnd5sRkSIHESLDyr_rgv_gET-9buyRnQEl0EXNhw2hDesLLyzeM292M1osvWhf7UlHitROxHCmFK2A';
 
 const DATASETS = {
   'NYC Taxi Trips (Query)': {
@@ -114,7 +114,7 @@ const DATASETS = {
 }
 const DATASET_NAMES = Object.keys(DATASETS);
 
-const LAYER = { Path: 'Path 2D', Trips: 'Trips 2D' };
+const LAYER = { Path: 'Path 2D', Trips: 'Trips 2D', Points: 'Point 2D' };
 
 const OUTLINES = {
   black: 'black',
@@ -288,9 +288,31 @@ export default function App() {
 
   const [layer] = layerType.split(' ');
   const showTrips = layer === 'Trips';
+  const showPoints = layer === 'Point';
   const styleName = mapStyle;
 
-  const layers = [
+  const layers = showPoints ? [
+    new VectorTileLayer({
+      id: `points-${palette}-${outline}`,
+      data: dataSource,
+      pointRadiusMinPixels: 3,
+      pointRadiusMaxPixels: 8,
+      getFillColor: colorContinuous({
+        attr: (d: any) => d.speed || Math.random(),
+        domain: [5, 7, 9, 11, 13, 15],
+        colors: palette
+      }),
+      getLineColor: outline === 'none' ? [0, 0, 0, 0] : outline === 'black' ? [0, 0, 0, 255] : [255, 255, 255, 255],
+      lineWidthMinPixels: outline === 'none' ? 0 : 1,
+      pickable: true,
+      autoHighlight: true,
+      highlightColor: [255, 122, 44, 255],
+      onClick: handleTrajectoryClick,
+      onHover: info => {
+        info.object && console.log('onHover', info.object.properties);
+      }
+    })
+  ] : [
     new TrajectoryTileLayer({
       id: `${palette}-${outline}`,
       data: dataSource,