Map Plotting using streamlit.map()

Whenever I try to plot the latitudes and longitudes spread all over the USA map using streamlit.map() function it works fine but, when the map pops up I have to hover over the desired location and zoom it in order to see the red points plotted. How can I make those points visible without zooming in the map?

Hi @ShivamBhirud welcome to the community and sorry this isn’t working for you. St.map is meant to be a very simple and straightforward function and unfortunately doesn’t allow a lot of customization like setting radius size (and obviously defaults to a too small size!). I went ahead and made a bug report for this that you can track here: https://github.com/streamlit/streamlit/issues/577

The good news is you can use deck.gl to make your map; st.deck_gl_chart is a little more code but a lot more customizable. Here’s an example of setting the zoom location, adding a radius, setting a minimum radius, and also changing the color of the dots to hot pink:

data = pd.DataFrame({
    'awesome cities' : ['Chicago', 'Minneapolis', 'Louisville', 'Topeka'],
    'lat' : [41.868171, 44.979840,  38.257972, 39.030575],
    'lon' : [-87.667458, -93.272474, -85.765187,  -95.702548]
})

# Adding code so we can have map default to the center of the data
midpoint = (np.average(data['lat']), np.average(data['lon']))

st.deck_gl_chart(
            viewport={
                'latitude': midpoint[0],
                'longitude':  midpoint[1],
                'zoom': 4
            },
            layers=[{
                'type': 'ScatterplotLayer',
                'data': data,
                'radiusScale': 250,
   'radiusMinPixels': 5,
                'getFillColor': [248, 24, 148],
            }]
        )

Let me know if there’s anything else I can help with!

This is really helping, thanks! Do you happen to know also how to write something on the map ?

Thanks in advance :slight_smile:

1 Like

Hi @Amanda_Kelly,
Thank you for the help! deck_gl_chart works fine for me because of the customization features that it provides.

1 Like

I haven’t dug too deeply into deck.gl but it looks like there is a text layer you can add: https://github.com/uber/deck.gl/blob/master/docs/layers/text-layer.md

Let me know if that works for you!

how do we give various color to points in map there is only one color available if i want to distinguish the points how do i do that in streamlit.map()

Hi @srivatsan, welcome to the Streamlit community!

@Amanda_Kelly’s answer above of using deck_gl_chart is superseded by st.pydeck_chart()

https://docs.streamlit.io/en/stable/api.html?highlight=pydeck_chart#streamlit.pydeck_chart

Additionally, if you are a Folium user, I have created a Streamlit Component: