Support for pydeck custom tile layer

It would be great if streamlit can support pydeck custom tile layer. It will open many more opportunities. For example, accessing Google Earth Engine data layers or any web map service layers.

The following custom tile layer can render properly in Jupyter notebook, but it does not work with Streamlit. The custom tile layer won’t show up.

import pydeck
import streamlit as st

pydeck.settings.custom_libraries = [
    {
        "libraryName": "MyTileLayerLibrary",
        "resourceUri": "https://cdn.jsdelivr.net/gh/agressin/pydeck_myTileLayer@master/dist/bundle.js",
    }
]

DATA_URL = 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'

custom_layer = pydeck.Layer(
    "MyTileLayer",
    DATA_URL
)
view_state = pydeck.ViewState(latitude=0, longitude=0, zoom=1)

r = pydeck.Deck(custom_layer, initial_view_state=view_state, map_provider=None)
st.pydeck_chart(r)
1 Like

Hi @giswqs :wave:

I was able to confirm that st.pydeck_chart doesn’t render custom tile layers. Mind creating a feature request or filing a bug report?

In the meantime, here’s a workaround: pass r.to_html(as_string=True) to components.html :balloon:

import pydeck
import streamlit as st

pydeck.settings.custom_libraries = [
    {
        "libraryName": "MyTileLayerLibrary",
        "resourceUri": "https://cdn.jsdelivr.net/gh/agressin/pydeck_myTileLayer@master/dist/bundle.js",
    }
]

DATA_URL = 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'

custom_layer = pydeck.Layer(
    "MyTileLayer",
    DATA_URL
)
view_state = pydeck.ViewState(latitude=0, longitude=0, zoom=1)

r = pydeck.Deck(custom_layer, initial_view_state=view_state, map_provider=None)
st.components.v1.html(r.to_html(as_string=True), width=800, height=600)

1 Like

Thanks for looking into this. I know the HTML workaround. The problem is that the width is not responsive and the whole map refreshes when layers change. It is not ideal. I would prefer using pydeck_chart. I have submitted a feature request at Support for pydeck custom tile layer · Issue #5127 · streamlit/streamlit · GitHub

1 Like