@nebula.gl/layers

nebula.gl | Website

An editing framework for deck.gl

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

Getting started

Running the example

1. git clone [e-mail]: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

yarn add nebula.gl

nebula.gl will automatically install a compatible version of deck.gl.

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';
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]} />;
  }
}

CodeSandbox

Changelog

0.17.0 - 2020-01-10

Changes

• Fix deck 8 (#317)
• Rename DrawCircleByBoundingBoxMode to DrawCircleByDiameterMode (#314)
• upgrade deckgl to 8.0 using upgrade script
• update ocular-gatsby
• Measure distance mode + tooltips (#299)
• Use deck.gl mesh layer, update example to use it (#296)
• Fix register events and respect selectedFeatureIndex passed from… (#287)
• Update readme example

Breaking changes

• DrawCircleByBoundingBoxMode renamed to DrawCircleByDiameterMode (#314)
• The following props of EditableGeoJsonLayer are no longer proxied by nebula.gl (instead use deck.gl's _subLayerProps):
  • getLineDashArray
  • lineDashJustified
  • getTentativeLineDashArray