put examples in script

python-visualization · Conengmo · Nov 30, 2022 · Nov 30, 2022 · Nov 30, 2022 · Nov 30, 2022
commit d9355f8595ecf38b2f6bcef5df63998b27735bf1
diff --git a/docs/flask.rst b/docs/flask.rst
@@ -1,42 +1,11 @@
 Using folium with flask
 =======================
 
-A common use case is to use folium in a flask app.
-The trick is to return folium's HTML representation.
-Here is a simple, complete example on how to return a fullscreen map:
+A common use case is to use folium in a flask app. There are multiple ways you
+can do that. The simplest is to return the maps html representation. If instead
+you want to embed a map on an existing page, you can either embed an iframe
+or extract the map components and use those.
 
+Below is a script containing examples for all three use cases:
 
 .. literalinclude:: ../examples/flask_example.py
-
-
-If instead you want to embed a map on an existing page, there are multiple ways
-you can go about this.
-
-The easiest is to embed the map in an iframe. You can use a built-in
-method to return an iframe:
-
-::
-
-  m = Map()
-  iframe = m.get_root()._repr_html()
-
-If you want to customize the iframe width and height:
-
-::
-
-  m.get_root().width = '800px'
-  m.get_root().height = '600px'
-
-Alternatively, you can extract the header, html and JS script from the map.
-First, render the map. Then, take the pieces. You can then place those on
-your own template. Note that the header can contain elements you already
-have on your own template. Also, don't forget to make sure Flask doesn't
-escape these strings.
-
-
-::
-
-  m.get_root().render()
-  header = m.get_root().header.render()
-  body_html = m.get_root().html.render()
-  script = m.get_root().script.render()
diff --git a/examples/flask_example.py b/examples/flask_example.py
@@ -14,18 +14,78 @@
 
 """
 
-from flask import Flask
+from flask import Flask, render_template_string
 
 import folium
 
 app = Flask(__name__)
 
 
 @app.route("/")
-def index():
-    start_coords = (46.9540700, 142.7360300)
-    folium_map = folium.Map(location=start_coords, zoom_start=14)
-    return folium_map.get_root().render()
+def fullscreen():
+    """Simple example of a fullscreen map."""
+    m = folium.Map()
+    return m.get_root().render()
+
+
+@app.route("/iframe")
+def iframe():
+    """Embed a map as an iframe on a page."""
+    m = folium.Map()
+
+    # set the iframe width and height
+    m.get_root().width = "800px"
+    m.get_root().height = "600px"
+    iframe = m.get_root()._repr_html_()
+
+    return render_template_string(
+        """
+            <!DOCTYPE html>
+            <html>
+                <head></head>
+                <body>
+                    <h1>Using an iframe</h1>
+                    {{ iframe|safe }}
+                </body>
+            </html>
+        """,
+        iframe=iframe,
+    )
+
+
+@app.route("/components")
+def components():
+    """Extract map components and put those on a page."""
+    m = folium.Map(
+        width=800,
+        height=600,
+    )
+
+    m.get_root().render()
+    header = m.get_root().header.render()
+    body_html = m.get_root().html.render()
+    script = m.get_root().script.render()
+
+    return render_template_string(
+        """
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    {{ header|safe }}
+                </head>
+                <body>
+                    <h1>Using components</h1>
+                    {{ body_html|safe }}
+                    <script>
+                        {{ script|safe }}
+                    </script>
+                </body>
+            </html>
+        """,
+        header=header,
+        body_html=body_html,
+        script=script,
+    )
 
 
 if __name__ == "__main__":