https://github.com/uber/nebula.gl

A suite of 3D-enabled data editing overlays, suitable for deck.gl
https://github.com/uber/nebula.gl

deck-gl uber webgl

Last synced: about 2 months ago
JSON representation

A suite of 3D-enabled data editing overlays, suitable for deck.gl

• Host: GitHub
• URL: https://github.com/uber/nebula.gl
• Owner: uber
• License: other
• Created: 2018-02-15T18:15:02.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-05-28T12:29:02.000Z (4 months ago)
• Last Synced: 2024-07-31T01:02:10.044Z (about 2 months ago)
• Topics: deck-gl, uber, webgl
• Language: TypeScript
• Homepage: https://nebula.gl/
• Size: 13.6 MB
• Stars: 682
• Watchers: 30
• Forks: 165
• Open Issues: 174
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Roadmap: docs/roadmap.md

Awesome Lists containing this project

README

        


  

    

  

  

    

  





  

    

  

  

    

  

  

    

  





  

    

  

  

    

  

  

    

  



nebula.gl | Website



An editing framework for deck.gl


[![docs](https://i.imgur.com/bRDL1oh.gif)](https://nebula.gl)

[nebula.gl](https://nebula.gl) provides editable and interactive map overlay layers, built using the power of [deck.gl](https://deck.gl/).

## Getting started

### Running the example

1. `git clone [email protected]:uber/nebula.gl.git`

2. `cd nebula.gl`

3. `yarn`

4. `cd examples/advanced`

5. `yarn`

6. `export MapboxAccessToken=''`

7. `yarn start-local`

8. You can now view and edit geometry.

### Installation

For npm

```bash

npm install @nebula.gl/layers

npm install @nebula.gl/overlays

npm install @deck.gl/core

npm install @deck.gl/react

npm install @deck.gl/layers

```

For yarn

```bash

yarn add @nebula.gl/layers

yarn add @nebula.gl/overlays

yarn add @deck.gl/core

yarn add @deck.gl/react

yarn add @deck.gl/layers

```

### `EditableGeoJsonLayer`

[EditableGeoJsonLayer](/docs/api-reference/layers/editable-geojson-layer.md) is implemented as a [deck.gl](https://deck.gl) layer. It provides the ability to view and edit multiple types of geometry formatted as [GeoJSON](https://tools.ietf.org/html/rfc7946) (an open standard format for geometry) including polygons, lines, and points.

```jsx

import DeckGL from '@deck.gl/react';

import { EditableGeoJsonLayer, DrawPolygonMode } from 'nebula.gl';

const myFeatureCollection = {

  type: 'FeatureCollection',

  features: [

    /* insert features here */

  ],

};

const selectedFeatureIndexes = [];

class App extends React.Component {

  state = {

    data: myFeatureCollection,

  };

  render() {

    const layer = new EditableGeoJsonLayer({

      id: 'geojson-layer',

      data: this.state.data,

      mode: DrawPolygonMode,

      selectedFeatureIndexes,

      onEdit: ({ updatedData }) => {

        this.setState({

          data: updatedData,

        });

      },

    });

    return ;

  }

}

```

### Useful examples (Codesandbox)

- [Hello World (using deck.gl)](https://codesandbox.io/s/hello-world-nebulagl-csvsm)

- [With Toolbox](https://codesandbox.io/s/hello-nebulagl-with-toolbox-oelkr)

- [No React](https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs)

- [Custom EditMode](https://codesandbox.io/s/connect-the-dots-mode-yow65)