Not working with geemap

[MarcSkovMadsen]

geemap enables users to use Google Earth Engine in Python Notebooks. See https://github.com/giswqs/geemap. I would like to be able to use geemap with Panel but I cannot as it raises errors in the browser console and the terminal.

I don't know if the issue is on ipywidgets_bokeh side or geemaps, so I've crossposted here gee-community/geemap#1101.

Reproducible example

pip install geemap==0.13.10 ipywidgets_bokeh==1.2.1 panel==0.13.1

Then panel serve script.py --autoreload --show where script.py contains

import geemap

map = geemap.Map(center=[40,-100], zoom=4)

import panel as pn

pn.extension("ipywidgets", template="fast")
pn.state.template.param.update(
  site="Awesome Panel", title="Panel + Geemap - Google Earth Engine Data Apps"
)

pn.panel(map).servable()

Then I see the errors

ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2 
        
       Error: Could not create a view for model id b97b1de12b934e639c9b914f53f0985f
    at ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2087124
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.catch (async)
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.then (async)
e.create_view @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
t.create_child_view @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
add_control_model @ Map.js:194
e.update @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
(anonymous) @ Map.js:233
Promise.then (async)
render_leaflet @ Map.js:231
Promise.then (async)
render @ Map.js:227
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.then (async)
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.then (async)
e.create_view @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
e.display_model @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
await in render (async)
_render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
build @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
renderTo @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
f @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:584
await in f (async)
t.add_document_standalone @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:584
await in t.add_document_standalone (async)
t.add_document_from_session @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
await in t.add_document_from_session (async)
w @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
t.embed_items @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
await in t.embed_items (async)
embed_document @ script?theme=dark:286
(anonymous) @ script?theme=dark:289
(anonymous) @ script?theme=dark:305
o.safely @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:595
fn @ script?theme=dark:281
ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2 
        
       Error: Could not create child view
    at ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2087124
    at async Promise.all (:5006/index 0)
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.catch (async)
t.create_child_view @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
add_control_model @ Map.js:194
e.update @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
(anonymous) @ Map.js:233
Promise.then (async)
render_leaflet @ Map.js:231
Promise.then (async)
render @ Map.js:227
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.then (async)
(anonymous) @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
Promise.then (async)
e.create_view @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
e.display_model @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
await in render (async)
_render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2
render @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
build @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
renderTo @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
f @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:584
await in f (async)
t.add_document_standalone @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:584
await in t.add_document_standalone (async)
t.add_document_from_session @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
await in t.add_document_from_session (async)
w @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
t.embed_items @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
await in t.embed_items (async)
embed_document @ script?theme=dark:286
(anonymous) @ script?theme=dark:289
(anonymous) @ script?theme=dark:305
o.safely @ bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:595
fn @ script?theme=dark:281
ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2 
        
       Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')
    at ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2459037
    at gg.Bl [as loader] (ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2459166)
    at ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2741052
    at new Promise (<anonymous>)
    at gg.loadClass (ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2740898)
    at ipywidgets_bokeh.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:2:2091629

and in the terminal

$ panel serve 'script.py' --autoreload --show
2022-06-12 11:07:23,557 Starting Bokeh server version 2.4.3 (running on Tornado 6.1)
2022-06-12 11:07:23,559 User authentication hooks NOT provided (default user enabled)
2022-06-12 11:07:23,560 Bokeh app running at: http://localhost:5006/script
2022-06-12 11:07:23,561 Starting Bokeh server with process id: 32072
2022-06-12 11:07:27,280 WebSocket connection opened
2022-06-12 11:07:27,281 ServerConnection created
2022-06-12 11:07:27,305 WebSocket connection opened
2022-06-12 11:07:27,306 ServerConnection created
2022-06-12 11:07:28,329 No such comm: 32d8eaaf587145428eaf87cde1e9eda1
2022-06-12 11:07:28,591 No such comm: 32d8eaaf587145428eaf87cde1e9eda1
2022-06-12 11:07:28,597 No such comm: 32d8eaaf587145428eaf87cde1e9eda1
2022-06-12 11:07:29,826 No such comm: 32d8eaaf587145428eaf87cde1e9eda1
2022-06-12 11:07:29,926 No such comm: 32d8eaaf587145428eaf87cde1e9eda1
2022-06-12 11:07:29,931 No such comm: 32d8eaaf587145428eaf87cde1e9eda1

[MarcSkovMadsen]

As you can see above the app is showing. But with errors, meaning it is not really working even though interactivity like below is showing.

panel-geemap.mp4

[bilgetutak]

@MarcSkovMadsen
I see a similar behavior in FastGridTemplate and ipyleaflet. Lots of JS errors in js console (in bokeh log level = debug), and not even the map shows up.
The same code works withFastListTemplate.
I believe geemap also uses ipyleaflet and ipywidget. It might track down to those libraries.

import datetime
import panel as pn
from ipyleaflet import Map

pn.extension("ipywidgets")

start_date_picker = pn.widgets.DatetimePicker(name='Date/Time', value=datetime.datetime(2021, 3, 2, 12, 10))
lon_input = pn.widgets.FloatInput(name='Longitude', value=34.5, step=1e-6, start=0, end=180, format="000.000000")
lat_input = pn.widgets.FloatInput(name='Latitude', value=44, step=1e-6, start=0, end=90, format="000.000000")

m = Map(center=(39.5, 31))

template = pn.template.FastGridTemplate(
    site="Title", title="Map Screen",
    sidebar=[start_date_picker, lon_input, lat_input],
)
template.main[:3,:6] = m

template.servable()

[ndmlny-qs]

@MarcSkovMadsen I tried to reproduce your errors, but I couldn't get a map to load at all. I'm not sure if it was due to user error when signing up for the google earth data, or if there is an issue that I can try and resolve in ipywidgets_bokeh. Let me know if this issue persists for you.

[ndmlny-qs]

@bilgetutak I tried to reproduce your example as well. I was able to get the panel template to render, but I ended up getting 400 error codes on tile requests from openstreetmap. I'm not sure why that occurred, but until I figure that out I'm not sure I can help resolve any ipywidgets_bokeh issues that may be happening.