Map

Mit dem Map-Control können Karten verschiedener Anbieter, u. a. Google Maps und OpenStreetMap, in X4 Web Apps eingebunden werden. Es können Geodaten angezeigt, Standorte gesucht und Routen gefunden werden.

Map-Control erzeugen

Ein Map-Control wird mit dem Element <Map> erzeugt. Das Element kann nur im Layout einer Detail Component verwendet werden.

Mögliche Attribute:

Zusätzlich zu den Standardattributen eines Controls kann das Element <Map> folgende Attribute haben:

Attribut	Beschreibung
`apiKey`	Gibt den API-Schlüssel an, falls dieser vom Kartenanbieter verlangt wird. Mögliche Werte: API-Schlüssel Für die Verwendung von OpenStreetMap wird kein API-Schlüssel benötigt. Falls ein API-Schlüssel eingegeben wird, wenn OpenStreetMap als Kartenanbieter verwendet wird, wird der API-Schlüssel ignoriert. Wenn Google Maps als Kartenanbieter verwendet wird, müssen folgende APIs aktiviert sein: Maps JS API Locations (für die Suche und die Routenberechnung) Directions (für die Routenberechnung) Das Attribut `apiKey` überschreibt das Element `MapAPIKey` in der Web App-Konfiguration `.wac`.
`initialPointLongitude`	Definiert den Längengrad, auf den die Karte zentriert sein soll, wenn sie geladen wird. Data Binding mit konstanten Werten möglich Mögliche Werte: Angabe eines Längengrads in Grad mit Dezimalstellen (z. B. `6.75000`)
`initialPointLatitude`	Definiert den Längengrad, auf den die Karte zentriert sein soll, wenn sie geladen wird. Data Binding mit konstanten Werten möglich Mögliche Werte: Angabe eines Breitengrads in Grad mit Dezimalstellen (z. B. `50.41871`)
`restrictScrolling`	Scrolling-Verhalten in Maps einschränken Mögliche Werte: `true` (Standard): Beim Scrollen mit der Maus bzw. mit dem Finger auf mobilen Geräten wird eine Meldung eingeblendet, die über das alternative Scrollen informiert `false`: alternatives Scrolling-Verhalten ist deaktiviert
`satelliteView`	Legt fest, ob die Satellitenansicht der Karte aktiviert ist. Mögliche Werte: `true` / `false` (Standard) Die Satellitenansicht kann nicht verwendet werden, wenn OpenStreetMap als Kartenanbieter verwendet wird.
`selectedIndex`	Ausgewählter Index Das Attribut `selectedIndex` übernimmt den `index`-Wert eines einfachen Markers (`SingleMarker`) oder eine Markergruppe (`Markers`), sobald diese ausgewählt wurden. Mögliche Werte: String Binding
`vendor`	Erforderlich. Spezifiziert den Kartenanbieter. Mögliche Werte: `OpenStreetMap` `Google` `Bing`
`zoomLevel`	Spezifiziert die initiale Zoomstufe der Karte. Die Werte geben die in der Karte angezeigten Meter ungefähr an. Beachten Sie, dass es beim Maßstabsbalken zu Abweichungen kommen kann, da sich der Maßstab in Abhängigkeit von der Entfernung vom Äquator ändert. Mögliche Werte: `10` `25` `50` `100` `250` `500` `750` `1000` `2000` `5000` `10000` `25000` `50000` `100000` `2500000` `5000000`
`enabled`	Legt fest, ob der Nutzer mit dem Control interagieren kann. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Ausdruck für Data Binding Das Attribut `enabled` ersetzt das veraltete Attribut `disabled`. `enabled="true"` entspricht damit dem veralteten Attribut `disabled="false"`.
`horizontalAlign`	Richtung, in die die Elemente fließen. Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left` (Standard) `center` `right`
`textOverflow`	Gibt an, was passieren soll, wenn das Control voll ist. Mögliche Werte: `ellipsis` : Mit `...` zeigen, dass der Text nicht zu Ende ist `hidden` : Text abbrechen, auf ganze Wörter achten `wordBreak` : innerhalb des Wortes abbrechen `allow` (Standard): Text zwischen den Wörtern umbrechen
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true` / `false` oder Zeichenkette für Data Binding

Suchfunktion

Um einem Web App-Benutzer die Suche nach Orten im Map-Control zu ermöglichen, wird das Element <Search/> innerhalb von <Map> verwendet.

XML

<Map>
	<Search/>
</Map>

Mögliche Attribute:

