plotly / dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
https://dash.plot.ly/cytoscape
MIT License
587 stars 120 forks source link

[BUG] CyLeaflet: Greater than default Leaflet max zoom values fail to load tiles. #218

Closed Farkites closed 2 weeks ago

Farkites commented 1 month ago

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='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <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