• fix bug with concave polygons
• more proper implementation than the setTimeout hack

Describe the bug

I'm trying to create a minimal working example to experiment with draw polygon. However the code seems to work sporadically. See code sandbox link below.

Mouse actions resulting in errors:

1. Immediately double-click
2. Click once, move mouse, then double-click

Mouse actions that work sporadically:

1. Draw at least 2 nodes, then double-click to complete the polygon
2. Draw at least 3 nodes, then click/double-click first node

https://codesandbox.io/s/3192o0kjj5?module=%2Fsrc%2FApp.jsx

it seems bad json data is being passed to Deck.gl

Screenshots

To Do List

• Add label and assign to milestone
• Coding
• Test

I'm trying to reproduce this example : https://neb.gl/#/examples/editable-geo-json/points. However, it seems that the onClick event is never triggered on the layer.

Here is an example : codesandbox

Is this part of the docs not updated maybe ?

Define ellipse by bounding box.

From editableGeoJsonLayer.js:

getPickingInfo({ info, sourceLayer }) {
    if (sourceLayer.id.endsWith('-edit-handles')) {
      // If user is picking an editing handle, add additional data to the info
      info.isEditingHandle = true;

      if (info.object) {
        info.positionIndexes = info.object.positionIndexes;
      }
    }

    return info;
  }

isEditingHandle is only defined on the edit handle layer, but it should be defined on all nebula layers right? Also this property isn't checked against in _onLayerClick in the example. This causes some weird behavior in the example when clicking on points.

Get rid of hacky pointer event handlers in EditableLayer. Instead, use the new events exposed in deck.gl 6.3.

Some pseudocode of it working elsewhere:

class MyLayer extends CompositeLayer {
  constructor(props) {
    // NOTE: hacky, we shouldn't inject callbacks in this way.
    // PS1: onDrag, onClick, onHover need to be methods of MyLayer instead of arrow functions
    // Otherwise they will become undefined in the following callbacks
    // => I don't know why :(
    // PS2: these injections need to be happened before super(props);
    props.onDrag = (info, event) => info.layer.onDrag(info, event);
    props.onClick = info => info.layer.onClick(info);
    props.onHover = info => info.layer.onHover(info);
  }
}

On any draw mode, when user does double-click will cause 2 pointer up/down events, which will cause unintended consequences. (like adding 2 points in same location).
Can we avoid this?

this.context.gl.canvas.addEventListener(
  'pointerdown',
  this.state._editableLayerState.pointerHandlers.onPointerDown
);
this.context.gl.canvas.addEventListener(
  'pointerup',
  this.state._editableLayerState.pointerHandlers.onPointerUp
);

Feature request

Make MapGL a child component of Nebula similar to Deck.gl or the other way around.

At the moment Getting-started docs show two different approaches:

Deck

The base map <StaticMap/> is a child of <DeckGL/> component.

    <DeckGL
        initialViewState={initialViewState}
        controller={true}
        layers={layers}
      >
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>

Nebubla

<MapGL/> is the parent of Nebula

      <MapGL {...viewport} onChangeViewport={this._onChangeViewport}>
        <Nebula
          ref={nebula => (this.nebula = nebula || this.nebula)}
          {...{ layers, viewport }}
        />
      </MapGL>

Background

To Do List

• Add label and assign to milestone
• Coding
• Doc update
• Test

Add ability to draw a rectangle with two clicks (two opposing corners).
Add ability to draw a circle with two clicks (one for center, one for radius)

Feature implementation

Add tool for splitting polygon with 90 degree angled polyline.

[14:08:57.sivakondapi@siva-C02WC0A9HTDG] /dev/nebula.gl/examples/deck (master)$ yarn start-local
yarn run v1.3.2
warning package.json: No license field
$ webpack-dev-server --env.local --progress --hot --open
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
12% building modules 23/27 modules 4 active ...deck/node_modules/ansi-regex/index.jswebpack: wait until bundle finished: /
webpack: wait until bundle finished: /bundle.js
Hash: 9ce547376ac6263384a9
Version: webpack 2.7.0
Time: 914ms
Asset Size Chunks Chunk Names
bundle.js 351 kB 0 [emitted] [big] app
bundle.js.map 405 kB 0 [emitted] app
chunk {0} bundle.js, bundle.js.map (app) 321 kB [entry] [rendered]
[2] (webpack)/hot/emitter.js 77 bytes {0} [built]
[3] ./app.js 663 bytes {0} [built] [failed] [1 error]
[4] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
[5] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[6] (webpack)/hot nonrecursive ^./log$ 160 bytes {0} [built]
[13] .//loglevel/lib/loglevel.js 7.86 kB {0} [built]
[14] .//punycode/punycode.js 14.7 kB {0} [built]
[17] .//querystring-es3/index.js 127 bytes {0} [built]
[18] .//sockjs-client/dist/sockjs.js 181 kB {0} [built]
[19] .//strip-ansi/index.js 161 bytes {0} [built]
[20] ./~/url/url.js 23.3 kB {0} [built]
[22] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[23] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[25] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[26] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app.js 52 bytes {0} [built]
+ 12 hidden modules

