Plot a line between two points on a map

Using Streamlit
,
1

Hi, I want to create a streamlit app which takes input from user for a particular cargo and for that shows two separate paths from port of origin to destination port.
One path will be on the previous route(in red ) other path will be on the updated route (in green colour) I was hoping to do it on a globe/map using folium by the below code.
I’m a total beginner at Snowflake/Streamlit this so I really would appreciate anyone’s help.

I have figured out how to fetch the data and display it, but the visual map part is still not working for me. For the below code I get error -

Your app is having trouble loading the streamlit_folium.st_folium component.
If this is an installed component that works locally, the app may be having trouble
accessing the component frontend assets due to network latency or proxy settings
in your app deployment.

For ease and poc’s sake I have hardcoded the co-ordinates manually but I know how to fetch it dynamically when needed.

route_coordinates = {
    "Route_3 (ports with cold storage)": [34.0522, -118.2437],
    "Route_7_Alternate (ports with cold storage)": [36.7783, -119.4179],
}
port_coordinates = {
    "Port of Shanghai": [31.2304, 121.4737],
    "Los Angeles Port": [33.7291, -118.2637],
}

    origin_coords = port_coordinates[row["PORT_OF_ORIGIN"]]
    destination_coords = port_coordinates[row["DESTINATION_PORT"]]
    prev_coords = route_coordinates[row["PREVIOUS_ROUTE"]]
    updated_coords = route_coordinates[row["UPDATED_ROUTE"]]

    st.write(f"Previous Coords: {prev_coords}")
    st.write(f"Updated Coords: {updated_coords}")

    # Initialize Folium map centered at the midpoint
    midpoint = [
        (origin_coords[0] + destination_coords[0]) / 2,
        (origin_coords[1] + destination_coords[1]) / 2,
    ]
    folium_map = folium.Map(location=midpoint, zoom_start=4)

    # Add markers for ports
    folium.Marker(
        location=origin_coords,
        popup="Port of Origin: Port of Shanghai",
        icon=folium.Icon(color="orange"),
    ).add_to(folium_map)
    folium.Marker(
        location=destination_coords,
        popup="Destination Port: Los Angeles Port",
        icon=folium.Icon(color="blue"),
    ).add_to(folium_map)

    # Add previous route (in red)
    folium.PolyLine(
        locations=[origin_coords, prev_coords, destination_coords],
        color="red",
        weight=3,
        tooltip="Previous Route",
    ).add_to(folium_map)

    # Add updated route (in green)
    folium.PolyLine(
        locations=[origin_coords, updated_coords, destination_coords],
        color="green",
        weight=3,
        tooltip="Updated Route",
    ).add_to(folium_map)

    # Display the map
    st.write("Map Visualization:")
    st_folium(folium_map, width=800, height=500)
2

Tweaking a little bit your example, I get the map with the markers and lines plotted:

Show code 
import streamlit as st
import folium
from streamlit_folium import st_folium

route_coordinates = {
    "Route_3 (ports with cold storage)": [34.0522, -118.2437],
    "Route_7_Alternate (ports with cold storage)": [
        -39.49,
        23.59,
    ],  # Changed this to show a way different route
}
port_coordinates = {
    "Port of Shanghai": [31.2304, 121.4737],
    "Los Angeles Port": [33.7291, -118.2637],
}

origin_coords = port_coordinates["Port of Shanghai"]
destination_coords = port_coordinates["Los Angeles Port"]
prev_coords = route_coordinates["Route_3 (ports with cold storage)"]
updated_coords = route_coordinates["Route_7_Alternate (ports with cold storage)"]

# Initialize Folium map centered at the midpoint
midpoint = [
    (origin_coords[0] + destination_coords[0]) / 2,
    (origin_coords[1] + destination_coords[1]) / 2,
]
folium_map = folium.Map(location=midpoint, zoom_start=1)

# Add markers for ports
folium.Marker(
    location=origin_coords,
    popup="Port of Origin: Port of Shanghai",
    icon=folium.Icon(color="orange"),
).add_to(folium_map)

folium.Marker(
    location=destination_coords,
    popup="Destination Port: Los Angeles Port",
    icon=folium.Icon(color="blue"),
).add_to(folium_map)

# Add previous route (in red)
folium.PolyLine(
    locations=[origin_coords, prev_coords, destination_coords],
    color="red",
    weight=3,
    tooltip="Previous Route",
).add_to(folium_map)

# Add updated route (in green)
folium.PolyLine(
    locations=[origin_coords, updated_coords, destination_coords],
    color="green",
    weight=3,
    tooltip="Updated Route",
).add_to(folium_map)

# Display the map
st.write("Map Visualization:")
st_folium(folium_map, height=450, use_container_width=True)

image
image1368×936 138 KB

Do you get the error in Community Cloud or locally?

  • If in the CC, make sure to include streamlit-folium in the requirements.txt file (check the docs).
  • If locally , check that the package is installed and updated with pip install -U streamlit-folium.
3

Hey, that looks exactly how I want the output to be. Thanks!!
Yes I’m using the community cloud(free snowflake account)
I’m not sure where to find/upload the requirement file as you said, will it need to be in a stage?
Thanks you again for your help!

4

Create a requirements.txt file with a list of your dependencies (like streamlit-folium) and put it in the root of the GitHub repo of your project.

Details can be found at:

5

Hi,
Thanks for your reply again. I don’t have a github repo for this project.
It’s just me trying out a poc on my trial account and running the app via snowsight.
One thing I noticed is that when I create a streamlit app, a new stage gets created in the Schema which I select while setting up the streamlit app. I created a requirement file and put it there (where the app run file is) but it didn’t work.
Something about it running on a Linux environment if we use SnowSight. Thus, I’m unable to figure out how to upload the requirements file.

6

I am not familiar with that platform so not sure how accurate their docs are:

https://docs.snowflake.com/en/developer-guide/streamlit/create-streamlit-ui#manage-packages-for-a-streamlit-app

You might have better luck asking on their own forums at Snowflake Community