UnfoldedInc / earthengine-layers

deck.gl layers for Google Earth Engine
https://earthengine-layers.com/
MIT License
53 stars 11 forks source link

Compatibility with streamlit #120

Closed giswqs closed 1 year ago

giswqs commented 3 years ago

I am trying to use earthengine-layers with streamlit for developing interactive web apps. The following code works fine in Jupyter notebook. When using the same code with streamlit, I got the error JSON converter: No registered class of type. Earth Engine layers do not show up on the map. Any advice?

from pydeck_earthengine_layers import EarthEngineLayer
import pydeck as pdk
import ee

# Initialize Earth Engine library
try:
    ee.Initialize()
except Exception as e:
    ee.Authenticate()
    ee.Initialize()

# Create an Earth Engine object
image = ee.Image('CGIAR/SRTM90_V4')

# Define Earth Engine visualization parameters
vis_params = {
    "min": 0, 
    "max": 4000,
    'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']
}

# Create a pydeck EarthEngineLayer object, using the Earth Engine object and
# desired visualization parameters
ee_layer = EarthEngineLayer(image, vis_params)

# Define the initial viewport for the map
view_state = pdk.ViewState(latitude=37.7749295, longitude=-122.4194155, zoom=10, bearing=0, pitch=45)

# Create a Deck instance, and display in Jupyter
r = pdk.Deck(layers=[ee_layer], initial_view_state=view_state)
r

image

ibgreen commented 3 years ago

The pydeck_earthengine_layers module is special in that it depends on the pydeck JavaScript widget dynamically loading an external JavaScript script that injects the earthengine deck.gl layers.

(this is different since all other pydeck layers are bundled inside pydeck)

Haven't looked at how streamlit is integrating pydeck but suspect that either the dynamic loading part of javascript layer modules is not included, or streamlit has some issue is preventing the dynamic load from completing.

This dynamic loading bit is relatively tricky to debug and may require someone to some deep digging.

giswqs commented 3 years ago

@ibgreen Thanks for the insights. Here are two links to the pydeck implementation in streamlit.

ibgreen commented 3 years ago

@ajduberstein @kylebarron

giswqs commented 3 years ago

Here is a streamlit app I developed using geemap and streamlit. I would love to use pydeck and earthengine-layers. https://share.streamlit.io/giswqs/geemap-apps/app.py

kylebarron commented 3 years ago

This is the same as https://github.com/visgl/deck.gl/issues/6278 I believe. I'm guessing streamlit is only including core modules

giswqs commented 3 years ago

@kylebarron Thank you for pointing to the deck.gl issue. Does this mean that the issue has to be fixed by streamlit? Or is it something can be fixed by pydeck or earthengine-layers? I tried st.pydeck_chart(r.to_html()), the basemap shows up, but not GEE layers.

kylebarron commented 3 years ago

I'm not entirely sure. It looks like the people who created https://github.com/visgl/deck.gl/issues/6278 also created an issue in streamlit: https://github.com/streamlit/streamlit/issues/3895.

It looks like streamlit hard-codes the JS libraries they include https://github.com/streamlit/streamlit/issues/3895#issuecomment-941055932. In order to support custom libraries like earthengine-layers, we'd need them to support an argument on the Python side to add custom JS scripts.