# AX - Mapa

## Descripción general

**AX - Mapa** es un componente de Experience Cloud que muestra registros de Salesforce como marcadores de ubicación interactivos en páginas de Experience Sites.

Úsalo para mostrar a los usuarios del portal ubicaciones basadas en campos de dirección o coordenadas de latitud/longitud, como ubicaciones de servicio cercanas, sitios de clientes, resultados del localizador de tiendas o lugares de eventos. Los usuarios pueden hacer clic en los marcadores para ver los detalles del registro y navegar a los registros. Obtén datos de ubicación de cualquier objeto estándar o personalizado en Experience Builder.

Perfecto para localizadores de tiendas, mapas de territorios de servicio, buscadores de ubicaciones de eventos, vistas de proximidad de clientes o cualquier lugar donde los usuarios del portal necesiten visualizar datos geográficos.

{% hint style="success" %}
El mapa de Avonni es un [Componente de datos reactivo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/componentes-reactivos)
{% endhint %}

***

## Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Mapa y comenzar a crear tus casos de uso.

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

***

## Tutoriales

| Name                                                                                                                                                                                                                                               | Descripción                                                        |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [**Configura el mapa para mostrar la información de detalles del registro**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/componentes/mapa/configura-el-mapa-para-mostrar-informacion-detallada-del-registro) | Aprende a mostrar registros en Experience Cloud usando Avonni Map. |

***

## Configuración del mapa

Comprender el proceso de configuración, especialmente las secciones Fuente de datos y Asignaciones de datos, es crucial para usar este componente de manera efectiva.

### Configuración de la fuente de datos

La sección Fuente de datos es donde conectas Avonni Map con tus datos de Salesforce. Tienes dos opciones.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FcxKsH0r2uGFwHkcF9gfD%2F2023-12-10_22-25-09.png?alt=media&#x26;token=e996b746-052d-47a4-9643-bd7333c51e9d" alt=""><figcaption></figcaption></figure>

| Tipo de fuente de datos    | Descripción                                                                       | Caso de uso                                                                  |
| -------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Fuente de datos manual** | Introduce manualmente datos en la tabla de datos.                                 | Ideal para datos no dinámicos, pruebas y demostraciones.                     |
| **Consulta**               | Crea una consulta para rellenar automáticamente la tabla con datos de Salesforce. | Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño. |

### Configuración de asignaciones de datos

En la sección Asignaciones de datos, puedes activar tu componente Mapa especificando cómo deben asignarse los campos. Esto implica alinear campos, como las coordenadas de ubicación de la configuración de tu Fuente de datos, con los atributos relevantes del mapa.

<details>

<summary>Compartir el modelo de datos con Avonni Map</summary>

**Cumplimiento de las reglas de uso compartido de datos de Salesforce:**

* **Respeto a la configuración de la organización:** Los componentes Avonni cumplen totalmente con las configuraciones existentes de uso compartido de datos y de acceso de tu organización de Salesforce.
* **Política de no interferencia:** Estos componentes no alteran ni afectan de ninguna manera tus reglas de uso compartido de datos preestablecidas.
* **Visibilidad y acceso controlados:** La capacidad de ver e interactuar con los registros a través de los componentes Avonni está gobernada por la configuración de uso compartido y los permisos de usuario definidos por tu organización

</details>

Debes centrarte en la sección Ubicación para asegurarte de que tus asignaciones de datos estén configuradas correctamente, especialmente al asignar ubicaciones. Aquí está el motivo:

1. **Configuración de las asignaciones de datos**: Para asegurarte de que el componente Mapa muestre la información correcta, debes asignar los campos de datos de Salesforce a sus etiquetas de ubicación correspondientes. Por ejemplo, asignarás un campo de Salesforce que contenga direcciones postales a la etiqueta 'street' en el componente Mapa, nombres de ciudad a la etiqueta 'city' y así sucesivamente.
2. **Importancia de la precisión**: Las asignaciones precisas son vitales. El componente Mapa podría mostrar información incorrecta si el campo de Salesforce equivocado se asigna a una etiqueta de ubicación. Por ejemplo, si el campo 'city' se asigna incorrectamente a la etiqueta 'postal code', el mapa podría mostrar una ubicación en una ciudad totalmente diferente o incluso en un país distinto.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTUmSPkrYMTVIgKitJ4hY%2F2023-12-10_21-19-47.png?alt=media&#x26;token=3bd85485-77ac-4e05-aea7-e6532ba739f0" alt="" width="375"><figcaption></figcaption></figure>

