> 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 - Map ## Übersicht **AX - Karte** zeigt Salesforce-Datensätze aus jedem Standard- oder benutzerdefinierten Objekt als Marker auf Ihren Experience-Sites-Seiten an, platziert nach Adresse oder nach Breiten- und Längengrad. Site-Benutzer klicken auf einen Marker, um die Details des Datensatzes zu sehen oder ihn zu öffnen. Verwenden Sie es für Filialfinder, Servicegebiete, Veranstaltungsorte oder Kundenstandorte. {% hint style="success" %} Die Avonni Map ist eine [reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %}
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's installations around Colorado Springs.

Eine reaktive Karte: Wenn in der AX - Datentabelle ein Installateur ausgewählt wird, verschiebt sich die AX - Karte zu den Häusern, die dieser Installateur ausgestattet hat.

## Erste Schritte Ein kurzes interaktives Tutorial zu den Grundlagen. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} ## Konfiguration Wählen Sie die Karte im Experience Builder aus, um ihre Einstellungen im Eigenschaften-Panel zu öffnen. ### Datenquelle Verbindet die Karte mit Ihren Salesforce-Daten.
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's mailing city and department.

Eine Abfragedatenquelle auf Contact, gefiltert nach der in einer AX - Datentabelle namens installers ausgewählten Zeile.

| Typ der Datenquelle | Marker | Am besten geeignet für | | ------------------- | ------------------------------------------- | -------------------------------------- | | **Manuell** | Von Hand eingegeben. | Feste Daten, Tests, Demos. | | **Abfrage** | Wird durch eine Salesforce-Abfrage geladen. | Live-, Echtzeit- und große Datensätze. | ### Datenzuordnung In **Datenzuordnungen**, wählen Sie das Feld hinter jedem Teil eines Markers aus. **Wert** identifiziert ihn (Standard `{{Record.Id}}`). **Ort** hängt von der Engine ab:
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.

In Leaflet verwendet Ort Breiten- und Längengrad sowie optional eine Stadt.

| Engine | Ort-Felder | | --------------- | -------------------------------------------------------------------------------------------------------------------------- | | **Google Maps** | Eine Adresse (**Straße**, **Stadt**, **Bundesstaat**, **Postleitzahl**, **Land**) oder **Breitengrad** und **Längengrad**. | | **Leaflet** | **Breitengrad** und **Längengrad**, erforderlich. **Stadt** optional, für die Haltestellenliste der Route und CSV. |
Freigabe des Datenmodells mit Avonni Map Avonni-Komponenten folgen den Freigabeeinstellungen und Benutzerberechtigungen Ihrer Organisation und ändern Ihre Freigaberegeln niemals: Ein Site-Benutzer sieht und bearbeitet nur die Datensätze, auf die er zugreifen kann.
#### Filter **Filter**: die Felder, nach denen Site-Benutzer Marker filtern (Menü: siehe Filtern & Suchen). #### Suchfelder **Suchfelder**: die Felder, die die Suchleiste durchsucht. Erfordert **Suche anzeigen**. #### Marker-spezifische Einstellungen Mit einer **Manuell** Datenquelle hat jede Marker-Zeile ihre eigenen Felder:
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.

Die sechs Markertypen auf einer Karte. Obere Reihe: Standard, Stecknadel und Kreis. Untere Reihe: Rechteck, Polygon und benutzerdefiniertes Symbol, hier ein Stern, gezeichnet aus einem SVG-Pfad.

| Einstellung | Was es bewirkt | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | **Titel**, **Beschreibung** | Marker- und Popup-Beschriftungen. | | **Symbolname** | Marker-Symbol. | | **Typ** | **Standard**, **Kreis**, **Rechteck**, **Polygon**, **Stecknadel** oder **Benutzerdefiniertes Symbol**. Alle sechs in beiden Engines. | | **Radius**, **Grenzen**, **Pfade** | Geometrie der Form: Kreisradius in Metern (Standard 25), Rechteckkanten, Polygonpunkte. | | **Füllfarbe**, **Füllopazität**, **Konturfarbe**, **Konturopazität**, **Konturstärke** | Formfarben. | | **SVG-Pfad**, **Skalierung**, **Anker** | Die **Benutzerdefiniertes Symbol** Zeichnung mit eigener Füllung und Kontur. | | **Ort**, **Bei Auswahl**, **Beim Ziehen** | Wie in der Ort-Tabelle oben und den Interaktionen unten. | ### Karteneinstellungen
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.

Das AX - Map-Panel mit auf Leaflet gesetztem Typ: die Karteneinstellungen, dann die Abschnitte, die den Rest der Konfiguration enthalten.

**Typ** wählt die Engine aus. **Google Maps** (Standard): die vertraute Lightning-Karte, am einfachsten, bis zu 1.000 Marker. **Leaflet**: kein Marker-Limit, fügt Clustering, Zeichnen und Routen hinzu, platziert Marker nur per Koordinaten und benötigt `https://tile.openstreetmap.org` in den Vertrauenswürdigen Sites Ihrer Organisation, um seine Kacheln zu laden.
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.

Typ auf Google Maps gesetzt. Der Kreis über dem Hyde Park zeigt, dass Formmarker auch in Google Maps funktionieren.

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.

Typ auf Leaflet gesetzt, mit denselben Datensätzen. Durch Klicken auf einen Marker wird sein Popup geöffnet.

| Einstellung | Engine | Was es bewirkt | | ------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------- | | **Listentitel** | Google Maps | Titel der Standortliste. | | **Listenansicht** | Google Maps | **Sichtbar**, **Versteckt** oder **Automatisch** (Standard: bei mehreren Markern angezeigt). | | **Zoom-Steuerung ausblenden** | Beide | Entfernt die Zoom-Schaltflächen. | | **Position der Zoom-Steuerung** | Leaflet | Eine Kartenecke. Nicht festgelegt: die Karte entscheidet. Ausgeblendet mit **Zoom-Steuerung ausblenden**. | | **Zoomstufe** | Beide | Anfängliche Zoomstufe. Nicht festgelegt: passt alle Marker ein. | | **Ziehen deaktivieren** | Beide | Kein Verschieben per Klicken und Ziehen. | | **Zoom per Mausrad deaktivieren** | Beide | Kein Zoom per Mausrad. | | **Zoom per Doppelklick deaktivieren** | Beide | Kein Zoom per Doppelklick. | | **Standard-UI deaktivieren** | Google Maps | Blendet Standardsteuerelemente wie Street View aus. | | **Verschiebbare Marker** | Leaflet | Site-Benutzer können Marker verschieben. Ein Ziehvorgang kann ausgeführt werden **Beim Ziehen**. | | **Auto-Pan für Marker deaktivieren** | Leaflet | Kein automatisches Schwenken, um Marker im Blick zu behalten. | | **Fußzeile anzeigen** | Google Maps | Fußzeile, für Datenquellen oder eine Legende. | | **Suche anzeigen** | Beide | Suchleiste, um einen Ort zu finden und heranzuzoomen. |
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.

Listenansicht auf Sichtbar auf einer Google-Karte gesetzt. Jeder Eintrag in der Liste zeigt den Markertitel und seine Adresse.

