Displaying Maps with Streamlit

Why Visualize Geographic Data? Displaying geographic data is essential for identifying spatial patterns, trends, and insights. With Streamlit, you can create interactive and user-friendly maps that visually represent location-based information.

1. st.map() – Quick Map Display

The st.map() function is ideal for quick visualizations and requires data with latitude and longitude coordinates.

Example 1 – Maps with Random Coordinates

import streamlit as st
import pandas as pd
import numpy as np

# Generating latitude and longitude data
data = pd.DataFrame(
    np.random.randn(300, 2) / [100, 100] + [37.7749, -122.4194],
    columns=["lat", "lon"]
)

# Displaying the map
st.map(data)

2. Customizing Maps with Pydeck

For more complex and stylized visualizations, you can use st.pydeck_chart() with the Pydeck library.

Example 2 – Maps with Pydeck

import streamlit as st
import pandas as pd
import pydeck as pdk

# Sample data
data = pd.DataFrame({
    "lat": [37.7749, 34.0522, 40.7128],
    "lon": [-122.4194, -118.2437, -74.006],
    "city": ["San Francisco", "Los Angeles", "New York"]
})

# Map configuration
view_state = pdk.ViewState(
    latitude=37.7749,
    longitude=-122.4194,
    zoom=5,
    pitch=50
)

# Map layer
layer = pdk.Layer(
    "ScatterplotLayer",
    data=data,
    get_position=["lon", "lat"],
    get_color=[200, 30, 0, 160],
    get_radius=50000
)

# Displaying the map
st.pydeck_chart(pdk.Deck(layers=[layer], initial_view_state=view_state))

3. Adding Interactivity with Folium

The Folium library can be integrated into Streamlit to create interactive maps.

Example 3 – Interactive Maps with Folium

import streamlit as st
import folium
from streamlit_folium import st_folium

# Creating the base map
m = folium.Map(location=[37.7749, -122.4194], zoom_start=10)

# Adding markers
folium.Marker([37.7749, -122.4194], popup="San Francisco").add_to(m)
folium.Marker([37.7849, -122.4294], popup="Another Location").add_to(m)

# Displaying the map in Streamlit
st_folium(m, width=700, height=500)

4. Displaying Geographic Data with Altair

You can also use Altair to create maps that combine data with interactive visualizations.

Example 4 – Maps with Altair

import streamlit as st
import pandas as pd
import altair as alt

# Sample data
data = pd.DataFrame({
    "latitude": [37.7749, 34.0522, 40.7128],
    "longitude": [-122.4194, -118.2437, -74.006],
    "city": ["San Francisco", "Los Angeles", "New York"]
})

# Altair chart
chart = alt.Chart(data).mark_circle(size=200).encode(
    latitude="latitude",
    longitude="longitude",
    tooltip=["city"]
).properties(
    width=700,
    height=400
)

st.altair_chart(chart)

5. Choosing Themes and Styles

Streamlit allows you to customize the app's theme to match your style. To configure the theme:

• Access config.toml in the project directory.

• Add the following lines:

[theme]
base = "dark"
primaryColor = "#FF4B4B"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#262730"
textColor = "#FAFAFA"

• Restart the application to apply the changes.

Conclusion

With these tools and examples, you can create visually stunning and informative maps in Streamlit, whether for quick analyses or detailed representations!