Suggestion: Documentation - add more detailed example of Flask integration #1223
Description
Please add a code sample or a nbviewer link, copy-pastable if possible
'''
Example flask webserver using folium
'''
# pylint: disable=invalid-name, protected-access
from flask import Flask
from flask import render_template
from flask import Markup
import folium
app = Flask(__name__)
@app.route('/')
def index() -> str:
'''
index: generates a webpage holding a leaflet / folium map
'''
start_coords = (-26.52, 153.09)
folium_map = folium.Map(location=start_coords, zoom_start=13, width='80%')
# Extract the components of the web map
#
# The HTML to create a <div> to hold the map
#
# The header text to get styles, scripts, etc
#
# The scripts needed to run
# first, force map to render as HTML, for us to dissect
_ = folium_map._repr_html_()
# get definition of map in body
map_div = Markup(folium_map.get_root().html.render())
# html to be included in header
hdr_txt = Markup(folium_map.get_root().header.render())
# html to be included in <script>
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
)
# end index
if __name__ == '__main__':
app.run()The index.html template is:
<!DOCTYPE html>
<html>
{# Note: expects extending template rendering to define parameters: #}
{# 'hdr_txt', holding styles for leaflet #}
{# 'map_div', holding html for area #}
{# 'script_txt', holding JS scripts for leaflet #}
<head>
{{ hdr_txt }}
</head>
<body>
<hr/>
{{ map_div }}
<hr/>
</body>
{# Note: script_txt MUST follow the body, so that div ids are defined to be referenced in the scripts #}
<script>
{{ script_txt }}
</script>
</html>
Problem description
First, thank you for this excellent package,
The Folium documentation example for Flask integration creates a map that fills the whole webpage. Integrating a Folium map into a webpage with other content is not explicitly described.
Tested code is provided above, showing how to extract the components parts of a Folium map, and position them in a bespoke webpage.
Note: example tested with :
Chrome
Google Chrome is up to date
Version 78.0.3904.97 (Official Build) (64-bit)
Edge: Edge gives a Console warning message HTML1506: Unexpected token., because (in my example) the <script> tag is placed after the <body> tag, but the rendering still works OK. I have chosen this script placement to be safe against premature script execution, but this might be overkill.
Microsoft Edge 44.18362.387.0
Microsoft EdgeHTML 18.18362
Expected Output
Documentation expanded to cover more detailed Flask integration. The result of the example is shown below (top <hr> just visible).
Output of folium.__version__
import folium
print(folium.__version__)
0.10.0