#### Filtros

El atributo Filtros te permite elegir campos específicos para filtrar y refinar los marcadores mostrados en el componente del mapa.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIMKNOfl9gBmLgj4J96kr%2F2023-12-10_22-22-43.png?alt=media&#x26;token=8a50bace-4e25-4bbe-b2a1-a41f52f7449b" alt="" width="375"><figcaption></figcaption></figure>

### Otras configuraciones

#### Vista de lista

Esta función muestra u oculta la lista de ubicaciones. Los valores válidos son visible, hidden o auto. Este valor tiene como predeterminado auto, que muestra la lista solo cuando hay varios marcadores presentes.

#### Nivel de zoom

En el componente de mapa, puedes ajustar el nivel de zoom para enfocarte en diferentes áreas, desde el mundo hasta edificios individuales. Si no estableces un nivel de zoom, el mapa se ajustará automáticamente para mostrar todos los marcadores que hayas colocado en él.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FlKiTOGlm9meh72iI6oyC%2F2023-12-10_22-19-25.png?alt=media&#x26;token=cbad8da6-4d6d-410f-9c74-35363919319f" alt="" width="375"><figcaption></figcaption></figure>

El panel de Propiedades tiene una opción para configurar el zoom manualmente. Los niveles de zoom van de 1 a 22 en navegadores de escritorio y de 1 a 20 en dispositivos móviles.

Aquí tienes una guía rápida de lo que generalmente muestra cada nivel de zoom:

* Nivel 1: El mundo entero
* Nivel 5: Un continente o una gran masa de tierra
* Nivel 10: Una ciudad
* Nivel 15: Detalles a nivel de calle
* Nivel 20: Edificios individuales

Consulta la documentación de la API de Google Maps sobre [Niveles de zoom](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) para obtener información más detallada.

#### Comportamiento de la interfaz de usuario del componente Mapa

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoyqBuczzWYU6mkmxUXyu%2F2023-12-10_22-30-28.png?alt=media&#x26;token=1c1bc9b6-befa-4dd5-bd04-d9e4a0d14d51" alt="" width="375"><figcaption></figcaption></figure>

Estos ajustes te permiten controlar cómo interactúan los usuarios con el mapa, proporcionando una experiencia de usuario más optimizada y enfocada. Desde deshabilitar funciones específicas de zoom y arrastre hasta añadir características útiles como una barra de búsqueda o un pie de página, cada ajuste tiene un propósito distinto:

<table><thead><tr><th width="255">Configuración</th><th>Descripción</th></tr></thead><tbody><tr><td><strong>Deshabilitar arrastre</strong></td><td>Evita mover el mapa mediante clic y arrastre, manteniéndolo en una posición fija.</td></tr><tr><td><strong>Ocultar controles de zoom</strong></td><td>Elimina los controles de acercar/alejar, manteniendo un nivel de zoom constante en el mapa.</td></tr><tr><td><strong>Deshabilitar zoom con la rueda del mouse</strong></td><td>Impide que el mapa acerque o aleje usando la rueda del mouse, asegurando un nivel de zoom estable.</td></tr><tr><td><strong>Deshabilitar doble clic para zoom</strong></td><td>Deshabilita el acercamiento al hacer doble clic en el mapa, manteniendo un nivel de zoom fijo.</td></tr><tr><td><strong>Deshabilitar interfaz predeterminada</strong></td><td>Elimina elementos estándar de la interfaz del mapa, como el alternador de Street View, proporcionando una visualización más limpia.</td></tr><tr><td><strong>Mostrar pie de página</strong></td><td>Muestra un pie de página en el mapa para información adicional, como las fuentes de datos del mapa o una leyenda.</td></tr><tr><td><strong>Se puede buscar</strong></td><td>Añade una barra de búsqueda al mapa, permitiendo a los usuarios encontrar y acercar fácilmente ubicaciones o puntos específicos.</td></tr></tbody></table>

#### Ubicación del centro del mapa

Cuando hay varios marcadores en el mapa, este se enfocará automáticamente en un punto central cercano al medio de todos los marcadores. Calcula este punto en función de sus ubicaciones.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fl62QUoutkdckePeDY727%2F2023-12-10_22-20-19.png?alt=media&#x26;token=8f5c5612-4820-4ef9-a112-ae3b81d91be0" alt="" width="375"><figcaption></figcaption></figure>

