# AX - Mappa

## Panoramica

**AX - Mappa** è un componente di Experience Cloud che mostra i record di Salesforce come indicatori di posizione interattivi nelle pagine di Experience Sites.

Usalo per mostrare agli utenti del portale le posizioni in base ai campi indirizzo o alle coordinate di latitudine/longitudine, come sedi di assistenza nelle vicinanze, siti 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, ricerca di location per eventi, viste di prossimità dei clienti o ovunque gli utenti del portale debbano visualizzare dati geografici.

{% hint style="success" %}
La Avonni Map è un [Componente Dati Reattivo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/componenti-reattivi)
{% endhint %}

***

## Per iniziare

Usa questo semplice tutorial per imparare le basi del componente Map e iniziare a sviluppare i tuoi casi d'uso.

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

***

## Tutorial

| Nome                                                                                                                                                                                                                                                   | Descrizione                                                              |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
| [**Configura la mappa per mostrare le informazioni dettagliate del record**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti/mappa/configura-la-mappa-per-mostrare-le-informazioni-di-dettaglio-del-record) | Scopri come visualizzare i record su Experience Cloud usando Avonni Map. |

***

## Configurazione della Mappa

Comprendere il processo di configurazione, in particolare le sezioni Data Source e Data Mappings, è fondamentale per utilizzare questo componente in modo efficace.

### Configurazione della Data Source

La sezione Data Source è il punto in cui colleghi Avonni Map ai tuoi dati Salesforce. Hai due opzioni.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FcxKsH0r2uGFwHkcF9gfD%2F2023-12-10_22-25-09.png?alt=media&#x26;token=e996b746-052d-47a4-9643-bd7333c51e9d" alt=""><figcaption></figcaption></figure>

| 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 popolare automaticamente la tabella con i dati Salesforce. | Adatta a set di dati dinamici, in tempo reale e di grandi dimensioni. |

### Configurazione delle mappature dei dati

Nella sezione Data Mappings, puoi attivare il componente Map specificando come devono essere mappati i campi. Ciò comporta l'allineamento dei campi, come le coordinate di posizione dalla configurazione Data Source, con i relativi attributi della mappa.

<details>

<summary>Condivisione del modello dati con Avonni Map</summary>

**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 già 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 è governata dalle impostazioni di condivisione e dai permessi utente definiti dalla tua organizzazione

</details>

Devi concentrarti sulla sezione Location per assicurarti che le Data Mappings siano configurate correttamente, soprattutto quando si mappano le posizioni. Ecco perché:

1. **Configurazione delle Data Mappings**: Per assicurarti che il componente Map mostri le informazioni corrette, devi mappare i campi dati di Salesforce alle relative etichette di posizione. Ad esempio, mapperai un campo Salesforce contenente indirizzi stradali all'etichetta 'street' nel componente Map, i nomi delle città all'etichetta 'city' e così via.
2. **Importanza della precisione**: Le mappature accurate sono fondamentali. Il componente Map potrebbe mostrare informazioni errate se il campo Salesforce sbagliato viene mappato a un'etichetta di posizione. Ad esempio, se il campo 'city' viene mappato erroneamente all'etichetta 'postal code', la mappa potrebbe mostrare una posizione in una città completamente diversa o persino in un paese diverso.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTUmSPkrYMTVIgKitJ4hY%2F2023-12-10_21-19-47.png?alt=media&#x26;token=3bd85485-77ac-4e05-aea7-e6532ba739f0" alt="" width="375"><figcaption></figcaption></figure>

#### Filtri

L'attributo Filters ti consente di scegliere campi specifici per filtrare e affinare gli indicatori visualizzati nel componente mappa.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIMKNOfl9gBmLgj4J96kr%2F2023-12-10_22-22-43.png?alt=media&#x26;token=8a50bace-4e25-4bbe-b2a1-a41f52f7449b" alt="" width="375"><figcaption></figcaption></figure>

### Altre impostazioni

#### Vista elenco

Questa funzione mostra o nasconde l'elenco delle posizioni. I valori validi sono visible, hidden o auto. Questo valore è impostato per default su auto, 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 regolerà automaticamente per mostrare tutti gli indicatori che vi hai posizionato.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FlKiTOGlm9meh72iI6oyC%2F2023-12-10_22-19-25.png?alt=media&#x26;token=cbad8da6-4d6d-410f-9c74-35363919319f" alt="" width="375"><figcaption></figcaption></figure>

Il pannello Proprietà dispone di 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 generalmente mostra ciascun livello di zoom:

* Livello 1: L'intero mondo
* Livello 5: Un continente o una vasta 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 Map

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoyqBuczzWYU6mkmxUXyu%2F2023-12-10_22-30-28.png?alt=media&#x26;token=1c1bc9b6-befa-4dd5-bd04-d9e4a0d14d51" alt="" width="375"><figcaption></figcaption></figure>

