# AX - Carte

## Vue d’ensemble

**AX - Carte** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de marqueurs de localisation interactifs sur les pages des sites Experience.

Utilisez-le pour afficher les emplacements des utilisateurs du portail en fonction des champs d’adresse ou des coordonnées de latitude/longitude — comme les sites de service à proximité, les sites clients, les résultats du localisateur de magasins ou les lieux d’événements. Les utilisateurs peuvent cliquer sur les marqueurs pour voir les détails des enregistrements et accéder aux enregistrements. Récupérez les données de localisation à partir de n’importe quel objet standard ou personnalisé dans Experience Builder.

Parfait pour les localisateurs de magasins, les cartes des territoires de service, les outils de recherche de lieux d’événements, les vues de proximité client, ou partout où les utilisateurs du portail doivent visualiser des données géographiques.

{% hint style="success" %}
La carte Avonni est un [Composant de données réactif](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/prise-en-main/composants-reactifs)
{% endhint %}

***

## Premiers pas

Utilisez ce tutoriel simple pour apprendre les bases du composant Carte et commencer à créer vos cas d’usage.

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

***

## Tutoriels

| Name                                                                                                                                                                                                                                                                       | Description                                                                           |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| [**Configurer la carte pour afficher les informations de détail des enregistrements**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/composants/mappez/configurer-la-carte-pour-afficher-les-informations-de-detail-de-lenregistrement) | Apprenez à afficher des enregistrements sur Experience Cloud à l’aide d’Avonni Carte. |

***

## Configuration de la carte

Comprendre le processus de configuration, en particulier les sections Source de données et Mappages de données, est crucial pour utiliser ce composant efficacement.

### Configuration de la source de données

La section Source de données est l’endroit où vous connectez Avonni Carte à vos données Salesforce. Vous avez deux options.

<figure><img src="https://3803934262-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>

| Type de source de données      | Description                                                                            | Cas d’usage                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| **Source de données manuelle** | Saisissez manuellement les données dans le tableau de données.                         | Idéal pour les données non dynamiques, les tests et les démonstrations. |
| **Requête**                    | Créez une requête pour remplir automatiquement le tableau avec les données Salesforce. | Adapté aux jeux de données dynamiques, en temps réel et volumineux.     |

### Configuration du mappage des données

Dans la section Mappages de données, vous pouvez activer votre composant Carte en spécifiant comment les champs doivent être mappés. Cela implique d’aligner des champs, tels que les coordonnées de localisation de votre configuration Source de données, avec les attributs de carte correspondants.

<details>

<summary>Partage du modèle de données avec Avonni Carte</summary>

**Respect des règles de partage des données Salesforce :**

* **Respect des paramètres de l’organisation :** Les composants Avonni respectent pleinement les configurations de partage des données et les paramètres d’accès existants de votre organisation Salesforce.
* **Politique de non-interférence :** Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage des données préétablies.
* **Visibilité et accès contrôlés :** La possibilité de consulter et d’interagir avec des enregistrements via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation

</details>

Vous devez vous concentrer sur la section Localisation pour vous assurer que vos mappages de données sont correctement configurés, en particulier lors du mappage des emplacements. Voici pourquoi :

1. **Configuration des mappages de données**: Pour garantir que le composant Carte affiche les bonnes informations, vous devez mapper les champs de données Salesforce à leurs libellés de localisation correspondants. Par exemple, vous allez mapper un champ Salesforce contenant des adresses postales au libellé 'street' dans le composant Carte, les noms de villes au libellé 'city', et ainsi de suite.
2. **Importance de la précision**: Des mappages précis sont essentiels. Le composant Carte peut afficher des informations incorrectes si le mauvais champ Salesforce est associé à un libellé de localisation. Par exemple, si le champ 'city' est incorrectement mappé au libellé 'postal code', la carte pourrait afficher un emplacement dans une ville totalement différente, voire dans un autre pays.

<figure><img src="https://3803934262-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>

#### Filtres

L’attribut Filtres vous permet de choisir des champs spécifiques pour filtrer et affiner les marqueurs affichés dans le composant de carte.

<figure><img src="https://3803934262-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>

