> 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-de/experience-components/ax-map.md). # 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 Basis von Adressfeldern oder Breitengrad-/Längengradkoordinaten anzuzeigen – etwa nahegelegene Servicestandorte, Kundenstandorte, Ergebnisse eines Filialfinders oder Veranstaltungsorte. Benutzer können auf Marker klicken, um Datensatzdetails 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, Standortfinder für Veranstaltungen, Ansichten der Kundennähe oder überall dort, wo Portalbenutzer geografische Daten visualisieren müssen. {% hint style="success" %} Die Avonni Map ist eine [Reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.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 url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} ## Konfiguration Das Verständnis des Konfigurationsprozesses, insbesondere der Abschnitte Datenquelle und Datenzuordnungen, ist entscheidend, um diese Komponente effektiv zu nutzen. ### Datenquelle Im Abschnitt Datenquelle verbinden Sie die Avonni Map mit Ihren Salesforce-Daten. Dafür haben Sie zwei Optionen.
| Typ der Datenquelle | Beschreibung | Anwendungsfall | | ------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------- | | **Manuell** | Kartenmarker manuell eingeben. | Ideal für nicht-dynamische Daten, Tests und Demos. | | **Abfrage** | Erstellen Sie eine Abfrage, um die Karte automatisch mit Salesforce-Daten zu füllen. | Geeignet für dynamische, Echtzeit- und große Datensätze. | ### Datenzuordnung Im Abschnitt Datenzuordnungen können Sie Ihre Kartenkomponente aktivieren, indem Sie angeben, wie die Felder zugeordnet werden sollen. Dazu gehört die Zuordnung von Feldern, etwa Standortkoordinaten aus Ihrer Datenquellenkonfiguration, zu den relevanten Kartenattributen.
Freigabe des Datenmodells mit Avonni Map **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Berücksichtigung der Org-Einstellungen:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabe-Konfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine-Einmischungs-Richtlinie:** Diese Komponenten verändern oder beeinträchtigen Ihre bereits 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 festgelegten Freigabeeinstellungen und Benutzerberechtigungen gesteuert
Sie müssen sich auf den Abschnitt Standort konzentrieren, um sicherzustellen, dass Ihre Datenzuordnungen korrekt eingerichtet sind, insbesondere bei der Zuordnung 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, Städtenamen 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 Das Attribut Filter ermöglicht es Ihnen, bestimmte Felder auszuwählen, um die in der Kartenkomponente angezeigten Marker zu filtern und einzugrenzen.
#### Einstellungen pro Marker Mit einer **Manuell** Datenquelle legt jede von Ihnen hinzugefügte Marker-Zeile ihre eigenen Felder offen: * **Titel** und **Beschreibung** beschriftet den Marker und sein Popup. * **Ort** platziert den Marker mithilfe von Adressfeldern (Straße, Stadt, Bundesland, Postleitzahl, Land) oder **Breite**/**Länge**. * **Typ** legt die Form des Markers fest – die gleichen Optionen wie bei Center Location (`Standard`, `Kreis`, `Rechteck`, `Polygon`, `Pin`, `Benutzerdefiniertes Icon`). * Formmarker fügen Farbsteuerungen hinzu – **Füllfarbe**/**Fülltransparenz** und **Konturfarbe**/**Konturtransparenz**/**Konturstärke** – plus Formgeometrie: **Radius** (Kreise), **Begrenzungen** (Rechtecke) oder **Pfade** (Polygone). * **Symbol** legt ein benutzerdefiniertes Markersymbol fest, und eine **Bei Auswahl** Interaktion kann ausgelöst werden, wenn der Marker geklickt wird. ### Karteneinstellungen **Typ** wählt die Karten-Engine – **Google Maps** (Standard) oder **Leaflet**. Wählen Sie **Google Maps** für die vertraute Salesforce-Lightning-Karte – die einfachste Option, aber sie begrenzt die Anzeige auf 1.000 Marker. Wählen Sie **Leaflet** für größere Datensätze (keine Marker-Begrenzung), benutzerdefinierte Kartenkacheln oder erweiterte Formmarker (Kreise, Polygone, Rechtecke). **Listentitel** legt einen Titel für die Standortliste fest, und **Listenansicht** steuert, ob diese Liste angezeigt wird: `auto` (wird nur angezeigt, wenn mehrere Marker vorhanden sind – Standard), `sichtbar` (immer angezeigt), oder `ausgeblendet`. **Zoomstufe** legt den anfänglichen Zoom fest. Wenn nichts gesetzt ist, passt sich die Karte automatisch an, um alle von Ihnen platzierten Marker anzuzeigen.
Die Zoomstufen reichen von 1 bis 22 in Desktop-Browsern und von 1 bis 20 auf Mobilgeräten. Hier ist ein kurzer Überblick darüber, was jede Stufe im Allgemeinen zeigt: * Stufe 1: Die ganze 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 Weitere ausführliche Informationen finden Sie in der Google-Maps-API-Dokumentation zu [Zoomstufen](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) . **Zoom-Steuerelemente ausblenden** entfernt die Zoom-in/-out-Steuerelemente, und **Position der Zoomsteuerung** legt fest, wo diese Steuerelemente auf der Karte erscheinen. Die folgenden Umschalter steuern, wie Benutzer mit der Karte interagieren, für ein schlankeres, fokussierteres Erlebnis:
**Ziehen deaktivieren** verhindert das Verschieben der Karte durch Klicken und Ziehen. **Zoomen mit dem Mausrad deaktivieren** stoppt das Zoomen mit dem Mausrad. **Doppelklick-Zoom deaktivieren** deaktiviert den Zoom per Doppelklick. **Standard-UI deaktivieren** entfernt standardmäßige Kartenelemente (wie den Street-View-Umschalter) für eine aufgeräumtere Anzeige. **Ziehbare Marker** ermöglicht es Benutzern, Marker zu ziehen, um sie neu zu positionieren, und **Marker-Autopan deaktivieren** verhindert, dass die Karte automatisch schwenkt, um Marker im Sichtfeld zu halten. **Fußzeile anzeigen** zeigt eine Fußzeile auf der Karte an (nützlich für Datenquellen oder eine Legende), und **Suche anzeigen** fügt eine Suchleiste hinzu, damit Benutzer einen bestimmten Ort finden und dorthin zoomen können. **Kopfzeilenaktionen** fügen der Kopfzeile der Karte Aktionsschaltflächen hinzu. ### Center Location Standardmäßig fokussiert sich die Karte, wenn mehrere Marker vorhanden sind, auf einen zentralen Punkt, der aus ihren Standorten berechnet wird. Die **Center Location** Einstellung hebt dies auf:
* **Breite** und **Länge** legen Sie die exakten Mittelpunktkoordinaten fest – diese haben Vorrang vor den Adressfeldern. * **Straße**, **Stadt**, **Bundesland**, **Postleitzahl** und **Land** zentrieren die Karte anhand der Adresse, wenn keine Koordinaten angegeben sind. * **Als Marker anzeigen** zeigt den Mittelpunkt als eigenen Marker auf der Karte an. * **Markertyp** legt die Form dieses Markers fest – `Standard`, `Kreis`, `Rechteck`, `Polygon`, `Pin`, oder `Benutzerdefiniertes Icon` – mit typspezifischen **Attribute des Markertyps** (z. B. Radius, Begrenzungen oder Pfad). ### Clustering **Cluster-Attribute** gruppieren nahe beieinander liegende Marker, damit dichte Karten lesbar bleiben: * **Cluster** aktiviert Clustering. * **Maximaler Cluster-Radius** legt fest, wie weit sich ein Cluster in Pixeln von seinem zentralen Marker aus erstreckt (Standard: 80). * **Clustering ab Zoom deaktivieren** beendet Clustering auf und unter einer gewählten Zoomstufe. * **Abdeckung bei Hover anzeigen** zeichnet die Begrenzung der Marker eines Clusters nach, wenn der Benutzer darüber fährt. ### Filterung & Suche **Filter** (oben in den Datenzuordnungen festgelegt) wählen Sie aus, nach welchen Feldern Benutzer Marker filtern können, und **Attribute des Filtermenüs** steuern das Filtermenü – seine **Typ** (`horizontales`, `Popover`, oder `Panel`), die Sortierreihenfolge des Auswahllistenfilters, ob leere Auswahllistenwerte ausgeblendet werden und ob Filterwerte kaskadieren. **Attribute der Suchmaschine** konfigurieren die Suchleiste (erfordert **Suche anzeigen**): ihren **Platzhalter** Text und **Position** (`links`, `rechts`, `zentriert`, oder `füllen`). ## 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 bietet nach dem Klicken auf eine Kartenmarkierung schnelles Feedback oder Informationen.
NavigierenLeitet den Benutzer zu einer anderen Seite in Ihrer Site oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.
Alarm-Modalfenster öffnenÖffnet ein modales Fenster mit einer Warnmeldung und präsentiert wichtige Informationen oder Warnungen 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, wie z. B. die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenÖffnet einen Dialog, der einen Salesforce Flow ausführt und Workflows oder Prozesse initiiert, die mit dem angeklickten Ort zusammenhängen.
## Styling {% tabs %} {% tab title="Größe" %} Steuert die Abmessungen der Karte (Breite / Höhe / Überlauf). {% endtab %} {% tab title="Außenabstand" %} Steuert den äußeren Abstand um die Karte herum. {% endtab %} {% tab title="Innenabstand" %} Steuert den inneren Abstand der Karte. {% endtab %} {% endtabs %} ## Anwendungsfälle | Name | Beschreibung | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**Richten Sie die Karte so ein, dass Datensatzdetailsinformationen angezeigt werden**](/experience-cloud/experience-cloud-de/anleitungen/components/map/set-up-the-map-to-show-record-details-information.md) | Lernen Sie, wie Sie mit Avonni Map Datensätze in Experience Cloud anzeigen. | ### Beispiel 1: Reaktive Kontokarte {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} Erwecken Sie Ihre Kontodaten mit einer interaktiven Karte zum Leben, die sofort auf Benutzerauswahlen reagiert. Indem Sie die Kartenkomponente mit Ihrer Konten-Datentabelle verbinden, können Sie präzise Rechnungsstandorte anzeigen, sobald ein Mitarbeiter auf einen Kontodatensatz klickt. *** #### **Was Sie erreichen werden** * **Kontextbezogene Zuordnung:** Die Karte aktualisiert sich automatisch und zeigt den Rechnungsstandort des ausgewählten Kontos basierend auf der Auswahl des Mitarbeiters in der Datentabelle an * **Vereinfachte Kontonavigation:** Mitarbeiter können Konten visuell lokalisieren, ohne die Seite zu verlassen *** #### **Bevor Sie beginnen** * **Komponente der Konten-Datentabelle:** Stellen Sie sicher, dass bereits eine Accounts Data Table-Komponente mit dem API-Namen `AccountsTable` *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Kartenkomponente hinzu** * 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 %} #### **Eine Datenquelle festlegen** * 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` * Legen Sie unter Standort Breitengrad fest auf `Rechnungs-Breitengrad` und Längengrad auf `Rechnungs-Lä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: Kundenbestellverfolgung {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Geben Sie Ihren Kunden in Echtzeit Einblick, wo sich ihre Bestellungen befinden. Indem Sie Geolokalisierungsdaten direkt aus dem Order-Objekt zuordnen, können Sie ein transparentes, intuitives Tracking-Erlebnis schaffen, das Kunden bei jedem Schritt auf dem Laufenden hält. *** #### **Was Sie erreichen werden** * **Sichtbarkeit von Bestellungen in Echtzeit:** Kunden können den aktuellen Standort ihrer Bestellung sehen, der auf einer interaktiven Karte dargestellt wird * **Vertrauen durch Transparenz:** Ein klares, visuelles Tracking-Erlebnis reduziert Supportanfragen und verbessert die Kundenzufriedenheit *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Geolocation-Feld:** Stellen Sie sicher, dass im Order-Objekt ein benutzerdefiniertes Geolocation-Feld erstellt wurde, um die Tracking-Koordinaten in Echtzeit zu speichern *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Kartenkomponente hinzu** * 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 %} #### **Eine Datenquelle festlegen** * Erstellen Sie eine Abfrage für das Order-Objekt {% endstep %} {% step %} #### **Datenzuordnungen festlegen** * Legen Sie Titel fest auf `Bestellnummer` * Legen Sie den Typ fest auf `Pin` * Legen Sie unter Standort Breitengrad fest auf `Tracking-Geolocation (Breitengrad)` und Längengrad auf `Tracking-Geolocation (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 an ihrem korrekten verfolgten Standort auf der Karte angezeigt wird {% 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-de/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.