Das Element <Search/> kann folgende Attribute haben:

Attribut Beschreibung

searchIconHorizontalPosition

Definiert die horizontale Position des Icons relativ zu den gesuchten Koordinaten.

Mögliche Werte:

left: Icon ist links von der Koordinate
center (Standard): Icon ist auf der Koordinate
right: Icon ist rechts von der Koordinate

searchIconUrl

Pfad zur Grafikdatei, die als Icon verwendet werden soll. Mit dem Icon wird das Suchergebnis markiert. Die Grafikdatei muss im Ordner Resources direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner Resources.

Data Binding möglich

Mögliche Werte: Zeichenkette (URI)

searchIconVerticalPosition

Definiert die vertikale Position des Icons relativ zu den gesuchten Koordinaten.

Mögliche Werte:

top: Icon ist über der Koordinate
center (Standard): Icon ist auf der Koordinate
bottom: Icon ist unter der Koordinate

Routenberechnung

Um einem Web App-Benutzer die Berechnung einer Route zwischen zwei Orten im Maps-Control zu ermöglichen, wird das Element <Routing/> innerhalb von <Map> und ggf. nach <Search/> verwendet.

XML

<Map ...>
	<Routing/>
</Map>

Mögliche Attribute:

Das Element <Routing/> kann folgende Attribute haben:

Attribut	Beschreibung
`destinationIconHorizontalPosition`	Definiert die horizontale Position des Zielicons relativ zu den gesuchten Koordinaten. Mögliche Werte: `left`: Icon ist links von der Koordinate `center` (Standard): Icon ist auf der Koordinate `right`: Icon ist rechts von der Koordinate
`destinationIconUrl`	Pfad zur Grafikdatei, die als Icon für den Zielpunkt verwendet werden soll. Mit dem Icon wird der Zielpunkt der Route markiert. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Data Binding möglich Mögliche Werte: Zeichenkette (URI)
`destinationIconVerticalPosition`	Definiert die vertikale Position des Zielicons relativ zu den gesuchten Koordinaten. Mögliche Werte: `top`: Icon ist über der Koordinate `center` (Standard): Icon ist auf der Koordinate `bottom`: Icon ist unter der Koordinate
`startIconHorizontalPosition`	Definiert die horizontale Position des Starticons relativ zu den gesuchten Koordinaten. Mögliche Werte: `left`: Icon ist links von der Koordinate `center` (Standard): Icon ist auf der Koordinate `right`: Icon ist rechts von der Koordinate
`startIconUrl`	Pfad zur Grafikdatei, die als Icon für den Startpunkt verwendet werden soll. Mit dem Icon wird der Startpunkt der Route markiert. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Data Binding möglich Mögliche Werte: Zeichenkette (URI)
`startIconVerticalPosition`	Definiert die vertikale Position des Starticons relativ zu den gesuchten Koordinaten. Mögliche Werte: `top`: Icon ist über der Koordinate `center` (Standard): Icon ist auf der Koordinate `bottom`: Icon ist unter der Koordinate

Einfacher Marker

Um einen einfachen Marker in einem Map-Control anzuzeigen, wird das Element <SingleMarker/> innerhalb von <Map> und ggf. nach <Search/> und <Routing/> verwendet.

XML

<Map>
	...
	<SingleMarker/>
</Map>

Mögliche Attribute:

Das Element <SingleMarker/> kann folgende Attribute haben:

Attribut	Beschreibung
`componentName`	Gibt den Namen der Component für eine interne Navigation an. Mögliche Werte: Zeichenkette (Name einer Component)
`description`	Gibt die Beschreibung des Markers an. Data Binding möglich Mögliche Werte: Zeichenkette inkl. Leerzeichen
`externalLink`	Gibt den Link an, der im Pop-up des Markers angezeigt wird. Data Binding möglich Mögliche Werte: Zeichenkette (URL)
`externalLinkTarget`	Gibt an, ob der Link (`externalLink`) im selben oder in einem neuen Tab geöffnet wird. Mögliche Werte: `same`: Der Link wird im selben Tab geöffnet `new`: Der Link wird in einem neuen Tab geöffnet
`iconHorizontalPosition`	Definiert die horizontale Position des Icons relativ zu den eingegebenen Koordinaten. Mögliche Werte: `left`: Icon ist links von der Koordinate `center` (Standard): Icon ist auf der Koordinate `right`: Icon ist rechts von der Koordinate
`iconUrl`	Pfad zur Grafikdatei, die als Icon für den Marker verwendet werden soll. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Data Binding möglich Mögliche Werte: Zeichenkette (URI)
`iconVerticalPosition`	Definiert die vertikale Position des Icons relativ zu den eingegebenen Koordinaten. Mögliche Werte: `top`: Icon ist über der Koordinate `center` (Standard): Icon ist auf der Koordinate `bottom`: Icon ist unter der Koordinate
`index`	Index des Markers Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`latitude`	Erforderlich, wenn `searchString` nicht verwendet wird. Gibt den Breitengrad des Markers an. Data Binding möglich Mögliche Werte: Angabe eines Breitengrads in Grad mit Dezimalstellen (z. B. `50.41871`) Dieses Attribut kann nicht gleichzeitig mit `searchString` verwendet werden.
`longitude`	Erforderlich, wenn `searchString` nicht verwendet wird. Gibt den Längengrad des Markers an. Data Binding möglich Mögliche Werte: Angabe eines Längengrads in Grad mit Dezimalstellen (z. B. `6.75000`) Dieses Attribut kann nicht gleichzeitig mit `searchString` verwendet werden.
`name`	Gibt den Namen des Markers an. Data Binding möglich Mögliche Werte: Zeichenkette aus alphanumerischen Zeichen
`navigationDisplayName`	Gibt den Text an, der im Pop-up des Markers statt eines externen Links oder eines Componentnamens angezeigt wird. Data Binding möglich Mögliche Werte: Zeichenkette inkl. Leerzeichen
`searchString`	Erforderlich, wenn `latitude`/`longitude` nicht verwendet wird. Adresszeile zur Suche nach ausgewählten Diensten des Kartenanbieters. Data Binding möglich Mögliche Werte: Zeichenkette für eine Dienstsuche, z. B. `Restaurant` Dieses Attribut kann nicht gleichzeitig mit den Attributen `latitude`/`longitude` verwendet werden.

Markergruppe

Um mehrere Marker in einem Map-Control anzuzeigen, wird das Element <Markers/> innerhalb von <Map> und ggf. nach <Search/> und <Routing/> verwendet.

XML

<Map>
	...
	<Markers/>
</Map>

Mögliche Attribute:

Das Element <Markers/> kann folgende Attribute haben:

Attribut	Beschreibung
`cluster`	Gibt an, ob Marker zusammengefasst werden sollen, wenn sie auf der Karte sehr dicht beieinander liegen. Mögliche Werte: `true` / `false` (Standard) `cluster` und `number` können nicht gleichzeitig verwendet werden!
`componentName`	Gibt den Namen der Component für eine interne Navigation an. Mögliche Werte: Zeichenkette (Name einer Component)
`data`	Erforderlich. Definiert, welche Daten für die Markergruppe verwendet werden. Data Binding erforderlich Mögliche Werte: Data-Binding-Ausdruck
`description`	Gibt die Beschreibung der Marker an. Data Binding erforderlich Mögliche Werte: Data-Binding-Ausdruck relativ zum Ausdruck in `data`
`externalLink`	Gibt den Link an, der im Pop-up des Markers angezeigt wird. Data Binding erforderlich Mögliche Werte: Data-Binding-Ausdruck relativ zum Ausdruck in `data`
`externalLinkTarget`	Gibt an, ob der Link (`externalLink`) im selben oder in einem neuen Tab geöffnet wird. Mögliche Werte: `same`: Der Link wird im selben Tab geöffnet `new`: Der Link wird in einem neuen Tab geöffnet
`iconHorizontalPosition`	Definiert die horizontale Position des Icons relativ zu den eingegebenen Koordinaten. Mögliche Werte: `left`: Icon ist links von der Koordinate `center` (Standard): Icon ist auf der Koordinate `right`: Icon ist rechts von der Koordinate
`iconUrl`	Pfad zur Grafikdatei, die als Icon für die Marker verwendet werden soll. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Data Binding möglich Mögliche Werte: Zeichenkette (URI)
`iconVerticalPosition`	Definiert die vertikale Position des Icons relativ zu den eingegebenen Koordinaten. Mögliche Werte: `top`: Icon ist über der Koordinate `center` (Standard): Icon ist auf der Koordinate `bottom`: Icon ist unter der Koordinate
`index`	Index der Markergruppe Data Binding möglich Mögliche Werte: Beliebige Zeichenkette
`latitude`	Erforderlich, wenn `searchString` nicht verwendet wird. Gibt den Breitengrad eines Markers an. Data Binding möglich Mögliche Werte: Data-Binding-Ausdruck relativ zum Ausdruck in `data`
`longitude`	Erforderlich, wenn `searchString` nicht verwendet wird. Gibt den Längengrad eines Markers an. Data Binding möglich Mögliche Werte: Data-Binding-Ausdruck relativ zum Ausdruck in `data`
`name`	Gibt den Namen der Marker an. Data Binding erforderlich Mögliche Werte: Data-Binding-Ausdruck relativ zum Ausdruck in `data`
`navigationDisplayName`	Gibt den Text an, der im Pop-up des Markers statt eines externen Links oder eines Component-Namens angezeigt wird. Data Binding möglich Mögliche Werte: Zeichenkette inkl. Leerzeichen
`number`	Gibt an, ob die Marker nummeriert werden sollen. Mögliche Werte: `true` / `false` (Standard) `cluster` und `number` können nicht gleichzeitig verwendet werden!
`searchString`	Erforderlich, wenn `latitude`/`longitude` nicht verwendet wird. Adresszeile zur Suche nach ausgewählten Diensten des Kartenanbieters. Data Binding möglich Mögliche Werte: Zeichenkette für eine Dienstsuche, z. B. `Restaurant` Dieses Attribut kann nicht gleichzeitig mit den Attributen `latitude`/`longitude` verwendet werden.
`textHorizontalPosition`	Definiert die horizontale Position der Nummerierung relativ zu den eingegebenen Koordinaten. Mögliche Werte: `left`: Nummerierung ist links von der Koordinate (Standard) `center`: Nummerierung ist auf der Koordinate `right`: Nummerierung ist rechts von der Koordinate Bing Maps positioniert die Nummerierung automatisch. Daher hat diese Funktion auf Bing Maps keinen Einfluss.
`textVerticalPosition`	Definiert die vertikale Position der Nummerierung relativ zu den eingegebenen Koordinaten. Mögliche Werte: `top`: Nummerierung ist über der Koordinate (Standard) `center`: Nummerierung ist auf der Koordinate `bottom`: Nummerierung ist unter der Koordinate Bing Maps positioniert die Nummerierung automatisch. Daher hat diese Funktion auf Bing Maps keinen Einfluss.

