EodashItemCatalog ​

A STAC item search and browse panel. It wraps eox-itemfilter, fetches items from <stacEndpoint>/search?limit=<searchLimit> (100 by default) on mount, and renders configurable filters alongside a results list. A declared filters, sortBy, or hoverProperties entry is shown only when a selected collection has that property; with none selected, all are shown. Filter values - range bounds and multiselect options - are filled from the collection's STAC summaries and queryables as well. Set staticFilters: true to skip this lookup and use the declared filters as-is (for large catalogs). Selecting an item loads it into the map. Item footprints are drawn on the map and highlighted on hover; when bboxFilter is true the search re-runs on every map move.

Example ​

Default configuration with a cloud-cover filter and bbox-linked search:

js
{
  id: "catalog",
  title: "Catalog",
  type: "internal",
  layout: { x: 0, y: 0, w: 3, h: 12 },
  widget: {
    name: "EodashItemCatalog",
    properties: {
      filtersTitle: "Filters:",
      resultsTitle: "Items:",
      bboxFilter: true,
      imageProperty: "assets.thumbnail.href",
      filters: [
        {
          property: "eo:cloud_cover",
          type: "range",
          title: "Cloud Cover (%)",
          min: 0,
          max: 100,
          unitLabel: "%",
        },
      ],
    },
  },
}

Adding a second filter on a custom property:

js
widget: {
  name: "EodashItemCatalog",
  properties: {
    bboxFilter: false,
    filters: [
      { property: "platform", type: "multiselect", title: "Platform" },
      { property: "eo:cloud_cover", type: "range", title: "Cloud Cover (%)", min: 0, max: 100 },
    ],
  },
}

Properties ​

bboxFilter? ​

ts
optional bboxFilter?: boolean = true;

datetimeFilter? ​

ts
optional datetimeFilter?: boolean = false;

enableCompare? ​

ts
optional enableCompare?: boolean = false;

filters? ​

ts
optional filters?: FiltersConfig = [ { property: "eo:cloud_cover", type: "range", title: "Cloud Cover (%)", min: 0, max: 100, step: 1, state: { min: 0, max: 30, }, icon: `<svg style="height: 1rem; transform: translateY(-2px); fill: currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>weather-cloudy</title><path d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z" /></svg>`, unitLabel: "%", }, ];

filtersTitle? ​

ts
optional filtersTitle?: string = "Filters:";

hoverProperties? ​

ts
optional hoverProperties?: string[] = ["datetime", "eo:cloud_cover"];

imageProperty? ​

ts
optional imageProperty?: string = "assets.thumbnail.href";

layoutIcon? ​

ts
optional layoutIcon?: string = mdiViewDashboard;

layoutTarget? ​

ts
optional layoutTarget?: string = "lite";

mosaicIndicators? ​

ts
optional mosaicIndicators?: string[] = undefined;

resultsTitle? ​

ts
optional resultsTitle?: string = "Items:";

searchLimit? ​

ts
optional searchLimit?: number = 100;

showTitleBlock? ​

ts
optional showTitleBlock?: boolean = true;

sortBy? ​

ts
optional sortBy?: object[] = [ { property: "datetime", label: "Date" }, { property: "eo:cloud_cover", label: "Cloud Cover" }, ];

label ​

ts
label: string;

property ​

ts
property: string;

stacEndpoint? ​

ts
optional stacEndpoint?: string = null;

stacItemsInteractionStyle? ​

ts
optional stacItemsInteractionStyle?: Record<string, any> = undefined;

stacItemsStyle? ​

ts
optional stacItemsStyle?: Record<string, any> = undefined;

staticFilters? ​

Show the declared filters and their filterKeys as-is, without fetching per-collection metadata to resolve/narrow options. Use for large catalogs where fetching every collection's summaries/queryables does not scale.

ts
optional staticFilters?: boolean = false;

title? ​

ts
optional title?: string = "Explore Catalog";

useMosaic? ​

ts
optional useMosaic?: boolean = false;

Filters (filters) ​

Each entry in the filters array configures one filter panel in eox-itemfilter. The defaults provide a single cloud-cover range filter.

FieldTypeRequiredDescription
propertystringyesSTAC property key to filter on.
type"range" | "multiselect" | "select"yesControl type rendered for this filter.
titlestringnoLabel shown above the filter control.
minnumbernoMinimum value for type: "range".
maxnumbernoMaximum value for type: "range".
stepnumbernoStep increment for type: "range" sliders.
formatstringnoValue format string applied to range labels.
filterKeysstring[]noAdditional STAC keys matched by this filter entry.
stateRecord<string, boolean> | { min: number, max: number }noInitial selection state: a boolean map for multiselect/select, or { min, max } for range.
placeholderstringnoPlaceholder text for select inputs.
iconstringnoSVG markup rendered next to the filter label.
unitLabelstringnoUnit suffix appended to range values (e.g. "%").

See also ​