Skip to content

Time slider

image image image

Add a time slider for visualizing time series data

This example shows how to add a time slider for visualizing time series data.

1
# %pip install -U leafmap

1
2
3
import os
import pandas as pd
import leafmap.maplibregl as leafmap

1
os.environ["TITILER_ENDPOINT"] = "https://titiler.opengeos.org"

Visualizing single band images

In this example, we will use the NASA OPERA displacement data to visualize the displacement of the San Francisco area over time. The data is available on Hugging Face at NASA-OPERA.

1
2
3
url = "https://huggingface.co/datasets/giswqs/NASA-OPERA/resolve/main/SanFrancisco_OPERA-DISP-S1/filenames.csv"
df = pd.read_csv(url)
df.head()

1
2
dates = df["date"].to_list()
images = df["url"].to_list()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
m = leafmap.Map(projection="globe", sidebar_visible=True, layer_manager_expanded=False)
m.add_basemap("USGS.Imagery")
vmin = -0.02
vmax = 0.02
palette = "seismic"
m.add_time_slider(
    images,
    labels=dates,
    vmin=vmin,
    vmax=vmax,
    colormap_name=palette,
    opacity=0.7,
    expanded=True,
    time_interval=1,
)
m.add_colorbar(vmin=vmin, vmax=vmax, palette=palette, label="Displacement (m)")
m

1
m.set_terrain()

Visualize multi-band images

1
2
3
url = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/landsat/filenames.csv"
df = pd.read_csv(url)
df.head()

1
2
3
years = df["year"].to_list()
years = [str(year) for year in years]
images = df["url"].to_list()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
m = leafmap.Map(projection="globe", sidebar_visible=True, layer_manager_expanded=False)
m.add_basemap("USGS.Imagery")
m.add_time_slider(
    images,
    labels=years,
    opacity=0.7,
    expanded=True,
    time_interval=1,
)
m

Visualize Xarray DataArray

1
2
3
url = "https://github.com/opengeos/datasets/releases/download/raster/landsat.tif"
filepath = "landsat.tif"
leafmap.download_file(url, filepath)

1
import rioxarray as rxr

1
image = rxr.open_rasterio(filepath)

1
2
3
4
5
6
7
8
9
image1 = image.sel(band=[4, 3, 2])
image2 = image.sel(band=[3, 2, 1])

images = [image1, image2]
labels = ["Landsat-432", "Landsat-321"]

m = leafmap.Map(projection="globe", sidebar_visible=True, layer_manager_expanded=False)
m.add_time_slider(images, labels)
m