Skip to content

GUIDE4YOU Benutzerhandbuch

Jump to bottom
Simon Seyock edited this page Jan 15, 2018 · 9 revisions

Der Guide4you in seiner dritten Version (folgend G4U3 bezeichnet) ist ein OpenLayers 3-basierter Kartenclient.

Der Kartenclient bietet folgende Kernfeatures:

  • Responsive Design
  • Frei konfigurierbar
  • Multilingual
  • Umfangreiche API
    • Querystring
    • JavaScript
  • Quellenunabhängige Suche
    • Mit Autocomplete (sofern von Quelle unterstützt)
Ebenfalls bieten wir eine speziell auf den Kartenclient abgestimmte Serverkomponente an.

Demos sind hier zu finden:

Table of Contents

Konfiguration

Zunächst werden Konzepte dargestellt, die in den den Konfigurationsdateien wiederholt verwendet werden. Dann wird die Layer-Konfiguration behandelt und hiernach die Konfiguration der Software selbst.

Allgemeines

Alle Konfigurationsdateien liegen im Wesentlichen im JSON-Format vor, allerdings mit der Möglichkeit, mit // eingeleitete Kommentare einzufügen. Es empfiehlt sich, bei diesen Dateien das Benennungsschema «name».commented.json beizubehalten, da so einerseits sichtbar ist, dass es sich nicht um gewöhnliches JSON handelt, gleichzeitig aber von einem geeigneten Editor automatisch die passende Syntaxhervorhebung verwendet wird.

Es stehen eine große Zahl von Einstellmöglichkeiten zur Verfügung. Dabei werden interne Konfigurationsparameter sowie die API von OpenLayers 3 genutzt. Damit diese Dokumentation nicht den Rahmen sprengt, finden Sie im Text wiederholt Verweise auf die OpenLayers-3-Dokumentation als Quelle für weitere Informationen.

Multilingualität

G4U3 unterstützt die Darstellung in unterschiedlichen Sprachen. Aktuell besteht die Möglichkeit, zwischen einer Anzeige auf Deutsch und einer auf Englisch zu wechseln. Bei Bedarf können problemlos weitere Sprachen in die Sprachdatei eingepflegt werden.

Angabe von Texten als Zeichenfolgen

Wenn Sie den Wert für «schluessel» als Zeichenfolge angeben, erscheint der angegebene Text unabhängig von der gerade aktiven Sprache.

Beispiel: 

 "«schluessel»": "Hotel"

Für eine mehrsprachige Website sollte diese Möglichkeit nicht genutzt werden.

Angabe übersetzbarer Texte als Objekte

Wenn Sie den Wert für «schluessel» als Objekt angeben, hat das Objekt folgende Form: 

 "«schluessel»": {
 	"de":	"Straßen",
 	"en":	"Roads",
 	"tr":	"Yollar"
 }

Hierbei ist der jeweilige Schlüssel ein Bezeichner für die Sprache, in der der Text vorliegt. Die Soft­ware wählt die anzuzeigende Zeichenfolge folgendermaßen aus:

  1. Ist die aktive Sprache vorhanden, wird die zugehörige Zeichenfolge angezeigt.
  2. Ist die aktive Sprache nicht vorhanden, wird überprüft, ob die konfigurierte Standard­sprache vorhanden ist. Ist dem so, wird die zu dieser Sprache zugehörige Zeichenfolge angezeigt.
  3. Ist auch die eingestellte Standardsprache nicht vorhanden, wird als letzter Ausweg die in der Software fest vorgegebene Fallbacksprache "de" (Deutsch) verwendet.
  4. Bitte beachten Sie: Der türkische Eintrag im Beispiel dient nur der Illustration; die grafische Benutzerschnittstelle ist zurzeit nur auf Deutsch und Englisch ausgelegt.

Kodierung von Umlauten und anderen Sonderzeichen

Es ist sehr empfehlenswert, anzuzeigende Zeichen wie »ä«, »ö«, »ü«, »Ä«, »Ö«, »Ü« und »ß« als HTML-Entitäten zu kodieren, da es andernfalls je nach Webbrowser und Einstellungen zu vermeidbaren Darstellungsproblemen kommen kann.

Die in Deutschland gängigen Sonderzeichen und deren Kodierung finden Sie in der folgenden Tabelle:

Zeichen ä Ä ö Ö ü Ü ß
Entität ä Ä ö Ö ü Ü ß

Eine Übersicht über die Entitäten für den vollständigen westeuropäischen Windows-Standard­zeichensatz finden Sie z.B. bei W3Schools.

Proxies

Auf Grund der so genannte Same-Origin-Policy (SOP) verhindern Webbrowser, dass Skripte auf Inhalte zugreifen können, die von einer anderen Serveradresse als das ursprüngliche Skript stammen. Um dennoch auf Informationen (etwa Kartenmaterial) aus anderen Quellen zugreifen zu können, müssen die Daten über denselben Server umgeleitet werden, auf dem die Skripte vorliegen. Um dies zu bewerkstelligen, werden serverseitig Proxies betrieben. Um G4U3 mitzuteilen, welcher Proxy zu verwenden ist, geben Sie immer den relativen Pfad zum Proxy an, da der Rechnername zwingend mit dem des ausgeführten Skriptes übereinstimmen muss und somit vorgegeben ist. Sie können sowohl einen globalen Proxy einstellen, der für alle Zugriffe verwendet wird, die von der SOP betroffen sind, als auch bei bestimmte Einstellungen einen spezifischen Proxy angeben. Eine typische Proxykonfiguration hat diese Form: 

 "proxy": "ajaxproxy/ajaxproxy.php?csurl="

Mit der Option useProxy kann die Verwendung des Proxies erzwungen oder vermieden werden. Wenn useProxy auf true gesetzt und kein lokaler Proxy angegeben ist, wird der global gesetzte proxy verwendet. Wenn useProxy nicht gesetzt ist und kein lokaler Proxy angegeben ist wird kein Proxy verwendet. 

 "useProxy": true

Relative Ausrichtung

Relative Ausrichtungen in horizontaler und vertikaler Richtung geben Sie in G4U3 in Textform an. Folgende Ausrichtungen sind möglich:

Wert horizontal vertikal
bottom-left links unterhalb
bottom-center zentriert unterhalb
bottom-right rechts unterhalb
center-left links zentriert
center-center zentriert zentriert
center-right rechts zentriert
top-left links oberhalb
top-center zentriert oberhalb
top-right rechts oberhalb

Ortsangaben

Für die Position in Ost-West-Richtung geben Sie den Längengrad dezimal an, dabei liegen Orte mit positiven Angaben östlich des Nullmeridians.

Für die Position in Nord-Süd-Richtung geben Sie den Breitengrad dezimal an, dabei liegen Orte mit positiven Angaben nördlich des Äquators.

Orte geben Sie als Liste mit zwei Elementen an, dabei ist die erste Angabe der Längengrad, die zweite der Breitengrad, jeweils mit den gerade genannten Konventionen. Beispielsweise bezeichnet [6.958, 50.9413] den Punkt, an dem sich der Kölner Dom befindet.

Einen rechteckiger Bereich (engl. extent) auf der Karte geben Sie als Liste mit vier Elementen an, dabei geben der erste und zweite Wert den südwestlichsten Punkt, der dritte und vierte Wert den nordöstlichsten Punkt dieses Bereichs an.

Stilangaben

In G4U3 stehen fast alle Stiloptionen zur Verfügung, die von OpenLayers 3 unterstützt werden. Diese Dokumentation behandelt nur einen Teil der möglichen Stiloptionen. Eine vollständige Über­sicht finden Sie in der OpenLayers-3-Dokumentation. Die folgende Tabelle listet die grund­sätzlichen Stiloptionen auf:

Option … steuert …
fill Fülloptionen (Fläche)
image Bildoptionen (Icon, Kreis, Polygon)
stroke Strichoptionen (Linie)
text Textoptionen
zIndex z-Index (steuert, welches Objekt welches verdeckt)
fill