Zoomstufen 1 bis 22 auf dem Desktop, 1 bis 20 auf Mobilgeräten. Grob gesagt: * 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 Mehr in Googles Dokumentation zu [Zoomstufen](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels).
### Kopfzeile | Einstellung | Was es bewirkt | | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Kopfzeilentitel**, **Kopfzeilenbeschriftung** | Text oben auf der Karte. | | **Textstil des Kopfzeilentitels**, **Textstil der Kopfzeilenbeschriftung** | Ein Site-Textstil für jedes, sobald sein Text festgelegt ist. | | **Name des Kopfzeilensymbols**, **Größe des Kopfzeilensymbols** | Kopfzeilensymbol und seine Größe (Standard mittel, erfordert das Symbol). | | **Kopfzeile ist verbunden** | Bündig mit der Karte: keine abgerundeten unteren Ecken oder Schatten. | | **Kopfzeilenaktionen** | Kopfzeilenschaltflächen. Jeder Eintrag in **Aktionen**: **Beschriftung**, **Name**, **Symbolname**, **Titel** (Hover-Text), **Alternativtext**, **Beim Klicken** (jede Interaktion unten außer Panel für Flow öffnen). **Sichtbare Aktionsschaltflächen**: wie viele vor einem Menü angezeigt werden. | ### Zentrum festlegen Standardmäßig zentriert sich die Karte auf ihre Marker. **Zentrum festlegen** überschreibt es: * **Breitengrad**, **Längengrad**: der genaue Mittelpunkt, vor der Adresse. * **Straße**, **Stadt**, **Bundesstaat**, **Postleitzahl**, **Land**: Zentrierung nach Adresse. Nur Google Maps. * **Als Marker anzeigen**: zeigt das Zentrum als Marker an, dessen **Typ** seine Form festlegt. ### Clustering Nur Leaflet. **Marker-Clustering** gruppiert nahe Marker, damit dichte Karten lesbar bleiben.
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.

Marker-Clustering gruppiert nahe Marker zu einem Kreis, der anzeigt, wie viele er enthält. Ein Marker ohne nahen Nachbarn bleibt ein normaler Marker.

* **Marker-Clustering aktivieren**: aktiviert, mit den folgenden Einstellungen. * **Abdeckung bei Hover**: umrandet die Marker eines Clusters bei Hover. * **Maximaler Cluster-Radius**: Reichweite vom zentralen Marker in Pixeln. Standard 80. * **Zoomstufe für Clustering deaktivieren**: kein Clustering bei und unter dieser Zoomstufe. ### Zeichnen Nur Leaflet. Site-Benutzer zeichnen Formen und können sie als Salesforce-Datei speichern.
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.

Zeichnen auf einer Leaflet-Karte: ein Gebiet, das beim Öffnen der Karte aus GeoJSON geladen wird, die Zeichnen-Toolbar unten rechts und die Schaltfläche Speichern.

| Einstellung | Was es bewirkt | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | **Zeichnen aktivieren** | Fügt die Zeichnen-Toolbar hinzu. Die folgenden Einstellungen benötigen sie. | | **GeoJSON-Wert zeichnen** | Zu ladende Formen: ein GeoJSON-Objekt oder -Array. Ausgeblendet während **Als Content Document speichern** aktiviert ist. | | **Symbolleiste** | **Linie**, **Polygon**, **Kreis**, **Marker**, **Bearbeiten**, **Löschen**. Standard: alle sechs. | | **Position der Symbolleiste** | Eine Kartenecke. Standard **Unten rechts**. | | **Als Content Document speichern** | Speichert die Zeichnung als Datei (ContentDocument) mit einer **Speichern** Schaltfläche. | Mit **Als Content Document speichern** aktiviert: | Einstellung | Was es bewirkt | | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | **Content Document automatisch speichern** | Speichert jede Änderung, kein **Speichern** Klick. | | **Content-Document-ID** | Zu aktualisierende Datei. Leer: Beim ersten Speichern wird eine erstellt, spätere Speichervorgänge während des Besuchs aktualisieren sie. | | **Content-Document-Titel** | Standard „Avonni Map Drawing Document“. | | **Verknüpfte Entitäts-ID des Content Document** | Datensatz, mit dem die Datei verknüpft ist. | | **Beschriftung der Schaltfläche Speichern** | Standard „Speichern“. | ### Route Nur Leaflet. Site-Benutzer erstellen aus den Markern eine Fahrroute mit mehreren Zwischenstopps. {% hint style="info" %} Ein Administrator aktiviert Routing einmal pro Paket, mit Ihrem eigenen API-Schlüssel des Routing-Anbieters. Bis dahin zeigt dieser Abschnitt stattdessen Hinweise: siehe [Kartenrouting aktivieren](/experience-cloud/experience-cloud-de/experience-components/ax-map/enable-map-routing.md). {% endhint %}
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.

Der Abschnitt Route, sobald „Route-Panel anzeigen“ aktiviert ist.

| Einstellung | Was es bewirkt | Erfordert | | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------ | | **Route-Panel anzeigen** | Eine **Route** Schaltfläche (Routen-Symbol) in den Kopfzeilenaktionen, die das Route-Panel öffnet. | Keine | | **Auswahl mehrerer Stopps deaktivieren** | Keine Bereichsauswahl, sodass Stopps jeweils einzeln als Marker hinzugefügt werden. | **Route-Panel anzeigen** | | **Position** | Panel-Seite: **Rechts** (Standard) oder **Links**. | **Route-Panel anzeigen** | | **Über der Karte anzeigen** | Panel über der Karte, nicht daneben, **Route** Schaltfläche auf der Karte (auf einem Telefon in der Kopfzeile). | **Route-Panel anzeigen** | | **Standardmäßig geöffnet** | Panel beim Laden geöffnet. | **Route-Panel anzeigen** | Standardmäßig öffnet sich das Panel neben der Karte:
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.

Wenn das Route-Panel nicht über der Karte eingeblendet ist, öffnet es sich als Spalte daneben, und die Route-Schaltfläche in der Kopfzeile zeigt oder verbirgt es. Die Route ist noch nicht berechnet, daher werden die Stopps durch gerade Linien verbunden.

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.

Sobald Routing aktiviert ist, wandelt das Route-Panel die auf einer Karte ausgewählten Stopps in eine Fahrroute um. Mit Mapbox zeigt es auch an, wann jeder Stopp erreicht wird.

Im Panel kann der Site-Benutzer: {% stepper %} {% step %} #### **Stopps hinzufügen** Marker anklicken (bis zu 25) oder ein Rechteck oder Lasso um mehrere zeichnen (außer **Auswahl mehrerer Stopps deaktivieren**).
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.

Mehrere Stopps hinzufügen öffnet ein Rechteck-Werkzeug und ein Lasso-Werkzeug. Wenn eine Form auf der Karte gezeichnet wird, wird jeder darin enthaltene Marker zur Route hinzugefügt.

{% endstep %} {% step %} #### **Einen Startpunkt auswählen** Jeder Datensatz auf der Karte oder **Mein Standort** (der Standort des Browsers). {% endstep %} {% step %} #### **Die Reihenfolge festlegen** Die Stopps ziehen oder klickt **Optimieren** für die kürzeste Fahrt (der erste Stopp bzw. der Startpunkt bleibt an Ort und Stelle). **Rückgängig**, **Wiederholen**, **Leeren** in der Panel-Kopfzeile; jeder Stopp kann entfernt oder geöffnet werden in **Google Maps** oder **Waze**. {% endstep %} {% step %} #### **Berechnet die Route** **Route berechnen** zeichnet die Straßen mit der Entfernung und Fahrzeit jedes Stopps. In Mapbox außerdem Abfahrts-, Ankunfts-, Gesamtdauer- und Ankunftszeiten, Besuche und Mittagspause einbezogen. Stopps nach **Tagesende** werden markiert, niemals entfernt:
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.

Eine Route, die über das Tagesende hinausgeht: Der späte Stopp und die Fahrt dorthin werden orange, seine Zeile wird als Nach Tagesende markiert, und ein Hinweis oben im Panel sagt, dass die Route zu spät endet.

{% endstep %} {% step %} #### **Lädt die Reiseroute herunter** Eine Download-Schaltfläche exportiert die berechnete Route als CSV-Datei.
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.

