CODEWITHSUNDEEP
javascriptreactjsdeck.gl
user7684764
user7684764

Reputation:

How to run the Deck.gl getting started examples

I am a newbie in terms of react, js and deck.gl and would like to run the basic getting started example from deck.gl:

Where do I put this code, which extension do I use, do I need other files e.g. app.js to run this:

import DeckGL from 'deck.gl/react';
import {ArcLayer} from 'deck.gl';

const flights = new ArcLayer({
  id: 'flights',
  data: [] // Some flight points
});

<DeckGL width={1920} height={1080} layers={[flights]} />

I am really sorry for the vague question, but I really would like the necessary steps to get this examples working on a Mac. Do I need to install a react app? How does this work?

Upvotes: 6

Views: 4461

Answers (2)

Preview
Preview

Reputation: 35806

We have now setup pretty straightforward examples you can directly clone and start toying with, even if you don't have any previous knowledge of or .

You just need to go to one of the examples, let's do it with the webpack 2 hello-world.

Before anything, you need to go to the MapBox website, create an account and generate an API key, that will be used to render the tiles of the map. Once you have it, just export it as an environment variable:

export MAPBOX_ACCESS_TOKEN=42eufr5aeoushanoeu

Then you can actually start doing the following:

git clone [email protected]:uber/deck.gl.git
cd examples/hello-world-webpack2
npm install
npm start

And you should be good to go, the app.js file is the only thing to change in order to change layers or the map in itself.

Disclaimer: I work at Uber with the Visualization team that made deck.gl.

Upvotes: 6

Denis Tsoi
Denis Tsoi

Reputation: 10414

EDIT: Here is a good recent walkthrough of someone experimenting with deck.gl
Source: @github.NghiaTranUIT

Looking at the examples there are two things to note.

  1. You need data within the data field
  2. You need react and other dependences

From getting started

import DeckGL from 'deck.gl/react';
import {ArcLayer} from 'deck.gl';

const flights = new ArcLayer({
  id: 'flights',
  data: [] // data field needs to have data
});

<DeckGL width={1920} height={1080} layers={[flights]} />

they omit how the data should be structured (hence where you might have problems).

The other thing is that the library is dependent on using react

from hello-world-webpack2
package.json

"dependencies": {
  "deck.gl": "^4.0.0-rc.3",
  "immutable": "^3.8.1",
  "luma.gl": "^3.0.0",
  "react": "^15.4.1",
  "react-dom": "^15.4.1",
  "react-map-gl": "^2.0.0"
},

So following those examples, you'll need to have react to run your own project with deck.gl.

I'd recommend looking at the examples on github to get a better understanding on how to run a starter project.

Upvotes: 2

Related Questions