Mit der Stilangabe fill geben Sie die Fülloptionen für eine Fläche an. Als einzige Einstellung können Sie hier die Füllfarbe angeben, etwa wie im folgenden Beispiel ein halbtransparentes Gelb: 

 "fill": {
 	"color":	"rgba(255,255,0,0.5)"
 }
stroke

Mit der Stilangabe stroke geben Sie die Strichoptionen für eine Linie (etwa die Begrenzungslinie einer Fläche an). Hier können Sie eine Strichbreite in Pixeln und eine Linienfarbe angeben, etwa eine vollständig deckende, zwei Pixel breite schwarze Linie wie in diesem Beispiel: 

 "stroke": {
 	"width":	2,
 	"color":	"rgba(255,255,0,1)"	
 }
image

Welche Einstellungen die Stilangabe image zulässt, hängt davon ab, welchen type Sie angeben. Mögliche Werte sind circle und icon. Zunächst ein gekürztes Beispiel für den Fall, dass Sie circle angeben: 

 "image": {
 	"type": "circle",
 	"snapToPixel": true,
 	"radius": 5,
 	"fill": { … },
 	"stroke": { … }
 }

Zur Bedeutung von fill und stroke vergleichen Sie bitte die entsprechenden Abschnitte.

Mit der Einstellung radius geben Sie den Radius des zu zeichnenden Kreises an.

Mit snapToPixel geben Sie an, ob die Darstellung an den physischen Pixeln des Bildschirms ausge­richtet werden soll (dies entspricht dem Wert true). Dies führt zu einer ungenaueren Darstellung, vermeidet aber Unschärfe in der Darstellung. Der Standardwert ist true. Weitere Informationen zu dieser Einstellung entnehmen Sie bitte der OpenLayers-3-Dokumentation.

Nun ein Beispiel für den Fall, dass Sie für type den Wert icon angeben: 

 "image": {
 	"type":	"icon",
 	"src":		"images/icons/marker.png",
 	"anchor":	[0.5, 0.5]
 }

Mit src geben Sie die URL an, unter der sich das anzuzeigende Icon befindet.

Mit anchor geben Sie an, wo sich der Anker des Icons befindet, das heißt die Stelle, worauf sich Positionsangaben beziehen. Im Beispiel ist dies die Mitte des Icons.

Eine Übersicht über die Vielzahl an weiteren Einstellungen für Icons entnehmen Sie bitte der OpenLayers-3-Dokumentation.

zIndex

Der Z-Index bestimmt die Darstellungsreihenfolge überlappender Objekte. Eine detaillierte Erklärung bietet der Wikipedia-Artikel zur Z-Ordnung.

text

Sie können bei der Stilangabe auch Texte angeben, die dann auf der Karte angezeigt werden. Die Dokumentation der hier zur Verfügung stehenden Einstellmöglichkeiten finden Sie in der OpenLayers-3-Dokumentation.

Layerkonfiguration

Mit Hilfe der Layerkonfigurationsdatei konfigurieren Sie die in der Karte zur Verfügung stehenden Layer. Dies sind die baseLayers (die Grundkarten), die featureLayers (Ebenen mit Features), die fixedFeatureLayers (von Benutzern nicht deaktivierbare Ebenen mit Features) und die queryLayers (Ebene, die das Ergebnis einer über die Querystring-API ausgeführten Datenbankabfrage anzeigt).

baseLayers, featureLayers, fixedFeatureLayers und queryLayers konfigurieren Sie mittels einer Liste von Objekten. Die einzelnen Objekte haben die Form 

 {
 	"id":		«id»,
 	"title":	«objekt»,
 	"type": 	«string»,
 	"source":	«objekt»
 }

Abweichend hiervon haben die queryLayers zusätzlich eine Option apiKey und keine ID.

Angabe einer ID – "id"

Die IDs der Layer sind in der Beispielkonfiguration Zahlen, nicht-leere Zeichenfolgen wären jedoch ebenfalls möglich. Beispiele:

  • "id": 23
  • "id": "Radwege"
Die ID muss eindeutig sein, da die Layer über ihre ID angesprochen werden.

Wenn Sie im Verlauf des Softwareeinsatzes Layer aus der Konfiguration gelöscht werden, sollten IDs nicht für neue Layer wiederverwendet werden. Dies würde zwar nicht die Funktion der Soft­ware beeinträchtigen, hätte aber zur Folge, dass bestehende Links, die über den Querystring anzuzeigender Layer konfiguriert haben, gegebenenfalls nicht mehr wie gewünscht funktionieren, da auch hier die Layer über ihre ID angesprochen werden.

Angabe des Layernamens – "title"

Layernamen werden für baseLayers und featureLayers zwingend benötigt, da diese dem Benutzer in der Layerauswahl angezeigt werden. Bei fixedFeatureLayers und queryLayers wird diese Angabe lediglich für die Anzeige in den Attributions benötigt (Vor der Quellenangabe jedes Layers erscheint immer der Titel des Layers). Die Layernamen können Sie in zwei Formen angegeben, als Zeichenfolge oder als Objekt. Das Format ist unter Unterstützung für mehrere Sprachen dargestellt.

Beispiele: 

 "title": "Hotel"
 "title": {
 		"de":	"Stra&ampszlig;en",
 		"en":	"Roads",
 		"tr":	"Yollar"
 }

Angaben zum Api-Schlüssel (nur für queryLayer)

Die queryLayers müssen eine Option apiKey enthalten. Wenn dieser Schlüssel in der URL der Karte verwendet wird, werden die ihm zugewiesenen Werte in die in der source angegebenen Url eingesetzt. Der ApiKey darf nur aus kleingeschriebenen Buchstaben bestehen und sollte möglichst keine Umlaute enthalten.

Beispiel: 

 {
 	"apiKey":	"dblay",
 	"source": {
 		"type":	"KML",
 		"url":	"http://stadtplan.koeln.de/…?layername={apiValue,}"
 	}
 }

Wenn nun in diesem Beispiel an die Url des Kartenclients die Zeichenfolge ?dblay=layer1,layer3 angehängt wird, wird folgende Url zusammengesetzt: "http://stadtplan.koeln.de/…?layername=layer1,layer3".

Angaben zur Datenquelle – "source"

Mit diesem Wert konfigurieren Sie Informationen zu den Datenquellen der Layer. Die Werte werden als Objekt angegeben, das mindestens die jeweilige URL und das Datenformat enthält.

Mögliche Datenformate für Quellen von BaseLayern:

Mögliche Datenformate für Quellen von FeatureLayern:
  • KML, ein XML-Format
  • GeoJSON, ein JSON-Format
Bei den URLs gibt es einige Besonderheiten, die im Anschluss an die Beispiele erläutert werden.

Mögliche Optionen für alle Layer:

  • eine Attribution (Quelle) in dem Format, das unter Unterstützung für mehrere Sprachen dargestellt ist; die Option heißt attribution
  • useProxy und proxy (siehe Abschnitt proxies)
Mögliche Optionen nur für FeatureLayer:
  • einen Zeitraum in Millisekunden, nach dem die anzuzeigenden Daten neu geladen werden; die Option heißt refresh
  • loadingStrategy, wenn hier "BBOX" angegeben wird, dann wird immer nur der Bereich geladen, der auch gerade angezeigt wird. In der URL kann dann mit den Parametern {bboxleft}, {bboxright}, {bboxbottom}, {bboxtop} und {resolution} die BBOX geladen werden.
  • bboxRatio, wenn hier ein Wert groesser als 1 eingetragen, wird immer ein um diesen Faktor vergroesserter Bereich geladen, damit kleinere Verschiebungen kein Nachladen triggern.
Beispiele (»…« steht für einen ausgelassenen Teil der URL): 
 "source": {
 	"type":		"OSM",
 	"url":		"http://{a-c}.tiles.koeln.de/tiles/kde/{z}/{x}/{y}.png",
 	"attribution": {
 		"de":	"(c) OpenStreetMap Mitwirkende",
 		"en":	"(c) OpenStreetMap contributers"
 	}
 }

 "source": {
 	"type": "WMS",
 	"url": "http://129.206.228.72/cached/osm/service?",
 	"params": {
 		"FORMAT": "image/png",
 		"VERSION": "1.1.1",
 		"LAYERS": ["osm_auto:all"]
 	}
 }

 "source": {
 	"type":		"KML",
 	"url":		"http://www.koeln.de/apps/stadtplan/…?rand=",
 	"attribution":	"Stadt Koeln – offenedaten-koeln.de",
 	"refresh":	120000
 }

 "source": {
 	"type":	"KML",
 	"url":	"http://stadtplan.koeln.de/…?layername={dblayer,}"
 }

