ipyleaflet - marker is not rendered at first click #211
Description
Description
when clicking on the map, to add markers, the marker is only rendered after the next click (for instance: click 1: no marker, click 2: marker on location 1, click 3: marker on location 2, etc.
Shiny code to reproduce
from ipyleaflet import Map, Marker
from ipywidgets import Layout
from shiny import App, ui
from shinywidgets import output_widget, render_widget
app_ui = ui.page_sidebar(
ui.sidebar(
"Sidebar content"),
output_widget("map"),
)
def server(input, output, session):
def handle_click(**kwargs):
if kwargs.get('type') == 'click':
map.widget.add_layer(Marker(location=kwargs.get('coordinates')))
@render_widget
def map():
map = Map(center=(51.174608, 3.865813), zoom=9, scroll_wheel_zoom=True,
layout=Layout(width='80%', height='90vh'))
map.on_interaction(handle_click)
return map
app = App(app_ui, server)
Just click on the map, and you will notice the first marker is only shown at the second click
Error in browser console
Uncaught (in promise) TypeError: can't access property "state_change", t is undefined
create_view libembed-amd.js:25
create_child_view libembed-amd.js:69
add_layer_model index.js:2
update libembed-amd.js:69
model_events index.js:2
g libembed-amd.js:1
v libembed-amd.js:1
h libembed-amd.js:1
trigger libembed-amd.js:1
B libembed-amd.js:25
set libembed-amd.js:69
set_state libembed-amd.js:69
state_change libembed-amd.js:69
promise callback*e.prototype._handle_comm_msg libembed-amd.js:69
handle_msg comm.ts:83
<anonymous> output.ts:187
_sendMessagesToHandlers shinyapp.ts:697
_init shinyapp.ts:862
_sendMessagesToHandlers shinyapp.ts:697
dispatchMessage shinyapp.ts:672
onmessage shinyapp.ts:256
startActionQueueLoop shinyapp.ts:286
onopen shinyapp.ts:253
createSocket shinyapp.ts:226
connect shinyapp.ts:166
initialize index.ts:672
ShinyClass index.ts:143
setTimeout handler*ShinyClass/< index.ts:141
jQuery 13
requirements.txt
anyio==4.9.0
anywidget==0.9.18
appdirs==1.4.4
asgiref==3.9.1
asttokens==3.0.0
branca==0.8.1
certifi==2025.7.14
charset-normalizer==3.4.2
click==8.2.1
colorama==0.4.6
comm==0.2.2
decorator==5.2.1
executing==2.2.0
h11==0.16.0
htmltools==0.6.0
idna==3.10
ipyleaflet==0.20.0
ipython==9.4.0
ipython_pygments_lexers==1.1.1
ipywidgets==8.1.7
jedi==0.19.2
Jinja2==3.1.6
jupyter-leaflet==0.20.0
jupyter_core==5.8.1
jupyterlab_widgets==3.0.15
linkify-it-py==2.0.3
markdown-it-py==3.0.0
MarkupSafe==3.0.2
matplotlib-inline==0.1.7
mdit-py-plugins==0.4.2
mdurl==0.1.2
narwhals==1.48.0
orjson==3.11.0
packaging==25.0
parso==0.8.4
platformdirs==4.3.8
prompt_toolkit==3.0.51
psygnal==0.14.0
pure_eval==0.2.3
Pygments==2.19.2
python-dateutil==2.9.0.post0
python-multipart==0.0.20
pywin32==311
questionary==2.1.0
requests==2.32.4
setuptools==80.9.0
shiny==1.4.0
shinywidgets==0.7.0
six==1.17.0
sniffio==1.3.1
stack-data==0.6.3
starlette==0.47.2
traitlets==5.14.3
traittypes==0.2.1
typing_extensions==4.14.1
uc-micro-py==1.0.3
urllib3==2.5.0
uvicorn==0.35.0
watchfiles==1.1.0
wcwidth==0.2.13
websockets==15.0.1
widgetsnbextension==4.0.14
xyzservices==2025.4.0
In Jupyter (where the markers are rendered properly)
from ipywidgets import Layout
from ipyleaflet import Map, GeoJSON, Marker
import json
def handle_click(**kwargs):
if kwargs.get('type') == 'click':
map.add_layer(Marker(location=kwargs.get('coordinates')))
map = Map(center=(51.174608, 3.865813), zoom=9, scroll_wheel_zoom=True,
layout=Layout(width='80%', height='90vh'))
map.on_interaction(handle_click)
map
Just click on the map and the markers are rendered immediately (so no issue there)