> 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

## Vue d'ensemble

**AX - Carte** affiche les enregistrements Salesforce de n'importe quel objet standard ou personnalisé sous forme de marqueurs sur les pages de vos Experience Sites, positionnés par adresse ou par latitude et longitude. Les utilisateurs du site cliquent sur un marqueur pour voir les détails de l'enregistrement ou l'ouvrir. Utilisez-le pour les localisateurs de magasins, les zones de service, les lieux d'événements ou les sites clients.

{% hint style="success" %}
La carte Avonni est un [composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md)
{% endhint %}

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtDbABxjI9E87N8Ee1UPB%2Fxp-quickstart-selected.png?alt=media" alt="An Experience Sites page titled Find a certified installer. Pikes Peak Power is selected in an AX - Data Table of six certified installers, its name and phone number sit above an AX - Map, and the map shows that installer&#x27;s installations around Colorado Springs."><figcaption><p>Une carte réactive : choisir un installateur dans AX - Tableau de données déplace AX - Carte vers les maisons que cet installateur a équipées.</p></figcaption></figure>

## Démarrage

Un court tutoriel interactif sur les bases.

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

## Configuration

Sélectionnez la carte dans Experience Builder pour ouvrir ses paramètres dans le panneau Propriétés.

### Source de données

Connecte la carte à vos données Salesforce.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FRiatWpqiK5o3Yl9Fb5Np%2Fxp-quickstart-map-query.png?alt=media" alt="The AX - Map Data Source set to Query on Contact, with a filter Account ID equals {{installers.selectedRecord.Id}} and Maximum Number of Records 100, and the Data Mappings below it: Title mapped to the Title field, Description to the contact&#x27;s mailing city and department." width="340"><figcaption><p>Une source de données de type requête sur Contact, filtrée sur la ligne sélectionnée dans un AX - Tableau de données nommé installers.</p></figcaption></figure>

| Type de source de données | Marqueurs                          | Idéal pour                                        |
| ------------------------- | ---------------------------------- | ------------------------------------------------- |
| **Manuel**                | Saisi manuellement.                | Données fixes, tests, démonstrations.             |
| **Requête**               | Chargé par une requête Salesforce. | Données volumineuses, en direct et en temps réel. |

### Mappage des données

Dans **Mappages de données**, choisissez le champ associé à chaque partie d'un marqueur. **Valeur** l'identifie (par défaut `{{Record.Id}}`). **Emplacement** dépend du moteur :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F6goX71CXYFwCOEdlvpjA%2Fax-map-panel-location.png?alt=media" alt="Data Mappings of a Leaflet AX - Map that queries Accounts, in the Experience Builder panel. Title is mapped to Account Name, Description and Icon Name are empty, Type is Default. The Location group holds three fields only: Latitude mapped to Billing Latitude, Longitude to Billing Longitude and City to Billing City." width="320"><figcaption><p>Sur Leaflet, Emplacement prend Latitude et Longitude, ainsi qu'une Ville facultative.</p></figcaption></figure>

| Moteur          | Champs d'emplacement                                                                                             |
| --------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Google Maps** | Une adresse (**Rue**, **Ville**, **État**, **Code postal**, **Pays**) ou **Latitude** et **Longitude**.          |
| **Leaflet**     | **Latitude** et **Longitude**, requis. **Ville** facultatif, pour la liste des arrêts de l'itinéraire et le CSV. |

<details>

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

Les composants Avonni respectent les paramètres de partage et les autorisations utilisateur de votre organisation, et ne modifient jamais vos règles de partage : un utilisateur du site ne voit et n'agit que sur les enregistrements auxquels il a accès.

</details>

#### Filtres

**Filtres**: les champs selon lesquels les utilisateurs du site filtrent les marqueurs (menu : voir Filtrage et recherche).

#### Champs de recherche

**Champs de recherche**: les champs dans lesquels la barre de recherche effectue la recherche. Nécessite **Afficher la recherche**.

#### Paramètres par marqueur

Avec une **Manuel** source de données, chaque ligne de marqueur possède ses propres champs :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtKc6obZkqA8xOPYHvAPg%2Fmap-marker-types.png?alt=media" alt="A Leaflet map of the west side of Chicago with six markers in two rows. Top row, left to right: a red pin, a blue pin and a blue circle. Bottom row: a blue rectangle, a blue pentagon and an orange star."><figcaption><p>Les six types de marqueurs sur une seule carte. Première ligne : Par défaut, Épingle et Cercle. Deuxième ligne : Rectangle, Polygone et Icône personnalisée, ici une étoile dessinée à partir d'un chemin SVG.</p></figcaption></figure>