Wie Sie an den Beispielen sehen, enthalten die »URLs« spezielle Zeichenfolgen wie »{a-c}«, »{x}«, »{y}«, »{z}« und »{dblayer,}«, die in den tatsächlich verwendeten URLs so nicht vorkommen.

  • »{a-c}« steht für einen der Buchstaben »a«, »b« oder »c« und wird verwendet, um die Abfragelast auf die drei Server a.tiles.koeln.de, b.tiles.koeln.de oder c.tiles.koeln.de verteilen zu können.
  • »{x}«, »{y}«, »{z}« sind Parameter, die eine bestimmte Kachel für die Darstellung der Karte festlegen.
Bei den queryLayers kommt noch der folgende Wert hinzu:
  • »{apiValue,}« an dieser Stelle in der URL werden die Werte kommagetrennt in die URL eingefügt (Es kann auch ein anderes Trennzeichen angegeben werden).
Eine Adresse, die sich beim ersten Beispiel ergeben würde, wenn für »{x}« der Wert 17017, »{y}« der Wert 10978 und »{z}« der Wert 15 eingesetzt werden, wäre "http://a.tiles.koeln.de/tiles/kde/15/17017/10978.png".

Angaben zur Sichtbarkeit – "visible" & "alwaysVisible"

Der Parameter visible bestimmt, ob ein Layer anfangs sichtbar ist oder nicht, die Sichtbarkeit kann danach vom Benutzer durch den Layerselector verändert werden. Wenn der Parameter alwaysVisible gesetzt ist, dann ist dieser Layer immer sichtbar, auch wenn er nicht in der URL als sichtbarer Layer aufgeführt ist. Wenn dieser Layer kein fixedFeatureLayer ist, dann kann die Sichtbarkeit allerdings vom Benutzer wieder verändert werden.

Angaben zur Verfügbarkeit - "available"

Wenn der Wert available auf false gesetzt ist, taucht der Layer nicht in dem Layerselector auf und kann auch nicht über die URLAPI sichtbar gemacht werden, es sei denn, er wurde als avaLay gelistet. Um die Prioritäten zu verdeutlichen, hier eine Tabelle:

Config-Option available
true false nicht gesetzt
URLAPI avaLay Parameter avaLay nicht gesetzt Layer verfügbar Layer nicht verfügbar Layer verfügbar
id gesetzt Layer verfügbar Layer verfügbar Layer verfügbar
id nicht gesetzt Layer nicht verfügbar Layer nicht verfügbar Layer nicht verfügbar

Angaben zum Clustering - "cluster"

Wenn cluster auf false gesetzt wird, dann wird dieser Layer nicht im Clustering berücksichtigt. Der Defaultwert ist true.

"collapsed"

true: Im Layerselector eingeklappt, Standardwert

false: Im Layerselector ausgeklappt

Softwarekonfiguration

Mit Hilfe der Clientkonfigurationsdatei konfigurieren Sie das Erscheinungsbild des Clients sowie das Verhalten des Clients und der einzelnen Bedienelemente.

controls

In dem Controls-Konfigurationsobjekt ist zum einen ein Array mit dem Namen onMap enthalten und zum anderen die Konfigurationen für die unterschiedlichen Controls. Ob ein Control angezeigt wird oder nicht, hängt davon ab, ob es in dem onMap-Array oder innerhalb eines anderen Controls (via der Eigenschaft contains) enthalten ist, welches wiederum im onMap-Array enthalten ist. Identifiziert werden die Controls über den Namen, der vor dem Konfigurationsobjekt steht. Wenn ein Name vom hier in der Dokumentation aufgeführten Typ abweicht, muss die Eigenschaft controlType gesetzt werden.

Beispiel: 

 "controls": {
 	"onMap": ["fastZoom", "toolbox"],
 	"toolbox": {
 		"contains": ["zoom", "zoom"]
 	}
 	"zoom": {
 		"duration": 400
 	},
 	"fastZoom": {
 		"controlType": "zoom",
 		"className": "another-zoom",
 		"duration": 50
 	}
 }

In diesem Beispiel werden der Karte 3 Zoom-Controls und ein Toolbox-Control hinzugefügt. Ein Zoom-Control, dessen Animation kürzer ist, wird direkt auf der Karte angezeigt und zwei identische Zoom-Controls werden innerhalb der Toolbox angezeigt. Um zwei Zooms der Karte hinzufügen zu können, die sich unterschiedlich verhalten, wird hier ein Name gewählt, der vom Controltyp abweicht (fastZoom).

onMap

Dies ist die wichtigste Konfigurationsoption innerhalb von controls. onMap ist eine Liste der darzustellenden Controls. Wenn ein Control nicht in dieser Liste oder in einem in onMap hinzugefügten Container-Control (d.h. controls, die die Eigenschaft contains haben) enthalten ist, wird es nicht angezeigt!

Beispiel: 

 "onMap": ["searchbar", "attribution"]
Konfigurationsoptionen aller Controls
  • className: Der CSS-Klassenname des Controls (anstelle des Standardwerts)
  • controlType: Falls der Name des Controls (d.h. der Wert, der vor der Konfiguration des controls steht und der in dem onMap- und den contains-Arrays verwendet wird) von dem Controltyp abweicht, muss der Typ mit Hilfe dieser Option explizit angegeben werden.
  • target: Die ID eines HTML-Elements in dem das Control dargestellt werden soll, anstatt auf der Karte zu erscheinen. Das Control muss immer noch im onMap-Array aufgeführt werden.
  • title: Ein Titel für das Controlelement. Dieser wird z.B. für das Tooltip oder das TitledMenu verwendet. Das Format, in dem Sie diesen Menüabschnitt benennen können, ist unter Unterstützung für mehrere Sprachen dokumentiert.
 "title": {
 	"de": "Infos",
 	"en": "Information"
 }
Container
mobileControls

Wenn Sie als name oder controlType mobileControls angeben, wird ein Menu erzeugt, das mehrere andere Controls enthalten kann. Mit der Option contains können Sie die Namen der Controls angeben, die in diesem Menü angezeigt werden sollen. Die mobileControls werden nur angezeigt, wenn das mobileLayout aktiv ist.

  • visibleControls: Wenn die Anzahl der in der contains-Option angegebenen Controls den Wert von visibleControls übersteigt, werden Pfeiltasten nach links und/oder rechts angezeigt mit denen durch die Controls navigiert werden kann. (default: 5)
titledMenu

Wenn Sie als name oder controlType titledMenu angeben, wird ein Menu erzeugt, das mehrere andere Controls enthalten kann, die eingeklappt werden könnnen. Auf den Buttons erscheint jeweils der Titel des Controls. Mit der Option contains können Sie die Namen der Controls angeben, die in diesem Menü angezeigt werden sollen.

toolbox

Wenn Sie als name oder controlType toolbox angeben, wird ein Menu erzeugt, das mehrere andere Controls enthalten kann. Mit der Option contains können Sie die Namen der Controls angeben, die in diesem Menü angezeigt werden sollen.

areaMeasurementButton

Wenn Sie areaMeasurementButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer Flächen auf der Karte messen können. AreaMeasurementButton hat die gleichen Einstellungsmöglichkeiten wie distanceMeasurementButton.

arrowButtons

Mit arrowButtons können sie Richtungspfeile anzeigen, mit deren Hilfe die Karte verschoben werden kann.

  • animationDuration: Dauer der Bewegungsanimation
  • animated: Mit diesem Wert können Animationen ganz abgeschaltet werden.
attribution

attribution ist eine Anzeige für die Quellenangaben der Karten und Layer.

  • collapsible:
Hiermit geben Sie an, ob die Anzeige der Quellenangaben eingeklappt werden kann.
  • collapsed:
