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