| Paramètre                                                                                                                        | Ce qu'il fait                                                                                                                  |
| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Titre**, **Description**                                                                                                       | Libellés du marqueur et de la fenêtre contextuelle.                                                                            |
| **Nom de l'icône**                                                                                                               | Icône du marqueur.                                                                                                             |
| **Type**                                                                                                                         | **Par défaut**, **Cercle**, **Rectangle**, **Polygone**, **Épingle** ou **Icône personnalisée**. Les six sur les deux moteurs. |
| **Rayon**, **Limites**, **Chemins**                                                                                              | Géométrie de la forme : rayon du cercle en mètres (25 par défaut), bords du rectangle, points du polygone.                     |
| **Couleur de remplissage**, **Opacité du remplissage**, **Couleur du contour**, **Opacité du contour**, **Épaisseur du contour** | Couleurs de la forme.                                                                                                          |
| **Chemin SVG**, **Échelle**, **Ancre**                                                                                           | Le **Icône personnalisée** dessin, avec son propre remplissage et contour.                                                     |
| **Emplacement**, **Au clic**, **Au glisser**                                                                                     | Comme dans le tableau Emplacement ci-dessus, et dans les Interactions ci-dessous.                                              |

### Paramètres de la carte

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuHJIaqRn5kpBR94LWCKu%2Fax-map-panel-leaflet.png?alt=media" alt="AX - Map Settings panel in Experience Builder for a map whose Type is Leaflet. From the top: API Name serviceMap, Type Leaflet, then Hide Zoom Controls, Zoom Controls Position, Zoom Level, Disable Dragging, Disable Scrollwheel Zooming, Disable Double Click Zoom, Draggable Markers, Disable Auto Pan Markers, Show Search, Header Title Service visits, the header text style, caption and icon settings, Header Is Joined. Below them eight folded sections: Header Actions, Center Location, Marker Clustering, Draw, Route, Filter, Search, Side panel." width="320"><figcaption><p>Le panneau AX - Map avec Type défini sur Leaflet : les paramètres de la carte, puis les sections qui contiennent le reste de la configuration.</p></figcaption></figure>

**Type** choisit le moteur. **Google Maps** (par défaut) : la carte Lightning familière, la plus simple, jusqu'à 1 000 marqueurs. **Leaflet**: pas de limite de marqueurs, ajoute le regroupement, le dessin et les itinéraires, place les marqueurs uniquement par coordonnées et nécessite `https://tile.openstreetmap.org` dans les Sites de confiance de votre organisation pour charger ses tuiles.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FFC8ZUL0CFyjmbkZ90N8k%2Fmap-type-google.png?alt=media" alt="Five Chicago customer sites on Google Maps: four red pins near the lakeshore, from Edgewater in the north to just southwest of the Loop, and a blue circle over Hyde Park. The Map and Satellite buttons sit at the top left, the Street View and zoom controls on the right."><figcaption><p>Type défini sur Google Maps. Le cercle au-dessus de Hyde Park montre que les marqueurs de forme fonctionnent aussi sur Google Maps.</p></figcaption></figure>

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtWdN4jxzZr1NVkarrN5Y%2Fmap-type-leaflet.png?alt=media" alt="The same five Chicago customer sites on a Leaflet map with OpenStreetMap tiles: four red pins near the lakeshore and a blue circle over Hyde Park. The popup of the northern pin is open and reads Northwind Traders, Andersonville office. Zoom buttons sit at the bottom right."><figcaption><p>Type défini sur Leaflet, sur les mêmes enregistrements. Cliquer sur un marqueur ouvre sa fenêtre contextuelle.</p></figcaption></figure>

| Paramètre                                              | Moteur      | Ce qu'il fait                                                                                     |
| ------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------- |
| **Titre de la liste**                                  | Google Maps | Titre de la liste d'emplacements.                                                                 |
| **Vue de liste**                                       | Google Maps | **Visible**, **Masqué** ou **Auto** (par défaut : affiché avec plusieurs marqueurs).              |
| **Masquer les contrôles de zoom**                      | Les deux    | Supprime les boutons de zoom.                                                                     |
| **Position des contrôles de zoom**                     | Leaflet     | Un coin de la carte. Non défini : la carte décide. Masqué avec **Masquer les contrôles de zoom**. |
| **Niveau de zoom**                                     | Les deux    | Zoom initial. Non défini : ajuste tous les marqueurs.                                             |
| **Désactiver le glisser**                              | Les deux    | Pas de déplacement par cliquer-glisser.                                                           |
| **Désactiver le zoom à la molette**                    | Les deux    | Pas de zoom à la molette de la souris.                                                            |
| **Désactiver le zoom au double-clic**                  | Les deux    | Pas de zoom au double-clic.                                                                       |
| **Désactiver l'interface par défaut**                  | Google Maps | Masque les contrôles standard, comme Street View.                                                 |
| **Marqueurs déplaçables**                              | Leaflet     | Les utilisateurs du site peuvent déplacer les marqueurs. Un glisser peut exécuter **Au glisser**. |
| **Désactiver le recentrage automatique des marqueurs** | Leaflet     | Pas de recentrage automatique pour garder les marqueurs visibles.                                 |
| **Afficher le pied de page**                           | Google Maps | Pied de page, pour les sources de données ou une légende.                                         |
| **Afficher la recherche**                              | Les deux    | Barre de recherche pour trouver et zoomer sur un emplacement.                                     |

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FCJ1OQFSHfq9r6TnEZK4J%2Fmap-list-view.png?alt=media" alt="A Google map of Chicago with five red pins and, on its right, a list titled Customer Sites (5). Each entry has a green location icon, the site name as a link and its address: Atlas Logistics, 300 W Adams St, Chicago, IL; Blue Finch Retail, 2200 N Clark St; Northwind Traders, 5300 N Clark St; Redwood Supply Co, 1800 S Halsted St; Juniper Health, 1500 E 53rd St."><figcaption><p>Vue de liste définie sur Visible sur une carte Google. Chaque entrée de la liste affiche le titre du marqueur et son adresse.</p></figcaption></figure>

