Issue with Tile Loading in Dash-Leaflet

Hello, community!

I’m encountering an issue with dynamically loading tiles in a map using dash-leaflet and Flask. I can access the tile images directly through specific URLs in the browser, like http://127.0.0.1:5000/static/aerials/BaseMapTiles/12/1369/2161.png, and they load perfectly. However, when I try to use a URL template to dynamically load tiles based on zoom levels and coordinates ({z}/{x}/{y}), the tiles fail to load, and I receive 404 errors.

Here’s how I’m attempting to implement this:

def generate_url():
    with app.app_context():
        base_url = url_for('static', filename='aerials/BaseMapTiles/')
        return base_url + '{z}/{x}/{y}.png' 

Dash Code for the Map:

aerials_url = generate_url()

dl.Map( id='geo-map',style={'width': '1000px', 'height': '500px'}, center=[-23.561684, -46.625290], zoom=10, children=[
                        dl.TileLayer(url = aerials_url)
                    ]),

The URLs generated for the tiles are correct, and I’ve checked the paths on the server. Everything appears to be set up correctly, but the dynamic tiles still fail to load. Any ideas on what could be causing this issue or how I might resolve it?

I appreciate any help or suggestions!

What error do you get in the JS console?