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

🎈 Using Streamlit
,
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