Jeder Stopp hat sein eigenes Menü: den Stopp aus der Route entfernen oder ihn in Google Maps oder Waze öffnen. Sobald eine Route berechnet ist, exportiert die Download-Schaltfläche neben „Route berechnen“ sie als CSV-Datei.

{% endstep %} {% endstepper %} Des Panels **Einstellungen**, mit ihren Standardwerten:
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.

Der Abschnitt „Einstellungen“ des Route-Panels. Die Zeitsteuerung ist auf „Abfahren um“ gesetzt, wodurch die Felder Datum und Uhrzeit angezeigt werden; abgesehen vom Datum ist jeder Wert der Standardwert.

| Einstellung | Was es bewirkt | Standard | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | **Beginn der Mittagspause**, **Ende der Mittagspause** | Eine Route, die während der Mittagspause unterwegs ist, pausiert während des gesamten Zeitraums, egal ob beim Fahren oder an einem Stopp. Muss nach Beginn enden, zwischen Abfahrt und Tagesende. | 12:00 bis 13:00 Uhr | | **Tagesende** | Letzte Zeit auf der Straße. Spätere Stopps werden markiert. | 18:00 Uhr | | **Besuchsdauer (Minuten)** | Zeit an jedem Stopp, die spätere Stopps verzögert. Der erste und letzte Stopp verzögern nichts. | 30 | | **Zeitsteuerung** | Nur Mapbox (der einzige Anbieter, der Verkehr modelliert). **Jetzt losfahren**, **Abfahren um** oder **Ankommen um**; die letzten beiden fügen ein **Datum** und **Uhrzeit**. | Jetzt losfahren; Uhrzeit 8:00 Uhr morgens | | **Fähren vermeiden**, **Autobahnen vermeiden**, **Mautstraßen vermeiden** | Halten Sie die Route von ihnen fern. | Aus |
Grenzen und Export * **Optimieren**: In Mapbox ordnet der Anbieter die Stopps, sofern ein Administrator dies nicht in [Kartenrouting aktivieren](/experience-cloud/experience-cloud-de/experience-components/ax-map/enable-map-routing.md). Andere Anbieter und Routen mit mehr als zwölf Stopps: nach Nähe geordnet. * Kein Link für die gesamte Route: Eine Wegbeschreibungs-URL akzeptiert höchstens neun Wegpunkte (drei auf Mobilgeräten), daher erfolgt die Navigation Stopp für Stopp. * Die Datei ist `route_.csv`, eine Zeile pro Halt: **Haltnummer**, **Datensatzname** (Markertitel), **Stadt** (von **Ort**), **Ankunftszeit** (nur Mapbox), **Entfernung (km)** und **Dauer (Min.)** vom vorherigen Halt, **Google Maps** und **Waze** Links.
### Filterung & Suche **Filter** (in Datenzuordnungen) wählen Sie die Felder, die **Filter** Der Abschnitt legt das Menü fest. Jeder Filter hat ein Operatormenü.
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.

Suche und Filter überlagert auf der Karte. Jeder Filter hat eine Schaltfläche für den Filtermodus: Entspricht, Entspricht nicht, Leer oder Nicht leer.

