@nebula.gl/edit-modes

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.14.0 - 2019-06-18

Changes

• Implement elevation-aware nearestPointOnLine (#236)
• add billboard prop to editable-geojson-layer (#234)
• upgrade deck to 7.1 (#235)
• Refactor react-map-gl-draw (#230)
• Enable flow for react-map-gl-draw (#227)