Bugfix/cyleaflet tiles not found

[Farkites]

About

This PR fixes two bugs in the CyLeaflet all-in-one component:

• 206

• 218

Description of changes

• 218 fix:

  • maxZoom has been added to the default value of leaflet_children. The maxZoom value can't be increased after the initialisation of the dash_leaflet component but it can be reduced. By initialising it with a very high value it's ensured it can be updated.
  • A demo file has been added to test the correct functionality: demos/usage-cy-leaflet-maxzoom.py

• 206 fix:

  • The dash_leaflet version has been upgraded to >=1.0.16rc3. This version includes the fix to round decimal zoom level values, which was causing incorrect requests of tiles. See comment in dash_leaflet repo
  • A demo file has been added to test the correct functionality: demos/usage-cy-leaflet-update-tiles.py

Pre-Merge checklist

• [x] The project was correctly built with npm run build:all.
• [x] If there was any conflict, it was solved correctly.
• [x] All changes were documented in CHANGELOG.md.
• [x] All tests on CircleCI have passed.
• [x] All Percy visual changes have been approved.
• [x] At least one person has :dancer:'d the pull request.

Reference Issues

Closes #218 Closes #206

Other comments

New demo files can be used to test these fixes.

[emilykl]

@Farkites This all looks great except for the case where the dev doesn't specify any tiles or leaflet children -- in that case there is no limit put on the zoom and the viewer can zoom in infinitely until they see gray tiles. Could you handle that case?

https://github.com/plotly/dash-cytoscape/assets/4672118/0ca82943-b419-4fa6-a8c8-3877df7d4182

import dash
from dash import html
import dash_cytoscape as cyto

app = dash.Dash(__name__)
server = app.server

cy_stylesheet = [
    {"selector": "node", "style": {"width": "20px", "height": "20px"}},
    {"selector": "edge", "style": {"width": "10px"}},
    {"selector": "node", "style": {"label": "data(label)"}},
]

default_div_style = {
    "height": "400x",
    "width": "600px",
    "border": "2px solid gray",
    "padding": "10px",
    "margin": "5px",
}

city_lat_lon = {
    "Montreal": (45.52028867870132, -73.5757529436986),
}

cyto_elements = [
    {
        "data": {"id": city, "label": city, "lat": lat, "lon": lon }
    }
    for city, (lat, lon) in city_lat_lon.items()
]

# App
app.layout = html.Div(
    [
        html.Div(
            cyto.CyLeaflet(
                id="my-cy-leaflet",
                cytoscape_props={
                    "elements": cyto_elements,
                    "stylesheet": cy_stylesheet,
                },
            ),
            id="cy-leaflet-div",
            style=default_div_style,
        ),
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True)

[Farkites]

@Farkites This all looks great except for the case where the dev doesn't specify any tiles or leaflet children -- in that case there is no limit put on the zoom and the viewer can zoom in infinitely until they see gray tiles. Could you handle that case?

Screen.Recording.2024-07-09.at.11.05.59.AM.mov

Good catch, @emilykl ! This should be fixed now!