ERROR in ./app.js
Module build failed: SyntaxError: Unexpected token (14:18)

12 |
13 | document.body.appendChild(root);

14 | ReactDOM.render(, root);
| ^
15 | }
16 |

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app.js
webpack: Failed to compile.

Steps to Reproduce:

yarn create fusion-app demo
cd demo
touch src/pages/demo.js

Add demo.js to root.js and provision a route for it
Code for the demo.js, mostly copied from the example of editableGeoJsonLayer
https://github.com/trevorwhealy/nebula-fusion-incompatibility/blob/master/src/pages/demo.js

yarn add deck.gl react-map-gl nebula.gl
yarn dev

Errors:

Fusion.js
Let's Get Started
ERROR in ./node_modules/@turf/difference/index.mjs 52:22-35
Can't import the named export 'diff' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 50:23-30
Can't import the named export 'feature' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 72:8-19
Can't import the named export 'flattenEach' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 42:16-23
Can't import the named export 'getGeom' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 43:16-23
Can't import the named export 'getGeom' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 55:11-23
Can't import the named export 'multiPolygon' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js
ERROR in ./node_modules/@turf/difference/index.mjs 54:41-48
Can't import the named export 'polygon' from non EcmaScript module (only default export is available)
 @ ./node_modules/nebula.gl/dist-es6/lib/deck-renderer/deck-drawer.js
 @ ./node_modules/nebula.gl/dist-es6/index.js
 @ ./src/pages/demo.js
 @ ./src/root.js
 @ ./src/main.js
 @ ./node_modules/fusion-cli/entries/client-entry.js
 @ multi (webpack)-hot-middleware/client.js?name=client ./node_modules/fusion-cli/entries/client-entry.js

Cursory search reveals this is probably a webpack problem. I noticed the examples all have a custom webpack config so that might be why it's not noticed.
Turfjs/turf#1383

Will fix the issues described in #11

Factor out a lot of the handleDraw... functions out of the layer class into a standalone class so they can be tested. We're starting to add a lot of untested code.

Describe the bug

I'm trying to build a simple drawing tool where users can click anywhere on the map to place a drop pin.
Observation:

• Whenever I click on the map onEdit() is fired for the first time, with a new Point feature added to data prop which is as expected.
• Upon re-rendering for some reason onEdit() is then fired again adding an invalid Point feature (geometry.coordinates=undefined)

Code sandbox https://codesandbox.io/s/l44854k3j7

Actual Result

onEdit() fired multiple times with in valid geojson

Expected Result

onEdit() should be fired once for each edit action

Reproduce Steps

See codesbox. Initially there should be one polygon and 1 point. Click anywhere on the map to see a 3rd (valid) feature added and then a 4th, invalid geojson feature in console log

Screenshots

To Do List

• Add label and assign to milestone
• Coding
• Test

Hi,

I'm trying to implement a selection utility over a DeckGL polygon layer using the EditableGeoJsonLayer. The idea is that the user create a polygon whose contour coordinates are used to filter the elements that are inside it. The functionallity works nice, but I have detected one bug which I describe below.

Describe the bug

When EditableGeoJsonLayer in mode 'drawPolygon' is attempted to be finished with a point or a line (first double click or click and double click), the layer crash and stays in an unresponsible state throwing the following error (in some cases):

Actual Result

Error is thrown, layer stays unresponsible not allowing to react to this state.

Expected Result

Layer should verify the polygon and not stay unresponsiv. Some callback should be called in order to do something when this happen.

Reproduce Steps

Please, find a example in the following codesandbox.
Set your own MAPBOX_TOKEN.

Screenshots

When a point or a line are drawn the layer stays unresponsive, not responding to click events. (In this case no error is thrown)

Users draw a point:

User draws a line:

To Do List

• Add label and assign to milestone
• Coding
• Test

[ ] Figure out the best way to name and document edit @ibgreen

http://neb.gl/#/examples/editable-geo-json/polygons

After clicking on a polygon, I see the handles, but then I can't move them.

Describe the bug

Nebula getChildContext get called before component mount and crashes in fusion app

Actual Result

