JSPM

  • Created
  • Published
  • Downloads 21246
  • Score
    100M100P100Q156808F
  • License MIT

GeoJSON editing modes for nebula.gl

Package Exports

  • @nebula.gl/edit-modes
  • @nebula.gl/edit-modes/dist/index.js
  • @nebula.gl/edit-modes/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nebula.gl/edit-modes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)