Visualizing STAC Data Layers using stac_ipyleaflet (beta)

Authors: Emma Paz (Development Seed)

Date: May 10, 2023

Description: This project - stac_ipyleafet - leverages the ipyleaflet mapping library and is intended to reduce the code needed to visualize data from the MAAP STAC. The beta version supports Cloud-Optimized GeoTIFFs (COGs).

Currently, this package works within this Algorithm Development Environment.

Run This Notebook

To access and run this tutorial within MAAP’s Algorithm Development Environment (ADE), please refer to the “Getting started with the MAAP” section of our documentation.

Disclaimer: it is recommended to run this tutorial within MAAP’s ADE Pangeo workspace, which already includes the stac_ipyleaflet package.

Additional Resources

Importing and Installing Packages

Selecting a new PANGEO workspace

ade workspace

or alternatively, you may install stac_ipyleaflet into your environment by uncommenting the install in the following cell:

# NOTE: This has only been tested in the **MAAP Basic Stable (Vanilla)** environment.

# %pip install git+
[ ]:
import stac_ipyleaflet
m = stac_ipyleaflet.StacIpyleaflet()

stac_ipyleaflet mapview

The stac ipyleaflet notebook’s user interface consists of a map and a custom set of tools to aid in the discovery and visualization of STAC datasets, along with Biomass Layers and pre-determined Basemaps.

Map Navigation

Move the Map

  • press and hold a mouse-click, then drag the map

Adjust the Map’s Scale (Zoom Extent) - 1 of 4 Methods:

  • click the Zoom In / Out buttons in the top left-corner (this will maintain the center)

  • use your mouse’s scroll-wheel - hovering over an area of interest

  • double-click within the map on an area of interest

  • while pressing the shift key on your keyboard, press and hold a mouse-click, then drag to draw a rectangle around the area of interest

Layers Tool

Pressing the Layers button at the top opens the Layers widget that consists of 2 tabs. This tool currently allows users to: - View one or more Biomass Layers at the same time to see different combinations. - Choose between common Basemap Layers that are known favorites. - Have full control over the opacity of any layer or basemap for fine-tuning how the map looks.

The Layers Tab

  • Toggle each layer’s visibility by using its checkbox

  • Adjust each layer’s opacity by moving its slider

stac_ipyleaflet layers widget

The Basemaps Tab

  • Select a basemap from the dropdown

  • Adjust the basemap’s opacity by moving its slider

stac_ipyleaflet basemap widget

STAC Discovery Tool

Pressing the STAC Data button at the top opens the STAC widget that consists of 2 tabs. This tool currently allows users to: - Connect to the MAAP STAC to access collections of mission data. - Discover items per the selected collection, including description, available dates, & direct URL. - Identify valid COG datasets. - Add COG tiles dynamically to the map. - Customize the tiles by changing the selected color palette for the selected item.

The Catalog Data Discovery Tab

  • Select a Collection within the default STAC library.

stac_ipyleaflet stac widget

  • Browse through the Collection’s details.

stac_ipyleaflet details

  • Select an item from the collection to check if it is a valid COG. If it is, the Display button will become active (available) to add the selected item to the map. The displayed STAC layer’s opacity can be adjusted by moving its slider.

stac_ipyleaflet items

The Visualization Tab

  • Select a category from the dropdown.

  • Select an item from the corresponding color palettes.

  • Press the Display button to update the data on the map.

stac_ipyleaflet color palettes

Interact with the Map

  1. Activate the Interact Tools (click on the top Interact button)

  2. From within the Point tab: Use your mouse to activate the Point tool; then click on the map at a location of interest

    • Coordinates will be printed within the open tab

    • Raster cell values will be identified and printed, if raster layers are on

  3. From within the Area tab: Use your mouse to activate the Polygon tool; then click, hold and draw a polygon over the map - releasing to finish

    • The area of interest’s Coordinates & BBox within the open tab

    • Alternatively Print the area of interest’s bbox from within a cell: stac_ipyleaflet aoi bbox

  4. Clear the point or polygon graphics as needed

Add a Tile Layer

import httpx
import json
titiler_url = ""  # MAAP titiler endpoint
titiler_tilejson_url = f"{titiler_url}/cog/tilejson.json"
band_min = 0
band_max = 400
bidx = 1
colormap_name = 'gist_earth_r'
data_url = f"s3://maap-ops-workspace/shared/alexdevseed/landsat8/viz/Copernicus_30439_covars_cog_topo_stack.tif"
from ipyleaflet import TileLayer

params = {
    "url": data_url,
    "bidx": bidx,
    "rescale": f"{band_min}, {band_max}",
    "pixel_selection": "first",
    "resampling_method": "nearest",
    "colormap_name": colormap_name
r = httpx.get(titiler_tilejson_url, params = params).json()

custom_layer = TileLayer(url=r["tiles"][0], show_loading=True, visible=True)
# print(custom_layer)
TileLayer(options=['attribution', 'bounds', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms', 'zoom_offset'], show_loading=True, url='{z}/{x}/{y}@1x?url=s3%3A%2F%2Fmaap-ops-workspace%2Fshared%2Falexdevseed%2Flandsat8%2Fviz%2FCopernicus_30439_covars_cog_topo_stack.tif&bidx=1&rescale=0%2C+400&pixel_selection=first&resampling_method=nearest&colormap_name=gist_earth_r')
r = httpx.get(
    params = {
        "url": data_url,

# print(json.dumps(r, indent=4))

bounds = r.get("bounds")
minzoom = r.get("minzoom")
zoom = minzoom + 1 if minzoom == 0 else minzoom
bands = r.get("band_metadata")

print("Bounds:", bounds)
print("Zoom:", zoom)
print("Data type:", r.get("dtype"))
print("Bands:", bands)
Bounds: [-163.51338693693168, 67.17121197506852, -162.6566451826878, 67.49580310072406]
Zoom: 8
Data type: float32
Bands: [['b1', {}], ['b2', {}], ['b3', {}], ['b4', {}], ['b5', {}]]
from shapely.geometry import box

polygon = box(*bounds)
center = (polygon.centroid.y, polygon.centroid.x)
print("Center:", center)
Center: (67.33350753789628, -163.0850160598097)
[ ]:
# import stac_ipyleaflet

m = stac_ipyleaflet.StacIpyleaflet(zoom=zoom, center=center)

stac_ipyleaflet added layer