> 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-it/experience-components/ax-map.md). # AX - Mappa ## Panoramica **AX - Mappa** è un componente di Experience Cloud che visualizza i record di Salesforce come indicatori di localizzazione interattivi nelle pagine di Experience Sites. Usalo per mostrare agli utenti del portale le posizioni basate su campi indirizzo o coordinate di latitudine/longitudine—come sedi di assistenza vicine, sedi dei clienti, risultati del localizzatore di negozi o location di eventi. Gli utenti possono fare clic sugli indicatori per vedere i dettagli del record e navigare ai record. Recupera i dati di posizione da qualsiasi oggetto standard o personalizzato in Experience Builder. Perfetto per localizzatori di negozi, mappe delle aree di assistenza, cercatori di location per eventi, visualizzazioni di prossimità dei clienti o ovunque gli utenti del portale debbano visualizzare dati geografici. {% hint style="success" %} La mappa Avonni è una [Componente dati reattivo](/experience-cloud/experience-cloud-it/per-iniziare/reactive-components.md) {% endhint %} *** ## Per iniziare Usa questo semplice tutorial per imparare le basi del componente Mappa e iniziare a costruire i tuoi casi d'uso. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} *** ## Tutorial | Nome | Descrizione | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | [**Imposta la mappa per mostrare le informazioni dettagliate del record**](/experience-cloud/experience-cloud-it/tutorial/components/map/set-up-the-map-to-show-record-details-information.md) | Impara a visualizzare i record su Experience Cloud usando Avonni Map. | *** ## Configurazione della mappa Comprendere il processo di configurazione, in particolare le sezioni Origine dati e Mappature dei dati, è fondamentale per utilizzare questo componente in modo efficace. ### Configurazione dell'origine dati La sezione Origine dati è dove colleghi Avonni Map ai tuoi dati Salesforce. Hai due opzioni.
| Tipo di origine dati | Descrizione | Caso d'uso | | ------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | **Origine dati manuale** | Inserisci manualmente i dati nella tabella dati. | Ideale per dati non dinamici, test e demo. | | **Query** | Crea una query per compilare automaticamente la tabella con i dati Salesforce. | Adatto per dataset dinamici, in tempo reale e di grandi dimensioni. | ### Configurazione delle mappature dei dati Nella sezione Mappature dei dati, puoi attivare il componente Mappa specificando come devono essere mappati i campi. Questo comporta l'allineamento dei campi, come le coordinate di posizione dalla configurazione della tua Origine dati, con i relativi attributi della mappa.
Condivisione del modello dati con Avonni Map **Aderenza alle regole di condivisione dei dati di Salesforce:** * **Rispetto delle impostazioni dell'organizzazione:** I componenti Avonni sono pienamente conformi alle configurazioni di condivisione dei dati e alle impostazioni di accesso esistenti della tua organizzazione Salesforce. * **Politica di non interferenza:** Questi componenti non modificano né influenzano in alcun modo le regole di condivisione dei dati predefinite. * **Visibilità e accesso controllati:** La possibilità di visualizzare e interagire con i record tramite i componenti Avonni è regolata dalle impostazioni di condivisione e dalle autorizzazioni utente definite dalla tua organizzazione
Devi concentrarti sulla sezione Posizione per assicurarti che le tue Mappature dei dati siano configurate correttamente, soprattutto quando mappi le posizioni. Ecco perché: 1. **Configurazione delle mappature dei dati**: Per assicurarti che il componente Mappa visualizzi le informazioni corrette, devi mappare i campi dati di Salesforce alle rispettive etichette di posizione. Ad esempio, mapperai un campo Salesforce contenente indirizzi stradali all'etichetta 'street' nel componente Mappa, i nomi delle città all'etichetta 'city' e così via. 2. **Importanza della precisione**: Mappature accurate sono fondamentali. Il componente Mappa potrebbe visualizzare informazioni errate se il campo Salesforce sbagliato viene mappato a un'etichetta di posizione. Ad esempio, se il campo 'city' viene mappato in modo errato all'etichetta 'postal code', la mappa potrebbe mostrare una posizione in una città completamente diversa o persino in un paese diverso.
#### Filtri L'attributo Filtri consente di scegliere campi specifici da filtrare e rifinire gli indicatori visualizzati nel componente mappa.
### Altre impostazioni #### Vista elenco Questa funzione mostra o nasconde l'elenco delle posizioni. I valori validi sono visibile, nascosto o automatico. Questo valore predefinito è automatico, che mostra l'elenco solo quando sono presenti più indicatori. #### Livello di zoom Nel componente mappa, puoi regolare il livello di zoom per concentrarti su aree diverse, dal mondo ai singoli edifici. Se non imposti un livello di zoom, la mappa si adatterà automaticamente per mostrare tutti gli indicatori che hai inserito.
Il pannello Proprietà ha un'opzione per impostare lo zoom manualmente. I livelli di zoom vanno da 1 a 22 nei browser desktop e da 1 a 20 sui dispositivi mobili. Ecco una guida rapida a ciò che in generale mostra ogni livello di zoom: * Livello 1: l'intero mondo * Livello 5: un continente o una grande massa continentale * Livello 10: una città * Livello 15: dettagli a livello stradale * Livello 20: singoli edifici Consulta la documentazione dell'API di Google Maps su [Livelli di zoom](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) per informazioni più approfondite. #### Comportamento dell'interfaccia utente del componente Mappa
Queste impostazioni ti consentono di controllare il modo in cui gli utenti interagiscono con la mappa, offrendo un'esperienza utente più fluida e mirata. Dal disattivare funzioni specifiche di zoom e trascinamento all'aggiungere funzionalità utili come una barra di ricerca o un piè di pagina, ogni impostazione ha uno scopo distinto:
ImpostazioneDescrizione
Disabilita trascinamentoImpedisce di spostare la mappa tramite clic e trascinamento, mantenendola in una posizione fissa.
Nascondi i controlli di zoomRimuove i controlli di zoom avanti/indietro, mantenendo un livello di zoom costante sulla mappa.
Disabilita lo zoom con la rotellaImpedisce alla mappa di ingrandirsi o rimpicciolirsi con la rotella del mouse, garantendo un livello di zoom stabile.
Disabilita il doppio clic per lo zoomDisabilita lo zoom in caso di doppio clic sulla mappa, mantenendo un livello di zoom fisso.
Disabilita l'interfaccia utente predefinitaRimuove gli elementi standard dell'interfaccia della mappa, come il selettore della Street View, offrendo una visualizzazione più pulita della mappa.
Mostra piè di paginaVisualizza un piè di pagina sulla mappa per informazioni aggiuntive, come le origini dei dati della mappa o una legenda.
RicercabileAggiunge una barra di ricerca alla mappa, consentendo agli utenti di trovare e ingrandire facilmente località o punti specifici.
#### Posizione del centro della mappa Quando sono presenti più indicatori sulla mappa, essa si concentrerà automaticamente su un punto centrale vicino al centro di tutti gli indicatori. Calcola questo punto in base alle loro posizioni.
*** ## Interactions Per il componente Mappa, è disponibile un'interazione "on Select". Questa funzione ti consente di specificare quale azione deve verificarsi quando gli utenti fanno clic su un indicatore della mappa.
Tipo di interazioneDescrizione
Mostra notifica toastVisualizza una breve notifica pop-up sullo schermo, fornendo un feedback rapido o informazioni dopo aver fatto clic su un indicatore della mappa.
NavigaReindirizza l'utente a una pagina diversa del tuo sito o a un URL, guidandolo verso informazioni più dettagliate sulla posizione selezionata.
Apri finestra modale di avvisoApre una finestra modale con un messaggio di avviso, presentando informazioni importanti o avvertimenti sulla posizione selezionata.
Apri confermaAttiva una finestra di dialogo di conferma, usata per azioni che richiedono ulteriore conferma da parte dell'utente, come la partecipazione a un evento.
Apri dialogo FlowApre una finestra di dialogo che esegue un Flow di Salesforce, avviando flussi di lavoro o processi relativi alla posizione selezionata.
*** ## Impostazioni {% tabs %} {% tab title="🎛️ Proprietà" %} | Nome | Descrizione | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Titolo elenco** | Imposta un titolo per il tuo elenco della mappa. | | **Vista elenco** |