Hiermit geben Sie an, ob die Anzeige der Quellenangabe beim Start eingeklappt sein soll oder nicht.

Im folgenden Beispiel ist die Quellenangabe beim Start nicht eingeklappt, kann aber eingeklappt werden: 

 "attribution": {
 	"collapsed":    false,
 	"collapsible":  true
 }

Bei vorhandener Attribution wird diese folgendermaßen dargestellt: 

 Karte: ''Attribution der Basiskarte'' | ''Name des Layers'': ''Attribution des Layers''
baselayerSwitcher

baseLayerSwitcher ist ein Auswahlmenü, mit dem Benutzer auswählen können, welche Grundkarte angezeigt wird. Wenn Sie hier einen Wert für title angeben, wird er als Name des Menüabschnitts mit den POI-Layern angezeigt.

distanceMeasurementButton

Wenn Sie distanceMeasurementButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer Distanzen auf der Karte messen können.

Mit Hilfe von der Option style stellen Sie ein, wie die Anzeige der Messung auf der Karte aussieht. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stil­angaben.

Das folgende Beispiel zeigt bei dieser Option möglichen Angaben in verkürzter Form. 

 "distanceMeasurement": {
 	"style":	{ … }
 }
documentationButton

Wenn Sie documentationButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer die Onlinehilfe öffnen können.

  • fileName: Die json-Datei, in der die Hilfetexte für die Controls enthalten sind.
geolocationButton

geolocationButton ist eine Schaltfläche, mit der Benutzer ihre aktuelle Position anzeigen können.

  • animated:
Gibt an, ob mit einem animierten Übergang zur Anzeige der aktuellen Position gewechselt wird oder diese unmittelbar angezeigt wird.
  • maxZoom:
Gibt an wie weit der geolocationButton maximal reinzoomt.
  • style:
Mit Hilfe von der Option style stellen Sie ein, wie die aktuell Position auf der Karte angezeigt wird. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.

Das folgende Beispiel zeigt die bei dieser Option möglichen Angaben in verkürzter Form. 

 "geolocationButton": {
 	"animated":	true,
 	"maxZoom":	13,
 	"style":	{ … }
 }
infoPage

Wenn Sie infoPage angeben, wird eine Schaltfläche angezeigt, mit der Benutzer eine Informationsseite angezeigt bekommen können. Wenn die Option attributions nicht auf false gesetzt wird, enthält die Informationsseite auch die Quellenangaben des Kartenmaterials und der POI's. Mit der Option contentURL können Sie eine URL angeben, deren Inhalt auf der Informationsseite angezeigt wird.

languageSwitcherButton

Wenn Sie languageSwitcherButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer die Sprache der Benutzerschnittstelle umschalten können. Mehr zum Thema finden Sie unter dem Abschnitt Multilingualität.

layerSelector

layerSelector ist ein Auswahlmenü, mit dem Benutzer auswählen können, welche Ebenen mit POIs (z.B. Kinos oder Theater) angezeigt werden. Wenn Sie hier einen Wert für title angeben, wird er als Name des Menüabschnitts mit den POI-Layern angezeigt.

linkGeneratorButton

Wenn Sie linkGeneratorButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer einen Link auf die aktuell dargestellte Karte anzeigen können, um diesen mit anderen zu teilen.

  • baseURL: Dieser Parameter gibt an auf welchen Pfad sich der Link beziehen soll. Dies sollte der Pfad zu der HTML-Datei sein in der sich die Karte befindet. Dies ist relevant bei der Einbindung in Iframes.
overviewMap

Wenn Sie overviewMap angeben, wird eine Übersichtskarte angezeigt. Die Option collapsed bewirkt, dass die Übersichtskarte beim Start eingeklappt ist erst nach Anklicken der zugehörigen Schaltfläche sichtbar ist.

Konfigurationsbeispiel: 

 "overviewMap": {
 	"collapsed": false
 }
printButton

Wenn Sie printButton angeben, wird eine Schaltfläche angezeigt, mit der Benutzer die angezeigte Karte ausdrucken können.

printLogo

Wenn Sie printLogo angeben, wird auf dem Ausdruck der Karte ein Logo angezeigt.

  • src: Der Pfad zu der Bilddatei, die als Logo angezeigt werden soll.
  • width: Die Breite in Pixeln, auf die das Bild skaliert werden soll.
  • height: Die Höhe in Pixeln, auf die das Bild skaliert werden soll.
  • opacity: Die Deckkraft des Bildes. Der Wert kann zwischen 0 und 1 liegen, hierbei entspricht 1 der ursprünglichen Deckkraft des Bildes und bei 0 ist das Bild unsichtbar.
routingControl

Das beschriebene Feature ist erst ab Version 3.1.0 verfügbar.

Wenn Sie routingControl angeben, wird eine Schaltfläche angezeigt, mit der das Routensuche-Fenster geöffnet wird. In diesem Fenster werden je ein Suchfeld für Start und Ziel der Route, eine Schaltfläche zum Vertauschen von Start und Ziel und (sofern Autocomplete unterstützt wird) während der Eingabe von Suchbegriffen eine Auswahlliste mit passenden Ortsangaben angezeigt.

Da die Konfigurationsmöglichkeiten bei der Suche recht umfangreich sind, ist die nachfolgende Beispielkonfiguration in gekürzter Form angegeben. So weit möglich sind die Namen der Konfigurationsparameter identisch zu jenen bei searchControl: 

 "routingControl": {
   "useProxy":              true,
   "fuzzySearchURL":        "http://…/findall.ashx?term={searchstring}&option=2",
   "exactSearchURL":        "http://…/findall.ashx?term={searchstring}&option=1",
   "autocompleteURL":       "http://…/autocomplete.ashx?term={searchstring}",
   "proxy":                 "ajaxproxy/ajaxproxy.php?csurl=",
   "parser":                "G4USearchV2",
   "startStyle":            "#routingStartMarker",
   "viaStyle":              "#routingViaMarker",
   "endStyle":              "#routingEndMarker",
   "routeLineStyle":        "#routeLineStyle",
   "projectionOfServer":    "EPSG:4326",
   "amountDropdownEntries": 6,
   "autocompleteStart":     2,
   "animated":              true,
   "routingDefaults": {
     "baseUrl":             "http://openls.geog.uni-heidelberg.de/route",
     "routePref":           "Car",
     "weighting":           "Recommended",
     "distUnit":            "KM",
     "noMotorways":         false,
     "noTollways":          false,
     "noFerries":           false,
     "instructions":        false,
     "noUnpavedroads":      true,
     "noSteps":             true,
     "lang":                "de"
   }
 }
  • fuzzySearchURL / exactSearchURL / autocompleteURL
In fuzzySearchURL, exactSearchURL und autocompleteURL steht {searchstring} jeweils für die zu suchende Zeichenfolge.
Einstellung Gibt die URL für die … an
fuzzySearchURL unscharfe Suche nach Absenden des Suchformulars
exactSearchURL exakte Suche nach Auswahl eines Punktes im Dropdown-Menü
autocompleteURL automatische Vervollständigung (also die Suchvorschläge)
  • proxy und useProxy
Die Option proxy können Sie verwenden, um für die Suchabfragen einen Proxy anzugeben, der vom global eingestellten abweicht. Weitere Informationen finden Sie unter Proxies.
  • parser:
Mit der Option parser geben Sie an, wie die von den Suchen zurückgegebenen Ergebnisse verarbeitet werden. Damit die von der g4u-Suche gelieferten Suchergebnisse korrekt verarbeitet werden, muss diese Option auf G4USearchV2 eingestellt bleiben. Ein weiterer möglicher Wert ist nominatim, falls Suchergebnisse der Nominatim-Engine von OpenStreetMap verwendet werden sollen.
  • startStyle / viaStyle / endStyle
    • Mit der Option startStyle stellen Sie ein, wie die Positionen der Suchergebnisse für den Startpunkt auf der Karte angezeigt werden. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.
    • Mit der Option viaStyle stellen Sie ein, wie die Positionen der Suchergebnisse für die Vias (Zwischenpunkte) auf der Karte angezeigt werden. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.
    • Mit der Option endStyle stellen Sie ein, wie die Positionen der Suchergebnisse für den Endpunkt auf der Karte angezeigt werden. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.
  • routeLineStyle
    • Mit der Option startStyle stellen Sie ein, wie der Routenverlauf auf der Karte angezeigt wird. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.
  • projectionOfServer
