@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 React from 'react';
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: 'drawPolygon',
    selectedFeatureIndexes: [],
    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.16.0 - 2019-09-25

Changes

• You can now style edit handles with an outline (which is now also the default) by supplying getEditHandlePointOutlineColor
• Swap EditableGeoJsonLayer to use edit-modes module (#283)
• Unwrap guide object when using _subLayerProps (#284)
• Remove deprecated usage. #281 (#282)

Breaking changes for EditableGeoJsonLayer

• featureIndexes is now nested under editContext.featureIndexes in parameter passed to onEdit callback
• Edit handle type is now under properties.editHandleType instead of type for edit handle styling accessors:
  • getEditHandlePointColor
  • getEditHandlePointRadius
  • getEditHandleIcon
  • getEditHandleIconSize
  • getEditHandleIconColor
  • getEditHandleIconAngle
• Deprecated: The mode prop is intended to take a constructor or instance rather than a string.
  • import {DrawPolygonMode} from 'nebula.gl'; new EditableGeoJsonLayer({mode: DrawPolygonMode})
• editHandleType no longer supports passing a function/constructor. Use _subLayerProps instead.
• editHandleParameters removed. Use _subLayerProps instead.
• editHandleLayerProps removed. Use _subLayerProps instead.

Breaking changes between ModeHandler and GeoJsonEditMode

If you built a custom ModeHandler, note the following breaking changes:

• Extend GeoJsonEditMode instead of ModeHandler
• Each function now takes a props parameter with the state, so use props rather than this.get...() (e.g. this.getFeatureCollection(), this.getModeConfig(), etc).
• handleClick
  • Call props.onEdit instead of returning an EditAction
• handlePointerMove
  • Call props.onEdit instead of returning an EditAction
  • Call event.sourceEvent.stopPropagation() instead of returning {cancelMapPan: true}
• handleStartDragging
  • Call props.onEdit instead of returning an EditAction
• handleStopDragging
  • Call props.onEdit instead of returning an EditAction
• Guides
  • Edit handles and tentative features are now encompassed as "guides"
  • Guides are formatted as GeoJSON FeatureCollection
  • Override getGuides instead of getEditHandles
  • Format edit handles as GeoJSON Features instead of custom objects
  • Override getGuides instead of calling this._setTentativeFeature()
• getCursor
  • Instead of defining a getCursor function, call props.onUpdateCursor
• groundCoords renamed to mapCoords in event objects