TypeError: Cannot read property 'props' of undefined
    at NebulaReact.props [as getChildContext] (/test-nebula-compat-fusion/node_modules/nebula.gl-react/src/lib/nebula-react.js:41:7)
    at getChildContext (/test-nebula-compat-fusion/node_modules/fusion-react/src/async/prepare.js:26:41)
    at renderCompositeElementInstance (/test-nebula-compat-fusion/node_modules/fusion-react/src/async/prepare.js:94:14)
    at 
    at process._tickCallback (internal/process/next_tick.js:189:7)

Expected Result

Nebula should handle getChildContext call before mount

Reproduce Steps

Steps to Reproduce:

yarn create fusion-app demo
yarn add deck.gl react-map-gl nebula.gl
yarn dev

Add simple nebula to main page

test repo located here: fusion-app-nebula

      <Nebula ref={nebula => nebula} viewport={{width: 800, height: 600}} layers={[]}>
        <InteractiveMap />
      </Nebula>

To Do List

• Add label and assign to milestone
• Coding
• Test

http://neb.gl is giving stale content

Describe the bug

Nebula/DeckGL does not pass viewport parameters to it's child "StaticMap"

Working setup with deck only:

<DeckGL
   initialViewState={viewport}
   layers={[]}>
    <StaticMap mapStyle={RasterTileStyle(['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'])} />
</DeckGL>

Not working setup with Nebula wrapper:

  <Nebula ref={nebula => nebula}
              viewport={viewport}
              layers={[]}>
        <StaticMap mapStyle={RasterTileStyle(['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'])} />
      </Nebula>

Example: https://github.com/romaxa/fusion-app-nebula

Try select legacy segment and move it while geoJSON layer is enabled

modify-handler.js:24 Uncaught TypeError: Cannot read property 'geometry' of undefined
at ModifyHandler.getEditHandles (modify-handler.js:24)
at EditableGeoJsonLayer.updateEditHandles (editable-geojson-layer.js:371)
at EditableGeoJsonLayer.onPointerMove (editable-geojson-layer.js:413)
at EditableGeoJsonLayer._onPointerMove (editable-layer.js:195)
at Object.mapMouseEvent (polygon.js:191)
at nebula.js:246
at Array.forEach ()
at Nebula._handleDeckGLEvent (nebula.js:246)
at HTMLDocument. (nebula.js:140)

Sometimes the mouse cursor is a hand, sometimes vertical resize arrows. Expected to be consistent. Even better if it changes to reflect what the cursor is over (base map vs. feature vs. edit handle of a feature).

I think you may need to downgrade your Deck.gl version or upgrade to their new standard for using Views/ViewState in place of Viewport.

https://neb.gl/#/examples/editable-geo-json/points

Add ability to select one or more features by drawing a rectangle

Hi,

Firstly thanks for the work you are doing, it's being very helpful for my project.

I'm having a problem with the EditableGeoJsonLayer which dissapears while drawPolygon mode is set and the map is panned.

I've inspected the layer using Seer and I've seen that the layer instance stays when the map viewport changes but handlers are removed. I'm not able to understand what is happening since only happens in my application. I've created a similar use case in codesandbox but it works fine.

Anyone could give a hint about what is happening?

Thanks,

Carlos.

Attempting to use nebula for the first time. Trying to integrate it into an existing project that uses DeckGL and StaticMap from react-map-gl.

When I use the code from the example Hero.js I'm unable to get it to work.

The errors I'm getting are:

deck: error while initializing invalid
  Error: Model needs a program
  at assert (assert.js?9b39:12)
  at Model._createProgram (model.js?5534:554)
  at Model.initialize (model.js?5534:86)
  at SolidPolygonLayer._getModels (solid-polygon-layer.js?3294:332)
  at SolidPolygonLayer.updateState (solid-polygon-layer.js?3294:224)
  at SolidPolygonLayer._updateState (layer.js?49b1:715)
  at SolidPolygonLayer._initialize (layer.js?49b1:684)
  at LayerManager._initializeLayer (layer-manager.js?1ae6:653)
  at LayerManager._updateSublayersRecursively (layer-manager.js?1ae6:582)

Uncaught TypeError: Cannot read property 'render' of undefined
  at PathLayer.draw (path-layer.js?dabf:219)
  at eval (layer.js?49b1:805)
  at withParameters (context-state.js?94fb:238)
  at PathLayer.drawLayer (layer.js?49b1:804)
  at drawLayerInViewport (draw-layers.js?e0dc:305)
  at eval (draw-layers.js?e0dc:254)
  at Array.forEach (<anonymous>)
  at drawLayersInViewport (draw-layers.js? e0dc:226)
  at eval (draw-layers.js?e0dc:112)
  at Array.forEach (<anonymous>)

