[Python] `ipyleaflet` shows a grey map after modifying medium-sized data

I have an app made with Shiny for Python which displays an ipyleaflet map with a couple thousands of markers.

On startup, the map renders fine. However, if I press the "Reload" button to mimick some computations, then the entire map becomes gray and unusable. This only happens when the number of observations in sample() is high enough. In the example below, there are 1,000 points on the same lat/lon.

from shinywidgets import render_widget, output_widget
from ipyleaflet import (
Map,
CircleMarker,
LayerGroup,
)
from shiny import App, reactive, ui
import geopandas as gpd

geo_str = """{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urngc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": "ak16994521", "mag": 2.3, "time": 1507425650893, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5129, 63.1016, 0.0 ] } },
]}
"""
dat = gpd.read_file(geo_str, driver="GeoJSON")

app_ui = ui.page_fluid(ui.input_action_button("reload", "reload"), output_widget("map"))


def server(input, output, session):
reactive_dat = reactive.Value(dat.sample(n=1000, replace=True))

@reactive.effect
@reactive.event(input.reload)
def _():
reactive_dat.set(dat.sample(n=1000, replace=True))

@render_widget
def map():
map = Map(zoom=1)
markers = []
for idx, row in reactive_dat().iterrows():
marker = CircleMarker(location=(row.geometry.y, row.geometry.x), radius=3)
markers.append(marker)

map.add_layer(LayerGroup(layers=markers))
return map


app = App(app_ui, server)


I see this error in the browser console:

Uncaught (in promise) TypeError: t is undefined
create_view libembed-amd.js:25
create_child_view libembed-amd.js:69
add_layer_model Map.js:186
update libembed-amd.js:69
render_leaflet Map.js:242
promise callback*render_leaflet Map.js:240
promise callback*render Map.js:236
state_change libembed-amd.js:25
promise callback*t.prototype.create_view/t.state_change< libembed-amd.js:25
promise callback*t.prototype.create_view libembed-amd.js:25
renderValue output.ts:94
onValueChange outputBinding.ts:26
onValueChange outputAdapter.ts:34
receiveOutput shinyapp.ts:515
_init shinyapp.ts:725
_sendMessagesToHandlers shinyapp.ts:695
dispatchMessage shinyapp.ts:670
onmessage shinyapp.ts:256
startActionQueueLoop shinyapp.ts:285


I'm using uv with pyproject.toml:

[project]
name = "test-shiny-app"
version = "0.1.0"
description = "Add your description here"
readme = "README.md"
requires-python = ">=3.11"
dependencies = [
"geopandas>=1.1.0",
"ipykernel>=6.29.5",
"ipyleaflet==0.17.3",
"ipywidgets==8.1.7",
"shiny==1.5.0",
"shinywidgets>=0.7.0",
]


Did anyone encounter this before? Are there some workarounds?

Reported on github but it may take a while to have an answer there so maybe someone here has info on this: https://github.com/posit-dev/py-shiny/issues/2088

Continue reading...