| Einstellung | Was es bewirkt | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Typ** | **Horizontal** (Standard), **Popover** oder **Panel** (im Seitenpanel). | | **Über der Karte anzeigen** | Horizontale oder Popover-Filter über der Karte, nicht im Header. Panel-Filter: **Seitenpanel** Überlagerung. | | **Sortierreihenfolge des Auswahllistenfilters** | **Aufsteigend** (Standard), **Absteigend** oder **Standardreihenfolge des Felds**. | | **Datensatz-Auswahllistenwerte verwenden** | Optionen aus in den Datensätzen vorhandenen Werten: leere Werte ausgeblendet. | | **Kaskadierende Filterwerte verwenden** | Jeder Filter schränkt die Optionen der anderen auf passende Datensätze ein. Überschreibt **Datensatz-Auswahllistenwerte verwenden**. | | Feldtyp | Operatoren (Standard zuerst) | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Text, Auswahlliste, Mehrfachauswahlliste, Lookup | **Entspricht**, **Entspricht nicht**, **Leer**, **Nicht leer** | | Zahl, Datum, Uhrzeit | **Zwischen**, **Nicht zwischen**, **Entspricht**, **Entspricht nicht**, **Kleiner als**, **Kleiner oder gleich**, **Größer als**, **Größer oder gleich**, **Leer**, **Nicht leer** | | Kontrollkästchen | Kein Operatormenü | **Leer** und **Nicht leer** nehmen keinen Wert an: Die Eingabefelder werden ausgeblendet. Die **Suche** Abschnitt (erfordert **Suche anzeigen**): | Einstellung | Was es bewirkt | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Platzhalter** | Leerer Text in der Suchleiste. Standard: „Search“. | | **Position** | **Links** (Standard), **Rechts**, **Zentriert**, **Ausfüllen** (Header), **Panel** (Seitenpanel) oder **Über der Karte eingeblendet** (Header auf einer schmalen Karte). | ### Seitenpanel Enthält die Filter oder die Suche, eingestellt auf **Panel**. Auf einer Karte in Telefonbreite: Filter in einem Popover, Suche im Header.
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.

Filter und Suche im Seitenpanel neben der Karte. Wenn Customer - Direct aktiviert wird, bleiben drei Standorte auf der Karte, und Alle Auswahlen löschen setzt jeden Filter zurück.

