# @nebula.gl/edit-modes > GeoJSON editing modes for nebula.gl Latest version **1.0.4** (published 2022-10-04) · MIT license · 0 weekly downloads ## Install ```sh npm install @nebula.gl/edit-modes pnpm add @nebula.gl/edit-modes yarn add @nebula.gl/edit-modes bun add @nebula.gl/edit-modes ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.4 | | Published | 2022-10-04 | | First published | 2019-05-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 29 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 730 | | Author | Georgios Karnas | | Maintainers | prestaul, igordykhta, romaxa_xz, akiyamka, georgios-uber, supersonicclay, xintong, ibgreen, psyonic, apguan | | Keywords | webgl, visualization, overlay, layer | ## Links - npm: https://www.npmjs.com/package/@nebula.gl/edit-modes - Repository: https://github.com/uber/nebula.gl - Homepage: https://github.com/uber/nebula.gl#readme - Issues: https://github.com/uber/nebula.gl/issues - npm.io page: https://npm.io/package/@nebula.gl/edit-modes ## Dependencies (29) - [geojson](https://npm.io/package/geojson.md) 0.5.0 - [@turf/area](https://npm.io/package/@turf/area.md) >=4.0.0 - [@turf/bbox](https://npm.io/package/@turf/bbox.md) >=4.0.0 - [@turf/along](https://npm.io/package/@turf/along.md) >=6.3.0 - [@turf/union](https://npm.io/package/@turf/union.md) >=4.0.0 - [@turf/buffer](https://npm.io/package/@turf/buffer.md) >=4.0.0 - [@turf/center](https://npm.io/package/@turf/center.md) >=4.0.0 - [@turf/circle](https://npm.io/package/@turf/circle.md) >=4.0.0 - [@turf/rewind](https://npm.io/package/@turf/rewind.md) >=4.0.0 - [@turf/bearing](https://npm.io/package/@turf/bearing.md) >=4.0.0 - [@turf/ellipse](https://npm.io/package/@turf/ellipse.md) >=4.0.0 - [@turf/helpers](https://npm.io/package/@turf/helpers.md) >=4.0.0 - [@turf/centroid](https://npm.io/package/@turf/centroid.md) >=4.0.0 - [@turf/distance](https://npm.io/package/@turf/distance.md) >=4.0.0 - [@turf/midpoint](https://npm.io/package/@turf/midpoint.md) >=4.0.0 - [@turf/intersect](https://npm.io/package/@turf/intersect.md) >=4.0.0 - [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1 - [@turf/difference](https://npm.io/package/@turf/difference.md) >=4.0.0 - [@turf/destination](https://npm.io/package/@turf/destination.md) >=4.0.0 - [@turf/bbox-polygon](https://npm.io/package/@turf/bbox-polygon.md) >=4.0.0 - [@turf/line-intersect](https://npm.io/package/@turf/line-intersect.md) >=4.0.0 - [@turf/polygon-to-line](https://npm.io/package/@turf/polygon-to-line.md) >=4.0.0 - [@turf/transform-scale](https://npm.io/package/@turf/transform-scale.md) >=4.0.0 - [@turf/transform-rotate](https://npm.io/package/@turf/transform-rotate.md) >=4.0.0 - [@turf/transform-translate](https://npm.io/package/@turf/transform-translate.md) >=4.0.0 - [viewport-mercator-project](https://npm.io/package/viewport-mercator-project.md) >=6.0.0 - [@turf/nearest-point-on-line](https://npm.io/package/@turf/nearest-point-on-line.md) >=4.0.0 - [@turf/point-to-line-distance](https://npm.io/package/@turf/point-to-line-distance.md) >=4.0.0 - [@turf/boolean-point-in-polygon](https://npm.io/package/@turf/boolean-point-in-polygon.md) >=4.0.0 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 1.0.4 (latest) — 2022-10-04 - 1.1.0-alpha.5 (beta) — 2023-02-18 - 1.1.0-alpha.4 — 2023-02-17 - 1.1.0-alpha.3 — 2023-02-16 - 1.0.3 — 2022-05-02 - 1.0.2 — 2022-04-20 - 1.0.2-alpha.2 — 2022-02-23 - 1.0.2-alpha.1 — 2022-02-09 - 1.0.2-alpha.0 — 2021-12-08 - 1.0.1-alpha.0 — 2021-12-05 - 1.0.0-alpha.0 — 2021-11-17 - 0.23.8 — 2021-09-08 - 0.23.7 — 2021-09-08 - 0.23.6 — 2021-09-08 - 0.23.3 — 2021-07-14 - … 44 more at https://npm.io/package/@nebula.gl/edit-modes/versions ## README

version version

version version version

build coveralls

nebula.gl | Website

An editing framework for deck.gl
[![docs](https://i.imgur.com/bRDL1oh.gif)](https://nebula.gl) [nebula.gl](https://nebula.gl) provides editable and interactive map overlay layers, built using the power of [deck.gl](https://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=''` 7. `yarn start-local` 8. You can now view and edit geometry. ### Installation For npm ```bash 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 ```bash 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](/docs/api-reference/layers/editable-geojson-layer.md) is implemented as a [deck.gl](https://deck.gl) layer. It provides the ability to view and edit multiple types of geometry formatted as [GeoJSON](https://tools.ietf.org/html/rfc7946) (an open standard format for geometry) including polygons, lines, and points. ```jsx 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 ; } } ``` ### Useful examples (Codesandbox) - [Hello World (using deck.gl)](https://codesandbox.io/s/hello-world-nebulagl-csvsm) - [With Toolbox](https://codesandbox.io/s/hello-nebulagl-with-toolbox-oelkr) - [No React](https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs) - [Custom EditMode](https://codesandbox.io/s/connect-the-dots-mode-yow65) --- _Source: https://npm.io/package/@nebula.gl/edit-modes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._