<details>

<summary>Niveaux de zoom</summary>

de 1 à 22 sur ordinateur, de 1 à 20 sur mobile. En gros :

* 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 : Bâtiments individuels

Plus d'informations dans la documentation de Google sur [Niveaux de zoom](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels).

</details>

### En-tête

| Paramètre                                                                               | Ce qu'il fait                                                                                                                                                                                                                                                                                       |
| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Titre de l'en-tête**, **Légende de l'en-tête**                                        | Texte en haut de la carte.                                                                                                                                                                                                                                                                          |
| **Style du texte du titre de l'en-tête**, **Style du texte de la légende de l'en-tête** | Un style de texte du site pour chacun, une fois son texte défini.                                                                                                                                                                                                                                   |
| **Nom de l'icône de l'en-tête**, **Taille de l'icône de l'en-tête**                     | Icône de l'en-tête et sa taille (moyenne par défaut, icône requise).                                                                                                                                                                                                                                |
| **L'en-tête est rattaché**                                                              | Aligné à la carte : pas d'angles arrondis en bas ni d'ombre.                                                                                                                                                                                                                                        |
| **Actions de l'en-tête**                                                                | Boutons de l'en-tête. Chaque entrée dans **Actions**: **Libellé**, **Nom**, **Nom de l'icône**, **Titre** (texte au survol), **Texte alternatif**, **Au clic** (n'importe quelle interaction ci-dessous sauf Ouvrir le panneau Flow). **Boutons d'actions visibles**: nombre affiché avant un menu. |

### Emplacement central

Par défaut, la carte se centre sur ses marqueurs. **Emplacement central** le remplace :

* **Latitude**, **Longitude**: le centre exact, avant l'adresse.
* **Rue**, **Ville**, **État**, **Code postal**, **Pays**: centrer par adresse. Google Maps uniquement.
* **Afficher comme marqueur**: affiche le centre sous forme de marqueur, dont le **Type** définit la forme.

### Regroupement

Leaflet uniquement. **Regroupement des marqueurs** regroupe les marqueurs proches pour que les cartes denses restent lisibles.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FCSlNYXxJQZiTY50FnaSZ%2Fmap-clustering.png?alt=media" alt="A Leaflet map of the Chicago area with forty customer sites grouped into clusters. Green circles read 4, 6, 5, 5 and 2, a yellow circle over downtown Chicago reads 17, and one site near Naperville, with no neighbour close enough, shows as a plain marker."><figcaption><p>Le regroupement des marqueurs regroupe les marqueurs proches en un cercle qui indique combien il contient. Un marqueur sans voisin proche reste un marqueur simple.</p></figcaption></figure>

* **Activer le regroupement des marqueurs**: activé, avec les paramètres ci-dessous.
* **Couverture au survol**: met en évidence les marqueurs d'un groupe au survol.
* **Rayon maximal du groupe**: portée depuis le marqueur central, en pixels. 80 par défaut.
* **Niveau de zoom de désactivation du regroupement**: pas de regroupement à ce niveau de zoom et en dessous.

### Dessiner

Leaflet uniquement. Les utilisateurs du site dessinent des formes et peuvent les enregistrer comme fichier Salesforce.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FlawIXGnU1tl9HznXusXO%2Fmap-draw.png?alt=media" alt="A Leaflet map titled Sales territories with five red markers in Chicago. A polygon outlined and filled in blue covers the north side and two of the markers. At the bottom right, the drawing toolbar shows Line, Polygon, Circle and Marker buttons, then Edit and Delete, above the zoom buttons, and a Save button sits in the bottom right corner of the map."><figcaption><p>Dessin sur une carte Leaflet : un territoire chargé depuis GeoJSON à l'ouverture de la carte, la barre d'outils de dessin en bas à droite et le bouton Enregistrer.</p></figcaption></figure>

