Ability to visualize multiple STAC layers on a map as a mosaic

[heidimok]

• stac ipyleaflet version: for release 0.3.0
• Python version: python >= 3.9 (some of the widgets are incompatible at v 3.8)
• Reference column Number 24 in the MAAP-ipyleaflet-DevRoadmap

Context

Release 0.2.0 of stac_ipyleaflet allows users to select a collection from the MAAP STAC data catalog and display items.

Problem

A scientist can only see one stac layer at a time, which limits the visualization. Below are images of Oceania and Europe

Acceptance Criteria

A way to stitch together assets from different STAC queries (aka Mosaic)

• Users are able to add multiple STAC assets to map
• Implementing a way to match a STAC request via TiTiler's STAC endpoint which renders them as mosaics
• Users are able to view multiple STAC assets on map

Notes

• Realizing this is a huge change over existing abilities of other tools and better demos the power of cloud based work.
• There are at least 2 methods, premade mosaics (like the biomass layers), and on the fly mosaic with STAC queries.

[emmalu]

MAAP-Project/maap-documentation#269

[heidimok]

Design Iteration 1

• Adding first iteration here for discussion (see figma)
• The idea builds off of changes to the layout from Consolidate UI of Layer and STAC widgets #63
• Assuming that the data widget is about finding stac data and then displaying cogs, we could allow users to multi-select different items for the same collection.
• They can do other things too like adjust the colors (but that's outside the scope for this issue)
• Then one they are happy, they can decide to Create Layerwhich creates a layer with all the selected items together
• This allows users to do this one time and then always be able to access that mosaic as a layer in the future
  

This image shows how the user will likely need to be able to rename the layer

Now in the layers widget the user can always access the layer they created with multiple items together as a whole

[heidimok]

UI Update July 28, 2023:

• Design iteration 2 - minor changes same Figma
• The idea still builds off of changes to the layout from Consolidate UI of Layer and STAC widgets #63
• Users can select one of more items and display them. In this version this isn't dynamic, users will need to click the Display button to see updates on the map. In future this could be immediate.
• Out of scope - we will NOT address the situation where an item might already be a mosaic in itself or that an item might have already been used to create a layer previously. We allow duplication if users create multiple layers using the same items.
• Nice-to-have: display of how many items are select X of X selected and a button to Clear Selections.
• Once a user selects an item, they can Create Layer
  • If no items are selected, the Create Layer button is disabled

• This will prompt modal where the user can rename the new layer - required action.
• Nice-to-have - a way to auto-suggest an appropriate name. Though depending on the naming convention and number of items this might not be a straightforward feature.

• Once created, the layer will be added to the Custom added layers section of the layers widget
• By default, the layer is selected (though it might not be visible on screen if other layers have been selected already)
• Out of scope - the ability to rename a layer
• Out of scope - reordering layers

[sandrahoang686]

Possibly take a look at https://developmentseed.org/titiler/examples/code/mosaic_from_urls/

[emmalu]

A related ask from Grace (@ JPL):

I am trying to modify this code to also work with mosaic jsons
Here is some code creating a mosaic json: https://github.com/MAAP-Project/maap-documentation/blob/system_reference_v310/docs/source/technical_tutorials/visualization/ade_mosaic.ipynb
The wmts_call I am trying to plot looks like: https://titiler.maap-project.org/mosaics/d96e662d-fa69-4de1-a36c-4cf144c3e8e9/WMTSCapabilities.xml?tile_format=png&tile_scale=1&pixel_selection=first&TileMatrixSetId=WebMercatorQuad&bidx=6&resampling_method=nearest&rescale=0%2C1&return_mask=true&colormap_name=viridis

I am having trouble getting the code you sent to work with mosaic JSONs. Do you have any advice? I tried just sending in wmts_url to TileLayer(url=r["tiles"][0]), but this didn’t work

r["tiles"][0] looks like https://titiler.maap-project.org/cog/tiles/WebMercatorQuad/{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

I don’t see any working examples in https://github.com/MAAP-Project/stac_ipyleaflet/tree/main/docs/sample_notebooks

[emmalu]

Completed a DIY notebook version of this in this sample notebook:
#115