Problems integrating an altair choroplet map

[pipers]

Hi everyone
I’m a new user of streamlit and I think it’s awesome, so first of all, I need to say thanks to the developers and the comunity.

Currently im working in a project of visualizing air polution in a choropleth map, and I started using Altair.
I followed this tutorial (https://medium.com/dataexplorations/creating-choropleth-maps-in-altair-eeb7085779a1) for creating a Choroplet map from a geopandas file, and it works fine when I work from jupyterlab, but when I try to integrate in streamlit, the map doesn’t show the colors, and I only got a gray map.

I’m creating the map using the function gen_map (which is defined in the medium tutorial), and using the function st.altair_chart() to plot it.

Does anyone know how to solve it?

Thanks!

[Marc]

Hi @pipers

Welcome to the Streamlit Community.

I was looking at your question but in order for the community to help with your question I believe we need something a little more concrete like a small code example that we can run and a screenshot of what is wrong.

Could you provide that?

[pipers]

Hi Marc

Thanks for helping me.

Finally I solved it.
The problem was, using a geojson exported from a geodataframe, the choropleth map was defined by the following function:

def gen_map(geodata, color_column, title, tooltip, color_scheme='bluegreen'):
# Add Base Layer
base = alt.Chart(geodata, title = title).mark_geoshape(
    stroke='black',
    strokeWidth=1
).encode(
).properties(
    width=800,
    height=800
)
# Add Choropleth Layer
choro = alt.Chart(geodata).mark_geoshape(
    fill='lightgray',
    stroke='black'
).encode(
    alt.Color(color_column, 
              type='quantitative', 
              scale=alt.Scale(scheme=color_scheme),
              title = f"Contaminante {emision}"),
     tooltip=tooltip
)
return base + choro

When I integrated it to streamlit I got a gray map instead the colored, and when I changed the output of the function by only returning choro, I got this error: TypeError: Cannot read property ‘url’ of undefined.

The way I solved it was uploading the geojson to github and then importing the file from there, using the altair library in order to do it.

[bicarrio]

Hi,

I have the same issue. If I use a mark_geoshape with altair in a notebook, I can use custom polygons, no problem. But when I try to use st.altair_chart() on the same chart, it breaks with the same error as indicated in the previous post.

Saving and reloading from github seems unnecessarily cumbersome. Isn’t it possible to add a dummy url field to the json, or some other workaround like that?

[pipers]

I think adding a dummy url could be a really smart solution!

[Somitra_Gupta]

Hi everyone,
I’m a new user of streamlit and recently working with altair.mark_geoshape() along with streamlit.altair_chart().

I have read about using dummy variable to fix problem with geopandas dataframe when using geojson file present at local.

gdf = gpd.read_file('data/maps/states.geojson')
gdf['url'] = None
base = alt.Chart(gdf).mark_geoshape(
    stroke= 'black',
    strokeWidth=1
).encode().properties(
    width=800,
    height=800
)
st.altair_chart(base)

but it did’nt work out and break into an error like,

Furthermore, solution given by @pipers, to read file from github using geopandas,

import geopandas as gpd

gdf = gpd.read_file('https://github.com/100mi/maps_dataset/blob/main/states.geojson')

but it also breaks into error, which looks like,

Could you help me out ?

Also do reply if you need further information?