Map Plotting using streamlit.map()

🎈 Using Streamlit
1

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?

2

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!

1 Like
3

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
4

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
5

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!

6

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()

7

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:

2 Likes
8

@randyzwitch This is cool. Can we do this with satellite layer?

If not is it possible to get geemaps working on streamlit?

Thx

9

Hi @Niko-La -

I’m not an expert in either pydeck or geemaps, but maybe someone else in the community knows.

Best,
Randy

10

Hey @ShivamBhirud Can you share the entire code please.Just for the sake of reference

1 Like
11

Hey @Ajay_A,

Sure, here is my code for your reference- Streamlit webapp . And I’ve written a blog on this on towardsdatascience Tutorial. Sorry cuz I couldn’t maintain/update the code on GitHub later on, but I hope this helps.

12

I have coordinates from Arcgis, the coordinates don’t seem to match that of streamlit map the coordinates points the an entirely different continent whereas on arcgis those coordinates are that of a county in Texas. Any idea how best to use this coordinates or covert them to correspond with that of streamline maps?