### Autres paramètres

#### Vue de liste

Cette fonction affiche ou masque la liste des emplacements. Les valeurs valides sont visible, hidden ou auto. Cette valeur est auto par défaut, ce qui affiche la liste uniquement lorsque plusieurs marqueurs sont présents.

#### Niveau de zoom

Dans le composant de carte, vous pouvez ajuster le niveau de zoom pour vous concentrer sur différentes zones, du monde entier à des bâtiments individuels. Si vous ne définissez pas de niveau de zoom, la carte s’ajustera automatiquement pour afficher tous les marqueurs que vous y avez placés.

<figure><img src="https://3803934262-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>

Le panneau Propriétés propose une option permettant de définir le zoom manuellement. Les niveaux de zoom vont de 1 à 22 sur les navigateurs de bureau et de 1 à 20 sur les appareils mobiles.

Voici un guide rapide de ce que chaque niveau de zoom affiche généralement :

* Niveau 1 : Le monde entier
* Niveau 5 : Un continent ou une grande masse continentale
* Niveau 10 : Une ville
* Niveau 15 : Détails au niveau de la rue
* Niveau 20 : Des bâtiments individuels

Reportez-vous à la documentation de l’API Google Maps sur [Les niveaux de zoom](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) pour des informations plus détaillées.

#### Comportement de l’interface utilisateur du composant Carte

<figure><img src="https://3803934262-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>

Ces paramètres vous permettent de contrôler la manière dont les utilisateurs interagissent avec la carte, offrant une expérience utilisateur plus fluide et plus ciblée. De la désactivation de certaines fonctions de zoom et de glisser-déposer à l’ajout de fonctionnalités utiles comme une barre de recherche ou un pied de page, chaque paramètre a un objectif distinct :

<table><thead><tr><th width="255">Paramètre</th><th>Description</th></tr></thead><tbody><tr><td><strong>Désactiver le glisser</strong></td><td>Empêche le déplacement de la carte par clic et glisser, en la maintenant dans une position fixe.</td></tr><tr><td><strong>Masquer les contrôles de zoom</strong></td><td>Supprime les contrôles de zoom avant/arrière, en maintenant un niveau de zoom constant sur la carte.</td></tr><tr><td><strong>Désactiver le zoom avec la molette</strong></td><td>Empêche la carte de zoomer avec la molette de la souris, garantissant un niveau de zoom stable.</td></tr><tr><td><strong>Désactiver le double-clic pour zoomer</strong></td><td>Désactive le zoom avant lors d’un double-clic sur la carte, en maintenant un niveau de zoom fixe.</td></tr><tr><td><strong>Désactiver l’interface utilisateur par défaut</strong></td><td>Supprime les éléments standard de l’interface de la carte, comme le basculement de la vue Street View, offrant un affichage plus épuré.</td></tr><tr><td><strong>Afficher le pied de page</strong></td><td>Affiche un pied de page sur la carte pour des informations supplémentaires telles que les sources de données cartographiques ou une légende.</td></tr><tr><td><strong>Recherchable</strong></td><td>Ajoute une barre de recherche à la carte, permettant aux utilisateurs de trouver et de zoomer facilement sur des emplacements ou points spécifiques.</td></tr></tbody></table>

#### Emplacement du centre de la carte

Lorsque plusieurs marqueurs se trouvent sur la carte, celle-ci se focalise automatiquement sur un point central situé près du milieu de l’ensemble des marqueurs. Ce point est calculé en fonction de leurs emplacements.

<figure><img src="https://3803934262-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>

***

## Interactions

Pour le composant Carte, il propose une interaction « on Select ». Cette fonction vous permet de spécifier l’action à effectuer lorsque les utilisateurs cliquent sur un marqueur de carte.