Mit Hilfe von projectionOfServer geben Sie an, in welcher Projektion die Koordinaten der Suchergebnisse vorliegen, bei der g4u-Suche ist dies EPSG:4326.
  • amountDropdownEntries
Mit amountDropdownEntries geben Sie an, wie viele Vorschläge für Suchbegriffe maximal angezeigt werden.
  • autocompleteStart
Mit autocompleteStart geben Sie an, ab wie vielen eingegebenen Zeichen Vorschläge für Suchbegriffe angezeigt werden. Der Standardwert ist 2.
  • autocompleteDelay
autocompleteDelay ist die Zeit in Millisekunden, die nach dem letzten Tastendruck vergehen muss, damit eine Anfrage an den Server gesendet wird. Dies dient der Verringerung der Serveranfragen für Vorschläge zu Suchbegriffen. Der Standardwert beträgt 300 Millisekunden.
  • animated
Mit animated geben Sie an, ob mit einem animierten Übergang zur Anzeige der Suchergebnisse gewechselt wird oder diese unmittelbar angezeigt werden.
  • routingDefaults
Mit routingDefaults konfigurieren Sie die Standardeinstellungen der Routensuche. Die Optionen sind in der folgenden Tabelle dargestellt:
Option Beispiel zulässige Werte Bedeutung
baseUrl "http://openls.geog.uni-heidelberg.de/route" Eine URL Legt die Basis-URL des ORS-Servers fest
routePref "Car" "Car" (Pkw) Standard-Verkehrsmittel
"Pedestrian" (Fußgänger)
"Bicycle" (Fahrrad)
"HeavyVehicle" (Lkw)
weighting "Recommended" "Fastest" (schnellste Verbindung) Standard-Optimierung der Route
"Shortest" (kürzeste Verbindung)
"Recommended" (empfohlene Verbindung)
distUnit "KM" "KM" (Kilometer) Standard-Maßeinheit für Längen
"M" (Meter)
"MI" (Meilen)
noMotorways false true Autobahnen meiden
false Autobahnen nutzen
noTollways false true mautpflichtige Verkehrswege meiden
false mautpflichtige Verkehrswege nutzen
noFerries false true Fährverbindungen meiden
false Fährverbindungen nutzen
instructions false true Routenanweisungen ausgeben
false Keine Routenanweisungen ausgeben
noUnpavedroads (für Fahrrad) true true Unbefestigte Straßen meiden
false Unbefestigte Straßen nutzen
noSteps (für Fahrrad) true true Treppen meiden
false Treppen nutzen
lang "de" "de", "en", "pl", weitere Sprachen Deutsch, Englisch, Polnisch, weitere Sprachen

Die folgende Tabelle listet alle verfügbaren Sprachen auf (Stand 2016-04-20, Quelle Routeservice.languages.xml):

lang Sprache
bg Bulgarisch
ca Katalanisch
cn Chinesisch
cnsimple Chinesisch, vereinfacht
cz Tschechisch
de Deutsch
de-at-ooe Oberösterreichisch (Deutsch)
de-bay Bayrisch (Deutsch)
de-berlin Berliner Mundart (Deutsch)
de-opplat Plattdeutsch (Deutsch)
de-rheinl Rheinländisch (Deutsch)
de-ruhrpo Ruhrdeutsch (Deutsch)
de-swabia Schwäbisch (Deutsch)
dk Dänisch
en Englisch
eo Esperanto
es Spanisch
fi Finnisch
fr Französisch
hr Kroatisch
hu Ungarisch
it Italienisch
ja Japanisch
nb Bokmål (Norwegisch)
nl Niederländisch
nl_BE Flämisch
no Nyorsk (Norwegisch)
pl Polnisch
pt_BR Brasilianisches Portugiesisch
ro Rumänisch
ru Russisch
se Schwedisch
tr Türkisch
uk Ukrainisch
vi Vietnamesisch
searchbar

Diese Option wird ab Version 3.1.0 nicht mehr unterstützt, an ihre Stelle tritt searchControl.

searchControl

Wenn Sie searchControl angeben, werden das Suchfeld, die Schaltfläche und (sofern Autocomplete unterstützt wird) während der Eingabe von Suchbegriffen eine Auswahlliste mit passenden Ortsangaben angezeigt.

In früheren Versionen hieß diese Option searchbar.

Da die Konfigurationsmöglichkeiten bei der Suche recht umfangreich sind, ist das nachfolgende Beispielkonfiguration in gekürzter Form angegeben: 

 "searchControl": {
 	"fuzzySearchURL":		"http://…/findall.ashx?term={searchstring}&option=2",
 	"exactSearchURL":		"http://…/findall.ashx?term={searchstring}&option=1",
 	"autocompleteURL":		"http://…/autocomplete.ashx?term={searchstring}",
 	"proxy":			"ajaxproxy/ajaxproxy-koeln.php?csurl=",
 	"parser":			"G4USearchV2",
 	"style":			{ … },
 	"projectionOfServer":		"EPSG:4326",
 	"amountDropdownEntries":	6,
 	"autocompleteStart":		2,
 	"autocompleteDelay":		320,
 	"animated":			true,
 	"placeholder":			{
 		"de": "Suche …",
 		"en": "Search …"
 	}
 }
  • fuzzySearchURL, exactSearchURL, autocompleteURL:
In fuzzySearchURL, exactSearchURL und autocompleteURL steht {searchstring} jeweils für die zu suchende Zeichenfolge.
Einstellung Gibt die URL für die … an
fuzzySearchURL unscharfe Suche nach Absenden des Suchformulars
exactSearchURL exakte Suche nach Auswahl eines Punktes im Dropdown-Menü
autocompleteURL automatische Vervollständigung (also die Suchvorschläge)
  • proxy und useProxy:
Die Option proxy können Sie verwenden, um für die Suchabfragen einen Proxy anzugeben, der vom global eingestellten abweicht. Weitere Informationen finden Sie unter Proxies.
  • parser:
Mit der Option parser geben Sie an, wie die von den Suchen zurückgegebenen Ergebnisse verarbeitet werden. Damit die von der G4U-Suche gelieferten Suchergebnisse korrekt verarbeitet werden, muss diese Option auf G4USearchV2 eingestellt bleiben. Ein weiterer möglicher Wert ist nominatim, falls Suchergebnisse der Nominatim-Engine von OpenStreetMap verwendet werden sollen.
  • style:
Mit der Option style stellen Sie ein, wie die Positionen der Suchergebnisse auf der Karte angezeigt werden. Welche Einstellmöglichkeiten vorhanden sind entnehmen Sie bitte dem Abschnitt Stilangaben.
  • projectionOfServer:
Mit Hilfe von projectionOfServer geben Sie an, in welcher Projektion die Koordinaten der Suchergebnisse vorliegen, bei der G4U-Suche ist das EPSG:4326.
  • amountDropdownEntries:
Mit amountDropdownEntries geben Sie an, wie viele Vorschläge für Suchbegriffe maximal angezeigt werden.
  • autocompleteStart:
Mit autocompleteStart geben Sie an, ab wie vielen eingegebenen Zeichen Vorschläge für Suchbegriffe angezeigt werden. Der Standardwert ist 2.
  • autocompleteDelay:
autocompleteDelay ist die Zeit in Millisekunden, die nach dem letzten Tastendruck vergehen muss, damit eine Anfrage an den Server gesendet wird. Dies dient der Verringerung der Serveranfragen durch das Autocomplete. Der Defaultwert ist 300 Millisekunden.
  • animated:
Mit animated geben Sie an, ob mit einem animierten Übergang zur Anzeige der Suchergebnisse gewechselt wird oder diese unmittelbar angezeigt werden.
  • placeholder:
Mit placeholder geben Sie an, welcher Platzhalter im Eingabefeld der Suche angezeigt wird, wenn kein Text eingegeben wurde. Das Format, in dem Sie diesen Platzhalter angeben können, ist unter Unterstützung für mehrere Sprachen dokumentiert.
zoom

Wenn Sie zoom angeben, werden mit + und – markierte Schalt­fächen angezeigt und/oder ein Schieberegler, mit deren Hilfe die Zoomstufe der Karte geändert werden kann.

  • slider: Dieser Wert bestimmt, ob ein Schieberegler zum Verändern der Zoomstufe angeizeigt wird oder nicht.
  • buttons: Dieser Wert bestimmt, ob die mit + und - markierten Schaltflächen angezeigt werden.
  • duration: Die Dauer der Animation nach einem Klick auf + oder -

interactions

Hiermit steuern Sie, welche Interaktionen möglich sind.

Wenn Sie … auf true setzen, aktivieren Sie …
doubleClickZoom Zoomen per Doppelklick
dragPan Verschieben der Karte durch Ziehen
keyboardPan Verschieben der Karte mit den Pfeiltasten
keyboardZoom Zoomen mit den Tasten »+« und »−«
mouseWheelZoom Zoomen mit dem Mausrad
pinchZoom Zoomen mit Hilfe einer Zwei-Finger-Geste

Beispielkonfiguration: 

 "interactions": {
 	"doubleClickZoom":	true,
 	"dragPan": 		true,
 	"keyboardPan":		true,
 	"keyboardZoom":		true,
 	"mouseWheelZoom":	true,
 	"pinchZoom":		true
 }

featurePopup

Mit der Option featurePopup steuern Sie, wie Popups angezeigt werden. Beispielkonfiguration: 

 "featurePopup": {
 	"centerOnPopup":	true,
 	"offset":		[ 0, 10 ],
 	"positioning":		"bottom-center",
 	"iconSizedOffset":	[ 0, -1 ],
 	"animated":		true
 }
  • centerOnPopup:
Mit centerOnPopup stellen Sie ein, ob die Ansicht der Karte nach Klick auf das Feature auf das Popup zentriert werden soll.
  • animated:
Mit animated geben Sie an, ob des Popup mit einem animierten Übergang in die Mitte der Karte verschoben wird oder unmittelbar dort angezeigt wird.
  • offset:
Mit offset geben Sie an, um wie weit von der (mit positioning gesteuerten) Ausgangs­position entfernt das Popup angezeigt wird. Der erste der beiden angegebenen Werte ist der Offset in der Horizontalen (positive Werte stehen dabei für eine Position links von der Ausgangsposition), der zweite der Offset in der Vertikalen (positive Werte stehen dabei für eine Position unterhalb der Ausgangsposition). Die hier in Pixeln angegebenen Offsets werden zu den mittels iconSizedOffset angegebenen addiert.
  • iconSizedOffset:
Die Option iconSizedOffset unterscheidet sich von offset nur darin, dass Sie die Offsets hier in Vielfachen der Ausdehnung der Positionsmarker-Grafik in der jeweiligen Richtung angeben. Die hier angegebenen Offsets werden zu den mittels offset angegebenen addiert.
  • positioning:
Mit positioning geben Sie an, wie der Marker relativ zur Lage des Features positioniert wird. Die möglichen Werte finden Sie unter relative Ausrichtung.

featureTooltip

Mit featureTooltip geben Sie an, wie der Tooltip relativ zur Lage des Features positioniert wird.

Beispiel: 

 "featureTooltip": {
 	"positioning": "top-left",
  	"offset": [ 10, 20 ]
 }
  • positioning:
Mit positioning geben Sie an, wie der Tooltip relativ zur Lage des Features positioniert wird. Die möglichen Werte finden Sie unter relative Ausrichtung.
  • offset
Mit offset geben Sie an, um wie weit von der (mit positioning gesteuerten) Ausgangs­position entfernt das Popup angezeigt wird. Der erste der beiden angegebenen Werte ist der Offset in der Horizontalen (positive Werte stehen dabei für eine Position links von der Ausgangsposition), der zweite der Offset in der Vertikalen (positive Werte stehen dabei für eine Position unterhalb der Ausgangsposition).

marker

Mit marker geben Sie Einstellungen für den Marker vor. Momentan wird nur eine Stilangabe mittels style unterstützt.

clustering (verfügbar ab Version 3.1.1)

Das Clustering ist die Zusammenfassung von Icons, die so nah beieinander liegen, dass ihre Icons sich überlappen. Mit Hilfe des clustering-Objekts geben Sie an, wie Icons auf der Karte geclustert werden sollen.

Der Wert distance gibt an, ab welcher Pixeldistanz zwei Icons zu einem Cluster zusammengefasst werden sollen. Ein geeigneter Wert ist der größte Icondurchmesser, der in den verwendeten Daten vorkommt.

Mit dem Parameter style können Sie mit Hilfe der Stilangaben einen Style für das Clustering angeben. Dieser sollte einerseits eine Icongrafik mit einer leeren Stelle für die Anzahl der geclusterten Icons enthalten. Die Position der leeren Stelle kann mit Hilfe der Stylingoptionen offsetX und offsetY des Textstyles angegeben werden. Außer der Icongrafik, sollte auch ein Linestyle vergeben werden, mit dem die Orientierungslinien zwischen Icon und tatsächlicher geographischer Position dargestellt werden.

Mit algorithm können Sie einstellen welcher Algorithmus für das Clustering verwendet werden soll. Default ist simple. Mögliche Werte sind:

raster Orientiert die Cluster an einem Raster.
simple Wählt zufällige Icons als Clustermittelpunkt aus.
hierarchical Fasst Icons, die näher aneinander liegen zuerst zusammen. Rechenintensiv.

Nicht geeignet falls BBOX-Layer verwendet werden.

Sie können einzelne Layer in der entsprechenden Layerkonfiguration mit Hilfe der Option cluster ausschließen.

styling

Mit styling nehmen Sie allgemeine Stileinstellungen vor. Sie können mit defaultStyle einen Standardstil definieren und mit Hilfe von styleMap verschiedene Stile definieren, die dann über einen von Ihnen vergebenen Namen ansprechbar sind.

Hier ein stark gekürztes Beispiel dafür, wie Sie styling verwenden können: 

 "styling" : {
 	"defaultStyle": { … },
 	"styleMap":  {
 		"#bigCircle": { … }
 	}
 }

Die Auslassungszeichen stehen jeweils für Stilangaben.

  • defaultStyle:
Mit defaultStyle definieren Sie einen Standardstil.
  • styleMap
Mit styleMap definieren Sie eine Stylemap, d. h. eine Zuordnung von Namen zu bestimmten Stilangaben.

scaleIcons

Mit scaleIcons geben Sie an, um welchen Faktor Icons gegenüber ihrer Originalgröße vergrößert werden sollen. Dies ist eine globale Einstellung, die von spezifischen Einstellungen für bestimmte Icons überschrieben werden kann.

proxy

Mit dieser Einstellung wird ein globaler Proxy eingestellt. Weitere Informationen finden Sie unter Proxies.

Eine typische Proxykonfiguration hat diese Form: 

 "proxy": "ajaxproxy/ajaxproxy-koeln.php?csurl="

languageSettings

In diesem Bereich erfolgen Spracheinstellungen.

  • currentLanguage
    Gibt die Sprache an, die von der Benutzerschnittstelle verwendet werden soll, sofern der Benutzer keine spezielle Sprache einstellt. Siehe hierzu auch Angabe übersetzbarer Texte als Objekte.
  • defaultLanguage
    Gibt an, welche Standardsprache verwendet wird. Siehe hierzu auch Angabe übersetzbarer Texte als Objekte.
  • languageFile
    Mit dieser Zeichenfolge wird der Pfad angegeben, unter dem die Datei mit den Übersetzungen der Texte der Benutzerschnittstelle auf dem Server zu finden ist. Relative Pfade beziehen sich auf das Verzeichnis, in dem sich die HTML-Datei befindet, die die Karte anzeigt.
  • availableLanguages
    Mit diesem optionalen Array von Zeichenfolgen werden die verfügbaren Sprachen angegeben, diese erscheinen im Auswahlmenü in der angegebenen Reihenfolge. Fehlt diese Angabe, wird ein Array verwendet, das den Wert von currentLanguage enthält. Diesem folgt der Wert von defaultLanguage – sofern die beiden Werte verschieden sind.