***

## Interacciones

Para el componente Mapa, cuenta con una interacción "on Select". Esta función te permite especificar qué acción debe ocurrir cuando los usuarios hagan clic en un marcador del mapa.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F4wdNTTVPjaOZSvfAS2WT%2F2023-12-10_21-29-59.png?alt=media&#x26;token=7860fbe0-0489-4457-808e-616ec8a9f1f8" alt="" width="375"><figcaption></figcaption></figure>

<table><thead><tr><th width="228">Tipo de interacción</th><th>Descripción</th></tr></thead><tbody><tr><td><a href="../panel-de-propiedades/interacciones/mostrar-toast"><strong>Mostrar toast</strong></a></td><td>Muestra una breve notificación emergente en la pantalla, proporcionando una respuesta rápida o información después de hacer clic en un marcador del mapa.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/navegar"><strong>Navegar</strong></a></td><td>Redirige al usuario a una página diferente en tu sitio o URL, guiándolo hacia información más detallada sobre la ubicación seleccionada.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-modal-de-alerta"><strong>Abrir modal de alerta</strong></a></td><td>Abre una ventana modal con un mensaje de alerta, presentando información importante o advertencias sobre la ubicación seleccionada.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-confirmacion"><strong>Abrir confirmación</strong></a></td><td>Activa un cuadro de diálogo de confirmación, utilizado para acciones que requieren confirmación adicional del usuario, como la asistencia a un evento.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-cuadro-de-dialogo-de-flujo"><strong>Abrir diálogo de flujo</strong></a></td><td>Abre un diálogo que ejecuta un Salesforce Flow, iniciando flujos de trabajo o procesos relacionados con la ubicación seleccionada.</td></tr></tbody></table>

***

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

| Name                                         | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Título de la lista**                       | Establece un título para la lista de tu mapa.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Vista de lista**                           | <p>Esta función es especialmente útil para que los usuarios vean una lista detallada de los lugares o elementos en el mapa.</p><ul><li><strong>Auto</strong>: Determina automáticamente la mejor vista.</li><li><strong>Visible</strong>: Mantiene la vista de lista siempre visible.</li><li><strong>Oculto</strong>: Oculta la vista de lista.</li></ul>                                                                                                                                                                                                                  |
| **Nivel de zoom**                            | <p>Los niveles de zoom van de 1 a 22 en navegadores de escritorio y de 1 a 20 en dispositivos móviles.</p><p>Aquí tienes una guía rápida de lo que generalmente muestra cada nivel de zoom:</p><ul><li>Nivel 1: El mundo entero</li><li>Nivel 5: Un continente o una gran masa de tierra</li><li>Nivel 10: Una ciudad</li><li>Nivel 15: Detalles a nivel de calle</li><li>Nivel 20: Edificios individuales</li></ul>                                                                                                                                                        |
| **Deshabilitar arrastre**                    | Evita que los usuarios arrastren la vista del mapa.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Ocultar controles de zoom**                | Elimina los controles de acercar/alejar del mapa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Deshabilitar zoom con la rueda del mouse** | Desactiva el zoom usando la rueda de desplazamiento del ratón                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Deshabilitar doble clic**                  | Evita que el doble clic acerque el zoom en el mapa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Deshabilitar interfaz predeterminada**     | Elimina la interfaz estándar de Google Maps para una apariencia más limpia                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Mostrar pie de página**                    | Añade una sección de pie de página al componente Mapa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Se puede buscar**                          | Activa una función de búsqueda dentro del mapa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Fuente de datos**                          | <ul><li><strong>Manual</strong>: Añadir marcadores de mapa manualmente.</li><li><strong>Consulta</strong>: Usa datos de Salesforce con asignación de datos para colocar automáticamente los marcadores</li></ul>                                                                                                                                                                                                                                                                                                                                                            |
| **Ubicación central del mapa**               | Especifica el punto central inicial del mapa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Opciones de filtrado**                     | Configura filtros para el mapa, mostrados como un popover                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Opciones del motor de búsqueda**           | <ul><li><strong>Texto de sugerencia</strong>: Texto mostrado en la barra de búsqueda antes de escribir.</li><li><strong>Posición</strong>: Elige entre izquierda, derecha, centro o relleno para la posición de la barra de búsqueda</li></ul>                                                                                                                                                                                                                                                                                                                              |
| **Tamaño**                                   | <ul><li><strong>Ancho y alto</strong>: Especifica las dimensiones del componente Mapa.</li></ul><p>"<strong><code>Desbordamiento</code></strong>" se refiere a cómo se maneja o muestra el contenido que excede los límites de su contenedor. Cuando el contenido dentro de un componente de diseño es demasiado grande para caber en las dimensiones asignadas (alto y ancho), la configuración de desbordamiento determina qué sucede con el contenido sobrante.</p><ul><li><strong>Desbordamiento</strong>: Controla cómo se gestiona el contenido desbordado.</li></ul> |
| {% endtab %}                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

