> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-map.md). # AX - Carte ## Aperçu **AX - Carte** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de marqueurs de localisation interactifs sur les pages Experience Sites. Utilisez-le pour afficher aux utilisateurs du portail des emplacements basés sur des champs d’adresse ou des coordonnées latitude/longitude — comme des sites de service à proximité, des sites clients, des résultats de recherche de magasins ou des 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 zones 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" %} Avonni Map est un [Composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} *** ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Map et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} *** ## Tutoriels | Nom | Description | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | [**Configurer la carte pour afficher les informations de détail des enregistrements**](/experience-cloud/experience-cloud-fr/tutoriels/components/map/set-up-the-map-to-show-record-details-information.md) | Apprenez à afficher des enregistrements sur Experience Cloud à l’aide d’Avonni Map. | *** ## Configuration de la carte Comprendre le processus de configuration, en particulier les sections Source de données et Mappages de données, est essentiel 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 Map à vos données Salesforce. Vous avez deux options.
| Type de source de données | Description | Cas d’utilisation | | ------------------------------ | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | | **Source de données manuelle** | Saisissez manuellement les données dans la table 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 la table 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 Map en précisant comment les champs doivent être mappés. Cela implique d’aligner des champs, tels que les coordonnées de localisation de votre configuration de source de données, avec les attributs de carte correspondants.
Partage du modèle de données avec Avonni Map **Respect des règles de partage de données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni sont entièrement conformes aux configurations de partage de données et aux paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-ingérence :** Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage de données préétablies. * **Visibilité et accès contrôlés :** La possibilité de consulter des enregistrements et d’interagir avec eux via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation
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 Map affiche les informations correctes, vous devez mapper les champs de données Salesforce à leurs étiquettes de localisation correspondantes. Par exemple, vous mapperez un champ Salesforce contenant des adresses postales à l’étiquette « street » dans le composant Map, les noms de ville à l’étiquette « city », et ainsi de suite. 2. **Importance de l’exactitude**: Des mappages précis sont essentiels. Le composant Map peut afficher des informations incorrectes si le mauvais champ Salesforce est mappé à une étiquette de localisation. Par exemple, si le champ « city » est incorrectement mappé à l’étiquette « postal code », la carte pourrait afficher un emplacement dans une ville totalement différente, voire dans un autre pays.
#### Filtres L’attribut Filters vous permet de choisir des champs spécifiques à filtrer et à affiner les marqueurs affichés dans le composant de carte.
### 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 définie par défaut sur auto, 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.
Le panneau Propriétés permet 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 indiquant 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 : Des détails au niveau de la rue * Niveau 20 : Des bâtiments individuels Consultez 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 Map
Ces paramètres vous permettent de contrôler la façon dont les utilisateurs interagissent avec la carte, offrant une expérience utilisateur plus fluide et plus ciblée. De la désactivation de fonctions de zoom et de glisser spécifiques à l’ajout de fonctionnalités utiles comme une barre de recherche ou un pied de page, chaque paramètre a un objectif distinct :
ParamètreDescription
Désactiver le glisserEmpêche le déplacement de la carte par clic et glisser, en la maintenant dans une position fixe.
Masquer les contrôles de zoomSupprime les contrôles de zoom avant/arrière, en conservant un niveau de zoom constant sur la carte.
Désactiver le zoom avec la moletteEmpêche la carte de zoomer avant ou arrière avec la molette de la souris, garantissant un niveau de zoom stable.
Désactiver le zoom par double-clicDésactive le zoom avant lors d’un double-clic sur la carte, en maintenant un niveau de zoom fixe.
Désactiver l’interface utilisateur par défautSupprime les éléments standard de l’interface de la carte, comme le basculeur de vue Street View, pour un affichage plus épuré.
Afficher le pied de pageAffiche un pied de page sur la carte pour des informations supplémentaires, telles que les sources de données de la carte ou une légende.
RecherchableAjoute une barre de recherche à la carte, permettant aux utilisateurs de trouver et de zoomer facilement sur des emplacements ou points spécifiques.
#### Emplacement du centre de la carte Lorsque plusieurs marqueurs sont présents sur la carte, celle-ci se concentre automatiquement sur un point central situé près du milieu de tous les marqueurs. Ce point est calculé en fonction de leurs emplacements.
*** ## Interactions Pour le composant Map, il propose une interaction « on Select ». Cette fonction vous permet de spécifier l’action à effectuer lorsque les utilisateurs cliquent sur un marqueur de la carte.
Type d’interactionDescription
Afficher un toastAffiche une brève notification contextuelle à l’écran, fournissant un retour rapide ou des informations après avoir cliqué sur un repère de carte.
NaviguerRedirige l’utilisateur vers une autre page de votre site ou une autre URL, en lui fournissant des informations plus détaillées sur l’emplacement cliqué.
Ouvrir une fenêtre modale d’alerteOuvre une fenêtre modale avec un message d’alerte, présentant des informations importantes ou des avertissements concernant l’emplacement sélectionné.
Ouvrir une confirmationDéclenche une boîte de dialogue de confirmation, utilisée pour les actions qui nécessitent une confirmation supplémentaire de l’utilisateur, comme la participation à un événement.
Ouvrir la boîte de dialogue FlowOuvre une boîte de dialogue qui exécute un flux Salesforce, lançant des workflows ou des processus liés à l’emplacement cliqué.
*** ## Paramètres {% tabs %} {% tab title="🎛️ Propriétés" %} | Nom | Description | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Titre de la liste** | Définissez un titre pour votre liste de carte. | | **Vue de liste** |

