@nebula.gl/layers

Nebula.gl | Website

An editing framework for 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/deck
5. yarn
6. export MapboxAccessToken='<Add your key>'
7. yarn start-local
8. You can view/edit geometry.

Installation

yarn add nebula.gl

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

EditableGeoJsonLayer

The Editable GeoJSON layer accepts a GeoJSON FeatureCollection and renders the features as editable polygons, lines, and points. See the example below and for the official documentation click here.

import DeckGL from 'deck.gl';
import { EditableGeoJsonLayer } from 'nebula.gl';

const myFeatureCollection = {
  type: 'FeatureCollection',
  features: [
    /* insert features here */
  ]
};

class App extends React.Component {
  state = {
    mode: 'modify',
    selectedFeatureIndexes: [0],
    data: myFeatureCollection
  };

  render() {
    const layer = new EditableGeoJsonLayer({
      id: 'geojson-layer',
      data: this.state.data,
      mode: this.state.mode,
      selectedFeatureIndexes: this.state.selectedFeatureIndexes,

      onEdit: ({ updatedData }) => {
        this.setState({
          data: updatedData,
        });
      }
    });

    return <DeckGL {...this.props.viewport} layers={[layer]} />;
  }
}

Changelog

0.13.0 - 2019-05-13

Breaking changes

• For translate mode:
  • Specify modeConfig.additionalSnapTargets, which is a list of Features, instead of modeConfig.layerIdsToSnapTo.
  • Specify EditableGeoJsonLayer.pickingRadius rather than modeConfig.snapPixels.

Added

• For snapping functionality, can now specify modeConfig.additionalSnapTargets to support snapping to an array GeoJSON features whether or not they are rendered
• Can override pickingRadius and pickingDepth

Changes

• Create @nebula.gl/edit-modes module (#225)
• Decouple snapping functionality from deck.gl (#224)
• Remove dependency on deck.gl from ElevationHandler (#223)
• Ability to toggle GeoJSON text in example (#220)