Queste impostazioni ti consentono di controllare il modo in cui gli utenti interagiscono con la mappa, offrendo un'esperienza utente più snella e mirata. Dalla disattivazione di specifiche funzioni di zoom e trascinamento all'aggiunta di utili funzionalità come una barra di ricerca o un piè di pagina, ogni impostazione ha uno scopo distinto:

<table><thead><tr><th width="255">Impostazione</th><th>Descrizione</th></tr></thead><tbody><tr><td><strong>Disabilita trascinamento</strong></td><td>Impedisce lo spostamento della mappa tramite clic e trascinamento, mantenendola in una posizione fissa.</td></tr><tr><td><strong>Nascondi i controlli di zoom</strong></td><td>Rimuove i controlli di zoom avanti/indietro, mantenendo un livello di zoom coerente sulla mappa.</td></tr><tr><td><strong>Disabilita zoom con la rotellina del mouse</strong></td><td>Impedisce l'ingrandimento o la riduzione della mappa con la rotellina del mouse, garantendo un livello di zoom stabile.</td></tr><tr><td><strong>Disabilita doppio clic di zoom</strong></td><td>Disabilita l'ingrandimento con il doppio clic sulla mappa, mantenendo un livello di zoom fisso.</td></tr><tr><td><strong>Disabilita UI predefinita</strong></td><td>Rimuove elementi standard dell'interfaccia della mappa, come il toggle di Street View, offrendo una visualizzazione più pulita.</td></tr><tr><td><strong>Mostra piè di pagina</strong></td><td>Mostra un piè di pagina sulla mappa per informazioni aggiuntive come le fonti dei dati della mappa o una legenda.</td></tr><tr><td><strong>Ricercabile</strong></td><td>Aggiunge una barra di ricerca alla mappa, consentendo agli utenti di trovare e ingrandire facilmente posizioni o punti specifici.</td></tr></tbody></table>

#### Posizione del centro mappa

Quando sulla mappa sono presenti più indicatori, essa si concentrerà automaticamente su un punto centrale vicino al mezzo di tutti gli indicatori. Calcola questo punto in base alle loro posizioni.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fl62QUoutkdckePeDY727%2F2023-12-10_22-20-19.png?alt=media&#x26;token=8f5c5612-4820-4ef9-a112-ae3b81d91be0" alt="" width="375"><figcaption></figcaption></figure>

***

## Interazioni

Per il componente Map, è presente un'interazione "on Select". Questa funzione ti consente di specificare quale azione deve verificarsi quando gli utenti fanno clic su un indicatore della mappa.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F4wdNTTVPjaOZSvfAS2WT%2F2023-12-10_21-29-59.png?alt=media&#x26;token=7860fbe0-0489-4457-808e-616ec8a9f1f8" alt="" width="375"><figcaption></figcaption></figure>

<table><thead><tr><th width="228">Tipo di interazione</th><th>Descrizione</th></tr></thead><tbody><tr><td><a href="../pannello-delle-proprieta/interazioni/mostra-toast"><strong>Mostra toast</strong></a></td><td>Mostra una breve notifica popup sullo schermo, fornendo un rapido feedback o informazioni dopo aver fatto clic su un marcatore della mappa.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/naviga"><strong>Naviga</strong></a></td><td>Reindirizza l'utente a un'altra pagina del sito o a un URL, guidandolo verso informazioni più dettagliate sulla posizione cliccata.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-modale-di-avviso"><strong>Apri finestra modale di avviso</strong></a></td><td>Apre una finestra modale con un messaggio di avviso, presentando informazioni importanti o avvertimenti sulla posizione selezionata.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-conferma"><strong>Apri conferma</strong></a></td><td>Attiva una finestra di dialogo di conferma, usata per azioni che richiedono un'ulteriore conferma dell'utente, come la partecipazione a un evento.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-di-dialogo-del-flusso"><strong>Apri dialogo Flow</strong></a></td><td>Apre una finestra di dialogo che esegue un Salesforce Flow, avviando workflow o processi relativi alla posizione cliccata.</td></tr></tbody></table>

