JSX Layers, Views, and Map

[karllapuz]

Hey!

So I'm using DeckGL with React and I was wondering why it's possible to render LineLayers, Map (from react-map-gl) as direct children of DeckGL, but not as imported components, like so:

Works:

<DeckGL>
  <LineLayer />
  <Map />
</DeckGL>

Does not work:

<DeckGL>
  <LineLayerComponent />
  <MapComponent />
</DeckGL>

const LineLayerComponent = () => <LineLayer />
const MapComponent = () => <Map />

Is it because of this caveat stated here? The goal is to be able to separate properties and functionalities only in components where they're concerned.

[Pessimistress]

Use layers instead of JSX if you want to split out layer creation to other functions.

[Pessimistress]

Because the layers are not real React components. Deck.gl's core and layers modules do not depend on React. see discussion in #7304.

[karllapuz]

Hmm, sorry I don't think I understand the explanation. I'm instantiating the object in another file with static data (not passing reactive states) and importing that in the component with DeckGL to pass in the layers array. At this point I'm not using JSX anymore to split up the layer creation funcitonality. Shouldn't the import-export object approach work as if the object was instantiated in the component with DeckGL?

[Pessimistress]

Sorry I just read your last code snippet again. Can you create a code sandbox that reproduces your issue?

[karllapuz]

It seems like I'm not able to reproduce the issue in a codesandbox environment here, but I think I have an idea about where the issue lies. When I add the loader: [MVTLoader], and loadOptions: { worker: false} and import the whole MVTLayer object from a different file, I get an assertion error, but when I create the object in the component with DeckGL, it renders just fine.

Currently reading about Loaders & Web Workers to see if my local environment may have something to do with the import-export error

[mz8i]

Late to the party but in case someone bumps into this: I'm guessing your code was working when you had the layer creation in the same file, because a line such as const line = new LineLayer(...) was placed inside the render function of your component. So on every render, the layer descriptor was created anew.

Deck.gl requires you to recreate the layer descriptors (new LineLayer()) every time you supply a new list of layers to the deck.gl component, because of the reactive paradigm that the library follows. The objects you're creating aren't really the actual layers, they're just layer descriptors. To draw a parallel to React - the layer descriptors are like React components/elements, and the internal layers managed by deck.gl are like DOM nodes. Deck updates the internal layers (which is expensive) only when needed, based on the layer descriptors it gets (frequently creating layer descriptors is cheap).

The problem in your original code was that you created the line layer descriptor just once:
export const line = new LineLayer()
and then every time your component rendered, you tried to pass the same object to layers. But you're not supposed to do that, as described above.

What would've worked, to still keep the layer definition in another file, would be to keep that in a function which you'll then call on every render:

line.ts:

export const makeLine = () => new LineLayer(...)

App.tsx:

function MyComponent() {
   const layers = [makeLine()];

   return <DeckGL layers={layers} />;

}

This way the exact definition of the layer is kept elsewhere, but it's inside a function so that the descriptor is created anew every time.

[karllapuz]

@Pessimistress Entirely separate question – is the ControllerOptions available to be imported from the core/modules? I'd like to be able to create a variable for the controller and make it typescript compliant:

const controller: ControllerOptions (?)  = { ... } 

<DeckGL controller={controller} />