EodashItemCatalog ​

A STAC item search and browse panel. It wraps eox-itemfilter, fetches items from <stacEndpoint>/search?limit=100 on mount, and renders configurable filters alongside a results list. 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;

filters? ​

ts
optional filters?: FiltersConfig = [ { property: "eo:cloud_cover", type: "range", title: "Cloud Cover (%)", min: 0, max: 100, 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:";

imageProperty? ​

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

layoutIcon? ​

ts
optional layoutIcon?: string = mdiViewDashboard;

layoutTarget? ​

ts
optional layoutTarget?: string = "lite";

resultsTitle? ​

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

title? ​

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

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".
filterKeysstring[]noAdditional STAC keys matched by this filter entry.
stateRecord<string, boolean>noInitial selection state for multiselect/select.
placeholderstringnoPlaceholder text for select inputs.
iconstringnoSVG markup rendered next to the filter label.
unitLabelstringnoUnit suffix appended to range values (e.g. "%").

See also ​