Eine Beipielkonfiguration: 
 "languageSettings": {
 	"currentLanguage":	"de",
 	"defaultLanguage":	"en",
 	"languageFile":		"files/l10n.json",
        "availableLanguages":   [ "de", "en", "pl" ]
 }

view

Hiermit wird der anzuzeigende Bereich der Karte eingestellt.

  • center:
Mit center wird der anfängliche Mittelpunkt der Karte als Ort angegeben. Zu den möglichen Werten für diesen Parameter siehe auch Ortsangaben. Beachten Sie, dass fitExtent diese Einstellung überschreibt.
  • zoom:
Mit zoom wird die anfängliche Zoomstufe eingestellt, dabei bedeuten höhere Werte ein näheres Heranzoomen. Beachten Sie, dass fitExtent diese Einstellung überschreibt.
  • minZoom
Mit minZoom wird die minimale Zoostufe eingestellt.
  • maxZoom
Mit maxZoom wird die maximale Zoostufe eingestellt.
  • extent
Mit extent wird der Bereich vorgegeben, in dem sich der Mittelpunkt der Karte befinden kann, siehe hierzu auch Ortsangaben.
  • fitExtent
Mit fitExtent wird der anfänglich anzuzeigende Bereich der Karte angegeben. Hat dieser Parameter einen Wert, wird ein eventuell für center oder zoom angegebener Wert ignoriert. Zu den für diesen Parameter möglichen Werten siehe auch Ortsangaben.

Eine Beispielkonfiguration: 

 "view": {
 	"center":	[ 6.958, 50.9413 ],
 	"zoom": 	15,
 	"minZoom":	12,
 	"maxZoom":	18,
 	"extent":	[ 6.45, 51.2, 7.6, 50.70 ]
 }

mobileLayout

Mit den Einstellungen in mobileLayout kann eingestellt werden in welchen Fällen das mobile Layout eingeschaltet wird.

  • mediaQueries: Dies ist ein Array, das verschiedene CSS-Media-Queries enthalten kann. Wenn eine dieser Media-Queries zutrifft, wird das mobile Layout aktiviert. Weitere Informationen finden Sie unter http://cssmediaqueries.com/what-are-css-media-queries.html
  • scaleIcons: Wenn das mobile Layout aktiviert ist, wird das globale scaleIcons der Karte auf diesen Wert gesetzt.
  • animations: Dieser Wert bestimmt, ob bei einem mobilen Layout Animationen aktiv sein sollen oder nicht.

loadingStrategy

Der Parameter loadingStrategy ist eine generelle Einstellung für alle Featurelayer. Setzen Sie ihn auf "ALL", werden alle verfügbaren POIs geladen. Setzen Sie ihn auf "BBOX", wird nur ein Teil der POIs geladen. Welcher das ist, hängt vom angezeigten Bereich und der Auflösung ab.

interfaceProjection