<figure><img src="https://3803934262-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">Type d’interaction</th><th>Description</th></tr></thead><tbody><tr><td><a href="../panneau-des-proprietes/interactions/afficher-un-toast"><strong>Afficher un toast</strong></a></td><td>Affiche une brève notification contextuelle à l’écran, fournissant un retour rapide ou une information après avoir cliqué sur un marqueur de carte.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/naviguer"><strong>Naviguer</strong></a></td><td>Redirige l’utilisateur vers une autre page de votre site ou URL, en l’orientant vers des informations plus détaillées sur l’emplacement cliqué.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-la-fenetre-modale-dalerte"><strong>Ouvrir une fenêtre modale d’alerte</strong></a></td><td>Ouvre une fenêtre modale avec un message d’alerte, présentant des informations importantes ou des avertissements concernant l’emplacement sélectionné.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-la-confirmation"><strong>Ouvrir la confirmation</strong></a></td><td>Déclenche une boîte de dialogue de confirmation, utilisée pour les actions nécessitant une confirmation supplémentaire de l’utilisateur, comme la présence à un événement.</td></tr><tr><td><a href="../panneau-des-proprietes/interactions/ouvrir-la-boite-de-dialogue-de-flux"><strong>Ouvrir la boîte de dialogue Flow</strong></a></td><td>Ouvre une boîte de dialogue qui exécute un flux Salesforce, en lançant des workflows ou des processus liés à l’emplacement cliqué.</td></tr></tbody></table>

***

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Name                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Titre de la liste**                             | Définissez un titre pour votre liste de carte.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Vue de liste**                                  | <p>Cette fonctionnalité est particulièrement utile pour permettre aux utilisateurs de voir une liste détaillée des lieux ou éléments sur la carte.</p><ul><li><strong>Auto</strong>: Détermine automatiquement la meilleure vue.</li><li><strong>Visible</strong>: Garde la vue de liste toujours visible.</li><li><strong>Masqué</strong>: Masque la vue de liste.</li></ul>                                                                                                                                                                                                                |
| **Niveau de zoom**                                | <p>Les niveaux de zoom vont de 1 à 22 sur les navigateurs de bureau et de 1 à 20 sur les appareils mobiles.</p><p>Voici un guide rapide de ce que chaque niveau de zoom affiche généralement :</p><ul><li>Niveau 1 : Le monde entier</li><li>Niveau 5 : Un continent ou une grande masse continentale</li><li>Niveau 10 : Une ville</li><li>Niveau 15 : Détails au niveau de la rue</li><li>Niveau 20 : Des bâtiments individuels</li></ul>                                                                                                                                                  |
| **Désactiver le glisser**                         | Empêcher les utilisateurs de faire glisser la vue de la carte.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Masquer les contrôles de zoom**                 | Supprimer les contrôles de zoom avant/arrière de la carte                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Désactiver le zoom avec la molette**            | Désactiver le zoom avec la molette de la souris                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Désactiver le double-clic**                     | Empêcher le double-clic de zoomer sur la carte                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Désactiver l’interface utilisateur par défaut** | Supprimer l’interface standard de Google Maps pour un aspect plus épuré                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Afficher le pied de page**                      | Ajouter une section de pied de page au composant de carte                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Recherchable**                                  | Activer une fonction de recherche dans la carte                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Source de données**                             | <ul><li><strong>Manuel</strong>: Ajouter manuellement des marqueurs de carte.</li><li><strong>Requête</strong>: Utiliser les données Salesforce avec le mappage des données pour un placement automatique des marqueurs</li></ul>                                                                                                                                                                                                                                                                                                                                                            |
| **Emplacement du centre de la carte**             | Spécifiez le point central initial de la carte                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Options de filtrage**                           | Configurer des filtres pour la carte, affichés sous forme de popover                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Options du moteur de recherche**                | <ul><li><strong>Texte indicatif</strong>: Texte affiché dans la barre de recherche avant la saisie.</li><li><strong>Position</strong>: Choisissez parmi gauche, droite, centre ou plein pour la position de la barre de recherche</li></ul>                                                                                                                                                                                                                                                                                                                                                  |
| **Taille**                                        | <ul><li><strong>Largeur et hauteur</strong>: Spécifiez les dimensions du composant de carte.</li></ul><p>"<strong><code>Débordement</code></strong>" désigne la manière dont le contenu qui dépasse les limites de son conteneur est géré ou affiché. Lorsque le contenu à l’intérieur d’un composant de mise en page est trop volumineux pour tenir dans les dimensions attribuées (hauteur et largeur), le paramètre de débordement détermine ce qu’il advient du contenu excédentaire.</p><ul><li><strong>Débordement</strong>: Contrôlez la gestion du contenu en débordement.</li></ul> |
| {% endtab %}                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |

