How do use location pin symbol in map and how to connect those location in streamlit?

Using Streamlit
,
1

I have been working on vehicle routing problem. I am planning to use streamlit for user interface. I need to plot the route path (or a straight line along with direction) on the map and need to plot the locations with location pin. Is there anyway to implement the above requirements in streamlit? Please help me with to solve this problem.

2

Hello @midhilesh_29, welcome to the forums :slight_smile: !

Streamlit leverages multiple charting libraries to display data, unfortunately there are many ways to attain your objective depending on more specific requirements.

You could use the pydeck library which Streamlit supports natively. I’m not very familiar with the pydeck API but I found an example in the Github repo which hopefully will guide you a bit, you will need to build a column containing an array of your location coordinates, and we are missing the pin markers :

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

DATA_URL = "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/website/bart-lines.json"
df = pd.read_json(DATA_URL)

st.dataframe(df)

def hex_to_rgb(h):
    h = h.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

df['color'] = df['color'].apply(hex_to_rgb)

view_state = pdk.ViewState(
    latitude=37.782556,
    longitude=-122.3484867,
    zoom=10
)

layer = pdk.Layer(
    type='PathLayer',
    data=df,
    pickable=True,
    get_color='color',
    width_scale=20,
    width_min_pixels=2,
    get_path='path',
    get_width=5
)

r = pdk.Deck(layers=[layer], initial_view_state=view_state, tooltip={'text': '{name}'})

st.pydeck_chart(r)

image
image641Ă—613 135 KB

If you are more used to Folium for building markers over maps, @nthmost has presented a small hack you can use to render the Folium HTML, though I don’t remember if Folium also can render paths. The team is also working on better integrating HTML in Streamlit so we can use other web charting libs more easily.

Oh, Streamlit also offers native support of Altair which you can use to display maps, lines over maps and circles over each position. Here is an example I built from converting this vega-lite viz to Altair :

import altair as alt
from vega_datasets import data

states = alt.topo_feature(data.us_10m.url, feature='states')

line_source = pd.DataFrame({
    'longitude': [-122.3093131, -122.3748433, -118.4080744],
    'latitude': [47.44898194, 37.61900194, 33.94253611],
    'order': [1,2,3]
})

background = alt.Chart(states).mark_geoshape(
    fill='lightgray',
    stroke='white'
).properties(
    width=800,
    height=500
).project('albersUsa')
point_path = line_path = alt.Chart(line_source).mark_circle().encode(
    longitude="longitude:Q",
    latitude="latitude:Q",
    size=alt.value(60)
)
line_path = alt.Chart(line_source).mark_line().encode(
    longitude="longitude:Q",
    latitude="latitude:Q",
    order='order:O'
)

st.altair_chart((background + point_path + line_path))

visualization
visualization800Ă—500 43.6 KB

And Streamlit also supports bokeh charts so maybe you can build over this.

Sorry that may look more like starting points rather than full solutions over libraries on which Streamlit relies on…hope one of those will get you interested and build a working prototype. If you get a fully working solution, I’d be super interested if you wrote about it there :smiley:

Hope to hear back from you !

4 Likes
3

I have another doubt. Is that mapbox api key free of cost?

4

Well, as long as you don’t go over 50 000 hits a month you should be alright it’s free :smiley: you will be able to see the number of hits on your Mapbox account.

image
image1195Ă—326 40.8 KB

Also you don’t need to enter payment information when you create your Mapbox account so I don’t see how you can be charged for going overboard.

Good luck !

1 Like
5

Mishmash huh? :wink: See https://github.com/tejasvi/routero if you are still interested.