> 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 - Map** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme de marqueurs de localisation interactifs sur les pages des sites Experience Cloud. Utilisez-le pour afficher les emplacements des utilisateurs du portail en fonction de champs d’adresse ou de coordonnées de 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 de zones de service, les outils de recherche de lieux d’événements, les vues de proximité client ou partout où les utilisateurs du portail ont besoin de visualiser des données géographiques. {% hint style="success" %} Le composant Avonni Map est un [composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} ## Prise en main Utilisez ce tutoriel simple pour apprendre les bases du composant Carte et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} ## Configuration Comprendre le processus de configuration, en particulier les sections Source de données et Mappages de données, est essentiel pour utiliser efficacement ce composant. ### 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 | | ------------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | **Manuel** | Saisissez manuellement les marqueurs de carte. | Idéal pour des données non dynamiques, des tests et des démonstrations. | | **Requête** | Créez une requête pour préremplir automatiquement la carte avec des données Salesforce. | Adapté aux jeux de données dynamiques, en temps réel et volumineux. | ### Mappage des données Dans la section Mappages de données, vous pouvez activer votre composant Carte en indiquant comment les champs doivent être mappés. Cela implique d’aligner des champs, tels que les coordonnées de localisation provenant de votre configuration 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 des données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni sont pleinement conformes aux configurations de partage des données et aux paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-interférence :** Ces composants ne modifient ni n’affectent en aucune manière vos règles de partage des données prédéfinies. * **Visibilité et accès contrôlés :** La possibilité de consulter et d’interagir avec les enregistrements 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 Emplacement pour vous assurer que vos mappages de données sont correctement configurés, surtout lors du mappage des emplacements. Voici pourquoi : 1. **Configuration des mappages de données**: Pour que le composant Carte affiche les informations correctes, vous devez mapper les champs de données Salesforce à leurs libellés d’emplacement correspondants. Par exemple, vous associerez un champ Salesforce contenant des adresses postales au libellé 'street' dans le composant Carte, les noms de ville au libellé 'city', et ainsi de suite. 2. **Importance de la précision**: Des mappages précis sont essentiels. Le composant Carte pourrait afficher des informations incorrectes si le mauvais champ Salesforce est mappé à un libellé d’emplacement. Par exemple, si le champ 'city' est incorrectement mappé au libellé 'postal code', la carte pourrait afficher un emplacement dans une ville complètement différente, voire dans un autre pays.
#### Filtres L’attribut Filtres vous permet de choisir des champs spécifiques à filtrer et à affiner les marqueurs affichés dans le composant carte.
#### Paramètres par marqueur Avec une **Manuel** source de données, chaque ligne de marqueur que vous ajoutez expose ses propres champs : * **Titre** et **Description** nomme le marqueur et sa fenêtre contextuelle. * **Emplacement** place le marqueur, en utilisant soit des champs d’adresse (Rue, Ville, État, Code postal, Pays), soit **Latitude**/**Longitude**. * **Type** définit la forme du marqueur — les mêmes options que pour la position centrale (`par défaut`, `Cercle`, `Rectangle`, `Polygone`, `Épingle`, `Icône personnalisée`). * Les marqueurs de forme ajoutent des contrôles de couleur — **Couleur de remplissage**/**Opacité de remplissage** et **Couleur du contour**/**Opacité du contour**/**Épaisseur du contour** — ainsi que la géométrie de la forme : **Rayon** (cercles), **Limites** (rectangles), ou **Trajectoires** (polygones). * **Icône** définit une icône de marqueur personnalisée, et une **À la sélection** interaction peut être déclenchée lorsque le marqueur est cliqué. ### Paramètres de la carte **Type** sélectionne le moteur cartographique — **Google Maps** (par défaut) ou **Leaflet**. Choisissez **Google Maps** pour la carte familière de Salesforce Lightning — l’option la plus simple, mais elle limite l’affichage à 1 000 marqueurs. Choisissez **Leaflet** pour des jeux de données plus volumineux (sans limite de marqueurs), des tuiles cartographiques personnalisées ou des marqueurs de formes avancées (cercles, polygones, rectangles). **Titre de la liste** définit un titre pour la liste des emplacements, et **Vue de la liste** contrôle si cette liste apparaît : `automatique` (affichée uniquement lorsque plusieurs marqueurs sont présents — la valeur par défaut), `visible` (toujours affichée), ou `masquée`. **Niveau de zoom** définit le zoom initial. Si ce paramètre n’est pas renseigné, la carte s’ajuste automatiquement pour afficher tous les marqueurs que vous y avez placés.
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 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 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. **Masquer les contrôles de zoom** supprime les commandes de zoom avant/arrière, et **Position des contrôles de zoom** définit l’emplacement où ces contrôles apparaissent sur la carte. Les options suivantes contrôlent la manière dont les utilisateurs interagissent avec la carte, pour une expérience plus fluide et plus ciblée :
**Désactiver le glisser-déposer** empêche de déplacer la carte par clic-glisser. **Désactiver le zoom avec la molette** arrête le zoom à la molette de la souris. **Désactiver le zoom au double-clic** désactive le zoom au double-clic. **Désactiver l’interface utilisateur par défaut** supprime les éléments d’interface standard de la carte (comme le basculement Street View) pour un affichage plus épuré. **Marqueurs déplaçables** permet aux utilisateurs de faire glisser les marqueurs pour les repositionner, et **Désactiver le panoramique automatique des marqueurs** empêche la carte de se déplacer automatiquement pour garder les marqueurs à l’écran. **Afficher le pied de page** affiche un pied de page sur la carte (utile pour les sources de données ou une légende), et **Afficher la recherche** ajoute une barre de recherche pour que les utilisateurs puissent trouver et zoomer sur un emplacement spécifique. **Actions de l'en-tête** ajoutez des boutons d’action à l’en-tête de la carte. ### Position centrale Par défaut, lorsque plusieurs marqueurs se trouvent sur la carte, celle-ci se concentre sur un point central calculé à partir de leurs emplacements. Le **Position centrale** paramètre suivant remplace ce comportement :
* **Latitude** et **Longitude** définissez les coordonnées exactes du centre — elles ont priorité sur les champs d’adresse. * **Rue**, **Ville**, **État**, **Code postal**, et **Pays** centre la carte sur l’adresse lorsque les coordonnées ne sont pas fournies. * **Afficher comme marqueur** affiche le point central comme son propre marqueur sur la carte. * **Type de marqueur** définit la forme de ce marqueur — `par défaut`, `Cercle`, `Rectangle`, `Polygone`, `Épingle`, ou `Icône personnalisée` — avec des **Attributs du type de marqueur** (comme le rayon, les limites ou le tracé). ### Regroupement **Attributs du regroupement** regroupent les marqueurs proches pour que les cartes denses restent lisibles : * **Regroupement** active le regroupement. * **Rayon maximal du regroupement** définit jusqu’où, en pixels, un regroupement s’étend à partir de son marqueur central (par défaut 80). * **Désactiver le regroupement au niveau de zoom** arrête le regroupement à ce niveau de zoom et en dessous. * **Afficher la couverture au survol** trace les limites des marqueurs d’un regroupement lorsque l’utilisateur le survole. ### Filtrage et recherche **Filtres** (défini dans Mappages de données, ci-dessus) choisissez les champs sur lesquels les utilisateurs peuvent filtrer les marqueurs, et **Attributs du menu de filtre** contrôlent le menu de filtre — son **type** (`horizontal`, `popover`, ou `panneau`), l’ordre de tri des valeurs de la liste de sélection, si les valeurs vides de la liste de sélection sont masquées, et si les valeurs de filtre se propagent. **Attributs du moteur de recherche** configurent la barre de recherche (requiert **Afficher la recherche**) : son **Texte indicatif** texte et **Position** (`à gauche`, `à droite`, `au centre`, ou `remplir`). ## Interactions Pour le composant Carte, il comporte une interaction "On Select". Cette fonction vous permet de spécifier l’action qui doit se produire lorsque les utilisateurs cliquent sur un marqueur de carte.
Type d’interactionDescription
Afficher une notificationAffiche une brève notification contextuelle à l’écran, offrant un retour rapide ou des informations après avoir cliqué sur un marqueur de carte.
NaviguerRedirige l’utilisateur vers une autre page de votre site ou une URL, en l’orientant vers des informations plus détaillées sur l’emplacement cliqué.
Ouvrir la 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 la confirmationDéclenche une boîte de dialogue de confirmation, utilisée pour les actions nécessitant une confirmation supplémentaire de l’utilisateur, comme la participation à un événement.
Ouvrir la boîte de dialogue du fluxOuvre une boîte de dialogue qui exécute un flux Salesforce, lançant des workflows ou processus liés à l’emplacement cliqué.
## Style {% tabs %} {% tab title="Taille" %} Contrôle les dimensions de la carte (Largeur / Hauteur / Débordement). {% endtab %} {% tab title="Marge" %} Contrôle l’espacement externe autour de la carte. {% endtab %} {% tab title="Rembourrage" %} Contrôle l’espacement interne de la carte. {% endtab %} {% endtabs %} ## Cas d'utilisation | Nom | Description | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | | [**Configurer la carte pour afficher les informations détaillées des enregistrements**](/experience-cloud/experience-cloud-fr/tutoriels/components/map/set-up-the-map-to-show-record-details-information.md) | Apprenez à afficher des enregistrements dans Experience Cloud à l’aide d’Avonni Map. | ### 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 des utilisateurs. En connectant le composant Carte à votre table de données des comptes, vous pouvez afficher les emplacements de facturation précis dès qu’un commercial clique sur un enregistrement de compte. *** #### **Ce que vous allez accomplir** * **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 la table 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 Table de données des comptes :** Assurez-vous qu’un composant Table de données des comptes est déjà placé sur la page avec le nom d’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 %} #### **Configurez le composant** * Définissez le nom d’API sur `MapAccount` * Définissez le type sur `Leaflet` {% endstep %} {% step %} #### **Définir une source de données** * Créer une requête sur l’objet Compte * Appliquer le filtre suivant : Id = `{{AccountsTable.selectedRecord.Id}}` {% endstep %} {% step %} #### **Définir les mappages de données** * Définir le titre sur `Nom du compte` * Sous Emplacement, définissez Latitude sur `Latitude de facturation` et Longitude sur `Longitude de facturation` {% endstep %} {% step %} #### **Aperçu de votre travail** * Lancez l’aperçu, sélectionnez un enregistrement dans la table 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 clients {% @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 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 accomplir** * **Visibilité en temps réel des commandes :** Les clients peuvent voir l’emplacement actuel de leur commande affiché sur une carte interactive * **Confiance grâce à 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 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 %} #### **Configurez le composant** * Définissez le nom d’API sur `TrackingMap` * Définissez le type sur `Carte Leaflet` {% endstep %} {% step %} #### **Définir une source de données** * Créer une requête sur l’objet Commande {% endstep %} {% step %} #### **Définir les mappages de données** * Définir le titre sur `Numéro de commande` * Définissez le type sur `Épingle` * Sous Emplacement, définissez Latitude sur `Géolocalisation de suivi (latitude)` et Longitude sur `Géolocalisation de suivi (longitude)` {% endstep %} {% step %} #### **Aperçu de votre travail** * Lancez l’aperçu et vérifiez que chaque commande apparaît comme une épingle sur la carte à son emplacement de 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-map.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.