better point styling

Author: felixpalmer

test/apps/carto-trajectories/app.tsx

@@ -14,7 +14,7 @@ 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.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTYzNjc4MDMsImV4cCI6MTc1NjQ1NDIwMywic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.sGTGkTacpHSe-elWWNVZq_4Lln43cOirJS1KKXefyAc43zFt433X_Hi007ZmkKR4_nq-iKf5nwKH0EbHI3JQuY2Zko-qRoTiqY7OeKo5u0m6rUY9QEHAsyOIuvL0gGuAWT_k0AMXCAx-fASioFl_U5qrxDihtROnL_LJdULe5P8-yMryTmnAwusej3ZgLr9gVWNNDVtjuum-C85SJaNfEnrpeDPyWJWTFUTu7FboS0NYEHexJyJXUoDW5LS1M46QvtcahPEqTnd5sRkSIHESLDyr_rgv_gET-9buyRnQEl0EXNhw2hDesLLyzeM292M1osvWhf7UlHitROxHCmFK2A';
+const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTY0NTU1OTksImV4cCI6MTc1NjU0MTk5OSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.Jql_WlmiHL5CTXydungcYDQew0dCt0nBoWoGc0v68Lx9hEFSzTeo2tXsTuF3OXfFTo1-gUxWP_i4LTy-DDiZgGJaEKdL88rFaUN8xf77KBKhurVeV9SCU53bTVk0_vaGnL84UcsZ9Mfa18KhlUvN1ojM9QvsV9j5G5W9t5jnJd7CUxgglhV7W6cZcmW5aSc83kbTKAe5wEhpX8I8fBq_B2lMUXyaDuS7r4kqUknPEc7kswpkt5NDiwI4yKWSbqCQseMZ9Xm0MmfyXk9QteiRl42hGSh4biPXzwSdrb94P5gvpT05CTV1S5SX3dz2BeeVfT78PJPY48sjLvO6b8bluw';
 
 const DATASETS = {
   'NYC Taxi Trips (Query)': {
@@ -293,24 +293,15 @@ export default function App() {
 
   const layers = showPoints ? [
     new VectorTileLayer({
-      id: `points-${palette}-${outline}`,
+      id: `points-${palette}`,
       data: dataSource,
-      pointRadiusMinPixels: 3,
-      pointRadiusMaxPixels: 8,
+      pointRadiusMinPixels: lineWidth,
+      pointRadiusMaxPixels: lineWidth,
       getFillColor: colorContinuous({
-        attr: (d: any) => d.speed || Math.random(),
-        domain: [5, 7, 9, 11, 13, 15],
+        attr: 'trajectoryId',
+        domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
         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({
@@ -448,9 +439,9 @@ export default function App() {
         formatLabel={(x: number) => formatLabel(x, 'trail')}
       />}
       <RangeInput
-        name={'Line width'}
+        name={showPoints ? 'Point size' : 'Line width'}
         bottom={0}
-        min={0}
+        min={1}
         max={10}
         value={lineWidth}
         onChange={setLineWidth}