# AX - Karte ## Übersicht **AX - Karte** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze als interaktive Standortmarker auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Portalbenutzern Standorte auf Grundlage von Adressfeldern oder Breiten-/Längengradkoordinaten anzuzeigen – etwa nahegelegene Servicestandorte, Kundenseiten, Ergebnisse für die Filialsuche oder Veranstaltungsorte. Benutzer können auf Marker klicken, um Detailinformationen zum Datensatz anzuzeigen und zu Datensätzen zu navigieren. Ziehen Sie Standortdaten aus jedem Standard- oder benutzerdefinierten Objekt in Experience Builder. Perfekt für Filialsuchen, Karten von Servicegebieten, Finder für Veranstaltungsorte, Ansichten zur Kundennähe oder überall dort, wo Portalbenutzer geografische Daten visualisieren müssen. {% hint style="success" %} Die Avonni Map ist ein [Reaktiver Datenbaustein](/experience-cloud/experience-cloud-de/erste-schritte/reaktive-komponenten.md) {% endhint %} *** ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Kartenkomponente kennenzulernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed flowId="ZiiaXHHeJ3PWe6UcgYBN" url="" %} *** ## Tutorials | Name | Beschreibung | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | [**Richten Sie die Karte so ein, dass Datensatzdetails angezeigt werden**](/experience-cloud/experience-cloud-de/tutorials/komponenten/ordnen-sie/die-karte-so-einrichten-dass-datensatzdetailinformationen-angezeigt-werden.md) | Lernen Sie, Datensätze in Experience Cloud mit Avonni Map anzuzeigen. | *** ## Die Karte konfigurieren Das Verständnis des Konfigurationsprozesses, insbesondere der Abschnitte Datenquelle und Datenzuordnungen, ist entscheidend, um diese Komponente effektiv zu nutzen. ### Konfiguration der Datenquelle Im Abschnitt Datenquelle verbinden Sie die Avonni Map mit Ihren Salesforce-Daten. Sie haben zwei Optionen.
| Datenquellentyp | Beschreibung | Anwendungsfall | | ------------------------ | -------------------------------------------------------------------------------------- | -------------------------------------------------------- | | **Manuelle Datenquelle** | Daten manuell in die Datentabelle eingeben. | Ideal für nicht dynamische Daten, Tests und Demos. | | **Abfrage** | Erstellen Sie eine Abfrage, um die Tabelle automatisch mit Salesforce-Daten zu füllen. | Geeignet für dynamische, Echtzeit- und große Datensätze. | ### Konfiguration der Datenzuordnungen Im Abschnitt Datenzuordnungen können Sie Ihre Kartenkomponente aktivieren, indem Sie angeben, wie die Felder zugeordnet werden sollen. Dies umfasst das Abstimmen von Feldern, z. B. Standortkoordinaten aus Ihrer Datenquellenkonfiguration, mit den entsprechenden Kartenattributen.
Datenmodellfreigabe mit Avonni Map **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Beachtung der Organisationseinstellungen:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabekonfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine Beeinträchtigung:** Diese Komponenten verändern oder beeinflussen Ihre im Voraus festgelegten Datenfreigaberegeln in keiner Weise. * **Kontrollierte Sichtbarkeit und Zugriff:** Die Möglichkeit, Datensätze über Avonni-Komponenten anzuzeigen und mit ihnen zu interagieren, wird durch die von Ihrer Organisation definierten Freigabeeinstellungen und Benutzerberechtigungen gesteuert
Sie müssen sich auf den Abschnitt Standort konzentrieren, um sicherzustellen, dass Ihre Datenzuordnungen korrekt eingerichtet sind, insbesondere beim Zuordnen von Standorten. Hier ist der Grund: 1. **Datenzuordnungen konfigurieren**: Um sicherzustellen, dass die Kartenkomponente die richtigen Informationen anzeigt, müssen Sie Salesforce-Datenfelder ihren entsprechenden Standortbezeichnungen zuordnen. Beispielsweise ordnen Sie ein Salesforce-Feld mit Straßenadressen der Bezeichnung 'street' in der Kartenkomponente zu, Ortsnamen der Bezeichnung 'city' und so weiter. 2. **Bedeutung der Genauigkeit**: Genaue Zuordnungen sind entscheidend. Die Kartenkomponente könnte falsche Informationen anzeigen, wenn das falsche Salesforce-Feld einer Standortbezeichnung zugeordnet wird. Wenn beispielsweise das Feld 'city' fälschlicherweise der Bezeichnung 'postal code' zugeordnet wird, könnte die Karte einen Standort in einer völlig anderen Stadt oder sogar in einem anderen Land anzeigen.
#### Filter Mit dem Attribut Filter können Sie bestimmte Felder auswählen, um die in der Kartenkomponente angezeigten Marker zu filtern und einzugrenzen.
### Weitere Einstellungen #### Listenansicht Diese Funktion zeigt die Standortliste an oder blendet sie aus. Gültige Werte sind sichtbar, verborgen oder automatisch. Der Standardwert ist automatisch; dabei wird die Liste nur angezeigt, wenn mehrere Marker vorhanden sind. #### Zoomstufe In der Kartenkomponente können Sie die Zoomstufe anpassen, um sich auf unterschiedliche Bereiche zu konzentrieren, von der Welt bis hin zu einzelnen Gebäuden. Wenn Sie keine Zoomstufe festlegen, passt sich die Karte automatisch an, um alle darauf platzierten Marker anzuzeigen.
Im Eigenschaftenbereich gibt es eine Option, den Zoom manuell festzulegen. Die Zoomstufen reichen auf Desktop-Browsern von 1 bis 22 und auf Mobilgeräten von 1 bis 20. Hier ist ein kurzer Leitfaden dazu, was jede Zoomstufe im Allgemeinen anzeigt: * Stufe 1: Die gesamte Welt * Stufe 5: Ein Kontinent oder eine große Landmasse * Stufe 10: Eine Stadt * Stufe 15: Details auf Straßenebene * Stufe 20: Einzelne Gebäude Siehe die Google-Maps-API-Dokumentation zu [Zoomstufen](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) für ausführlichere Informationen. #### UI-Verhalten der Kartenkomponente
Mit diesen Einstellungen können Sie steuern, wie Benutzer mit der Karte interagieren, und so ein optimierteres und fokussierteres Benutzererlebnis schaffen. Vom Deaktivieren bestimmter Zoom- und Ziehfunktionen bis hin zum Hinzufügen nützlicher Funktionen wie einer Suchleiste oder einer Fußzeile hat jede Einstellung einen eigenen Zweck:
EinstellungBeschreibung
Ziehen deaktivierenVerhindert das Verschieben der Karte per Klicken und Ziehen und hält sie an einer festen Position.
Zoom-Steuerelemente ausblendenEntfernt die Zoom-in-/Zoom-out-Steuerelemente und sorgt für eine einheitliche Zoomstufe auf der Karte.
Zoomen per Mausrad deaktivierenVerhindert das Vergrößern oder Verkleinern der Karte mit dem Mausrad und stellt so eine konstante Zoomstufe sicher.
Doppelklick-Zoom deaktivierenDeaktiviert das Heranzoomen per Doppelklick auf die Karte und hält eine feste Zoomstufe aufrecht.
Standard-UI deaktivierenEntfernt standardmäßige Kartenelemente wie den Umschalter für die Straßenansicht und sorgt so für eine sauberere Kartendarstellung.
Fußzeile anzeigenZeigt eine Fußzeile auf der Karte mit zusätzlichen Informationen wie Datenquellen der Karte oder einer Legende an.
DurchsuchbarFügt der Karte eine Suchleiste hinzu und ermöglicht Benutzern, bestimmte Orte oder Punkte leicht zu finden und heranzuzoomen.
#### Kartenmittelpunkt Wenn sich mehrere Marker auf der Karte befinden, fokussiert sie automatisch auf einen zentralen Punkt nahe der Mitte aller Marker. Dieser Punkt wird anhand ihrer Standorte berechnet.
*** ## Interaktionen Für die Kartenkomponente gibt es eine Interaktion „Bei Auswahl“. Mit dieser Funktion können Sie festlegen, welche Aktion ausgeführt werden soll, wenn Benutzer auf einen Kartenmarker klicken.
InteraktionstypBeschreibung
Toast anzeigenZeigt eine kurze Popup-Benachrichtigung auf dem Bildschirm an und liefert nach dem Klicken auf einen Kartenpunkt eine schnelle Rückmeldung oder Information.
NavigierenLeitet den Nutzer zu einer anderen Seite in Ihrer Website oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.
Warnmodaldialog öffnenÖffnet ein modales Fenster mit einer Warnmeldung und präsentiert wichtige Informationen oder Warnhinweise zum ausgewählten Ort.
Bestätigungsdialog öffnenLöst ein Bestätigungsdialogfeld aus, das für Aktionen verwendet wird, die eine zusätzliche Benutzerbestätigung erfordern, z. B. die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenÖffnet einen Dialog, der einen Salesforce Flow ausführt und Workflows oder Prozesse für den angeklickten Ort startet.
*** ## Einstellungen {% tabs %} {% tab title="🎛️ Eigenschaften" %} | Name | Beschreibung | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Listenüberschrift** | Legen Sie einen Titel für Ihre Kartenliste fest. | | **Listenansicht** |

