CODEWITHSUNDEEP
mapboxmapbox-gldeck.gl
sushmit sarmah
sushmit sarmah

Reputation: 7748

I was trying out Uber's deck.gl by adding the component to my react app. But nothing appears. Any help would be appreciated

I was trying out Uber's deck.gl by adding the component to my react app. But nothing appears.

I believe it could be related to mapbox. It appeared once but that was it. I set the width, height, etc. But nothing works. This is basic example in their site.

Deck Gl with React

Here is my code. deckgl.component.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import { StaticMap } from 'react-map-gl';
import DeckGL, { LineLayer, ScatterplotLayer } from 'deck.gl';

const MAPBOX_ACCESS_TOKEN = '<MAPBOX_TOKEN>';

// Viewport settings
const INITIAL_VIEW_STATE = {
    latitude: 37.785164,
    longitude: -122.41669,
    zoom: 16,
    bearing: -20,
    pitch: 60
};

class DeckGlComponent extends Component {

    render() {
        return (
            <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} width="100%" height="100%">
                <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
                <LineLayer
                    data={[{ sourcePosition: [-122.41669, 37.7883], targetPosition: [-122.41669, 37.781] }]}
                    getStrokeWidth={5}
                />
                <ScatterplotLayer
                    data={[{ position: [-122.41669, 37.79] }]}
                    radiusScale={100}
                    getFillColor={[0, 0, 255]}
                />
            </DeckGL>
        );
    }
}

export default DeckGlComponent;

and index.js

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

import DeckGlComponent from './deckgl.component';

render(
    <DeckGlComponent />,
    document.getElementById('root')
);

serviceWorker.unregister();

It's absolutely basic. But nothing turns up. I created a new mapbox token just to be sure and still nothing.

Upvotes: 1

Views: 916

Answers (1)

hijiangtao
hijiangtao

Reputation: 903

According to your description (since there's not too much information), and mapbox token is active as you said, I suspect if you create a HTML file contains root element, like this: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #root {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

This file is required when you calling these codes:

render(
    <DeckGlComponent />,
    document.getElementById('root')
);

You can put your code on codepen or some online editors, so that we can help you more specifically.

Besides, I recommend you read codes in this folder https://github.com/uber/deck.gl/tree/master/examples/get-started rather than the codes in documents. Sometimes, codes in documents is for explaining concepts, and not ready for running.

Upvotes: 1

Related Questions