| Paramètre                                   | Ce qu'il fait                                                                                                              |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Activer le dessin**                       | Ajoute la barre d'outils de dessin. Les paramètres ci-dessous en ont besoin.                                               |
| **Valeur GeoJSON du dessin**                | Formes à charger : un objet GeoJSON ou un tableau. Masqué tant que **Enregistrer en tant que ContentDocument** est activé. |
| **Barre d'outils**                          | **Ligne**, **Polygone**, **Cercle**, **Marqueur**, **Modifier**, **Supprimer**. Par défaut : les six.                      |
| **Position de la barre d'outils**           | Un coin de la carte. Par défaut **En bas à droite**.                                                                       |
| **Enregistrer en tant que ContentDocument** | Enregistre le dessin comme fichier (ContentDocument), avec un **Enregistrer** bouton.                                      |

Avec **Enregistrer en tant que ContentDocument** activé :

| Paramètre                                          | Ce qu'il fait                                                                                                           |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Enregistrer automatiquement le ContentDocument** | Enregistre chaque modification, sans **Enregistrer** clic.                                                              |
| **ID du ContentDocument**                          | Fichier à mettre à jour. Vide : le premier enregistrement en crée un, les suivants pendant la visite le mettent à jour. |
| **Titre du ContentDocument**                       | Par défaut « Avonni Map Drawing Document ».                                                                             |
| **ID de l'entité liée du ContentDocument**         | Enregistrement auquel le fichier est lié.                                                                               |
| **Libellé du bouton Enregistrer**                  | Par défaut « Save ».                                                                                                    |

### Itinéraire

Leaflet uniquement. Les utilisateurs du site construisent un itinéraire routier à arrêts multiples à partir des marqueurs.

