Deploying Your Geospatial Machine Learning Project as a Web App Using Streamlit and Heroku

If you’re looking for a simple and easy-to-use library to launch your data science and machine learning projects as a web-app and don’t have any web-development skills, then Streamlit may be the best choice for you!

This blog provides a quick introduction to Streamlit, and Heroku which is another commonly used platform to build and operate your apps in the cloud. We’ll also review Folium which is a Python wrapper for Leaflet.js and is an easy to use library for creating interactive maps in Python.

Snapshow of web-app to predict air quality in Oakland, California.

I recently used Streamlit and Heroku to launch my machine learning project on predicting air concentrations in East Bay Area as a web-app. The web-app provides a simple interface for users to input an address or point of interest in Oakland, CA, and the app reports average concentrations of Black Carbon and Nitrogen Dioxide on an interactive leaflet map created using Folium.

Streamlit:

Streamlit is a fast and easy way to turn your data science and machine learning Python scripts to web apps without having front-end experience. Streamlit allows you to implement the app on your local server or deploy and share your apps from the Streamlit platform.

First, install Streamlit using the following command:

pip install Streamlit

Before creating an app, first create a Github repository that would contain the Python script for the app. We’ll also use this Github repository later to deploy the app in the cloud using Heroku. Once you create a Github repository, clone the repository locally and navigate to that folder. I’m calling my repo ‘aq-webapp’.

git clone https://github.com/varsha2509/aq-webapp.git
cd Varsha/aq-webapp/

Next, create a Python file which contains the code for the web application. I’m calling mine ‘web-application.py’.

Inside this file, import the libraries that you need.

Next, I’m creating two functions to load the datasets that contain the predicted values from the machine learning model (as a .csv file), and another function to load a geoJSON file that contains the boundaries of City of Oakland. You can tailor these functions to load the datasets that you’re interested in loading. I stored both my files in my Google Drive and I’m using the requests and io library in Python to load the files.

The ‘@st.cache’ decorator in the above code snippet is used to improve the performance of Streamlit when loading and manipulating large datasets [Streamlit].The load_data function loads a csv file and returns a pandas dataframe, and the load_oakl_data function returns a url to a geoJSON file.

Next, I’m using GeoPy’s Nominatim tool to convert an address or a point of interest to latitude and longitude coordinates. The function convert_address below takes in an address as input and returns a list of latitude, longitude.

While Streamlit does have an in-built maps function that you can use to visualize points on a map, I found it to be limited in its functionality. Folium is a neat map making tool that lets you visualize data manipulated in Python in an interactive map. You can also pass HTML or vector visualizations as markers on the map.

Next, I’m creating a function called display_map that uses Folium to display an interactive map. The function takes three inputs: points as a list of latitude and longitude, a dataframe containing predicted values at different locations, and a geoJSON file of Oakland’s boundaries. The function then displays a point with a marker at the location and a polygon boundary on a Folium map. The marker displays the predicted concentrations of Black Carbon and Nitrogen Dioxide at the point nearest to the input locations by using KDTree function which is Scipy’s nearest-neighbor lookup function. The ‘st.markdown’ is used to convert text to HTML.

Finally, I’m writing the main function that runs the app automatically when executed. Within the main function, I’m calling all the functions discussed above and including headers, and subheaders for the main page.

The Streamlit app can be run locally by using the code below:

streamlit run web-application.py

This function will open your browser and create an app locally. You can use this version to tweak your app before deploying it. You can add more functionality to your application such as checkboxes, sidebar elements, or graphs using Streamlit’s in-built methods available here.

Heroku:

Heroku is a cloud platform that allows users to build and deploy applications entirely in the cloud. Before getting started with Heroku, first signup for an account with Heroku (it’s free!).

Requirements.txt

Next, install the pipreqs library that allows you to create the requirements.txt file automatically. Install the library using the following command

pip install pipreqs

Navigate to your project folder (if you aren’t already there) and type the following command to create the requirements.txt file.

pipreqs --force

‘force’ allows you to overwrite a requirements.txt file if it already exists. My requirements file contains the following library, your file may vary depending on the libraries you imported.

streamlit==0.72.0
pandas==0.25.2
folium==0.10.1
geopandas==0.8.0
geopy==1.21.0
scipy==1.4.1
requests==2.22.0

I want to point out one error that you may get later on when you deploy your Heroku app. This occurs if you’re using the Folium library. Once you deploy your app, you may get an error that says ‘Make this Notebook Trusted to load map: File -> Trust Notebook’. This happens while running Folium on Streamlit. The error happens because of a version issue with the ‘Branca’ package. To avoid this error, I manually added the ‘Branca’ package version 0.3.1 to the requirements.txt file.

branca==0.3.1

Configuration script and Procfile

Heroku requires two additional standard files — the configuration script and the Procfile. The configuration script is needed to configure Streamlit for use with Heroku. The Procfile contains a set of commands that should be executed by the app upon startup. Since these are standard files, refer to this blogpost on how to create these files in your project folder.

Next, push the files to your Github repository using the following commands:

git add .
git commit -m "deploying files"
git push origin master

We’re now ready to deploy the app in Heroku. To startup Heroku, type the following in your terminal:

heroku login

In the browser that pops up, login with sign in to Heroku with your credentials. Next, return to your terminal and create a new Heroku app as:

heroku create aq-webapp

To confirm that a remote named heroku has been set for your app, type:

git remote -v

Finally push all the files to Heroku master branch as:

git push heroku master

To run Heroku, type

heroku open

Your web-app will now open in a browser and you can share the URL on the browser with anyone!