Render table and folium map as iframe

.gitignore

@@ -1,3 +1,4 @@
 **/__pycache__
 Design.org
 data/*.json
+app/templates/map.html

app/preprocessing.py

@@ -1,16 +1,25 @@
-from json import load
-
+from folium import Map, Marker
 from pandas import DataFrame, json_normalize
 
-from constants import COLUMNS, FILES
 from app.data_request import request_dataset
+from constants import COLUMNS, COORDINATES
 
 
 def create_dataframe(dataset) -> DataFrame:
     """
-    Creates a DataFrame from a JSON file
+    Creates a DataFrame from a JSON response
     """
     json = request_dataset(dataset)
     df = json_normalize(data=json, record_path=["records"], errors="ignore",)
     filtered_df = df.filter(items=COLUMNS[dataset])
     return filtered_df
+
+
+def create_map(df):
+    """
+    Creates a Map with markers from the DataFrame
+    """
+    m = Map(location=COORDINATES, zoom_start=12)
+    for index, row in df.iterrows():
+        Marker(location=row["fields.geo_shape.coordinates"]).add_to(m)
+    m.save("app/templates/map.html")

app/processing.py

@@ -1,49 +1,17 @@
 from base64 import b64encode
 from io import BytesIO
 
-from folium import Map
-
-from app.preprocessing import create_dataframe
-from constants import COORDINATES
+from app.preprocessing import create_dataframe, create_map
 
 
-def get_figure(plot):
-    plot_figure = plot.get_figure()
-    figure = BytesIO()
-    plot_figure.savefig(figure)
-    figure.seek(0)
-    return figure
-
-
-def render_plot(df):
+def create_table(df) -> str:
     df.fillna(value=0, inplace=True)
-    plot = df.plot("year", ["surface", "length", "elevation"], kind="bar")
-    figure = get_figure(plot)
-    return figure
-
-
-def encode_plot(figure):
-    plot = b64encode(figure.getvalue().decode())
-    return plot
-
-
-def create_plot(df):
-    figure = render_plot(df)
-    plot = encode_plot(figure)
-    return plot
-
-
-def create_map(df):
-    map = Map(location=COORDINATES)
-    for row in df.iterrows():
-        map.simple_marker(
-            location=[row["fields.geo_shape.coordinates"]], clustered_marker=True
-        )
-    return map
+    table = df.to_html(classes=["table-striped", "table-hover"])
+    return table
 
 
 def process_data(dataset):
     df = create_dataframe(dataset)
-    plot = create_plot(df)
+    table = create_table(df)
     map = create_map(df)
-    return plot, map
+    return table, map

app/routes.py

@@ -11,17 +11,20 @@ def index():
     return render_template("index.html", title="Home Page")
 
 
-@app.route("/data")
+@app.route("/data", methods=["GET", "POST"])
 def data():
     form = DatasetForm()
     if form.validate_on_submit():
-        return render_template("visualization.html", form=form, title="Visualization")
+        table = process_data(form.dataset.data)
+        return render_template("visualization.html", title="Visualization", table=table)
     return render_template("data.html", title="Data", form=form)
 
 
 @app.route("/visualization")
-def visualization(form):
-    plot, map = process_data(form.dataset)
-    return render_template(
-        "visualization.html", title="Visualization", plot=plot, map=map
-    )
+def visualization():
+    return render_template("visualization.html", title="Visualization", table=table)
+
+
+@app.route("/map")
+def map():
+    return render_template("map.html", title="Map")

app/templates/visualization.html

@@ -3,6 +3,7 @@
 
 {% block app_content %}
 <h1>Dataset visualization</h1>
+<iframe class="map", src="/map" width="500" height="500"></iframe>
 {{ table|safe }}
 <p><a href="{{ url_for('data') }}">Back</a></p>
 {% endblock %}