Your Cool Folium Maps on the Web

Leveraging flask and heroku to share your interactive maps with the world

Published in

Towards Data Science

4 min readMar 13, 2021

This is the second part of the series, aimed at sharing the steps to go through to get your interactive map hosted on the web or deployed as a web application. If you’re just here for the code, here you go. This article is broken down into six sections:

∘ Introduction
∘ Files needed and file structure
∘ Deploying Using Github
∘ Deploying Using Heroku CLI
∘ Final thoughts
∘ References

Introduction

You can’t just have your interactive map lying on your computer. For others to use and benefit from it, it would have to be on the web. Let’s see how we can make this possible.

Files needed and file structure

Heroku needs specific files for the deployment process to go smoothly. They are:

Procfile: It tells heroku how to run our flask app. The Procfile has no file extension.

Procfile

Gunicorn is a Python WSGI HTTP server, which helps heroku, our cloud application platform, communicate with Flask through a WSGI protocol.

WSGI stands for “Web Server Gateway Interface”. It is used to forward requests from a web server (such as Apache or NGINX) to a backend Python web application or framework. From there, responses are then passed back to the webserver to reply to the requestor.

Requirements file: This is a text file, which contains the libraries needed for the python file to run i.e. Flask and gunicorn, with the specific versions used. Heroku needs this to be able to create the exact environment you used to produce your exact results.

requirements.txt

Templates folder: After creating your folium map and saving it as an html file, you need to put the_map.html into this templates folder. flask will search for it here and render it to the web application.

Python file: The python file was named app.py

In the file:

The Flask class and render_template function are imported.
app object is created, and is the instance of the Flask class, which together with gunicorn will help heroku deploy our map as a web app.
Your route decorator is created, and a function is defined for it. The decorator tells the application which URL should call the function (render_the_map()). The function returns the rendered template from the templates folder. Rendering a template means converting it into an HTML page.
Since the file will be run via the terminal(see in the paragraph below), ‘if __name__ == __main__’ evaluates to true and the app.is run.

app.py

You first have to make sure that the web app runs on your computer. If it does, it’ll run on heroku. To check this:

open a terminal
navigate to the directory you’re working in
run python app.py

If the map shows up at the address shown in the terminal, you can proceed to heroku.

File Structure

Making-Cool-Maps-In-Python/
       |---> app.py
       |---> requirements.txt
       |---> Procfile
       |---> templates/ 
             |---> the_map.html

Deploying Using Github

By following steps below, you can deploy the map with github:

Head to heroku.com and log in or sign up
Click the create a new app button and enter an a name for it and click the create app button
Choose a deployment method — Connect to github and sign in
Choose a repository to connect to and connect
You can chose the automatic deploy option, which ensures that every change you make to your main branch affects the web app
Click the deploy branch and wait for heroku to install and detect the files in your branch