Diese Funktion ist besonders nützlich, damit Benutzer eine detaillierte Liste der Orte oder Elemente auf der Karte sehen können.

| | **Zoomstufe** |

Die Zoomstufen reichen auf Desktop-Browsern von 1 bis 22 und auf Mobilgeräten von 1 bis 20.

Hier ist ein kurzer Leitfaden dazu, was jede Zoomstufe im Allgemeinen anzeigt:

| | **Ziehen deaktivieren** | Verhindert, dass Benutzer die Kartenansicht ziehen. | | **Zoom-Steuerelemente ausblenden** | Entfernt die Zoom-in-/Zoom-out-Steuerelemente von der Karte | | **Zoomen per Mausrad deaktivieren** | Deaktiviert das Zoomen mit dem Mausrad | | **Doppelklick deaktivieren** | Verhindert, dass ein Doppelklick die Karte vergrößert | | **Standard-UI deaktivieren** | Entfernt die standardmäßige Google-Maps-Oberfläche für ein saubereres Erscheinungsbild | | **Fußzeile anzeigen** | Fügt der Kartenkomponente einen Fußzeilenbereich hinzu | | **Durchsuchbar** | Aktiviert eine Suchfunktion innerhalb der Karte | | **Datenquelle** | | | **Kartenmittelpunkt** | Geben Sie den anfänglichen Mittelpunkt der Karte an | | **Filteroptionen** | Richten Sie Filter für die Karte ein, die als Popover angezeigt werden | | **Optionen der Suchfunktion** | | | **Größe** |