***

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                                           | Descrizione                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Titolo elenco**                              | Imposta un titolo per il tuo elenco della mappa.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Vista elenco**                               | <p>Questa funzione è particolarmente utile per consentire agli utenti di visualizzare un elenco dettagliato dei luoghi o degli elementi sulla mappa.</p><ul><li><strong>Auto</strong>: Determina automaticamente la vista migliore.</li><li><strong>Visibile</strong>: Mantiene la vista elenco sempre visibile.</li><li><strong>Nascosto</strong>: Nasconde la vista elenco.</li></ul>                                                                                                                                                                                  |
| **Livello di zoom**                            | <p>I livelli di zoom vanno da 1 a 22 nei browser desktop e da 1 a 20 sui dispositivi mobili.</p><p>Ecco una guida rapida a ciò che generalmente mostra ciascun livello di zoom:</p><ul><li>Livello 1: L'intero mondo</li><li>Livello 5: Un continente o una vasta massa continentale</li><li>Livello 10: Una città</li><li>Livello 15: Dettagli a livello stradale</li><li>Livello 20: Singoli edifici</li></ul>                                                                                                                                                         |
| **Disabilita trascinamento**                   | Impedisci agli utenti di trascinare la vista della mappa.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Nascondi i controlli di zoom**               | Rimuovi i controlli di zoom avanti/indietro dalla mappa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Disabilita zoom con la rotellina del mouse** | Disattiva lo zoom utilizzando la rotellina di scorrimento del mouse                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Disabilita doppio clic**                     | Impedisci che il doppio clic ingrandisca la mappa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Disabilita UI predefinita**                  | Rimuovi la normale interfaccia 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**                               | <ul><li><strong>Manuale</strong>: Aggiungi manualmente gli indicatori della mappa.</li><li><strong>Query</strong>: Usa i dati di Salesforce con la mappatura dei dati per il posizionamento automatico degli indicatori</li></ul>                                                                                                                                                                                                                                                                                                                                        |
| **Posizione del centro mappa**                 | Specifica il punto centrale iniziale della mappa                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Opzioni di filtraggio**                      | Imposta filtri per la mappa, visualizzati come popover                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Opzioni motore di ricerca**                  | <ul><li><strong>Segnaposto</strong>: Testo visualizzato nella barra di ricerca prima dell'inserimento.</li><li><strong>Posizione</strong>: Scegli tra sinistra, destra, centro o riempi per la posizione della barra di ricerca</li></ul>                                                                                                                                                                                                                                                                                                                                |
| **Dimensione**                                 | <ul><li><strong>Larghezza e altezza</strong>: Specifica le dimensioni del componente mappa.</li></ul><p>"<strong><code>Overflow</code></strong>" indica come viene gestito o visualizzato il contenuto che supera i limiti del suo contenitore. 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.</p><ul><li><strong>Overflow</strong>: Controlla come viene gestito il contenuto in overflow.</li></ul> |
| {% endtab %}                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

{% tab title="🎨 Stile" %}

{% endtab %}
{% endtabs %}

***

## Esempi di casi d'uso

### Esempio 1: Mappa reattiva degli account

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

Dai vita ai dati dei tuoi account con una mappa interattiva che reagisce istantaneamente alle selezioni dell'utente. Collegando il componente Map alla tua tabella dati Accounts, puoi visualizzare le posizioni di fatturazione precise nel momento in cui un rappresentante fa clic su qualsiasi record dell'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 semplificata degli account:** I rappresentanti possono individuare visivamente gli account senza mai lasciare la pagina

***

#### **Prima di iniziare**

* **Componente Accounts Data Table:** Assicurati che un componente Accounts Data Table sia già stato inserito nella pagina con il nome API `AccountsTable`

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente Map**

* 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 una data source**

* Crea una query sull'oggetto Account
* Applica il seguente filtro: Id = `{{AccountsTable.selectedRecord.Id}}`
  {% endstep %}

{% step %}

#### **Imposta le data mappings**

* Imposta Title su `Account Name`
* In Location, imposta Latitude su `Billing Latitude` e Longitude su `Billing Longitude`
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

* Avvia l'anteprima, seleziona un record nella tabella Accounts Data Table e conferma che la mappa si aggiorna per riflettere la corrispondente posizione di fatturazione
  {% endstep %}
  {% endstepper %}

### Esempio 2: Tracciamento degli ordini dei clienti

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

Offri ai tuoi clienti una visibilità in tempo reale sulla posizione dei 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 del processo.

***

#### **Cosa otterrai**

* **Visibilità degli ordini in tempo reale:** I clienti possono vedere la posizione attuale del loro ordine rappresentata 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 Geolocation personalizzato:** Assicurati che sia stato creato un campo Geolocation personalizzato sull'oggetto Order per memorizzare le coordinate di tracciamento in tempo reale

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente Map**

* 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 una data source**

* Crea una query sull'oggetto Order
  {% endstep %}

{% step %}

#### **Imposta le data mappings**

* Imposta Title su `Order Number`
* Imposta Type su `Pin`
* In Location, imposta Latitude su `Tracking Geolocation (Latitude)` e Longitude su `Tracking Geolocation (Longitude)`
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

* Avvia l'anteprima e verifica che ogni ordine appaia come un pin sulla mappa nella sua corretta posizione tracciata
  {% endstep %}
  {% endstepper %}