Examples

Some examples showcasing what you can currently do with altair_tiles.

import altair as alt
import altair_tiles as til
import geopandas as gpd

The basics

Let’s first create a geoshape chart:

gdf_ne = gpd.read_file("https://naciscdn.org/naturalearth/110m/cultural/ne_110m_admin_0_countries.zip")  # zipped shapefile
extent_roi = gdf_ne.loc[gdf_ne["CONTINENT"] == "Africa", ["CONTINENT", "geometry"]]

geoshape_countries = (
    alt.Chart(extent_roi, width=600, height=600)
    .mark_geoshape(fillOpacity=0.1, stroke="green", strokeWidth=2)
    .project(type="mercator")
)
geoshape_countries

Now you can add tiles by running:

til.add_tiles(geoshape_countries)

By default altair_tiles infers an appropriate zoom level for the tiles. However, you can specify it yourself. By specifying zoom=3 we get tiles which show less details:

til.add_tiles(geoshape_countries, zoom=3)

If we increase zoom to 5 we see more details in the tiles:

til.add_tiles(geoshape_countries, zoom=5)

Use a different tile provider. Providers are coming from xyzservices and can be accessed via abm.providers or xyzservices.providers.

til.add_tiles(geoshape_countries, provider=til.providers.CartoDB.Positron)

Create individual tiles chart

In the previous section, we used add_tiles to add a tile layer to an existing geoshape chart. We can achieve the same by layering tiles created by create_tiles_chart and a geoshape chart:

til.create_tiles_chart() + geoshape_countries

In case the attribution in the lower left corner is covered by a geoshape, you can remove the attribution from the tile layer and add it in the end with add_attribution. This produces the same chart above but it ensures that the attribution is always on top:

c3 = til.add_attribution(
    til.create_tiles_chart(attribution=False)
    + geoshape_countries
)

You can also create a chart with only a basemap by using the create_tiles_chart function. Let’s create a map of Los Angeles:

til.create_tiles_chart(
    standalone=alt.Projection(type="mercator", scale=60_000, center=[-118.2, 33.9])
).properties(width=600, height=600)