"Überlauf" bezieht sich darauf, wie Inhalte behandelt oder angezeigt werden, die die Grenzen ihres Containers überschreiten. Wenn der Inhalt innerhalb einer Layout-Komponente zu groß ist, um in die zugewiesenen Abmessungen (Höhe und Breite) zu passen, bestimmt die Überlaufeinstellung, was mit dem überschüssigen Inhalt geschieht.

| | {% endtab %} | | {% tab title="🎨 Gestaltung" %} {% endtab %} {% endtabs %} *** ## Anwendungsbeispiele ### Beispiel 1: Reaktive Kontokarte {% @arcade/embed flowId="Dxon9206UTTMphdamjrL" url="" %} Bringen Sie Ihre Kontodaten mit einer interaktiven Karte zum Leben, die sofort auf Benutzerauswahlen reagiert. Indem Sie die Kartenkomponente mit Ihrer Accounts Data Table verbinden, können Sie präzise Rechnungsadressen anzeigen, sobald ein Mitarbeiter auf einen beliebigen Kontodatensatz klickt. *** #### **Was Sie erreichen werden** * **Kontextbezogene Kartierung:** Die Karte wird automatisch aktualisiert, um den Rechnungsstandort des ausgewählten Kontos basierend auf der Auswahl des Mitarbeiters in der Datentabelle anzuzeigen * **Optimierte Kontonavigation:** Mitarbeiter können Konten visuell lokalisieren, ohne die Seite jemals zu verlassen *** #### **Bevor Sie beginnen** * **Komponente Accounts Data Table:** Stellen Sie sicher, dass bereits eine Accounts Data Table-Komponente mit dem API-Namen auf der Seite platziert ist `AccountsTable` *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Kartenkomponente hinzufügen** * Ziehen Sie die Komponente AX – Map auf die Experience-Builder-Arbeitsfläche {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Legen Sie den API-Namen fest auf `MapAccount` * Legen Sie den Typ fest auf `Leaflet` {% endstep %} {% step %} #### **Legen Sie eine Datenquelle fest** * Erstellen Sie eine Abfrage für das Account-Objekt * Wenden Sie den folgenden Filter an: Id = `{{AccountsTable.selectedRecord.Id}}` {% endstep %} {% step %} #### **Datenzuordnungen festlegen** * Legen Sie Titel fest auf `Kontoname` * Unter Standort setzen Sie Breitengrad auf `Abrechnungsbreitengrad` und Längengrad auf `Abrechnungslängengrad` {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Starten Sie die Vorschau, wählen Sie einen Datensatz in der Accounts Data Table aus und bestätigen Sie, dass die Karte aktualisiert wird, um den entsprechenden Rechnungsstandort widerzuspiegeln {% endstep %} {% endstepper %} ### Beispiel 2: Kundenauftragsverfolgung {% @arcade/embed flowId="tiVuRRBHNCbcUb5qoGQL" url="" %} Geben Sie Ihren Kunden in Echtzeit Einblick, wo sich ihre Bestellungen befinden. Durch die direkte Zuordnung von Geolokalisierungsdaten aus dem Order-Objekt können Sie ein transparentes, intuitives Tracking-Erlebnis schaffen, das Kunden auf jedem Schritt informiert hält. *** #### **Was Sie erreichen werden** * **Live-Bestellübersicht:** Kunden können den aktuellen Standort ihrer Bestellung auf einer interaktiven Karte sehen * **Vertrauen durch Transparenz:** Ein klares, visuelles Tracking-Erlebnis reduziert Supportanfragen und verbessert die Kundenzufriedenheit *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Geolokalisierungsfeld:** Stellen Sie sicher, dass auf dem Order-Objekt ein benutzerdefiniertes Geolokalisierungsfeld erstellt wurde, um Tracking-Koordinaten in Echtzeit zu speichern *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Kartenkomponente hinzufügen** * Ziehen Sie die Komponente AX – Map auf die Experience-Builder-Arbeitsfläche {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Legen Sie den API-Namen fest auf `TrackingMap` * Legen Sie den Typ fest auf `Leaflet-Karte` {% endstep %} {% step %} #### **Legen Sie eine Datenquelle fest** * Erstellen Sie eine Abfrage für das Order-Objekt {% endstep %} {% step %} #### **Datenzuordnungen festlegen** * Legen Sie Titel fest auf `Bestellnummer` * Legen Sie Typ fest auf `Pin` * Unter Standort setzen Sie Breitengrad auf `Tracking-Geolokalisierung (Breitengrad)` und Längengrad auf `Tracking-Geolokalisierung (Längengrad)` {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Starten Sie die Vorschau und überprüfen Sie, ob jede Bestellung als Pin auf der Karte an ihrem korrekt verfolgten Standort angezeigt wird {% endstep %} {% endstepper %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-karte-1.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.