GitHub user dosubot[bot] added a comment to the discussion: Deck.gl map change
style directly on dashboard
<!-- Answer -->
To add a TileLayer from @deck.gl/geo-layers in Superset Libre, you need to
create and configure a TileLayer instance and ensure it is included in the
array of layers passed to your DeckGL component. Here’s a basic example based
on how Superset handles custom deck.gl layers:
1. **Import the TileLayer**:
```js
import { TileLayer } from '@deck.gl/geo-layers';
import { BitmapLayer } from '@deck.gl/layers';
```
2. **Create the TileLayer**:
```js
const tileLayer = new TileLayer({
id: 'my-tile-layer',
data: 'https://your-tile-server/{z}/{x}/{y}.png', // XYZ tile URL template
minZoom: 0,
maxZoom: 19,
renderSubLayers: props => {
const { boundingBox } = props.tile;
return new BitmapLayer(props, {
image: props.data,
bounds: [
boundingBox[0][0], boundingBox[0][1],
boundingBox[1][0], boundingBox[1][1]
]
});
},
visible: true,
});
```
3. **Pass the TileLayer to DeckGL**:
Make sure your `layers` prop includes the TileLayer:
```jsx
<DeckGL
layers={[tileLayer, ...otherLayers]}
{...otherProps}
>
{/* Map and widgets */}
</DeckGL>
```
4. **Check Data URLs and Visibility**:
Ensure the `data` URL is accessible from your browser and that `visible:
true` is set. If you see nothing rendered, check your browser’s console and
network tab for errors or failed tile requests.
Superset’s codebase uses similar patterns for custom layers, such as in the
`createXyzLayer` utility, which wraps a TileLayer with an XYZ source and
attribution. You can adapt this approach for your use case by specifying your
tile server URL and any additional configuration you need. For more details,
see the [layer utility
example](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-cartodiagram/src/util/layerUtil.tsx).
If you still don’t see the layer, check for CORS issues, network errors, or
JavaScript errors in your browser’s developer tools.
<!-- Dosu Comment Footer -->
*To reply, just mention my name [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/af017341-29b8-4a98-b501-89184756ed78?feedback_type=other)</sup> [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/32149)
GitHub link:
https://github.com/apache/superset/discussions/32149#discussioncomment-13297946
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
