# Creating a MapCard Showcase

## Overview

This tutorial will effectively explore creating a MapCard Showcase in Experience Cloud using the Avonni Card and Avonni Map components. This combination is ideal for visually displaying the location of a current record, enriching the user interface with interactive and informative elements.

<details>

<summary>Why Use These Components?</summary>

**Avonni Card:**

* **Centralizing Key Information:** The Avonni Card is a focal point for presenting essential details. It organizes information about a specific item or feature clearly and concisely, making it easy for users to grasp the key points quickly.
* **Enhanced Visual Presentation:** With its customizable design, the Avonni Card can be tailored to highlight important content attractively, enhancing the visual appeal of the presented information.

**Avonni Map:**

* **Geographical Context:** The Avonni Map complements the Avonni Card by providing geographical context. It visually displays the location related to the item or feature described in the card, offering users a spatial understanding of the information.
* **Interactive Exploration:** Users can interact with the map to explore locations, gaining a more comprehensive and engaging experience. This interactivity adds a dynamic layer to the information presented in the Avonni Card.

</details>

<figure><img src="/files/G3KRZOtv6XVdtY4GrNH6" alt="" width="375"><figcaption></figcaption></figure>

## Interactive Step-by-Step Configuration Guide

{% @arcade/embed flowId="gMoobriDJOAheXX0daXD" url="<https://app.arcade.software/share/gMoobriDJOAheXX0daXD>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/creating-a-mapcard-showcase.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.