# nebula.gl not working with deck.gl

**URL:** <https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164>\
**Category:** Help\
**Created:** [November 17, 2020, 5:46pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164 "2020-11-17T17:46:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 17, 2020, 5:46pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/1 "2020-11-17T17:46:07Z")

</div>

I am trying to use the nebula.gl library in Observable and was able to require it into the notebook (see [issue requiring nebula.gl - #2 by severo](https://talk.observablehq.com/t/issue-requiring-nebula-gl/4153/2)) but I am unable to find the `DrawPolygonMode` within nebula.gl - see notebook link below

> **[Nebula.gl and Deck.gl Selection Example](https://observablehq.com/@cornhundred/lasso-selection)**
>
> This notebook was originally forked from https://observablehq.com/@pessimistress/deck-gl-playground I'm trying to get this polygon selection example https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-7fcst?file=/app.js...

I am trying to reproduce this nebula.gl and deck.gl example [https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-l0n65?file=/app.js:0-86](https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-l0n65?file=/app.js:0-86) in Observable

 ![Screen Shot 2020-11-17 at 12.44.54 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/df4cfe572c22aef88e0ca487ec48f232901c5dc6.png)

Any help would be appreciated 😃

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 17, 2020, 5:51pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/2 "2020-11-17T17:51:18Z")

</div>

I have no experience whatsoever with nebula or deck, but you might be looking for `drawPolygon`:  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/88b5b85d5e55cf24a75d4b29a09d927290f1fa19.png)

Chrome’s DevTools have a quite powerful search function that allows you to search in all loaded resources. You can access it through Command+Option+F (Mac) or Control+Shift+F (Windows/Linux).

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 17, 2020, 5:57pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/3 "2020-11-17T17:57:28Z")

</div>

Thanks @mootari for the help. But I can’t find that search section in the Chrome dev tools (MacOS) - is it under Sources? Also, would you know how I would access this variable from an Observable cell?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 17, 2020, 6:13pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/4 "2020-11-17T18:13:21Z")

</div>

> [@cornhundred](#):
>
> But I can’t find that search section in the Chrome dev tools

Make sure that the dev tools are focused when you use the above shortcut. Alternatively use Command+Shift+P to open the panel/drawer search and type “search”.

> [@cornhundred](#):
>
> Also, would you know how I would access this variable from an Observable cell?

Have you tried specifying `mode: "drawPolygon"` in your layer options?

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 17, 2020, 6:26pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/5 "2020-11-17T18:26:36Z")

</div>

Thanks I was able to find the search result you showed by first clicking on dev tools and then using the shortcut. This should help sort this out.

However, specifying `mode: "drawPolygon"` is still giving a `drawPolygon` is not defined.

 ![Screen Shot 2020-11-17 at 1.24.17 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/52d5365cc030a45ba7a50e290ccc762d80ae3e68.png)

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [November 17, 2020, 6:32pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/6 "2020-11-17T18:32:18Z")

</div>

maybe

```auto
   mode: 'drawPolygon',

```

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 17, 2020, 6:40pm UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/7 "2020-11-17T18:40:03Z")

</div>

Thanks @severo and @mootari - sorry I missed the quotes around the variable and now there is not an error.

Now, I just have to try and implement the layer correctly in the deckgl visualization. Currently, when I add the layer to the deckgl visualization nothing is showing up and I’m having to comment out a section in the layer definition otherwise I get a circular definition

```
  onEdit: ({ updatedData, editType, featureIndexes, editContext }) => {
    var myFeatureCollection = updatedData;
    // deck.setProps({ layers: layers });
  }
```

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 18, 2020, 3:28am UTC](https://talk.observablehq.com/t/nebula-gl-not-working-with-deck-gl/4164/8 "2020-11-18T03:28:49Z")

</div>

Switching to `mode: drawPolygon` gave the following deprecation error in the console

```auto
layers@0.21.1:1 Deprecated use of passing `mode` as a string. Pass the mode's class constructor instead.

```

So, I looked at the [codebox example](https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-l0n65?file=/app.js:86-200) and tried to emulate the imports

```auto
// codebox
import { EditableGeoJsonLayer } from "@nebula.gl/layers";
import { DrawPolygonMode } from "@nebula.gl/edit-modes";

```

on Observable

```auto
// Observable cells
nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.21.1') 
EditableGeoJsonLayer = nebula_layers.EditableGeoJsonLayer

nebula_edit = require('https://bundle.run/@nebula.gl/edit-modes@0.21.1') 
DrawPolygonMode = nebula_edit.DrawPolygonMode 

```

It looks like the imports might be working correctly, but I’m getting the following error in the console about `deck: error during initialization of invalid Error: Model needs a program`

 ![Screen Shot 2020-11-17 at 10.27.42 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/4fdea8550c01f89642cdf226607bfc417e8f6472.png)