Skip to content

Commit 37905e7

Browse files
felixpalmerfelixpalmer
committed
Tidy
1 parent 2a9b23a commit 37905e7

File tree

3 files changed

+148
-159
lines changed

3 files changed

+148
-159
lines changed

‎modules/carto/src/layers/trajectory-tile-layer.ts‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const defaultProps: DefaultProps<TrajectoryTileLayerProps> = {
1717
data: VectorTileLayer.defaultProps.data,
1818
autocomputeSpeed: false,
1919
renderMode: 'trips',
20-
fadeTrail: true,
2120
currentTime: 0,
2221
trailLength: 1000
2322
};
@@ -44,6 +43,29 @@ type _TrajectoryTileLayerProps = {
4443
renderMode?: 'paths' | 'trips';
4544
};
4645

46+
/**
47+
* Helper function to wrap `getFillColor` accessor into a `getLineColor` accessor
48+
* which will invoke `getFillColor` for each vertex in the line
49+
* @param getFillColor
50+
* @returns
51+
*/
52+
function getLineColorFromFillColor(getFillColor: TrajectoryTileLayerProps['getFillColor']) {
53+
return (d: any, info: any) => {
54+
const {index, data, target} = info;
55+
const startIndex = data.startIndices[index];
56+
const endIndex = data.startIndices[index + 1];
57+
const nVertices = endIndex - startIndex;
58+
const colors = new Array(nVertices).fill(0).map((_, i) => {
59+
const index = startIndex + i;
60+
const properties = createBinaryProxy(data, index);
61+
const d = { properties } as any;
62+
return typeof getFillColor === 'function' ? getFillColor(d, { index, data, target }) : getFillColor;
63+
});
64+
65+
return colors;
66+
}
67+
}
68+
4769
// @ts-ignore
4870
export default class TrajectoryTileLayer<
4971
FeaturePropertiesT = any,
@@ -106,11 +128,9 @@ export default class TrajectoryTileLayer<
106128
);
107129

108130
if (!lines) return null;
109-
110131
if (this.props.autocomputeSpeed) {
111132
autocomputeSpeed(lines);
112133
}
113-
114134
return { ...createEmptyBinary(), lines }
115135
}
116136

@@ -133,45 +153,25 @@ export default class TrajectoryTileLayer<
133153

134154
// Normalize currentTime to match the normalized timestamps in the data
135155
const normalizedCurrentTime = props.currentTime! - this.state.minTime;
156+
const {minTime, maxTime} = this.state;
157+
const totalTimeSpan = maxTime - minTime;
136158

137-
// Create layer props similar to the original implementation
138159
const layerProps = {
139-
getWidth: props.getWidth || 2,
160+
getWidth: props.getWidth,
140161
widthUnits: props.widthUnits || 'pixels',
141-
opacity: props.opacity || 0.8,
142-
billboard: props.billboard !== undefined ? props.billboard : true,
143162
lineJointRounded: props.jointRounded !== undefined ? props.jointRounded : true,
144163
capRounded: props.capRounded !== undefined ? props.capRounded : true,
145164
_pathType: props._pathType || 'open',
146165
};
147166

148-
const {minTime, maxTime} = this.state;
149-
const totalTimeSpan = maxTime - minTime;
150-
151-
const getLineColorFromFillColor = (d: any, info: any) => {
152-
const {index, data} = info;
153-
const startIndex = data.startIndices[index];
154-
const endIndex = data.startIndices[index + 1];
155-
const nVertices = endIndex - startIndex;
156-
const colors = new Array(nVertices).fill(0).map((_, i) => {
157-
const index = startIndex + i;
158-
const properties = createBinaryProxy(data, index);
159-
const d = {properties};
160-
return props.getFillColor!(d, {index, data});
161-
});
162-
163-
return colors;
164-
//return props.getLineColor(d, info);
165-
}
166-
const getLineColor = props.getFillColor ? getLineColorFromFillColor : props.getLineColor;
167+
const getLineColor = props.getFillColor ? getLineColorFromFillColor(props.getFillColor) : props.getLineColor;
167168

