Skip to content

Instantly share code, notes, and snippets.

@rajshah4 rajshah4/App.js
Last active Dec 20, 2016

Embed
What would you like to do?
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.