chore(examples) Use MapboxOverlay in mapbox (formerly safegraph) website example #8558
Conversation
Signed-off-by: Chris Gervang <chris@gervang.com>
examples/website/safegraph/app.js
Outdated
| arcLayer.setProps({ | ||
| data: data.filter(d => d.hex === hex) | ||
| }); | ||
| deckOverlay.setProps({ | ||
| layers: [ | ||
| poiLayer, // TODO: This was written with an imperative pattern, which won't work for MapboxOverlay. poiLayer needs to be defined. | ||
| arcLayer.clone({ | ||
| data: data.filter(d => d.hex === hex) | ||
| }) | ||
| ] | ||
| }) |
There was a problem hiding this comment.
I'd like to hear some opinions on how to demonstrate this kind of partial update in an example. MapboxLayer supported it with a special setProps function added to each layer, but this is inconsistent with the majority of our examples and isn't supported when regular layers are in use, as is the case when using MapboxOverlay.
There was a problem hiding this comment.
The same behavior can be done using the MaskExtension: https://github.com/visgl/deck.gl/blob/master/test/apps/mask/app.jsx
If not using that, I think it is OK to recreate all the layers for the setProps call, deck.gl should do the diff internally and only update what is needed
There was a problem hiding this comment.
The common way of doing this is to change the signature to renderLayers(deckOverlay, data, selectedPOI) and call it from onClick.
There was a problem hiding this comment.
Thanks! Got it to work.
examples/website/safegraph/app.js
Outdated
| arcLayer.setProps({ | ||
| data: data.filter(d => d.hex === hex) | ||
| }); | ||
| deckOverlay.setProps({ | ||
| layers: [ | ||
| poiLayer, // TODO: This was written with an imperative pattern, which won't work for MapboxOverlay. poiLayer needs to be defined. | ||
| arcLayer.clone({ | ||
| data: data.filter(d => d.hex === hex) | ||
| }) | ||
| ] | ||
| }) |
There was a problem hiding this comment.
The common way of doing this is to change the signature to renderLayers(deckOverlay, data, selectedPOI) and call it from onClick.
Signed-off-by: Chris Gervang <chris@gervang.com>
Signed-off-by: Chris Gervang <chris@gervang.com>
|
I thought we were renaming this example to |
Signed-off-by: Chris Gervang <chris@gervang.com>
Signed-off-by: Chris Gervang <chris@gervang.com>
|
@Pessimistress, as discussed, I've switched the example to use react. Lmk if you have any comments or if this is ready to merge. |
chrisgervang
changed the title
Closes #8522. For #8557
Change List
mapbox