# EOxElements

A Web Component collection of geospatial UI elements, crafted by EOX.

## Documentation, Examples

Please find [descriptions, API docs and interactive examples here](https://eox-a.github.io/EOxElements).

## Elements

- ⭕️ **Alpha** elements are in-development and may have many frequent breaking
  changes.
- 🟡 **Beta** elements are mostly polished and ready for use, but may still have
  breaking changes.
- ✅ **Stable** elements are reviewed, documented, and API complete.

<table>
  <tr>
    <th>Element</th>
    <th>Description</th>
    <th>Docs & Examples</th>
    <th>Version</th>
    <th>State</th>
  </tr>
  <tr>
    <td><a href="./elements/chart/">eox-chart</a></td>
    <td>Dynamic chart with built-in data fetching</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-chart--docs">Docs & Examples</a></td>
    <td><a href="elements/chart/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/chart.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/drawtools/">eox-drawtools</a></td>
    <td>Draw and manage features on a map</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-drawtools--docs">Docs & Examples</a></td>
    <td><a href="elements/drawtools/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/drawtools.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/feedback/">eox-feedback</a></td>
    <td>Quick and easy feedback widget</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-feedback--docs">Docs & Examples</a></td>
    <td><a href="elements/feedback/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/feedback.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/geosearch/">eox-geosearch</a></td>
    <td>An autocompleted search input for geographic locations</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-geosearch--docs">Docs & Examples</a></td>
    <td><a href="elements/geosearch/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/geosearch.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/itemfilter/">eox-itemfilter</a></td>
    <td>Filter/search large sets of items client-side or server-side</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-itemfilter--docs">Docs & Examples</a></td>
    <td><a href="elements/itemfilter/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/itemfilter.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/jsonform/">eox-jsonform</a></td>
    <td>Render a form from a JSON schema</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-jsonform--docs">Docs & Examples</a></td>
    <td><a href="elements/jsonform/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/jsonform.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/layercontrol/">eox-layercontrol</a></td>
    <td>Manage and modify map layers</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-layercontrol--docs">Docs & Examples</a></td>
    <td><a href="elements/layercontrol/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/layercontrol.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
    <tr>
    <td><a href="./elements/layout/">eox-layout</a></td>
    <td>Easily create a UI layout</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-layout--docs">Docs & Examples</a></td>
    <td><a href="elements/layout/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/layout.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/map/">eox-map</a></td>
    <td>Map with powerful tools & helpers</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-map--docs">Docs & Examples</a></td>
    <td><a href="elements/map/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/map.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/stacinfo/">eox-stacinfo</a></td>
    <td>Display properties of STAC files</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-stacinfo--docs">Docs & Examples</a></td>
    <td><a href="elements/stacinfo/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/stacinfo.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
    <td><a href="./elements/storytelling/">eox-storytelling</a></td>
    <td>StoryTelling tools based on markdown</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-storytelling--docs">Docs & Examples</a></td>
    <td><a href="elements/storytelling/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/storytelling.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/timecontrol/">eox-timecontrol</a></td>
    <td>Time control and playback for map layers</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-timecontrol--docs">Docs & Examples</a></td>
    <td><a href="elements/timecontrol/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/timecontrol.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
  <tr>
    <td><a href="./elements/tour/">eox-tour</a></td>
    <td>Guided tour for UIs</td>
    <td><a href="https://eox-a.github.io/EOxElements/index.html?path=/docs/elements-eox-tour--docs">Docs & Examples</a></td>
    <td><a href="elements/tour/CHANGELOG.md"><img src="https://img.shields.io/npm/v/@eox/tour.svg?label=%20" /></a></td>
    <td>✅</td>
  </tr>
</table>

## Usage

For detailed descriptions and documentation on the individual elements, please check out the READMEs in the element subfolders.

### Bundlers (Vite, Webpack, etc.)

```
npm install @eox/<element>
```

```
import "@eox/<element>"
<eox-element></eox-element>
```

### Script tag

```
<eox-element></eox-element>

<script type="module">
import "@eox/<element>" from "https://cdn.skypack.dev/@eox/<element>"
</script>
```

## Development

For detailed development instructions, including monorepo structure, coding standards, and testing procedures, please refer to the [Contributing Guide](CONTRIBUTING.md).

AI Agents working in this repository should also consult [AGENTS.md](AGENTS.md) for specific guidelines on maintaining documentation and ensuring compatibility with the MCP server.

## License

By contributing to EOxElements, you agree that your contributions will be licensed under the repository's [LICENSE](LICENSE).

## Previous versions

The main branch of this project contains the v2 version of EOxElements. For the (legacy) v1 EOxElements, please see the [v1 branch](https://github.com/EOX-A/elements/tree/v1).