Code Monkey home page Code Monkey logo

Comments (2)

danmarshall avatar danmarshall commented on June 12, 2024

I've started on this -

First thing I needed to do was add this to node_modules\deckgl-typings\@deck.gl\react\index.d.ts:

	import Layer from '@deck.gl/core/lib/layer';
	import View from '@deck.gl/core/views/view';
	export interface DeckGLProps {
		views: View[];
		viewState: any;
		layers: Layer[];
	}
	export default class DeckGL extends React.Component<DeckGLProps, {}> {

Added these to the bundle.html page:

    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Changed index.ts to:

/// <reference types="deckgl-typings" />

import { DeckGL, OrbitView, PolygonLayer, COORDINATE_SYSTEM } from 'deck.gl';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export class Example extends React.Component {

    render() {
        return <DeckGL
            views={[
                new OrbitView()
            ]}
            viewState={{
                distance: 50,
                rotationX: 64,
                rotationOrbit: 72,
                fov: 50,
                zoom: 0.2
            }}
            layers={[
                new PolygonLayer({
                    coordinateSystem: COORDINATE_SYSTEM.IDENTITY,
                    data: [
                        {
                            polygon: [[0, 0], [100, 0], [0, 100]],
                            elevation: 50,
                            fillColor: [255, 0, 0]
                        }
                    ],
                    extruded: true,
                    stroked: false
                })
            ]}
        />;
    }
}

ReactDOM.render(React.createElement(Example), document.getElementById('app'));

This builds, but does not yet run. I'm using rollup and it looks like there's some babel stuff to add:

https://medium.com/tech-grandata-com/how-i-set-up-a-react-component-library-with-rollup-be6ccb700333

from deckgl-typescript-example.

danmarshall avatar danmarshall commented on June 12, 2024

Hi @ClaudiuCeia - I've created a react branch.

I based the bundling from Deck.GL examples - I chose the browserify version. I wasn't able to make it work with rollup, or with the cdn version of deck.gl (all dependencies are bundled.)

Hope this gets you started.
-Dan

from deckgl-typescript-example.

Related Issues (1)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.