Cette fonctionnalité est particulièrement utile pour permettre aux utilisateurs de voir une liste détaillée des lieux ou des éléments sur la carte.

| | **Niveau de zoom** |

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 indiquant ce que chaque niveau de zoom affiche généralement :

| | **Désactiver le glisser** | Empêche les utilisateurs de faire glisser la vue de la carte. | | **Masquer les contrôles de zoom** | Supprime les contrôles de zoom avant/arrière de la carte | | **Désactiver le zoom avec la molette** | Désactive le zoom à l’aide de la molette de la souris | | **Désactiver le double-clic** | Empêche le zoom avant lors d’un double-clic sur la carte | | **Désactiver l’interface utilisateur par défaut** | Supprime l’interface standard de Google Maps pour un rendu plus épuré | | **Afficher le pied de page** | Ajoute une section de pied de page au composant de carte | | **Recherchable** | Active une fonction de recherche dans la carte | | **Source de données** | | | **Emplacement du centre de la carte** | Spécifiez le point central initial de la carte | | **Options de filtrage** | Configurez des filtres pour la carte, affichés sous forme de popover | | **Options du moteur de recherche** | | | **Taille** |

"Débordement« » 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.

| | {% endtab %} | | {% tab title="🎨 Style" %} {% endtab %} {% endtabs %} *** ## Exemples de cas d’utilisation ### Exemple 1 : Carte de compte réactive {% @arcade/embed url="" flowId="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 Map à votre tableau de données des comptes, vous pouvez afficher des emplacements de facturation précis dès qu’un représentant clique sur un enregistrement de compte. *** #### **Ce que vous obtiendrez** * **Mappage sensible au contexte :** La carte se met automatiquement à jour pour afficher l’emplacement de facturation du compte sélectionné en fonction du choix du représentant dans le tableau de données * **Navigation simplifiée dans les comptes :** Les représentants peuvent localiser visuellement les comptes sans jamais quitter la page *** #### **Avant de commencer** * **Composant de tableau de données des comptes :** Assurez-vous qu’un composant de tableau de données des comptes est déjà placé sur la page avec le nom d’API `AccountsTable` *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant Map** * Faites glisser le composant AX – Map sur le canevas de Experience Builder {% endstep %} {% step %} #### **Configurez le composant** * Définissez le nom d’API sur `MapAccount` * Définissez le type sur `Leaflet` {% endstep %} {% step %} #### **Définissez 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éfinissez les mappages de données** * Définissez Title sur `Nom du compte` * Sous Location, définissez Latitude sur `Latitude de facturation` et Longitude sur `Longitude de facturation` {% endstep %} {% step %} #### **Prévisualisez votre travail** * Lancez l’aperçu, sélectionnez un enregistrement dans le tableau de données des comptes et vérifiez que la carte se met à jour pour refléter l’emplacement de facturation correspondant {% endstep %} {% endstepper %} ### Exemple 2 : Suivi des commandes client {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Offrez à vos clients une visibilité en temps réel sur l’emplacement de leurs commandes. En cartographiant directement les données de géolocalisation à partir de l’objet Order, vous pouvez créer une expérience de suivi transparente et intuitive qui tient les clients informés à chaque étape. *** #### **Ce que vous obtiendrez** * **Visibilité en temps réel 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 de géolocalisation personnalisé :** Assurez-vous qu’un champ de géolocalisation personnalisé a été créé sur l’objet Order pour stocker les coordonnées de suivi en temps réel *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant Map** * Faites glisser le composant AX – Map sur le canevas de Experience Builder {% endstep %} {% step %} #### **Configurez le composant** * Définissez le nom d’API sur `TrackingMap` * Définissez le type sur `Carte Leaflet` {% endstep %} {% step %} #### **Définissez une source de données** * Créez une requête sur l’objet Order {% endstep %} {% step %} #### **Définissez les mappages de données** * Définissez Title sur `Numéro de commande` * Définissez 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 sous forme d’épingle sur la carte à son emplacement suivi correct {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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/experience-cloud-fr/experience-components/ax-map.md?ask= ``` 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.