* **Position**: **Links** (Standard) oder **Rechts**. * **Beschriftung der Zurücksetzen-Schaltfläche**: die Löschschaltfläche. Standard: „Alle Auswahlen löschen“. * **Über der Karte anzeigen**: wählt eines der beiden untenstehenden Layouts aus. {% tabs %} {% tab title="Neben der Karte" %} Aus: eine Spalte neben der Karte, vom Header aus umgeschaltet. * **Standardmäßig geschlossen**: startet geschlossen. * **Umschaltfläche ausblenden**: blendet die Umschaltfläche im Header aus. {% endtab %} {% tab title="Über der Karte eingeblendet" %} Ein: schwebt über der Karte und wird über eine Schaltfläche auf der Karte geöffnet. * **Standardmäßig geöffnet**: beim Laden geöffnet. Wenn auch das Routen-Panel eingeblendet ist, wird jeweils nur eines geöffnet. {% endtab %} {% endtabs %} ## Interaktionen Pro Marker festlegen (manuell) oder in **Datenzuordnungen** (Abfrage). **Bei Auswahl** wird bei einem Klick ausgelöst, **Beim Ziehen** bei einem Ziehen (Leaflet, **Verschiebbare Marker** ein). Beide bieten:
InteraktionstypBeschreibung
Toast anzeigenKurze Benachrichtigung.
NavigierenÖffnet eine andere Seiten- oder eine URL.
Warnungs-Modal öffnenWarnmeldung in einem Modal.
Bestätigungsdialog öffnenFragt nach einer Bestätigung, zum Beispiel für die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenFührt einen Flow in einem Dialog aus.
Flow-Panel öffnenFührt einen Flow in einem Seitenpanel aus, Marker bleiben sichtbar.
Flow ausführenFührt einen automatisch gestarteten Flow im Hintergrund aus, ohne Dialog oder Panel.
HerunterladenEine Salesforce-Datei, ein öffentlicher Link oder eine URL.
Alle Abfragen aktualisierenFührt jede Abfrage auf der Seite erneut aus.
Abfrage aktualisierenFührt die eigene Abfrage der Karte erneut aus. Nur Datenquelle der Abfrage.
## Stil Aus dem **Stil** Abschnitt. Leaflet-Karten fügen hinzu **Kartenmarker**, **Zoom-Steuerung**, **Zeichenwerkzeuge** und **Routen-Panel**. {% tabs %} {% tab title="Außenabstand" %} Äußerer Abstand. {% endtab %} {% tab title="Innenabstand" %} Innerer Abstand. {% endtab %} {% tab title="Größe" %} Breite / Höhe / Mindestbreite / Maximalbreite / Mindesthöhe / Maximalhöhe. {% endtab %} {% tab title="Rahmen" %} Größe / Stil / Farbe / Radius. {% endtab %} {% tab title="Kopfzeile" %} * **Header:** Hintergrundfarbe; Innenabstand (jede Seite); Unterer Außenabstand. * **Header-Rahmen:** Farbe / Größe / Stil / Radius; Farbe / Größe / Stil des unteren Rahmens (mit **Kopfzeile ist verbunden**). * **Kopfzeilentitel**, **Header-Beschriftung:** Farbe / Schriftgröße / Schriftstärke / Schriftstil. * **Header-Avatar:** Hintergrundfarbe / Vordergrundfarbe / Rahmenradius. {% endtab %} {% tab title="Kartenmarker" %} Das Marker-Popup. * **Hintergrund der Kartenmarker:** Farbe. * **Titel der Kartenmarker:** Textfarbe / Schriftgröße / Stil / Stärke. * **Beschreibung der Kartenmarker:** Farbe / Schriftgröße / Stil / Stärke / Zeilenbegrenzung. {% endtab %} {% tab title="Zoom-Steuerung" %} Text- / Hintergrund- / Schattenfarbe; Rahmenfarbe / Größe / Stil / Radius. {% endtab %} {% tab title="Zeichenwerkzeuge" %} Hintergrund- / Schattenfarbe; Rahmenfarbe / Größe / Stil / Radius. {% endtab %} {% tab title="Routen-Panel" %} * **Routen-Panel:** Hintergrundfarbe; Rahmenfarbe / Größe / Stil / Radius. * **Header des Routen-Panels:** Hintergrundfarbe / Farbe / Schriftgröße / Schriftstärke. {% endtab %} {% tab title="Filter-Panel" %} Das Seitenpanel. * **Filter-Panel:** Hintergrundfarbe; Rahmenfarbe / Größe / Stil / Radius. * **Beschriftungen des Filter-Panels:** Hintergrund, Farbe (jeweils normal, aktiv, bei Hover); Farbe des Einklappsymbols; Schriftgröße / -stärke. * **Optionen des Filter-Panels:** Farbe; Rahmenfarbe des Kontrollkästchens; Textfarbe der Schaltfläche „Mehr laden“ (normal, aktiv, bei Hover). * **Zurücksetzen-Schaltfläche des Filter-Panels:** Hintergrund- / Text- / Rahmenfarbe; Rahmenstärke / Radius; Hintergrund- und Rahmenfarbe bei Hover; Hintergrund- und Rahmenfarbe im aktiven Zustand. {% endtab %} {% tab title="Flow-Dialog" %} * **Header des Flow-Dialogs:** Hintergrund; Farbe / Größe des unteren Rahmens; Beschriftungsfarbe / Schriftgröße / Schriftstärke. * **Fußzeile des Flow-Dialogs:** Hintergrund; Farbe / Größe des oberen Rahmens. {% endtab %} {% tab title="Flow-Panel" %} * **Flow-Panel:** Hintergrundfarbe; Rahmenfarbe / Größe / Stil / Radius. * **Header des Flow-Panels:** Hintergrund; Farbe / Größe des unteren Rahmens; Beschriftungsfarbe / Schriftgröße / Schriftstärke; Farbe des Schließen-Symbols (normal, aktiv). {% endtab %} {% endtabs %} ## Anwendungsfälle | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | | [**Richten Sie die Karte ein, um Datensatzdetailinformationen anzuzeigen**](/experience-cloud/experience-cloud-de/tutorials/components/map/set-up-the-map-to-show-record-details-information.md) | Lernen Sie, Datensätze in Experience Cloud mit Avonni Map anzuzeigen. | ### Beispiel 1: Reaktive Account-Karte {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} Die Karte zeigt den Rechnungsstandort des Kontos an, das ein Vertriebsmitarbeiter in einer Accounts Data Table auswählt. Bevor Sie beginnen: eine Accounts Data Table auf der Seite, API-Name `AccountsTable`. {% 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** * Setzen Sie den API-Namen auf `MapAccount` * Setzen Sie den Typ 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 %} #### **Legen Sie Datenzuordnungen fest** * Setzen Sie den Titel auf `Kontoname` * Setzen Sie unter Standort den Breitengrad auf `Rechnungs-Breitengrad` und den Längengrad auf `Rechnungs-Längengrad` {% endstep %} {% step %} #### **Vorschau Ihrer Arbeit** * Erstellen Sie eine Vorschau, wählen Sie einen Datensatz in der Accounts Data Table aus und prüfen Sie, ob die Karte seinen Rechnungsstandort anzeigt {% endstep %} {% endstepper %} ### Beispiel 2: Kundenauftragsverfolgung {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Kunden sehen, wo sich ihre Bestellung befindet. Bevor Sie beginnen: ein benutzerdefiniertes Geolocation-Feld auf Order, das die Verfolgungskoordinaten enthält. {% 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** * Setzen Sie den API-Namen auf `TrackingMap` * Setzen Sie den Typ auf `Leaflet` {% endstep %} {% step %} #### **Legen Sie eine Datenquelle fest** * Erstellen Sie eine Abfrage für das Order-Objekt {% endstep %} {% step %} #### **Legen Sie Datenzuordnungen fest** * Setzen Sie den Titel auf `Bestellnummer` * Setzen Sie den Typ auf `Stecknadel` * Setzen Sie unter Standort den Breitengrad auf `Tracking-Geolocation (Breitengrad)` und den Längengrad auf `Tracking-Geolocation (Längengrad)` {% endstep %} {% step %} #### **Vorschau Ihrer Arbeit** * Erstellen Sie eine Vorschau und prüfen Sie, ob jede Bestellung als Stecknadel an ihrem verfolgten Standort angezeigt wird {% endstep %} {% endstepper %} ## Fehlerbehebung bei häufigen Problemen | Problem | Ursache | Lösung | | --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Keine Routen-Schaltfläche auf der Karte | **Typ** ist nicht **Leaflet**, oder **Route-Panel anzeigen** ist deaktiviert. | Setzen Sie **Typ** auf **Leaflet**, schalten Sie **Route-Panel anzeigen** in **Route**. | | **Route** zeigt Aktivierungshinweise an | Routing ist für dieses Paket nicht aktiviert. | Ein Administrator aktiviert es in der **Avonni Experiences** -App, **Einstellungen** Registerkarte: siehe [Kartenrouting aktivieren](/experience-cloud/experience-cloud-de/experience-components/ax-map/enable-map-routing.md). | | Eine gerade Linie statt Straßen | Anbieter nicht erreichbar oder Kontingent aufgebraucht. Die Linie behält die Haltereihenfolge sichtbar bei. | Wenn jede Route zurückfällt: in Setup, **Remote Site Settings**, aktivieren Sie `Avonni_Route_Mapbox` und `Avonni_Route_ORS`. | | Keine Zeitvorgabe, keine Ankunftszeiten | OpenRouteService ist der Anbieter. Zeiten und die CSV-Datei **Ankunftszeit**, sind nur in Mapbox verfügbar. | Erwartet. Ankunftszeiten benötigen Mapbox. | | Marker fehlen auf einer Leaflet-Karte | Datensätze haben eine Adresse, aber keine Koordinaten. | Karte **Breitengrad** und **Längengrad** unter **Ort**, oder setzen Sie **Typ** auf **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-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 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.