Questa funzione è particolarmente utile per consentire agli utenti di vedere un elenco dettagliato dei luoghi o degli elementi sulla mappa.

| | **Livello di zoom** |

I livelli di zoom vanno da 1 a 22 nei browser desktop e da 1 a 20 sui dispositivi mobili.

Ecco una guida rapida a ciò che in generale mostra ogni livello di zoom:

| | **Disabilita trascinamento** | Impedisci agli utenti di trascinare la visualizzazione della mappa. | | **Nascondi i controlli di zoom** | Rimuovi i controlli di zoom avanti/indietro dalla mappa | | **Disabilita lo zoom con la rotella** | Disattiva lo zoom usando la rotella di scorrimento del mouse | | **Disabilita doppio clic** | Impedisci che il doppio clic esegua lo zoom sulla mappa | | **Disabilita l'interfaccia utente predefinita** | Rimuovi l'interfaccia standard di Google Maps per un aspetto più pulito | | **Mostra piè di pagina** | Aggiungi una sezione piè di pagina al componente mappa | | **Ricercabile** | Abilita una funzione di ricerca all'interno della mappa | | **Origine dati** | | | **Posizione del centro della mappa** | Specifica il punto centrale iniziale della mappa | | **Opzioni di filtro** | Imposta i filtri per la mappa, visualizzati come popover | | **Opzioni del motore di ricerca** | | | **Dimensione** |