{% tab title="🎨 Estilo" %}

{% endtab %}
{% endtabs %}

***

## Ejemplos de casos de uso

### Ejemplo 1 : Mapa de cuentas reactivo

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

Dale vida a los datos de tus cuentas con un mapa interactivo que responde al instante a las selecciones del usuario. Al conectar el componente Mapa con tu tabla de datos de cuentas, puedes mostrar ubicaciones de facturación precisas en el momento en que un representante haga clic en cualquier registro de cuenta.

***

#### **Lo que lograrás**

* **Mapeo contextual:** El mapa se actualiza automáticamente para mostrar la ubicación de facturación de la cuenta seleccionada según la elección del representante en la tabla de datos
* **Navegación de cuentas optimizada:** Los representantes pueden localizar visualmente las cuentas sin salir de la página

***

#### **Antes de comenzar**

* **Componente de tabla de datos de cuentas:** Asegúrate de que ya haya un componente de tabla de datos de cuentas colocado en la página con el nombre de API `AccountsTable`

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añadir el componente Mapa**

* Arrastra el componente AX – Map al lienzo de Experience Builder
  {% endstep %}

{% step %}

#### **Configura el componente**

* Establece el nombre de API en `MapAccount`
* Establece el tipo en `Leaflet`
  {% endstep %}

{% step %}

#### **Establecer una fuente de datos**

* Crea una consulta en el objeto Account
* Aplica el siguiente filtro: Id = `{{AccountsTable.selectedRecord.Id}}`
  {% endstep %}

{% step %}

#### **Establecer asignaciones de datos**

* Establece Title en `Account Name`
* En Location, establece Latitude en `Billing Latitude` y Longitude en `Billing Longitude`
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Inicia la vista previa, selecciona un registro en la tabla de datos de cuentas y confirma que el mapa se actualiza para reflejar la ubicación de facturación correspondiente
  {% endstep %}
  {% endstepper %}

### Ejemplo 2 : Seguimiento de pedidos de clientes

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

Ofrece a tus clientes visibilidad en tiempo real de dónde están sus pedidos. Al mapear datos de geolocalización directamente desde el objeto Order, puedes crear una experiencia de seguimiento transparente e intuitiva que mantenga a los clientes informados en cada paso del proceso.

***

#### **Lo que lograrás**

* **Visibilidad del pedido en vivo:** Los clientes pueden ver la ubicación actual de su pedido trazada en un mapa interactivo
* **Confianza a través de la transparencia:** Una experiencia de seguimiento clara y visual reduce las consultas al soporte y mejora la satisfacción del cliente

***

#### **Antes de comenzar**

* **Campo personalizado de geolocalización:** Asegúrate de haber creado un campo personalizado de Geolocation en el objeto Order para almacenar las coordenadas de seguimiento en tiempo real

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añadir el componente Mapa**

* Arrastra el componente AX – Map al lienzo de Experience Builder
  {% endstep %}

{% step %}

#### **Configura el componente**

* Establece el nombre de API en `TrackingMap`
* Establece el tipo en `Mapa de Leaflet`
  {% endstep %}

{% step %}

#### **Establecer una fuente de datos**

* Crea una consulta en el objeto Order
  {% endstep %}

{% step %}

#### **Establecer asignaciones de datos**

* Establece Title en `Order Number`
* Establece Type en `Pin`
* En Location, establece Latitude en `Tracking Geolocation (Latitude)` y Longitude en `Tracking Geolocation (Longitude)`
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Inicia la vista previa y verifica que cada pedido aparezca como un pin en el mapa en su ubicación de seguimiento correcta
  {% endstep %}
  {% endstepper %}