{% tab title="🎨 Style" %}

{% endtab %}
{% endtabs %}

***

## Exemples de cas d’usage

### Exemple 1 : Carte de compte réactive

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

Donnez vie à vos données de compte avec une carte interactive qui réagit instantanément aux sélections de l’utilisateur. En connectant le composant Carte à votre tableau de données des comptes, vous pouvez afficher des emplacements de facturation précis dès qu’un commercial clique sur un enregistrement de compte.

***

#### **Ce que vous allez obtenir**

* **Cartographie contextuelle :** La carte se met automatiquement à jour pour afficher l’emplacement de facturation du compte sélectionné en fonction du choix du commercial dans le tableau de données
* **Navigation simplifiée dans les comptes :** Les commerciaux peuvent localiser visuellement les comptes sans jamais quitter la page

***

#### **Avant de commencer**

* **Composant Tableau de données des comptes :** Assurez-vous qu’un composant Tableau de données des comptes est déjà placé sur la page avec le nom API `AccountsTable`

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajouter le composant Carte**

* Faites glisser le composant AX – Map sur le canevas d’Experience Builder
  {% endstep %}

{% step %}

#### **Configurer le composant**

* Définissez le nom API sur `MapAccount`
* Définissez le type sur `Leaflet`
  {% endstep %}

{% step %}

#### **Définir une source de données**

* Créez une requête sur l’objet Account
* Appliquez le filtre suivant : Id = `{{AccountsTable.selectedRecord.Id}}`
  {% endstep %}

{% step %}

#### **Définir les mappages de données**

* Définir Title sur `Account Name`
* Sous Location, définissez Latitude sur `Billing Latitude` et Longitude sur `Billing Longitude`
  {% endstep %}

{% step %}

#### **Prévisualisez votre travail**

* Lancez l’aperçu, sélectionnez un enregistrement dans le Tableau de données des comptes et confirmez que la carte se met à jour pour refléter l’emplacement de facturation correspondant
  {% endstep %}
  {% endstepper %}

### Exemple 2 : Suivi des commandes client

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

Offrez à vos clients une visibilité en temps réel sur l’emplacement de leurs commandes. En mappant les données de géolocalisation directement depuis l’objet Commande, vous pouvez créer une expérience de suivi transparente et intuitive qui tient les clients informés à chaque étape.

***

#### **Ce que vous allez obtenir**

* **Visibilité en direct des commandes :** Les clients peuvent voir l’emplacement actuel de leur commande affiché sur une carte interactive
* **La confiance par la transparence :** Une expérience de suivi claire et visuelle réduit les demandes d’assistance et améliore la satisfaction client

***

#### **Avant de commencer**

* **Champ Géolocalisation personnalisé :** Assurez-vous qu’un champ Géolocalisation personnalisé a été créé sur l’objet Commande pour stocker les coordonnées de suivi en temps réel

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajouter le composant Carte**

* Faites glisser le composant AX – Map sur le canevas d’Experience Builder
  {% endstep %}

{% step %}

#### **Configurer le composant**

* Définissez le nom API sur `TrackingMap`
* Définissez le type sur `Carte Leaflet`
  {% endstep %}

{% step %}

#### **Définir une source de données**

* Créez une requête sur l’objet Commande
  {% endstep %}

{% step %}

#### **Définir les mappages de données**

* Définir Title sur `Numéro de commande`
* Définir Type sur `Épingle`
* Sous Location, définissez Latitude sur `Géolocalisation de suivi (Latitude)` et Longitude sur `Géolocalisation de suivi (Longitude)`
  {% endstep %}

{% step %}

#### **Prévisualisez votre travail**

* Lancez l’aperçu et vérifiez que chaque commande apparaît comme une épingle sur la carte à son emplacement suivi correct
  {% endstep %}
  {% endstepper %}