Data Visualization: Deploying an Interactive Map as a Web App with Heroku
By: Adeoluwa Adeboye
Tags: Data Visualization, Folium, Data Science, Flask, Heroku

This articles will attempt to share insight on how to deploy an interactive map visualization using Folium, Flask and Heroku. It is a followup from my previous article on Folium.

The code for this article is hosted on GitHub here.

I will focus more on the use of Flask and deployment of the map with Heroku, for more insight on the use of Folium for interactive map generation check out this article.

I will divide the processes into 3 main steps.

STEP 1— API based Interactive Map with Folium

I will be integrating the data gotten from the API with GeoJson file containing Nigeria geographical coordinates, this GeoJson file is needed by Folium to create a geographical map of Nigeria. The link to the API used can be found here, it contains a state by state COVID-19 case distribution in Nigeria.

I have already gotten a GeoJson file for Nigeria, refer to this article to get insight on how to go about this for any geographical location of your choice.

First, I use the requests python module to extract the API data with its “.get()” method and parse the returned data to JSON format with its “.json()” method.

# Accessing API data using the python "requests" module response = requests.get("https://ng-covid-19-api.herokuapp.com/") data_json = response.json()

Furthermore, i read the aforementioned GeoJson file as a pandas DataFrame, using the geopandas python package with its “.read_file()” method.

df = gpd.read_file("Nigeria_Geometry.geojson")

print(df)

The API data and the Geojson file are of different file formats (JSON vs DataFrame), I wrote a custom function to help integrate them into a single DataFrame object. Using the “.apply()” method I implemented the function, creating new columns; Confirmed Cases, Discharged and Death.

# Helper function implementation df["Confirmed Cases"] = df["Name"].apply(get_stats, data = "confirmed") df["Discharged"] = df["Name"].apply(get_stats, data = "discharged") df["Death"] = df["Name"].apply(get_stats, data = "death") print(df)

Finally, I use the “df” DataFrame object to create the interactive map visualization using Folium.

For more detailed explanation on Map Visualization with Folium refer to this article.

Generated Map

STEP 2 — Creating a Flask App

Flask is a python web development framework; its functions are similar to Django.

It is referred to as a “Micro Framework” because it aims to keep the core simple but extensible

Flask is commonly used to turn a Folium map to a Web App and it is easy to setup.

The Folium map generated above will be turned into Flask app that can be deployed by following the example given in the Folium docs here.

from flask import Flask

import folium

import pandas as pd

import geopandas as gpd

import requests app = Flask(__name__) @app.route("/")

def index():

response = requests.get("https://ng-covid-19- api.herokuapp.com/")data_json = response.json() ...(truncated code snippet) return folium_map._repr_html_() if __name__ == "__main__":

app.run()

I ran the Flask app to test if our Folium map works correctly using:

python -m flask run

## Run at the terminal

Flask App Output when it runs…

STEP 3 — Deploy with Heroku

H eroku is a platform as a service based on a managed container system, with integrated data services and a powerful ecosystem, for deploying and running modern apps

The Flask app created above will be deployed with Heroku serving as the cloud host for it. To do this I carried out the following:

First, I added the needed Heroku configuration files to the Flask app folder, these config files are Procfile and requirements.txt.

The Procfile helps to declare process types on individual lines in this format “<process type>: <command>”. For our Flask app we add the process type “web” to help start a web server, and the “app: app” specifies the module and application name. In our application we have the app module and our flask application is also called app.

web: gunicorn app:app

The requirements.txt file contains all the python modules and package our app depends on with their corresponding versions to enable reproducible code. The format in the file is this “<package/ module name>==<package/module version>”.

folium==0.10.1 geopandas==0.7.0 Flask==1.1.2 gunicorn==19.5.0

Upon the addition of the necessary Heroku configuration files, I pushed the project folder to GitHub from which I easily deployed to Heroku. Another method of deploying to Heroku is through the Heroku CLI (Command Line Interface), I will not be covering that in this article.

GitHub Repository Setup

I then go to the Heroku webpage (Sign Up/ Sign In), from my dashboard page I click on the “New” button, select “Create new app”, add the app name and click “Create app”. After creating app, I was asked to choose a deployment method, since I have pushed out the code to a GitHub repo I select “Connect to GitHub”, I am asked to connect my GitHub account to Heroku.

Heroku Deployment Methods

Finally, upon connecting my GitHub account to Heroku, I just have to specify the repository that contains the code to be deployed and connect it. In the case of an error we can view the build log on the Heroku webpage.

Heroku Connect to GitHub…select repository to deploy

And that will be all about deploying an interactive map with Heroku, hope this article is a great help if so kindly leave a clap or two and also star or fork the GitHub repository here and link to Deployed map can be found here.

References/ Additional Resources

· https://devcenter.heroku.com/

· https://medium.com/the-andela-way/deploying-a-python-flask-app-to-heroku-41250bda27d0

· https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application

· https://python-visualization.github.io/folium/flask.html

· https://dev.to/jugg097/data-visualization-choropleth-interactive-map-with-python-using-folium-3684

· https://code.visualstudio.com/docs/python/tutorial-flask