Mittels interfaceProjection kann die von der Benutzerschnittstelle verwendete Projektion angegeben werden. Ist kein Wert angegeben, wird von "EPSG:4326" ausgegangen, was einer Angabe in dezimalen Längen- und Breitengraden entspricht. Wenn eine von den Standardprojektionen ("EPSG:4326" und "EPSG:3587") abweichende Projektion angegeben werden soll, muss diese unter [#additionalProjections|additionalProjections] verfügbar gemacht werden.

measurementProjection

Mittels measurementProjection kann die zum Messen von Strecken auf der Karte verwendete Projektion angegeben werden. Ist kein Wert angegeben, sind keine Messungen möglich. Es ist sinnvoll hier eine Projektion anzugeben, die möglichst genau auf die Region abgestimmt ist, in der die Messungen durchgeführt werden können. So ist die Projektion "EPSG:25832" z.B. gut geeignet für Messungen im nördlichen Mitteleuropa. Wenn eine von den Standardprojektionen ("EPSG:4326" und "EPSG:3587") abweichende Projektion angegeben werden soll, muss diese unter [#additionalProjections|additionalProjections] verfügbar gemacht werden.

additionalProjections

Der Parameter additionalProjections enthält ein Array in dem der Karte zusätzliche Projektionen zu Verfügung gestellt werden können. Jede Projektion wird durch ein Objekt bestimmt, das die Parameter code und definition enthält. Die Projektion kann dann in der Software über den angebenen Code identifiziert werden. Verwendbare Definitionen finden Sie auf der Seite http://epsg.io/ (Auswahlpunkt 'PROJ.4' unter 'Exports').

Beispiel: 

 "additionalProjections": [
 	{
 		"code": "EPSG:25832",
 		"definition": "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
 	}
 ]

move

Die Einstellungen in move beeinflussen die automatischen Bewegungen auf der Karte (z.B. das Zoomen auf Suchergebnisse oder das Zentrieren des Popups).

  • animationDuration:
Dieser Wert bestimmt, wie viele Millisekunden die Animation dauert. Für Animationen, deren Endsichtbereich außerhalb des aktuellen Sichtbereiches liegt, wird dieser Wert verdoppelt.
  • bouncing
Dieser Wert bestimmt, ob eine "hüpfende" Animation durchgeführt werden soll, wenn der Endsichtbereich der Animation außerhalb des aktuellen Sichtbereiches liegt.
  • pixelPadding:
Mit pixelPadding wird der minimale Abstand zwischen den anzuzeigenden Daten und dem Kartenrand in Pixeln angegeben, nachdem die Animation abgeschlossen wurde.
  • meterMinSize
Mit meterMinSize wird angegeben, wieviele Meter die Karte am Ende der Animation in x und y Richtung mindestens anzeigt.

URL-API

Dieser Abschnitt enthält eine Übersicht über die von g4u3 unterstützten URL-Parameter.

Generelle Parameter

Dieser Abschnitt listet Parameter für die Ausrichtung der Karte, die anzuzeigende Position und die Zoomstufe und die Sprache der Benutzerschnittstelle auf.

lang

Mit diesem Parameter wird die Sprache der Benutzerschnittstelle eingestellt. Die Sprachkürzel folgen ISO 639 bzw. DIN 2335:2014-07. Aktuell stehen »de« (Deutsch) und »en« (Englisch) zur Auswahl.

x & y (verfügbar ab v3.1.0)

Mit diesem Parameter wird die Startposition der Karte dezimal angegeben. Dabei stehen wie üblich positive (bzw. negative) lat-Werte für Positionen nördlich (bzw. südliche) des Äquators und positive (bzw. negative) lon-Werte für Positionen östlich (bzw. westlich) des Nullmeridians. Die Werte sind immer in der eingestellten interfaceProjection anzugeben.

lon & lat

Mit diesem Parameter wird der anfänglich in der Kartenmitte angezeigte Breitengrad bzw. Längengrad dezimal angegeben. Dabei stehen wie üblich positive (bzw. negative) lon-Werte für Positionen östlich (bzw. westlich) des Nullmeridians und positive (bzw. negative) lat-Werte für Positionen nördlich (bzw. südliche) des Äquators. Die Werte sind immer in Gradeinheiten anzugeben. Wenn x und y angegeben sind werden lon und lat ignoriert.

rot

Dieser Parameter ermöglicht, die Karte relativ zur Standardausrichtung zu drehen. Der Drehwinkel wird dezimal in Grad angegeben. Dabei stehen positive (bzw. negative) Werte für eine Drehung mit (bzw. entgegen) dem Uhrzeigersinn.

zoom

Mit diesem Parameter wird die anfängliche Zoomstufe angegeben. Dabei bedeuten höhere Werte ein näheres Heranzoomen.

Marker-Parameter

Wenn ein Marker angezeigt wird, erscheint er in der Mitte des anfänglich angezeigten Kartenausschnitts, es sei denn, die Position wird mit markLat und markLon abweichend gesetzt.

markText

Dieser Parameter gibt den im Marker-Popup anzuzeigenden Text an. Fehlt markText oder ist markText leer, hat der Marker kein Popup.

markPop

Dieser Parameter steuert die anfängliche Sichtbarkeit des Marker-Popups. Ist der Parameter auf true oder überhaupt nicht gesetzt, wird das Popup angezeigt, falls markText gesetzt ist, andernfalls nicht.

markx & marky (verfügbar ab v3.1.0)

Diese Parameter ermöglichen, den Marker anfänglich auf einem Breitengrad und einem Längengrad positionieren, der nicht in der Mitte des anfänglich angezeigten Kartenausschnitts liegen muss. Diese Werte werden genauso angegeben wie jene für x & y. Fehlt dieser Parameter wird kein Marker angezeigt.

markLon & markLat

Diese Parameter ermöglichen, den Marker anfänglich auf einem Breitengrad und einem Längengrad positionieren, der nicht in der Mitte des anfänglich angezeigten Kartenausschnitts liegen muss. Diese Werte werden genauso angegeben wie jene für lon & lat. Fehlt dieser Parameter wird kein Marker angezeigt. Wenn markx und marky angegeben sind werden markLon und markLat ignoriert.

Layer-Parameter

visLay

Dieser Parameter gibt die sichtbaren Layer in Form einer kommagetrennten Liste von Layer-IDs an (die Kommata erscheinen normalerweise in URL-kodierter Form, also als »%21«). Fehlt dieser Parameter, werden die Einstellungen aus der Konfigurationsdatei verwendet.

avaLay

Dieser Parameter gibt die in der Benutzerschnittstelle als verfügbar aufzulistenden Layer in Form einer kommagetrennten Liste von Layer-IDs an (die Kommata erscheinen normalerweise in URL-kodierter Form, das ist als »%21«). Fehlt dieser Fehlt dieser Parameter, werden die Einstellungen aus der Konfigurationsdatei verwendet.

queryLayer-Parameter (dblay, pois, etc)

Siehe Angaben zum Api-Schlüssel (nur für queryLayer)

Konfigurationsdatei-Parameter

conf

Mit diesem Parameter kann eine zu den Standardeinstellungen alternative Client-Konfigurationsdatei angegeben werden.

layConf

Mit diesem Parameter kann eine zu den Standardeinstellungen alternative Layer-Konfigurationsdatei angegeben werden.

Spezielle Parameter

clsBtn

In der Mobilversion kann über diesen Parameter ein Schließen-Button angezeigt werden. Dieser funktioniert nur, wenn der Client aus der Seite heraus geöffnet wurde (mit window.open oder target=“_blank“).

JavaScript-API 

 LayerObject: {
 	id: string/int,
 	name: string,
 	style: styleConfObject,
 	visible: bool,
 	source: {
 		type: string (zur Zeit lediglich: "KML"),
 		url: string,
 		useProxy: bool,
 		...
 	},
 	...
 }

Alle Parameter sind optional. Es können alle Parameter angegeben werden, die auch in der Konfiguration für FeatureLayer angegeben werden können. 

 LayerObjectWithFeatures: {
 	id: string/int,
 	name: string,
 	style: styleConfObject,
 	visible: bool,
 	source: {
 		features: Array<FeatureObject>
 		...
 	},
 	...
 }

Alle Parameter sind optional. Es können alle Parameter angegeben werden, die auch in der Konfiguration für FeatureLayer angegeben werden können. 

 FeatureObject: { id: string/int, name: string, description: string, geometryWKT: WKTString }

Feature Manipulation

They all cancel each other. 

 map.get("api").drawFeature(opt_options) -&gt; [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] (ol.Feature)

Invokes drawing a feature. Passes the drawn Feature. Style of drawing is settable with config and/or opt_options. Options: "type", "style" 

 map.get("api").selectFeature(opt_options) -&gt; [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] (ol.Feature)

Invokes selecting a feature. Passes the selected Feature. 

 map.get("api").modifyFeature(feature_s, opt_options)

Invokes modifying a feature. The parameter feature_s might be a single feature, an array or an ol.Collection of features. Does not end by itself, modifies the passed features directly. 

 map.get("api").cancelFeatureManipulation()

Cancel one of the functions above.

Deleting a feature can be done with removing it from a layer ...

Layers 

 map.get("api").addBaseLayer(layerObject: LayerObject) -&gt; ol.layer.Tile

Erzeugt einen ol-tile-layer. Wird automatisch der Karte hinzugefügt & muss sichtbar gemacht werden. Ein leeres Objekt erzeugt einen leeren neuen Layer. Wird eine Source mit url angegeben, wird dieser layer geladen, sobald er sichtbar gemacht wird. 

 map.get("api").addFeatureLayer(layerObject: LayerObjectWithFeatures) -&gt; ol.layer.Vector

Erzeugt einen ol-vector-layer. Wird automatisch der Karte hinzugefügt & muss sichtbar gemacht werden. Ein leeres Objekt erzeugt einen leeren neuen Layer. Wird eine Source mit url angegeben, wird dieser layer geladen, sobald er sichtbar gemacht wird. 

 map.get("api").loadLayerFromServer(layerOptions: LayerObject) -&gt; Promise (ol.layer.Vector)

lädt einen Layer vom Server. Der Parameter source muss enthalten sein und das Objekt muss dann wiederrum eine url enthalten. Wird automatisch der Karte hinzugefügt. Wrap für createLayerFromObject. 

 map.removeLayer(layer: ol.layer.Vector)

Removes first occurance of layer from the map. 

 map.addLayer(layer: ol.layer.Vector)

Adds the layer to the map

Einfügen, entfernen von Features in Layer mit den ol-Methoden: 

 layer.getSource().addFeature(feature: ol.Feature)

 layer.getSource().removeFeature(feature: ol.Feature)

Styling Schnittstelle 

 map.get("styling").styleLayer(layer: ol.layer.Vector, style: styleObject)

 map.get("styling").styleCollection(collection: ol.layer.Vector, style: styleObject)

 map.get("styling").styleFeature(feature: ol.Feature, style: styleObject)

Move Schnittstelle

the animated option is only available if the map was build with the animation option set to true. 

 map.get("move").toPoint(point: ol.Coordinate, animated: bool)

Bewegt die Karte ohne zu Zoomen zum gegebenen Punkt. 

 map.get("move").toExtent(extent: ol.Extent, animated: bool)

Bewegt die Karte ohne zu Zoomen zum Zentrum des angebenen Ausschnittes. 

 map.get("move").zoomToPoint(point: ol.Coordinate, animated: bool)

Bewegt und Zoomt die Karte zu dem angebenen Punkt, dabei werden die konfigurierten Werte für das Padding und den minimal anzuzeigenden Abschnitte eingehalten. 

 map.get("move").zoomToExtent(extent: ol.Extent, animated: bool)

Bewegt und Zoomt die Karte zu dem angebenen Ausschnitt, dabei werden die konfigurierten Werte für das Padding und den minimal anzuzeigenden Abschnitte eingehalten.

Karten- und Layerkonfigurationen auslesen und updaten

Mit map.get("config") -&gt; Object kann die Kartenkonfiguration ausgelesen und mit map.set("config", newConfig: Object) upgedated werden.

Mit map.get("layerConfig") -&gt; Object kann die Layerkonfiguration ausgelesen und mit map.set("layerConfig", newConfig: Object) upgedated werden.

Example 

 var api = myMap.get("api"); 
 var layer = api.createLayerFromObject({ title: "Neuer Layer", visible: true }); 
 myMap.addLayer(layer);
 api.drawFeature().done(function (feature) { layer.getSource().addFeature(feature); });
 // -> zeichne ein Feature ein.
 api.selectFeature().done(function (feature) { myMap.get("move").toPoint(feature.getGeometry().getCoordinates()); });
 // -> wähle ein Feature aus 
 api.selectFeature().done(function (feature) { console.log(feature.getGeometry().getCoordinates()); })
 // -> wähle ein Feature aus

 [[Kategorie:G4U]][[Kategorie:Hilfe]][[Kategorie:Produkte]]
Clone this wiki locally