Reactとdeck.glでGoogle MapタイムラインのData Visualization

import React from 'react';
import DeckGL, {LineLayer} from 'deck.gl';

// カメラ（視点）の設定
const viewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// データ（始点と終点）
const data = [{
    sourcePosition: [-122.41669, 37.7853],
    targetPosition: [-122.41669, 37.781]
}];

class App extends React.Component {
  render() {
    const layers = [
      // レイヤーの種類を指定し、データを渡す
      new LineLayer({id: 'line-layer', data})
    ];

    return (
      // deck.glにpropsとしてカメラとレイヤーを渡す
      <DeckGL viewState={viewState} layers={layers} />
    );
  }
}

// src/DeckGLOverlay.js

import DeckGL, {ScatterplotLayer, PathLayer} from 'deck.gl';
import React, {Component} from 'react';

export default class DeckGLOverlay extends Component {
    render() {
        if (!this.props.timelineData && !this.props.pointData) {
            return null;
        }

        const layers = [
            new PathLayer({
                id: 'timeline-layer',
                // propsとして渡されるタイムラインのデータをセット
                data: this.props.timelineData,
                opacity: 0.5,
                pickable: false,
                widthScale: 2,
                widthMinPixels: 2,
                getPath: d => d.path,
                getColor: d => d.color,
            }),
            new ScatterplotLayer({
                id: 'point-layer',
                // propsとして渡される観光スポットのデータをセット
                data: this.props.pointData,
                pickable: true,
                opacity: 1,
                radiusScale: 50,
                radiusMaxPixels: 25,
                radiusMinPixels: 1,
                getPosition: d => [d.longitude, d.latitude, 30],
                getColor: d => [0, 128, 255],
                onClick: d => this.props.onPointClick(d.object)
            })
        ];

        return (
            // PathLayerとScatterplotLayerのオブジェクトを渡す
            <DeckGL {...this.props.viewport} layers={layers}/>
        );
    }
}