3 Easy Ways to Include Interactive Maps in a Streamlit App

Streamlit provides a quick and easy way to build interactive applications and dashboards for Data Analysis and machine learning. If we are looking to build a data analysis app within Streamlit that uses data containing location information, one of the first visualisations we may want to consider adding is a map. Having an interactive map within our app allows us to visualise where the data points are located, and in turn, we can identify patterns or dig into the data in more depth.

Within this short article, we will look at three easy ways to create interactive maps directly within a Streamlit app.

Importing Libraries and Data

Before we start, we need to import the libraries and the data we will be working with. For this article, we will be using two libraries to start with: Streamlit and Pandas.

Python">import streamlit as st
import pandas as pd

The data we are using for this article comes from the Norwegian Petroleum Directorate website and contains the locations of all wells that have been drilled on the Norwegian Continental Shelf. The full dataset can be downloaded here: https://factpages.npd.no/en/wellbore/tableview/exploration/all

The data is licensed under a NOLD 2.0 licence from the Norwegian Government, details of which can be found here: Norwegian Licence for Open Government Data (NLOD) 2.0.

To load the data, which is contained within a CSV file, we need to call upon pd.read_csv and pass in the location and name of the file. As this file contains many columns, we will want only to load the relevant columns.

In order to make things easier with plotting, we can rename the wlbNsDecDeg and wlbEwDesDeg to latitude and longitude respectively.

df = pd.read_csv('wellbore_exploration_all.csv', 
                  usecols=['wlbWellboreName', 'wlbNsDecDeg', 'wlbEwDesDeg'])

df.columns = ['Well Name', 'latitude', 'longitude']

Streamlit.map()

The simplest way to generate a map in Streamlit is to use the st.map function. This makes creating a map easy, as you do not have to install additional libraries or components to get it to work. The map generated by this function allows you to move around and zoom in like any other online map tool; however, it does not come with any additional interactivity such as popups or the ability to colour points.

To create the map using Streamlit, all we do is call upon the following function and pass in the dataframe.

In order for the latitude and longitude to be picked up, the columns need to be named appropriately:

• latitude: ‘lat', ‘latitude', ‘LAT', ‘LATITUDE'
• longitude: ‘lon', ‘longitude', ‘LON', ‘LONGITUDE'

st.map(df)

When we run our Streamlit app using:

streamlit run app.py

We will get the following map:

Folium Maps in Streamlit

Folium is a great Python library that makes it easy for visualising geospatial data. It is powered by Leaflet.js, which is a leading javascript mapping library and is platform-independent.

Streamlit doesn't natively support Folium; however, a dedicated Streamlit component, called streamlit-folium, has been created, which makes this process easier. Details of the streamlit-folium component can be found on the GitHub repository below.

GitHub – randyzwitch/streamlit-folium: Streamlit Component for rendering Folium maps

To begin using it, we first need to install it into our Python environment. This is done as follows:

pip install streamlit-folium

After the streamlit-folium component has been installed, we can import two modules: st_folium and folium_static . We will also need to import Folium to create our map object.

import folium
from streamlit_folium import st_folium, folium_static

Once the libraries have been imported, we can begin to build our Folium map.

First, we create our base map using folium.map(). This will be centred around the mean latitude and longitude within our dataset.

Next, we need to loop over each row within the dataframe and add it that row directly to the folium map using the latitude and longitude values. In addition to placing the marker, we can also add an interactive popup for each well. This is great for when the user clicks on the marker and wants to view extra information about that selected point.

m = folium.Map(location=[df.latitude.mean(), df.longitude.mean()], 
                 zoom_start=3, control_scale=True)

#Loop through each row in the dataframe
for i,row in df.iterrows():
    #Setup the content of the popup
    iframe = folium.IFrame('Well Name:' + str(row["Well Name"]))

    #Initialise the popup using the iframe
    popup = folium.Popup(iframe, min_width=300, max_width=300)

    #Add each row to the map
    folium.Marker(location=[row['latitude'],row['longitude']],
                  popup = popup, c=row['Well Name']).add_to(m)

st_data = st_folium(m, width=700)

When the code is run, we will be presented with the following map within the Streamlit window.

One issue I have noticed is if you click on any of the markers, the Streamlit App will re-run and eventually slow down. To address, we can use the folium_static function instead of st_folium.

folium_static(m, width=700)

Now when we click on a marker, can view the popup and any information that we placed into it. The great thing about the markers within Folium is the ability to add custom formatting within the IFrame object.

If you want to see how to use Folium standalone, you can find out more about it in my previous article:

Folium Mapping: Displaying Markers on a Map

Plotly Maps in Streamlit

Plotly is a very well-known and popular Python library used for generating powerful interactive data visualisations with a few lines of code. One of the functionalities of plotly is the ability to create interactive maps using Mapbox Map Layers. This uses Mapbox service and requires an access token if using specific layers, but it is free to use for low-usage applications.

Alternatively, instead of signing up for the Mapbox service, we can use OpenStreetMap, which is free to use and works directly with Plotly.

To begin creating our map, we first need to import Plotly Express and create a figure by calling upon px.scatter_mapbox.

We then pass in our dataframe, followed by the names of the columns containing the latitude and longitude information. Then we setup the style of the map, which will be open-street-map followed by setting up the margins of the plot.

Once that is done, we can then call upon Streamlit's st.plotly_chart function.

import plotly.express as px

fig = px.scatter_mapbox(df, lat="latitude", lon="longitude", zoom=3)

fig.update_layout(mapbox_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
st.plotly_chart(fig)

When the code is run, we are presented with an interactive Plotly Express map, which is easy to use and navigate.

If we want to add extra information when we hover over any of the markers, we can add a parameter called hover_name and assign it to one of the columns within the dataframe.

fig = px.scatter_mapbox(df, lat="latitude", lon="longitude", 
hover_name='Well Name', zoom=3)

When it is run, we will be above to view the well name, and by default, scatter_mapbox adds in other information for us automatically

Summary

Adding maps to Streamlit is an easy process. We can use the dedicated .map function within Streamlit or the popular Python libraries of Folium and Plotly. The latter two are provide more functionality and interactivity but require a few additional lines of code to get working.

---

Thanks for reading. Before you go, you should definitely subscribe to my content and get my articles in your inbox. You can do that here! Alternatively, you can sign up for my newsletter to get additional content straight into your inbox for free.

Secondly, you can get the full Medium experience and support me and thousands of other writers by signing up for a membership. It only costs you $5 a month, and you have full access to all of the amazing Medium articles, as well as the chance to make money with your writing. If you sign up using my link, you will support me directly with a portion of your fee, and it won't cost you more. If you do so, thank you so much for your support!

Tags: Data Analysis Data Science Data Visualization Python Streamlit

Comment