{% hint style="info" %}
Un administrateur active le calcul d'itinéraire une fois par package, avec votre propre clé API du fournisseur d'itinéraires. En attendant, cette section affiche des indications à la place : voir [Activer le calcul d'itinéraire sur la carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map/enable-map-routing.md).
{% endhint %}

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNZBFPrsQq5oiOZOv0kKF%2Fax-map-panel-route.png?alt=media" alt="The Route section of the AX - Map panel in Experience Builder, open between the folded Draw and Filter sections. Show Route Panel is on. Below it: Disable Multi-Stop Selection off, Position with Left and Right buttons and Right selected, Display Overlaid on the Map off, Opened by Default off." width="320"><figcaption><p>La section Itinéraire une fois Afficher le panneau d'itinéraire activé.</p></figcaption></figure>

| Paramètre                                | Ce qu'il fait                                                                                                       | Nécessite                            |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| **Afficher le panneau d'itinéraire**     | Un **Itinéraire** bouton (icône d'itinéraire) dans les actions de l'en-tête, ouvrant le panneau Itinéraire.         | Aucun                                |
| **Désactiver la sélection multi-arrêts** | Pas de sélection de zone, donc les arrêts sont ajoutés un par un.                                                   | **Afficher le panneau d'itinéraire** |
| **Position**                             | Côté du panneau : **Droite** (par défaut) ou **Gauche**.                                                            | **Afficher le panneau d'itinéraire** |
| **Afficher superposé sur la carte**      | Panneau au-dessus de la carte, et non à côté, **Itinéraire** bouton sur la carte (dans l'en-tête sur un téléphone). | **Afficher le panneau d'itinéraire** |
| **Ouvert par défaut**                    | Panneau ouvert au chargement.                                                                                       | **Afficher le panneau d'itinéraire** |

Par défaut, le panneau s'ouvre à côté de la carte :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fjsa2irMeJL1cXCdasBeJ%2Fmap-route-beside.png?alt=media" alt="A Leaflet map titled Customer visits with the Route panel as a column on its right, outside the map. In the header, the Route button is selected. Five numbered stops in Chicago are joined by straight lines in the order of the list, and the panel lists them under Starting point, with Settings and the Calculate route button below."><figcaption><p>Lorsque le panneau Itinéraire n'est pas superposé sur la carte, il s'ouvre en colonne à côté d'elle, et le bouton Itinéraire dans l'en-tête l'affiche ou le masque. L'itinéraire n'est pas encore calculé, donc les arrêts sont reliés par des lignes droites.</p></figcaption></figure>

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZWbTLCY1Rtq0NDPRlPmy%2Frouting-route-panel.png?alt=media" alt="A map of Chicago with five numbered stops joined by a driving route. The Route panel on the right lists the five stops in order with an arrival time for each stop after the first, and shows the departure and arrival times, the total duration, and the Optimize and Clear actions."><figcaption><p>Une fois le calcul d'itinéraire activé, le panneau Itinéraire transforme les arrêts sélectionnés sur une carte en itinéraire routier. Avec Mapbox, il affiche aussi quand chaque arrêt est atteint.</p></figcaption></figure>

Dans le panneau, l'utilisateur du site :

{% stepper %}
{% step %}

#### **Ajoute des arrêts**

Clique sur des marqueurs (jusqu'à 25), ou dessine un rectangle ou un lasso autour de plusieurs (sauf si **Désactiver la sélection multi-arrêts**).

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FeDY2EJS1F0AvpKHuHFcY%2Fmap-route-multi-stop.png?alt=media" alt="Part of a Leaflet map with the Route panel open. At the top of the map, Add Multiple Stops has opened into two buttons, a rectangle tool, selected, and a lasso tool. Two stops, Atlas Logistics and Blue Finch Retail, are numbered 1 and 2 on the map and listed in the panel above Settings and Calculate route. Three markers not yet in the route are still red pins."><figcaption><p>Ajouter plusieurs arrêts ouvre un outil rectangle et un outil lasso. Dessiner une forme sur la carte ajoute tous les marqueurs qu'elle contient à l'itinéraire.</p></figcaption></figure>
{% endstep %}

{% step %}

#### **Choisit un point de départ**

N'importe quel enregistrement sur la carte, ou **Ma position** (la position du navigateur).
{% endstep %}

{% step %}

#### **Définit l'ordre**

Fait glisser les arrêts, ou clique sur **Optimiser** pour le trajet le plus court (le premier arrêt, ou le point de départ, reste en place). **Annuler**, **Rétablir**, **Effacer** dans l'en-tête du panneau ; chaque arrêt peut être supprimé ou ouvert dans **Google Maps** ou **Waze**.
{% endstep %}

{% step %}

#### **Calcule l'itinéraire**

**Calculer l'itinéraire** trace les routes, avec la distance et le temps de trajet de chaque arrêt. Sur Mapbox, affiche aussi le départ, l'arrivée, la durée totale et les heures d'arrivée, les visites et le déjeuner inclus. Les arrêts après **Fin de journée** sont signalés, jamais supprimés :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FA3n98JijWnTy1mvQOh8R%2Fmap-route-end-of-day.png?alt=media" alt="A Leaflet map titled Customer visits with five numbered stops in Chicago and the calculated driving route. The Route panel on the right reads 11:00 AM to 3:08 PM, 4 hr 8 min, followed by a red note: This route finishes after the end of day. Remove a stop, or start earlier. Stops 1 to 4 are blue and show their arrival times. Stop 5, Juniper Health, is orange, arrives at 3:08 PM and is flagged Past end of day, and the last leg of the route, from stop 4 to stop 5, is drawn in orange."><figcaption><p>Un itinéraire qui dépasse la fin de journée : l'arrêt tardif et le trajet pour y parvenir deviennent orange, sa ligne est marquée « Après la fin de journée », et une note en haut du panneau indique que l'itinéraire se termine trop tard.</p></figcaption></figure>
{% endstep %}

{% step %}

#### **Télécharge l'itinéraire**

Un bouton de téléchargement exporte l'itinéraire calculé au format CSV.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0Nuttr0426GpPjI65xcV%2Fmap-route-stop-menu.png?alt=media" alt="The Route panel after a five-stop route is calculated: 8:00 AM to 10:49 AM, 2 hr 49 min, then the Starting point search and the five stops with their arrival times. The menu of stop 2, Blue Finch Retail, is open on three actions: Remove, Google Maps and Waze. At the bottom, the Calculate route button is greyed out and a download button sits beside it." width="320"><figcaption><p>Chaque arrêt possède son propre menu : retirer l'arrêt de l'itinéraire, ou l'ouvrir dans Google Maps ou Waze. Une fois un itinéraire calculé, le bouton de téléchargement à côté de Calculer l'itinéraire l'exporte au format CSV.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

Les paramètres du panneau **Paramètres**, avec leurs valeurs par défaut :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F2H6KgEjBOLjN5SDVtKMv%2Fmap-route-settings.png?alt=media" alt="The Route panel with its Settings section open. Lunch start 12:00 p.m., Lunch end 1:00 p.m., End of day 6:00 p.m., Visit duration (minutes) 30, Timing set to Leave at, Date Nov 14, 2026, Time 8:00 a.m., then three switches, Avoid ferries, Avoid highways and Avoid tolls, all off. The Calculate route button sits at the bottom of the panel." width="320"><figcaption><p>La section Paramètres du panneau Itinéraire. Le paramètre de temps est défini sur Partir à, ce qui affiche les champs Date et Heure ; à part la date, chaque valeur est celle par défaut.</p></figcaption></figure>

| Paramètre                                                                | Ce qu'il fait                                                                                                                                                                                 | Par défaut                       |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| **Début du déjeuner**, **Fin du déjeuner**                               | Un itinéraire en cours à l'heure du déjeuner s'interrompt pendant toute cette période, en roulant ou à un arrêt. Doit se terminer après avoir commencé, entre le départ et la fin de journée. | 12 h 00 à 13 h 00                |
| **Fin de journée**                                                       | Dernière heure sur la route. Les arrêts ultérieurs sont signalés.                                                                                                                             | 18 h 00                          |
| **Durée de visite (minutes)**                                            | Temps passé à chaque arrêt, retardant les arrêts suivants. Le premier et le dernier arrêt ne retardent rien.                                                                                  | 30                               |
| **Horaire**                                                              | Mapbox uniquement (le seul fournisseur qui modélise le trafic). **Partir maintenant**, **Partir à** ou **Arriver à**; les deux derniers ajoutent une **Date** et **Heure**.                   | Partir maintenant ; heure 8 h 00 |
| **Éviter les ferries**, **Éviter les autoroutes**, **Éviter les péages** | Éviter de les emprunter.                                                                                                                                                                      | Désactivé                        |

<details>

<summary>Limites et exportation</summary>

* **Optimiser**: sur Mapbox, le fournisseur ordonne les arrêts, sauf si un administrateur l'a désactivé dans [Activer le calcul d'itinéraire sur la carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map/enable-map-routing.md). Les autres fournisseurs, et les itinéraires de plus de douze arrêts : ordonnés par proximité.
* Pas de lien pour l'itinéraire complet : une URL d'itinéraire prend neuf points de passage au maximum (trois sur mobile), donc la navigation se fait arrêt par arrêt.
* Le fichier est `route_<date>.csv`, une ligne par arrêt : **Numéro d'arrêt**, **Nom de l'enregistrement** (titre du marqueur), **Ville** (depuis **Emplacement**), **Heure d'arrivée** (Mapbox uniquement), **Distance (km)** et **Durée (min)** depuis l'arrêt précédent, **Google Maps** et **Waze** liens.

</details>

### Filtrage et recherche

**Filtres** (dans Mappages de données) choisissez les champs, la **Filtre** section définit le menu. Chaque filtre dispose d'un menu d'opérateurs.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FLQeM9jEafwn9WwXt4rEY%2Fmap-filters-overlay.png?alt=media" alt="A Leaflet map titled Customer sites with five customer sites in Chicago. A Search sites box sits at the top left of the map and two filter buttons, Industry and Account Type, at the top right. The Industry filter is open and its filter mode menu lists Equals, selected, then Not Equals, Empty and Not Empty, over the list of industries. A Clear link and 5 of 5 sit at the bottom of the filter."><figcaption><p>Recherche et filtres superposés sur la carte. Chaque filtre possède un bouton de mode de filtre : Égal à, Différent de, Vide ou Non vide.</p></figcaption></figure>

| Paramètre                                                          | Ce qu'il fait                                                                                                                                                |
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Type**                                                           | **Horizontal** (par défaut), **Fenêtre contextuelle** ou **Panneau** (dans le panneau latéral).                                                              |
| **Afficher superposé sur la carte**                                | Filtres horizontaux ou en fenêtre contextuelle superposés à la carte, pas dans l'en-tête. Filtres du panneau : **Panneau latéral** superposition.            |
| **Ordre de tri du filtre de liste de sélection**                   | **Croissant** (par défaut), **Décroissant** ou **Ordre par défaut du champ**.                                                                                |
| **Utiliser les valeurs de liste de sélection de l'enregistrement** | Options provenant des valeurs présentes dans les enregistrements : valeurs vides masquées.                                                                   |
| **Utiliser les valeurs de filtre en cascade**                      | Chaque filtre réduit les options des autres aux enregistrements correspondants. Remplace **Utiliser les valeurs de liste de sélection de l'enregistrement**. |

| Type de champ                                                                 | Opérateurs (le premier par défaut)                                                                                                                                 |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Texte, liste de sélection, liste de sélection à sélection multiple, recherche | **Égal à**, **Différent de**, **Vide**, **Non vide**                                                                                                               |
| Nombre, date, heure                                                           | **Entre**, **Pas entre**, **Égal à**, **Différent de**, **Inférieur à**, **Inférieur ou égal à**, **Supérieur à**, **Supérieur ou égal à**, **Vide**, **Non vide** |
| Case à cocher                                                                 | Aucun menu d'opérateurs                                                                                                                                            |

**Vide** et **Non vide** ne prennent aucune valeur : les entrées se masquent.

Le **Recherche** section (nécessite **Afficher la recherche**):

| Paramètre          | Ce qu'il fait                                                                                                                                                       |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Espace réservé** | Texte de la barre de recherche vide. Par défaut « Rechercher ».                                                                                                     |
| **Position**       | **Gauche** (par défaut), **Droite**, **Centrer**, **Remplir** (en-tête), **Panneau** (panneau latéral) ou **Superposé à la carte** (en-tête sur une carte étroite). |

### Panneau latéral

Contient les filtres ou la recherche définis sur **Panneau**. Sur une carte de largeur téléphone : filtres dans une fenêtre contextuelle, recherche dans l'en-tête.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fg3SM0mTs60WwTzRS4N8o%2Fmap-side-panel.png?alt=media" alt="A Leaflet map titled Customer sites with a side panel on its left. The panel holds a Search sites box, an Industry filter listing Healthcare, Manufacturing, Retail, Technology and Transportation, an Account Type filter with Customer - Direct checked and Prospect unchecked, and a Clear all selections button. Both filters show an Equals filter mode button. The header reads 3 items found, Filtered by Account Type, and carries two actions, Log Visit and Share, and the button that shows or hides the panel. Three markers remain on the map."><figcaption><p>Filtres et recherche dans le panneau latéral à côté de la carte. Cocher Customer - Direct laisse trois sites sur la carte, et Effacer toutes les sélections réinitialise tous les filtres.</p></figcaption></figure>

* **Position**: **Gauche** (par défaut) ou **Droite**.
* **Libellé du bouton de réinitialisation**: le bouton d'effacement. Par défaut « Effacer toutes les sélections ».
* **Afficher superposé sur la carte**: choisit l'une des deux dispositions ci-dessous.

{% tabs %}
{% tab title="À côté de la carte" %}
Désactivé : une colonne à côté de la carte, activée depuis l'en-tête.

* **Fermé par défaut**: commence fermé.
* **Masquer le bouton de bascule**: masque la bascule de l'en-tête.
  {% endtab %}

{% tab title="Superposé à la carte" %}
Activé : flotte au-dessus de la carte, ouvert depuis un bouton sur la carte.

* **Ouvert par défaut**: ouvert au chargement.

Avec le panneau d'itinéraire également superposé, un seul s'ouvre à la fois.
{% endtab %}
{% endtabs %}

## Interactions

Défini par marqueur (manuel) ou dans **Mappages de données** (requête).

**Au clic** se déclenche au clic, **Au glisser** au glisser-déposer (Leaflet, **Marqueurs déplaçables** activé). Les deux proposent :

<table><thead><tr><th width="228">Type d'interaction</th><th>Description</th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md"><strong>Afficher un toast</strong></a></td><td>Notification brève.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md"><strong>Naviguer</strong></a></td><td>Ouvre une autre page du site ou une URL.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md"><strong>Ouvrir une boîte de dialogue d'alerte</strong></a></td><td>Message d'alerte dans une fenêtre modale.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md"><strong>Ouvrir une boîte de dialogue de confirmation</strong></a></td><td>Demande une confirmation, par exemple de la présence à un événement.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md"><strong>Ouvrir une boîte de dialogue de flux</strong></a></td><td>Exécute un flux dans une boîte de dialogue.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-panel.md"><strong>Ouvrir un panneau de flux</strong></a></td><td>Exécute un flux dans un panneau latéral, les marqueurs restent visibles.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/execute-flow.md"><strong>Exécuter le flux</strong></a></td><td>Exécute un flux lancé automatiquement en arrière-plan, sans boîte de dialogue ni panneau.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/download.md"><strong>Télécharger</strong></a></td><td>Un fichier Salesforce, un lien public ou une URL.</td></tr><tr><td><strong>Actualiser toutes les requêtes</strong></td><td>Relance chaque requête de la page.</td></tr><tr><td><strong>Actualiser la requête</strong></td><td>Relance la propre requête de la carte. Source de données de requête uniquement.</td></tr></tbody></table>

## Style

Depuis la **Style** section. Les cartes Leaflet ajoutent **Marqueurs de carte**, **Contrôles de zoom**, **Contrôles de dessin** et **Panneau d'itinéraire**.

{% tabs %}
{% tab title="Marge" %}
Espacement extérieur.
{% endtab %}

{% tab title="Rembourrage" %}
Espacement intérieur.
{% endtab %}

{% tab title="Taille" %}
Largeur / Hauteur / Largeur min. / Largeur max. / Hauteur min. / Hauteur max.
{% endtab %}

{% tab title="Bordure" %}
Taille / Style / Couleur / Rayon.
{% endtab %}

{% tab title="En-tête" %}

* **En-tête :** Couleur d'arrière-plan ; Rembourrage (chaque côté) ; Marge inférieure.
* **Bordure de l'en-tête :** Couleur / Taille / Style / Rayon ; Couleur / Taille / Style de la bordure inférieure (avec **L'en-tête est rattaché**).
* **Titre de l'en-tête**, **Légende de l'en-tête :** Couleur / Taille de police / Graisse / Style de police.
* **Avatar de l'en-tête :** Couleur d'arrière-plan / Couleur d'avant-plan / Rayon de bordure.
  {% endtab %}

{% tab title="Marqueurs de carte" %}
La fenêtre contextuelle du marqueur.

* **Arrière-plan des marqueurs de carte :** Couleur.
* **Titre des marqueurs de carte :** Couleur du texte / Taille de police / Style / Graisse.
* **Description des marqueurs de carte :** Couleur / Taille de police / Style / Graisse / Limite de lignes.
  {% endtab %}

{% tab title="Contrôles de zoom" %}
Couleur du texte / d'arrière-plan / d'ombre ; Couleur / Taille / Style / Rayon de bordure.
{% endtab %}

{% tab title="Contrôles de dessin" %}
Couleur d'arrière-plan / d'ombre ; Couleur / Taille / Style / Rayon de bordure.
{% endtab %}

{% tab title="Panneau d'itinéraire" %}

* **Panneau d'itinéraire :** Couleur d'arrière-plan ; Couleur / Taille / Style / Rayon de bordure.
* **En-tête du panneau d'itinéraire :** Couleur d'arrière-plan / Couleur / Taille de police / Graisse de police.
  {% endtab %}

{% tab title="Panneau des filtres" %}
Le panneau latéral.

* **Panneau des filtres :** Couleur d'arrière-plan ; Couleur / Taille / Style / Rayon de bordure.
* **Libellés du panneau des filtres :** Arrière-plan, Couleur (chaque état normal, actif, au survol) ; Couleur de l'icône de réduction ; Taille / Graisse de police.
* **Options du panneau des filtres :** Couleur ; Couleur de bordure de la case à cocher ; Couleur du texte du bouton Charger plus (état normal, actif, au survol).
* **Bouton de réinitialisation du panneau des filtres :** Couleur d'arrière-plan / du texte / de la bordure ; Taille / Rayon de bordure ; Couleur d'arrière-plan et de bordure au survol ; Couleur d'arrière-plan et de bordure active.
  {% endtab %}

{% tab title="Boîte de dialogue de flux" %}

* **En-tête de la boîte de dialogue de flux :** Arrière-plan ; Couleur / Taille de la bordure inférieure ; Couleur du libellé / Taille de police / Graisse.
* **Pied de page de la boîte de dialogue de flux :** Arrière-plan ; Couleur / Taille de la bordure supérieure.
  {% endtab %}

{% tab title="Panneau de flux" %}

* **Panneau de flux :** Couleur d'arrière-plan ; Couleur / Taille / Style / Rayon de bordure.
* **En-tête du panneau de flux :** Arrière-plan ; Couleur / Taille de la bordure inférieure ; Couleur du libellé / Taille de police / Graisse ; Couleur de l'icône de fermeture (état normal, actif).
  {% endtab %}
  {% endtabs %}

## Cas d'utilisation

| Nom                                                                                                                                                                                                          | Description                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- |
| [**Configurer la carte pour afficher les informations de détails de l'enregistrement**](/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. |

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

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

La carte affiche l'emplacement de facturation du compte qu'un commercial sélectionne dans un tableau de données des comptes. Avant de commencer : un tableau de données des comptes sur la page, nom d'API `AccountsTable`.

{% 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 d'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éfinissez le titre sur `Nom du compte`
* Sous Emplacement, définissez Latitude sur `Latitude de facturation` et Longitude sur `Longitude de facturation`
  {% endstep %}

{% step %}

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

* Prévisualisez, sélectionnez un enregistrement dans le tableau de données des comptes, et vérifiez que la carte affiche son emplacement de facturation
  {% endstep %}
  {% endstepper %}

### Exemple 2 : Suivi des commandes client

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

Les clients voient où se trouve leur commande. Avant de commencer : un champ géolocalisation personnalisé sur Order contenant les coordonnées de suivi.

{% 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 d'API sur `TrackingMap`
* Définissez le type sur `Leaflet`
  {% endstep %}

{% step %}

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

* Créez une requête sur l'objet Order
  {% endstep %}

{% step %}

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

* Définissez le titre sur `Numéro de commande`
* Définir 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 %}

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

* Prévisualisez et vérifiez que chaque commande apparaît comme une épingle à son emplacement suivi
  {% endstep %}
  {% endstepper %}

## Dépannage des problèmes courants

| Problème                                                 | Cause                                                                                                     | Correction                                                                                                                                                                                                                                      |
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Aucun bouton Itinéraire sur la carte                     | **Type** n'est pas **Leaflet**, ou **Afficher le panneau d'itinéraire** est désactivé.                    | Définir **Type** sur **Leaflet**, activez **Afficher le panneau d'itinéraire** dans **Itinéraire**.                                                                                                                                             |
| **Itinéraire** affiche des conseils d'activation         | Le routage n'est pas activé pour ce package.                                                              | Un administrateur l'active dans l'application **Avonni Experiences** app, **Paramètres** onglet : voir [Activer le calcul d'itinéraire sur la carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map/enable-map-routing.md). |
| Une ligne droite au lieu de routes                       | Fournisseur inaccessible ou quota épuisé. La ligne conserve l'ordre des arrêts visible.                   | Si chaque itinéraire se replie sur un fallback : dans Configuration, **Paramètres de site distant**, activez `Avonni_Route_Mapbox` et `Avonni_Route_ORS`.                                                                                       |
| Aucun paramètre de chronométrage, aucune heure d'arrivée | OpenRouteService est le fournisseur. Les heures, et le **Heure d'arrivée**du CSV, sont réservés à Mapbox. | Prévu. Les heures d'arrivée nécessitent Mapbox.                                                                                                                                                                                                 |
| Marqueurs manquants sur une carte Leaflet                | Les enregistrements ont une adresse mais pas de coordonnées.                                              | Carte **Latitude** et **Longitude** sous **Emplacement**, ou définissez **Type** sur **Google Maps**.                                                                                                                                           |


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-map.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.