nebula.gl
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

version version

version version version

build coveralls

nebula.gl | Website

An editing framework for deck.gl

docs

nebula.gl provides editable and interactive map overlay layers, built using the power of deck.gl.

Getting started

Running the example

  1. git clone git@github.com:uber/nebula.gl.git
  2. cd nebula.gl
  3. yarn
  4. cd examples/advanced
  5. yarn
  6. export MapboxAccessToken='<Add your key>'
  7. yarn start-local
  8. You can now view and edit geometry.

Installation

For npm

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

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 is implemented as a deck.gl layer. It provides the ability to view and edit multiple types of geometry formatted as GeoJSON (an open standard format for geometry) including polygons, lines, and points.

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 <DeckGL {...this.props.viewport} layers={[layer]} />;
  }
}

Useful examples (Codesandbox)

Package Sidebar

Install

npm i nebula.gl

Weekly Downloads

6,475

Version

1.0.4

License

MIT

Unpacked Size

406 kB

Total Files

77

Last publish

Collaborators

  • rtsao
  • usiarhei
  • kenns29
  • shengs
  • emrahs
  • zacklk
  • uber-ospo
  • prestaul
  • ibgreen
  • pessimistress
  • georgios-uber
  • xintong
  • supersonicclay
  • akiyamka
  • vdunaev
  • apguan
  • romaxa_xz
  • igordykhta
  • openjs-operations