dash-cytoscape
dash-cytoscape copied to clipboard
[BUG] CyLeaflet: Greater than default Leaflet max zoom values fail to load tiles.
Description
For some Leaflet max zoom values greater than the default value 18
causing Leaflet fails to load tiles, causing "grey" backgrounds.
Steps/Code to Reproduce
Run example below, change max zoom input to some number over > 18, and zoom in as much as possible. Example:
import dash
from dash import html, dcc, callback, Input, Output
import dash_cytoscape as cyto
import dash_leaflet as dl
ELEMENTS = [
{"data": {"id": "a", "label": "Node A", "lat": 45.519, "lon": -73.576}},
{"data": {"id": "b", "label": "Node B", "lat": 45.521, "lon": -73.574}},
{"data": {"id": "c", "label": "Node C", "lat": 45.520, "lon": -73.572}},
{"data": {"id": "ab", "source": "a", "target": "b"}},
]
cyleaflet_leaflet_id = {
"id": "cyleaflet_tiles_from_callback",
"component": "cyleaflet",
"sub": "leaf",
}
def serve_layout():
return html.Div(
children=[
cyto.CyLeaflet(
id="cyleaflet_tiles_from_callback",
cytoscape_props=dict(
elements=ELEMENTS,
),
),
"Max zoom",
dcc.Input(value=18, type="number", id="max-zoom"),
],
)
app = dash.Dash(__name__)
server = app.server
app.layout = serve_layout
@callback(Output(cyleaflet_leaflet_id, "children"), Input("max-zoom", "value"))
def update_max_zoom(max_zoom):
return dl.TileLayer(
url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png",
maxZoom=max_zoom,
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
)
if __name__ == "__main__":
app.run_server(debug=True)
Expected Results
Leaflet tiles should load.
Actual Results
Leaflet tiles fail to load displaying a grey background.
Leaflet requests to tiles provider fail. For example requesting https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/18/77496/93762.png results on "timeout" or "data not found" with max zoom. But works with smaller max zoom values