[Custom rutimes - Raster] Mosaic Builder UI

[vincentsarago]

Let's create a simple Demo UI to create Mosaic

in titiler-pgstac (eoapi.raster), a Mosaic is a stac-api (pgSTAC) Search request, which we register through the /mosaic/register endpoint (https://stac-utils.github.io/titiler-pgstac/advanced/metadata/)

Requirements:

• Per Collection Mosaic: Ideally a mosaic is Per Collection (because then you can assume that all items have the same assets or at least share a minimal set of assets)
• add bounds for the mosaic from the Collection metadata
• add set of defaults mosaic options (asset selection, expression, color correction, rescaling ....) from which we can construct Tile URLs
• add an option to get Min/Max zoom from all the assets (or selected asset 🤷)

Note: To be able to fully create a perfect mosaic, the user might need to get statistics/info from items so it will be nice to have a place for this.

[vincentsarago]

I've added a first version with #106 but some features still need to be added

[vincentsarago]

To Do

1. get more assets metadata

within the current builder we get the list of assets from the collection metadata

eoAPI/runtime/eoapi/raster/eoapi/raster/templates/mosaic-builder.html

Lines 450 to 482 in 7b429e8

	// assets
	if (collection_metadata && collection_metadata.item_assets) {
	var tbl = document.createElement("table");
	tbl.classList = ["mt6"];
	tbl.style.width = '100%';
	var row = tbl.insertRow(-1);
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	cell1.innerHTML = "Asset";
	cell2.innerHTML = "Type"
	const rio_types = [
	"image/tiff; application=geotiff",
	"image/tiff; application=geotiff; profile=cloud-optimized",
	"image/tiff; profile=cloud-optimized; application=geotiff",
	"image/vnd.stac.geotiff; cloud-optimized=true",
	"image/tiff",
	"image/x.geotiff",
	"image/jp2",
	"application/x-hdf5",
	"application/x-hdf",
	]
	const assets = Object.keys(collection_metadata.item_assets).filter(key => rio_types.includes(collection_metadata.item_assets[key].type))
	for (var i = 0; i < assets.length; i++) {
	var row = tbl.insertRow(-1);
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	cell1.innerHTML = assets[i];
	cell2.innerHTML = collection_metadata.item_assets[assets[i]].type;
	}
	collection_meta.appendChild(tbl)
	}

This is nice but not enough, we should add a button to retrieve information about Item (using STACReader.info() for the first item in a collection, assuming all items are similar 😬 🤷 )

2. add link to viewer

When we register the mosaic we get a set of links

eoAPI/runtime/eoapi/raster/eoapi/raster/templates/mosaic-builder.html

Lines 588 to 595 in 7b429e8

	const mosaic_info = document.getElementById('mosaic-info')
	mosaic_info.innerHTML = ''
	mosaic_info.insertAdjacentHTML(
	'beforeend',
	`<p class="mt6">MosaicID: ${data.searchid}</p>` +
	`<p class="mt6"><a href="${data.links[0].href}" target="_blank">Mosaic Info Link</p>`
	)
	})

blocked by stac-utils/titiler-pgstac#114

[zacharyDez]

@vincentsarago; isn't this implemented now?

[vincentsarago]

@zacharyDez some of it yes but it still needs some work to be ✨