fastapi + js map visualisation – Blancer.com Tutorials and projects

Need help with region select. I need to have opportunity to choose region and visualize points on html. What’s wrong? I don’t see the list of regions, only “{{regions}}” photo

I use FastAPI for it. Data is in sample_json

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")

sample_json = {
    "Moscow": [[12.1, 111], 100],
    "SPB": [[51.993538, 127.685484], 1410000]
}

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse("map.html", {"request": request, "regions": sample_json})

@app.post("/selected-region/")
async def get_selected_region(region: str = Form(...)):
    selected_data = sample_json.get(region)
    return selected_data

And here it is html part of code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map with FastAPI</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <h1>Map with FastAPI</h1>
    <label for="region-select">Select a region:</label>
    <select id="region-select">
        {% for region, data in regions.items() %}
        <option value="{{ region }}">{{ region }}</option>
        {% endfor %}
    </select>
    <div id="map" style="height: 400px;"></div>

    <script>
        var map = L.map('map').setView([55.7558, 37.6176], 5); // Default center and zoom level

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        var marker;

        // Function to update map with selected region data
        function updateMap(regionData) {
            if (marker) {
                map.removeLayer(marker);
            }
            var regionCoords = regionData[0];
            var regionSum = regionData[1];
            marker = L.marker(regionCoords).addTo(map);
            marker.bindPopup(`<b>${regionSum}</b>`).openPopup();
            map.setView(regionCoords, 10); // Set map center and zoom level to selected region
        }

        // Event listener for region selection
        document.getElementById('region-select').addEventListener('change', function() {
            var selectedRegion = this.value;
            fetch('/selected-region/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `region=${selectedRegion}`
            })
            .then(response => response.json())
            .then(data => updateMap(data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

the code is above, don’t know, where is the problem