"Overflow" si riferisce a come il contenuto che supera i limiti del suo contenitore viene gestito o visualizzato. Quando il contenuto all'interno di un componente di layout è troppo grande per rientrare nelle dimensioni assegnate (altezza e larghezza), l'impostazione overflow determina cosa accade al contenuto in eccesso.

| | {% endtab %} | | {% tab title="🎨 Stile" %} {% endtab %} {% endtabs %} *** ## Esempi di casi d'uso ### Esempio 1 : Mappa account reattiva {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} Dai vita ai dati del tuo account con una mappa interattiva che risponde istantaneamente alle selezioni dell'utente. Collegando il componente Mappa alla tua tabella dati Accounts, puoi visualizzare con precisione le posizioni di fatturazione nel momento in cui un rappresentante fa clic su qualsiasi record account. *** #### **Cosa otterrai** * **Mappatura contestuale:** La mappa si aggiorna automaticamente per visualizzare la posizione di fatturazione dell'account selezionato in base alla scelta del rappresentante nella tabella dati * **Navigazione account semplificata:** I rappresentanti possono individuare visivamente gli account senza mai lasciare la pagina *** #### **Prima di iniziare** * **Componente tabella dati Accounts:** Assicurati che un componente tabella dati Accounts sia già inserito nella pagina con il nome API `AccountsTable` *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente Mappa** * Trascina il componente AX – Map sulla tela di Experience Builder {% endstep %} {% step %} #### **Configura il componente** * Imposta il nome API su `MapAccount` * Imposta il tipo su `Leaflet` {% endstep %} {% step %} #### **Imposta un'origine dati** * Crea una query sull'oggetto Account * Applica il seguente filtro: Id = `{{AccountsTable.selectedRecord.Id}}` {% endstep %} {% step %} #### **Imposta le mappature dei dati** * Imposta Titolo su `Nome account` * In Posizione, imposta Latitudine su `Latitudine di fatturazione` e Longitudine su `Longitudine di fatturazione` {% endstep %} {% step %} #### **Visualizza l'anteprima del tuo lavoro** * Avvia l'anteprima, seleziona un record nella tabella dati Accounts e verifica che la mappa si aggiorni per riflettere la corrispondente posizione di fatturazione {% endstep %} {% endstepper %} ### Esempio 2 : Tracciamento degli ordini dei clienti {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Offri ai tuoi clienti una visibilità in tempo reale su dove si trovano i loro ordini. Mappando i dati di geolocalizzazione direttamente dall'oggetto Order, puoi creare un'esperienza di tracciamento trasparente e intuitiva che mantiene i clienti informati in ogni fase. *** #### **Cosa otterrai** * **Visibilità degli ordini in tempo reale:** I clienti possono vedere la posizione attuale del loro ordine visualizzata su una mappa interattiva * **Fiducia attraverso la trasparenza:** Un'esperienza di tracciamento chiara e visiva riduce le richieste di assistenza e migliora la soddisfazione del cliente *** #### **Prima di iniziare** * **Campo Geolocalizzazione personalizzato:** Assicurati che sull'oggetto Order sia stato creato un campo Geolocalizzazione personalizzato per memorizzare le coordinate di tracciamento in tempo reale *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente Mappa** * Trascina il componente AX – Map sulla tela di Experience Builder {% endstep %} {% step %} #### **Configura il componente** * Imposta il nome API su `TrackingMap` * Imposta il tipo su `Mappa Leaflet` {% endstep %} {% step %} #### **Imposta un'origine dati** * Crea una query sull'oggetto Order {% endstep %} {% step %} #### **Imposta le mappature dei dati** * Imposta Titolo su `Numero ordine` * Imposta Tipo su `Segnaposto` * In Posizione, imposta Latitudine su `Geolocalizzazione di tracciamento (latitudine)` e Longitudine su `Geolocalizzazione di tracciamento (longitudine)` {% endstep %} {% step %} #### **Visualizza l'anteprima del tuo lavoro** * Avvia l'anteprima e verifica che ogni ordine appaia come un segnaposto sulla mappa nella sua corretta posizione tracciata {% 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-it/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.