I have a Folium map displayed in my HTML and the code is:
@app.route("/")
@app.route("/index")
def index():
start_coords = (42.9974521, -78.7907883)
folium_map = folium.Map(location=start_coords, zoom_start=14)
_ = folium_map._repr_html_()
map_div = Markup(folium_map.get_root().html.render())
hdr_txt = Markup(folium_map.get_root().header.render())
script_txt = Markup(folium_map.get_root().script.render())
return render_template("index.html", map_div=map_div, hdr_txt=hdr_txt, script_txt=script_txt)
The map has been rendered inside a div like this:
<head>
{{ hdr_txt }}
</head>
<body>
<div class="h-3/4 mx-auto">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-full">
{{ map_div }}
</div>
</div>
<body>
<script type="text/javascript">
{{ script_txt }}
</script>
The Map renders at selected co-ordinates. Now, In my JavaScript, I have a variable like this:
const coordinates = {latitude: 7.23, longitude: -4.05}
I want to pass this value back to Flask and re-render the page. I saw a lot of questions regarding this, but I haven't been able to find a correct answer yet. I do not want to use things like AJAX or xmlhttprequest or anything related to any kind of requests or any kind of route change or page refresh. Once I pass the value, the map should update on the same page itself. How do I achieve this? I am very new to Flask, so please take the time to explain. Any help would be much appreciated.