Not sure if I'm missing something but can't figure out what is incorrect and assume that the example should work as is.

When vertex edit handler moved on top of segment layer, it crashes because it checking object:
{
geoJson: { actual geojsonObject }
}

modify-handler.js:39 Uncaught TypeError: Cannot read property 'type' of undefined
at ModifyHandler.getEditHandles (modify-handler.js:39)
at EditableGeoJsonLayer.updateEditHandles (editable-geojson-layer.js:371)
at EditableGeoJsonLayer.onPointerMove (editable-geojson-layer.js:413)
at EditableGeoJsonLayer._onPointerMove (editable-layer.js:195)
at Object.mapMouseEvent (polygon.js:191)
at nebula.js:246
at Array.forEach ()
at Nebula._handleDeckGLEvent (nebula.js:246)
at HTMLDocument. (nebula.js:140)

For Polygon or MultiPolygon dragging the fill area should move (i.e. translate) the entire feature.
For LineString, dragging along the line (not one of the edit handles) should move (i.e. translate) the entire feature.

Perhaps this should be an alternate mode like move or require that the Cmd or Ctrl key be pressed while dragging. Otherwise, a user could zoom in to only polygon fill area, drag intending to pan the map, and not realize they're actually moving the feature.

https://www.npmjs.com/package/nebula.gl doesn't show a readme or repo link

Should be optional and opt-in

Describe the bug

Using nebula.gl in a react app ( React.js 16.7, react-scripts 2.0.3, react-map-gl, deck.gl, nebula.gl, nebula.gl-react)
Making use of this example for clustering ( SFBridges example)
https://github.com/uber/nebula.gl/blob/master/docs/examples/examples.js
It worked before I upgraded react-scripts from 1.X to 2 and in that babel was updated to v7 and it seems babel doesn't like calling a class as function

Actual Result

The issue is this happens now

TypeError: Cannot call a class as a function
_classCallCheck
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck.js:3
  1 | export default function _classCallCheck(instance, Constructor) {
  2 |   if (!(instance instanceof Constructor)) {
> 3 |     throw new TypeError("Cannot call a class as a function");
  4 |   }
  5 | }
View compiled
Supercluster
node_modules/supercluster/index.js:32
  29 | /*#__PURE__*/
  30 | function () {
  31 |   function Supercluster(options) {
> 32 |     _classCallCheck(this, Supercluster);
  33 | 
  34 |     this.options = extend(Object.create(defaultOptions), options);
  35 |     this.trees = new Array(this.options.maxZoom + 1);
View compiled
AccountMarkers.getItems
node_modules/nebula.gl-react/dist-es6/lib/overlays/html-cluster-overlay.js:153
  150 | var newObjects = this.getAllObjects();
  151 | 
  152 | if (newObjects !== this._lastObjects) {
> 153 |   this._superCluster = (0, _supercluster.default)(this.getClusterOptions());
      | ^  154 | 
  155 |   this._superCluster.load(newObjects.map(function (object) {
  156 |     return (0, _helpers.point)(_this2.getObjectCoordinates(object), {
View compiled

Expected Result

For it to render the cluster of markers

Reproduce Steps

Hmm, doing this https://github.com/uber/nebula.gl/blob/master/docs/examples/examples.js
in a create-react-app with react 16.7 and react-scripts 2+

Screenshots

To Do List

• Add label and assign to milestone
• Coding
• Test

Would the this._superCluster maybe need to be instantiated with a 'new'?

Uncaught TypeError: Cannot read property 'pickObject' of null
at Deck.pickObject (deck.js:256)
at DeckGL.pickObject (deckgl.js:72)
at Nebula._handleDeckGLEvent (nebula.js:176)
at HTMLDocument. (nebula.js:140)

Caused after nebula-react unmounted and remounted, as we only addEventListeners in init() function called from componentWillMount, don't detach it on unmount

Feature request

Add logger with priority similar to deck.gl/luma.gl

Background

Our code is full of console.log and console.warn with eslint-disable-next-line no-console,no-undef

To Do List

• Add label and assign to milestone
• Coding
• Doc update
• Test

Create a circle by defining diameter and automatically put the center.

Functionality desired:

• Add points to a MultiPoint feature
• Add LineStrings to a MultiLineString feature
• Add Polygons to a MultiPolygon feature

Ability to add a new LineString feature. Ability to extend to an existing LineString feature (i.e. add points to the end of a LineString).

Selection event from selectedFeatureIndex = null to selectedFeatureIndex = 0 doesn’t seem to trigger any of the selection aware member functions. Same for the reverse, 0 to null.

Can be seen in the deck example by going to view mode, deselecting and incrementing the selection. The point doesn't highlight.