App.js

import 'babel-polyfill';

import React, {Component} from 'react';
import {render} from 'react-dom';
import DeckGL from 'deck.gl/react';
import {LineLayer} from 'deck.gl';
import {ArcLayer} from 'deck.gl';
import MapGL from 'react-map-gl';

const token = 'Add yours here';

if (!token) {
  throw new Error('Please specify a valid mapbox token');
}

class Root extends Component {

  state = {
    viewport: {
      latitude: 41.8781,
      longitude: -87.62,
      zoom: 15.140440,
      bearing: -20.55991,
      pitch: 60,
    },
    width: 500,
    height: 500,
  }



  render() {

    const {viewport, width, height} = this.state;

    const arcs = new ArcLayer({
      data: [{
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.62, 41.86,],
      },
      {
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.69, 41.89,],
      }]
    });

    const lines = new LineLayer({
      data: [{
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.62, 41.86,],
      },
      {
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.69, 41.89,],
      }]
    });


    const combined = [new LineLayer({
      data: [{
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.62, 41.86,],
      },
      {
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.69, 41.89,],
      }]  
    }),
    new ArcLayer({
      data: [{
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.62, 41.86,],
      },
      {
        sourcePosition: [-87.62, 41.89,],
        targetPosition: [-87.69, 41.89,],
      }]
    })];

    return (
      <MapGL
        {...viewport}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        onChangeViewport={v => this.setState({viewport: v})}
        preventStyleDiffing={false}
        mapboxApiAccessToken={token}
        perspectiveEnabled
        width={width}
        height={height}>
        <DeckGL
          {...viewport}
          width={width}
          height={height}
          layers={[arcs,lines]}
          debug />    
      </MapGL>
    );
  }

}

const root = document.createElement('div');
document.body.appendChild(root);

render(<Root />, root);