-
Notifications
You must be signed in to change notification settings - Fork 3
/
deckgl-overlay.js
62 lines (54 loc) · 1.36 KB
/
deckgl-overlay.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React, {Component} from 'react';
import DeckGL, {PolygonLayer} from 'deck.gl';
import TripsLayer from './trips-layer';
const LIGHT_SETTINGS = {
lightsPosition: [-87.63, 41.87, 8000, -87.3, 42, 5000],
ambientRatio: 0.05,
diffuseRatio: 0.6,
specularRatio: 0.8,
lightsStrength: [2.0, 0.0, 0.0, 0.0],
numberOfLights: 2
};
const ROUTE_COLORS = {
'Red Line': [198, 12, 48],
'Purple Line': [82, 35, 152],
'Yellow Line': [249, 227, 0],
'Blue Line': [0, 161, 222],
'Pink Line': [226, 126, 166],
'Green Line': [0, 155, 58],
'Orange Line': [249, 70, 28],
'Brown Line': [98, 54, 27]
};
export default class DeckGLOverlay extends Component {
static get defaultViewport() {
return {
longitude: -87.63,
latitude: 41.87,
zoom: 11,
maxZoom: 16,
pitch: 45,
bearing: 0
};
}
render() {
const {viewport, trips, trailLength, time} = this.props;
if (!trips) {
return null;
}
const layers = [
new TripsLayer({
id: 'trips',
data: trips,
getPath: d => d.segments,
getColor: d => ROUTE_COLORS.hasOwnProperty(d.route) ? ROUTE_COLORS[d.route] : [255, 255, 255],
opacity: 0.2,
strokeWidth: 2,
trailLength,
currentTime: time
})
];
return (
<DeckGL {...viewport} layers={layers} initWebGLParameters />
);
}
}