Skip to content

Instantly share code, notes, and snippets.

@Pessimistress
Created October 8, 2018 03:40
Show Gist options
  • Save Pessimistress/6a37bb8aac79092b628c4dfe9375b835 to your computer and use it in GitHub Desktop.
Save Pessimistress/6a37bb8aac79092b628c4dfe9375b835 to your computer and use it in GitHub Desktop.
deck.gl + Mapbox: Get Started (React)
import React from 'react';
import DeckGL, {ScatterplotLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';
import {MapboxLayer} from '@deck.gl/mapbox';
const INITIAL_VIEW_STATE = {
longitude: -74.50,
latitude: 40,
zoom: 9
};
export class App extends React.Component {
state = {};
// DeckGL and mapbox will both draw into this WebGL context
_onWebGLInitialized = (gl) => {
this.setState({gl});
}
// Add deck layer to mapbox
_onMapLoad = () => {
const map = this._map;
const deck = this._deck;
map.addLayer(new MapboxLayer({id: 'my-scatterplot', deck}), 'waterway-label');
}
render() {
const {gl} = this.state;
const layers = [
new ScatterplotLayer({
id: 'my-scatterplot',
data: [
{position: [-74.5, 40], size: 10000}
],
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]
})
];
return (
<DeckGL
ref={ref => {
// save a reference to the Deck instance
this._deck = ref && ref.deck;
}}
layers={layers}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
onWebGLInitialized={this._onWebGLInitialized}
>
{gl && (
<StaticMap
ref={ref => {
// save a reference to the mapboxgl.Map instance
this._map = ref && ref.getMap();
}}
gl={gl}
mapStyle="mapbox://styles/mapbox/light-v9"
mapboxApiAccessToken="<your access token here>"
onLoad={this._onMapLoad}
/>
)}
</DeckGL>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment