Fastapi + js визуализация карты ⇐ Python

[Anonymous]

Нужна помощь с выбором региона. Мне нужно иметь возможность выбирать регион и визуализировать точки в html. В чем дело? Я не вижу списка регионов, только фото "{{regions}}".Я использую для этого FastAPI. Данные находятся в 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

А вот это html-часть кода

Код: Выделить всё

Map with FastAPI




Map with FastAPI
Select a region:

{% for region, data in regions.items() %}
{{ region }}
{% endfor %}



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(`${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));
});

код выше, не знаю, в чем проблема

Подробнее здесь: https://stackoverflow.com/questions/781 ... ualisation