168169
const modifiedProps = {
169170
...props,
170171
getLineColor,
171172
_subLayerProps: {
172173
...props._subLayerProps,
173174
linestrings: {
174-
//type: EdgedTripsLayer,
175175
type: TripsLayer,
176176
currentTime: showTrips ? normalizedCurrentTime : totalTimeSpan,
177177
trailLength: showTrips ? props.trailLength : totalTimeSpan,

‎test/apps/carto-trajectories/app.tsx‎

Lines changed: 1 addition & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -5,148 +5,21 @@ import {Map, Source, useControl, useMap} from 'react-map-gl';
55
import {MapboxOverlay} from '@deck.gl/mapbox';
66

77
import {DeckProps } from '@deck.gl/core';
8-
import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
98
import type {TrajectoryTableSourceResponse, TrajectoryQuerySourceResponse} from '@carto/api-client';
109
import {TrajectoryTileLayer, VectorTileLayer, colorContinuous} from '@deck.gl/carto';
1110
import {normalizeTimestamp} from '@deck.gl/carto/layers/trajectory-utils';
1211

1312
import RangeInput from './range-input';
13+
import {DATASETS, DATASET_NAMES, LAYER, PALETTES, MAP_STYLES} from './config';
1414

1515
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
1616

17-
const apiBaseUrl = 'https://gcp-us-east1-19.dev.api.carto.com';
18-
const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTY0NTU1OTksImV4cCI6MTc1NjU0MTk5OSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.Jql_WlmiHL5CTXydungcYDQew0dCt0nBoWoGc0v68Lx9hEFSzTeo2tXsTuF3OXfFTo1-gUxWP_i4LTy-DDiZgGJaEKdL88rFaUN8xf77KBKhurVeV9SCU53bTVk0_vaGnL84UcsZ9Mfa18KhlUvN1ojM9QvsV9j5G5W9t5jnJd7CUxgglhV7W6cZcmW5aSc83kbTKAe5wEhpX8I8fBq_B2lMUXyaDuS7r4kqUknPEc7kswpkt5NDiwI4yKWSbqCQseMZ9Xm0MmfyXk9QteiRl42hGSh4biPXzwSdrb94P5gvpT05CTV1S5SX3dz2BeeVfT78PJPY48sjLvO6b8bluw';
19-
20-
const DATASETS = {
21-
'NYC Taxi Trips (Query)': {
22-
name: 'NYC Taxi Trips (Query)',
23-
dataSource: trajectoryQuerySource({
24-
connectionName: 'carto_dw',
25-
accessToken,
26-
apiBaseUrl,
27-
sqlQuery: 'SELECT geometry as geom, timestamp as ts, ride_id as trajectoryId FROM `cartodb-on-gcp-frontend-team.felix.taxi-trips`',
28-
trajectoryIdColumn: 'trajectoryId',
29-
timestampColumn: 'ts'
30-
}),
31-
viewState: {
32-
latitude: 40.7128,
33-
longitude: -74.0060,
34-
zoom: 10,
35-
bearing: 0,
36-
pitch: 0
37-
},
38-
layerType: 'Trips 2D',
39-
lineWidth: 2,
40-
mapStyle: 'dark-v11',
41-
palette: 'Sunset'
42-
},
43-
'NYC Taxi Trips (Table)': {
44-
name: 'NYC Taxi Trips (Table)',
45-
dataSource: trajectoryTableSource({
46-
connectionName: 'carto_dw',
47-
accessToken,
48-
apiBaseUrl,
49-
tableName: 'cartodb-on-gcp-frontend-team.felix.taxi-trips',
50-
spatialDataColumn: 'geometry',
51-
trajectoryIdColumn: 'ride_id',
52-
timestampColumn: 'timestamp'
53-
}),
54-
viewState: {
55-
latitude: 40.7128,
56-
longitude: -74.0060,
57-
zoom: 10,
58-
bearing: 0,
59-
pitch: 0
60-
},
61-
layerType: 'Trips 2D',
62-
lineWidth: 2,
63-
mapStyle: 'outdoors-v12',
64-
palette: 'ArmyRose'
65-
},
66-
'Atlanta Vehicle Trajectories': {
67-
name: 'Atlanta Vehicle Trajectories',
68-
dataSource: trajectoryQuerySource({
69-
connectionName: 'carto_dw',
70-
accessToken,
71-
apiBaseUrl,
72-
sqlQuery: 'SELECT * FROM `carto-demo-data.demo_tables.citytrek_14k_vehicle_trajectories` WHERE timestamp >= "2017-11-01" AND timestamp < "2017-11-05"',
73-
//sqlQuery: 'SELECT * FROM `carto-demo-data.demo_tables.citytrek_14k_vehicle_trajectories`',
74-
trajectoryIdColumn: 'trip_id',
75-
timestampColumn: 'timestamp'
76-
}),
77-
viewState: {
78-
latitude: 33.7490,
79-
longitude: -84.3880,
80-
zoom: 10,
81-
bearing: 0,
82-
pitch: 0
83-
},
84-
layerType: 'Trips 2D',
85-
lineWidth: 1.5,
86-
mapStyle: 'dark-v11',
87-
palette: 'Vivid'
88-
},
89-
'Memphis Vehicle Trajectories (Query)': {
90-
name: 'Memphis Vehicle Trajectories (Query)',
91-
dataSource: trajectoryQuerySource({
92-
connectionName: 'carto_dw',
93-
accessToken,
94-
apiBaseUrl,
95-
sqlQuery: 'SELECT * FROM `carto-demo-data.demo_tables.citytrek_14k_vehicle_trajectories` LIMIT 100000',
96-
trajectoryIdColumn: 'trip_id',
97-
timestampColumn: 'timestamp'
98-
}),
99-
viewState: {
100-
latitude: 35.1495,
101-
longitude: -90.0490,
102-
zoom: 10,
103-
bearing: 0,
104-
pitch: 0
105-
},
106-
layerType: 'Trips 2D',
107-
lineWidth: 1.5,
108-
mapStyle: 'satellite-streets-v12',
109-
palette: 'Temps'
110-
}
111-
}
112-
const DATASET_NAMES = Object.keys(DATASETS);
113-
114-
const LAYER = { Path: 'Path 2D', Trips: 'Trips 2D', Points: 'Point 2D' };
115-
116-
117-
const PALETTES = {
118-
ArmyRose: 'ArmyRose',
119-
DarkMint: 'DarkMint',
120-
Emrld: 'Emrld',
121-
OrYel: 'OrYel',
122-
Peach: 'Peach',
123-
Prism: 'Prism',
124-
Sunset: 'Sunset',
125-
Temps: 'Temps',
126-
Tropic: 'Tropic',
127-
Vivid: 'Vivid'
128-
};
129-
130-
const MAP_STYLES = {
131-
dark: 'dark-v11',
132-
outdoors: 'outdoors-v12',
133-
satellite: 'satellite-streets-v12',
134-
navigationNight: 'navigation-night-v1'
135-
};
136-
13717
function DeckGLOverlay(props: DeckProps) {
13818
const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
13919
overlay.setProps(props);
140-
const {current: map} = useMap();
141-
if (map){
142-
// Hack to fix Mapbox 3D camera with React bindings
143-
map.getMap().transform = map.getMap().painter.transform;
144-
}
145-
14620
return null;
14721
}
14822

149-
15023
export default function App() {
15124
const initialDatasetName = DATASET_NAMES[0];
15225
const initialDataset = DATASETS[initialDatasetName];
@@ -318,10 +191,6 @@ export default function App() {
318191
currentTime,
319192
trailLength,
320193
getWidth: lineWidth,
321-
fadeTrail: true,
322-
323-
324-
widthUnits: 'pixels',
325194
onClick: handleTrajectoryClick,
326195
onHover: info => {
327196
info.object && console.log('onHover', info.object.properties);

‎test/apps/carto-trajectories/config.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
2+
3+
const apiBaseUrl = 'https://gcp-us-east1-19.dev.api.carto.com';
4+
const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImluZnJhc3RydWN0dXJlK2RlZC0wMTktMjA4NzItMTc1NTUyMjg4NUBjYXJ0b2RiLmNvbSIsImh0dHA6Ly9hcHAuY2FydG8uY29tL2FjY291bnRfaWQiOiJhY181ejdwdDVkciIsImlzcyI6Imh0dHBzOi8vYXV0aC5kZXYuY2FydG8uY29tLyIsInN1YiI6ImF1dGgwfDY4YTMyNzU0YWIyOGJmODc2N2Y5ODhjYSIsImF1ZCI6WyJjYXJ0by1jbG91ZC1uYXRpdmUtYXBpIiwiaHR0cHM6Ly9jYXJ0by1kZWRpY2F0ZWQtZW52LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3NTY0NTU1OTksImV4cCI6MTc1NjU0MTk5OSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IGFkbWluOmFjY291bnQiLCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInBlcm1pc3Npb25zIjpbImFkbWluOmFjY291bnQiLCJleGVjdXRlOndvcmtmbG93cyIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YWNjb3VudF91c2VycyIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJyZWFkOndvcmtmbG93cyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y2FydG8tZHctZ3JhbnRzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTpjb25uZWN0aW9uczpwcml2aWxlZ2VkIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyIsIndyaXRlOndvcmtmbG93cyJdfQ.Jql_WlmiHL5CTXydungcYDQew0dCt0nBoWoGc0v68Lx9hEFSzTeo2tXsTuF3OXfFTo1-gUxWP_i4LTy-DDiZgGJaEKdL88rFaUN8xf77KBKhurVeV9SCU53bTVk0_vaGnL84UcsZ9Mfa18KhlUvN1ojM9QvsV9j5G5W9t5jnJd7CUxgglhV7W6cZcmW5aSc83kbTKAe5wEhpX8I8fBq_B2lMUXyaDuS7r4kqUknPEc7kswpkt5NDiwI4yKWSbqCQseMZ9Xm0MmfyXk9QteiRl42hGSh4biPXzwSdrb94P5gvpT05CTV1S5SX3dz2BeeVfT78PJPY48sjLvO6b8bluw';
5+
6+
export const DATASETS = {
7+
'NYC Taxi Trips (Query)': {
8+
name: 'NYC Taxi Trips (Query)',
9+
dataSource: trajectoryQuerySource({
10+
connectionName: 'carto_dw',
11+
accessToken,
12+
apiBaseUrl,
13+
sqlQuery: 'SELECT geometry as geom, timestamp as ts, ride_id as trajectoryId FROM `cartodb-on-gcp-frontend-team.felix.taxi-trips`',
14+
trajectoryIdColumn: 'trajectoryId',
15+
timestampColumn: 'ts'
16+
}),
17+
viewState: {
18+
latitude: 40.7128,
19+
longitude: -74.0060,
20+
zoom: 10,
21+
bearing: 0,
22+
pitch: 0
23+
},
24+
layerType: 'Trips 2D',
25+
lineWidth: 2,
26+
mapStyle: 'dark-v11',
27+
palette: 'Sunset'
28+
},
29+
'NYC Taxi Trips (Table)': {
30+
name: 'NYC Taxi Trips (Table)',
31+
dataSource: trajectoryTableSource({
32+
connectionName: 'carto_dw',
33+
accessToken,
34+
apiBaseUrl,
35+
tableName: 'cartodb-on-gcp-frontend-team.felix.taxi-trips',
36+
spatialDataColumn: 'geometry',
37+
trajectoryIdColumn: 'ride_id',
38+
timestampColumn: 'timestamp'
39+
}),
40+
viewState: {
41+
latitude: 40.7128,
42+
longitude: -74.0060,
43+
zoom: 10,
44+
bearing: 0,
45+
pitch: 0
46+
},
47+
layerType: 'Trips 2D',
48+
lineWidth: 2,
49+
mapStyle: 'outdoors-v12',
50+
palette: 'ArmyRose'
51+
},
52+
'Atlanta Vehicle Trajectories': {
53+
name: 'Atlanta Vehicle Trajectories',
54+
dataSource: trajectoryQuerySource({
55+
connectionName: 'carto_dw',
56+
accessToken,
57+
apiBaseUrl,
58+
sqlQuery: 'SELECT * FROM `carto-demo-data.demo_tables.citytrek_14k_vehicle_trajectories` WHERE timestamp >= "2017-11-01" AND timestamp < "2017-11-05"',
59+
trajectoryIdColumn: 'trip_id',
60+
timestampColumn: 'timestamp'
61+
}),
62+
viewState: {
63+
latitude: 33.7490,
64+
longitude: -84.3880,
65+
zoom: 10,
66+
bearing: 0,
67+
pitch: 0
68+
},
69+
layerType: 'Trips 2D',
70+
lineWidth: 1.5,
71+
mapStyle: 'dark-v11',
72+
palette: 'Vivid'
73+
},
74+
'Memphis Vehicle Trajectories (Query)': {
75+
name: 'Memphis Vehicle Trajectories (Query)',
76+
dataSource: trajectoryQuerySource({
77+
connectionName: 'carto_dw',
78+
accessToken,
79+
apiBaseUrl,
80+
sqlQuery: 'SELECT * FROM `carto-demo-data.demo_tables.citytrek_14k_vehicle_trajectories` LIMIT 100000',
81+
trajectoryIdColumn: 'trip_id',
82+
timestampColumn: 'timestamp'
83+
}),
84+
viewState: {
85+
latitude: 35.1495,
86+
longitude: -90.0490,
87+
zoom: 10,
88+
bearing: 0,
89+
pitch: 0
90+
},
91+
layerType: 'Trips 2D',
92+
lineWidth: 1.5,
93+
mapStyle: 'satellite-streets-v12',
94+
palette: 'Temps'
95+
}
96+
};
97+
98+
export const DATASET_NAMES = Object.keys(DATASETS);
99+
100+
export const LAYER = { Path: 'Path 2D', Trips: 'Trips 2D', Points: 'Point 2D' };
101+
102+
export const PALETTES = {
103+
ArmyRose: 'ArmyRose',
104+
DarkMint: 'DarkMint',
105+
Emrld: 'Emrld',
106+
OrYel: 'OrYel',
107+
Peach: 'Peach',
108+
Prism: 'Prism',
109+
Sunset: 'Sunset',
110+
Temps: 'Temps',
111+
Tropic: 'Tropic',
112+
Vivid: 'Vivid'
113+
};
114+
115+
export const MAP_STYLES = {
116+
dark: 'dark-v11',
117+
outdoors: 'outdoors-v12',
118+
satellite: 'satellite-streets-v12',
119+
navigationNight: 'navigation-night-v1'
120+
};

0 commit comments

Comments
 (0)