Aktion "Auswählen" innerhalb einer Map

Die Aktion Auswählen wird über das Element <SelectAction/> innerhalb von <SingleMarker>, <Markers> oder <SelectedLocationMarker> erzeugt und ausgelöst, sobald ein entsprechender Marker ausgewählt wurde.

Beispiele

In diesem Beispiel werden die Properties definiert und eine Gruppe von Markern eingeblendet.

Beispiel 1 Map-Control (*.wad)

XML

<Properties>
	<Property name="favorites" type="List">
		<Property name="lat" type="Decimal" />
		<Property name="lng" type="Decimal" />
	</Property>
</Properties>

...

<Map vendor="OpenStreetMap">
	<Markers longitude="#lng" data="#favorites" latitude="#lat" iconUrl="heart.png" name="Favorites" description="Places, I have visited." iconVerticalPosition="top"/>
</Map>

Beispiel 1: Durch den Technical Process gelieferte Daten (*.xml)

XML

<OkList>
	<favorites>
		<lat>48.94061</lat>
		<lng>8.40471</lng>
	</favorites>
	
	<favorites>
		<lat>49.01396</lat>
		<lng>8.40445</lng>
	</favorites>
</OkList>

Obiges Beispiel führt zu folgendem Ergebnis:

In diesem Beispiel werden zwei Gruppen von Markern eingeblendet sowie die Suche und Routenberechnung aktiviert.

Beispiel 2 Map-Control

XML

<Properties>
	<Property name="favorites" type="List">
		<Property name="lat" type="Decimal" />
		<Property name="lng" type="Decimal" />
	</Property>
	<Property name="destinations" type="List">
		<Property name="lat" type="Decimal" />
		<Property name="lng" type="Decimal" />
	</Property>
</Properties>

...

<Map vendor="OpenStreetMap">
	<Search/>
	<Routing destinationIconUrl="finish.png" startIconUrl="car.png" destinationIconVerticalPosition="top" destinationIconHorizontalPosition="center"/>
	<Markers longitude="#lng" data="#favorites" latitude="#lat" iconUrl="heart.png" name="Favorites" description="Places, I have visited." iconVerticalPosition="top"/>
<Markers longitude="#lng" data="#destinations" latitude="#lat" iconUrl="star.png" name="Destinations" description="Places, I want to visit."/>
</Map>

