Problems integrating an altair choroplet map

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!

1 Like

Hi @pipers

Welcome to the Streamlit Community. :+1:

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?

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.

2 Likes

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?

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