EOxElements: Your Building Blocks for Geospatial UI Development

Workshop Duration: 2 hours

Objective:

The goal of this workshop is to introduce participants to EOxElements and provide hands-on experience in using it to create web-based geospatial applications, specifically focusing on accessing and working with STAC (SpatioTemporal Asset Catalog). Additionally, the workshop will introduce eodash, an open-source library that simplifies orchestrating EOxElements and working with STAC catalogs.

Pre-requisites:

• Participants should bring their own laptops.
• Basic understanding of HTML, CSS, and JavaScript.
• Familiarity with geospatial concepts (optional but beneficial).

Workshop Outline:

0. Introduction and Setup (15 minutes)

1. Welcome and Overview (5 minutes)

   • Introduction to the speaker.
   • Overview of what will be covered in the workshop.
   • Brief introduction to STAC and its relevance in geospatial data management.

2. Setup (10 minutes)

   • Guide participants to install necessary tools and libraries:
     • Ensure everyone has a modern web browser (e.g., Chrome, Firefox).
     • Basic setup of a local web server (e.g., using http-server or similar tool).
     • Clone the workshop repository or download the necessary files.

I. Understanding EOxElements (15 minutes)

1. Introduction to EOxElements Components (5 minutes)

   • Overview of the key components provided by EOxElements (e.g., layout, map, layer control, etc.).
   • Explanation of the functionalities of each component and how they interact.
   • Examples of use cases where these components can be effectively utilized.

   📖 Have a look at the Introduction!

2. Introduction to Custom Elements (Web Components) and Their Benefits (5 minutes)

   • Briefly explain the concept of custom elements (web components) and their role in modern web development.
   • Discuss the benefits of using web components, such as encapsulation, reusability, and interoperability.
   • Highlight how EOxElements leverages custom elements to provide a modular and maintainable codebase.

3. Exploring Documentation and Examples (5 minutes)

   • Show participants where to find the official documentation and examples.
   • Walk through a basic example to demonstrate how EOxElements works.

   🖼️ See the EOxElements Documentation and Examples.

II. Hands-On Session: Building a Simple Map Application (70 minutes)

Here's a preview of what the end result of the hands-on session will look like!

The following sections will guide the participants through the individual steps to achieve the end result.

1. Creating a Basic Layout (5 minutes)

   • Guide participants through creating a simple HTML file.
   • Include necessary EOxElements scripts and styles.
   • Initialize a basic layout using EOxElements components (eox-layout and eox-layout-item).

   💻 Follow along in section 01.

2. Creating a Basic Map (10 minutes)

   • Initialize a basic map using eox-map.

   💻 Follow along in section 02.

3. Adding Advanced Layers (10 minutes)

   • Demonstrate how to add different types of layers (e.g., STAC, WMTS from Capabilities).

   💻 Follow along in section 03.

4. Interactivity and Controls (15 minutes)

   • Introduce eox-layercontrol and show how to customize its appearance and behavior.
   • Show how to configure layer properties (e.g., visibility, opacity).

   💻 Follow along in section 04.

5. Filtering and Selecting Items based on STAC Data (15 minutes)

   • Introduce eox-itemfilter and show how to customize its appearance and behavior, and let the map react to a selection.
   • Demonstrate how to access a STAC collection manually.

   💻 Follow along in section 05.

6. Accessing and Displaying STAC Data (15 minutes)

   • Show how to fetch and parse STAC metadata using eox-stacinfo.
   • Guide participants through the process of displaying STAC metadata in the provided slots.

   💻 Follow along in section 06.

III. Introduction to eodash (5 minutes)

• Overview of eodash and its functionalities.
• Demonstrate how eodash simplifies the process of accessing and displaying STAC data.
• Show examples of using eodash out-of-the-box features for geospatial applications.

IV. Q&A and Wrap-Up (15 minutes)

1. Q&A Session (10 minutes)

   • Open the floor for participants to ask questions about EOxElements, STAC catalogs, eodash, troubleshooting, and best practices.
   • Provide solutions to common issues that may have arisen during the hands-on session.

2. Wrap-Up and Next Steps (5 minutes)

   • Summarize the key takeaways from the workshop.
   • Provide additional resources for learning more about EOxElements, STAC, eodash, and geospatial web development.
   • Encourage participants to continue experimenting and building with EOxElements and eodash.

Materials Provided:

• This workshop repository with step-by-step instructions.
• Links to documentation, examples, and additional resources.

Follow-Up:

• Invitation to contribute (issues, discussions etc.) to both EOxElements repository and/or eodash repository.