Beispiel 2: Durch den Technical Process gelieferte Daten (*.xml)

XML

<OkList>
	<favorites>
		<lat>48.94061</lat>
		<lng>8.40471</lng>
	</favorites>
	
	<favorites>
		<lat>49.01396</lat>
		<lng>8.40445</lng>
	</favorites>
	
	<destinations>
		<lat>51.8058</lat>
		<lng>10.3343</lng>
	</destinations>
	
	<destinations>
		<lat>52.3807</lat>
		<lng>9.7706</lng>
	</destinations>
	
</OkList>

Obiges Beispiel führt zu folgendem Ergebnis:

Mehrere Gruppen von Markern mit verschiedenen Symbolen (OpenStreetMap)

Suchfunktion (OpenStreetMap)

Routenberechnung (OpenStreetMap)

Weitere Kartenanbieter sind ebenfalls verfügbar. Das folgende Beispiel zeigt ein Map-Control mit Google Maps.

Beispiel 2 Kartensteuerelement

XML

<Properties>
	<Property name="favorites" type="List">
		<Property name="lat" type="Decimal" />
		<Property name="lng" type="Decimal" />
	</Property>
	<Property name="destinations" type="List">
		<Property name="lat" type="Decimal" />
		<Property name="lng" type="Decimal" />
	</Property>
</Properties>

...

<Map vendor="Google">
	<Search/>
	<Routing destinationIconUrl="finish.png" startIconUrl="car.png" destinationIconVerticalPosition="top" destinationIconHorizontalPosition="center"/>
	<Markers longitude="#lng" data="#favorites" latitude="#lat" iconUrl="heart.png" name="Favorites" description="Places, I have visited." iconVerticalPosition="top"/>
<Markers longitude="#lng" data="#destinations" latitude="#lat" iconUrl="star.png" name="Destinations" description="Places, I want to visit."/>
</Map>

Beispiel 2: Durch den Technical Process gelieferte Daten (*.xml)

XML

<OkList>
	<favorites>
		<lat>48.94061</lat>
		<lng>8.40471</lng>
	</favorites>
	
	<favorites>
		<lat>49.01396</lat>
		<lng>8.40445</lng>
	</favorites>
	
	<destinations>
		<lat>51.8058</lat>
		<lng>10.3343</lng>
	</destinations>
	
	<destinations>
		<lat>52.3807</lat>
		<lng>9.7706</lng>
	</destinations>
</OkList>

Obiges Beispiel führt zu folgendem Ergebnis:

Marker per Klick in der Karte setzen

Das Element <SelectedLocationMarker> ermöglicht dem Benutzer einer Web App, eine Markierung zu setzen, in dem er in der Karte auf eine bestimmte Stelle klickt. Die vom Benutzer markierte Stelle kann durch einen Technical Process weiterverarbeitet werden.

XML

<Map>
	...
	<SelectedLocationMarker .../>
</Map>

Mögliche Attribute:

Das Element <SelectedLocationMarker/> kann folgende Attribute haben:

Attribut Beschreibung

longitude

Erforderlich. Längengrad der Markierung

Data Binding möglich

Mögliche Werte: Property

Als Wert für das Attribut muss eine Property hinterlegt werden.

latitude

Erforderlich. Breitengrad der Markierung

Data Binding möglich

Mögliche Werte: Property

Als Wert für das Attribut muss eine Property hinterlegt werden.

iconUrl

Pfad zur Grafikdatei, die als Icon verwendet werden soll. Mit dem Icon wird der gewählte Ort markiert. Die Grafikdatei muss im Ordner Resources direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner Resources.

Data Binding möglich

Mögliche Werte: Zeichenkette (URI)

Standort des Benutzers verwenden

Innerhalb des Elements <Map> kann das Element <Geolocation> verwendet werden, um den Standort des Benutzers abzufragen. Wenn das Element <Geolocation> verwendet wird, dann wird in der Karte ein Button angezeigt. Per Klick auf den Button wird der Standort des Benutzers abgefragt und auf der Karte markiert.

Mögliche Attribute:

Attribut Beschreibung

iconUrl

Pfad zur Grafikdatei, die als Icon für die Marker verwendet werden soll. Die Grafikdatei muss im Ordner Resources direkt unterhalb des Web App-Projekts enthalten sein. Pfadangabe relativ zum Ordner Resources.

Data Binding möglich

Mögliche Werte: Zeichenkette (URI)

iconHorizontalPosition Horizontale Position des Icons

iconVerticalPosition Vertikale Position des Icons