ViennaGIS-API: Karte mit Javascript selbst erstellen

Die ViennaGIS-API bietet einige Funktionen an, durch die Benutzerinnen und Benutzer mit ein wenig Javascript-Entwicklung selbstdefinierte Karten in ihre Webseite einbinden können.

  1. Um diese Funktionalitäten verwenden zu können, müssen im ersten Schritt zwei Dateien im <head> der Webseite eingebunden werden:
    1. <link href="https://www.wien.gv.at/stadtplan/ApiGetControlCss.ctrl" rel="stylesheet" type="text/css" media="all" />
    2. <script src="https://www.wien.gv.at/stadtplan/ApiGetControlScript.ctrl" type="text/javascript"></script>
  2. Wenn diese beiden Dateien geladen wurden, kann ein Kartenobjekt erstellt werden:
    var _viennaGisMap = new ViennaGisMap("viennaGisCont", "https://www.wien.gv.at/stadtplan/", "de");
  3. Wir empfehlen, diesen Meta-Tag zu setzen:
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    </head>
    Allerdings kann dann nicht mehr die gesamte Webseite mit den Fingern bzw. durch einen Doppelklick zoomen, sondern nur die Karte! Dies gilt für die gesamte Webseite, wo dieser Meta-Tag eingefügt wurde und kann Auswirkungen auf die Barrierefreiheit haben.

Auf der Webseite muss sich ein div-Container mit der ID "viennaGisCont" (die ID kann natürlich beliebig sein) befinden, in den die Karte eingefügt werden soll. Diese ID ist der erste Parameter. Wird eine andere ID verwendet, muss das im Aufruf berücksichtigt werden. Der zweite Parameter gibt an, welche Webapplikation (Stadtplan, Kulturgut, Umweltgut) angesprochen werden soll. Der dritte Parameter gibt die Sprache an, mit der die Karte angezeigt werden soll.

Das Objekt _viennaGisMap kann dazu verwendet werden, um eigene Karteninhalte zu definieren.

Es folgt eine Auflistung der von diesem Objekt unterstützten Funktionen:

  • Resize (<width>, <height>): Mit dieser Funktion kann die Größe des Kartencontainers verändert werden. Die Werte müssen in Pixel angegeben werden.
  • ShowLayers (<hintergrund>, <inhalt>): Bei dieser Funktion werden zwei Listen als Parameter angegeben:
    • Die erste Liste ist eine durch Beistrich getrennte Liste von Namen, die angibt welche Hintergrunddaten (Karte, Karte s/w, Luftbild und/oder Adressen) eingeschaltet werden sollen.
    • Die zweite Liste ist eine durch Beistrich getrennte Liste von Namen, die angibt, welche zusätzlichen Inhalte über den Hintergrunddaten angezeigt werden sollen (zum Beispiel: öffentlicher Verkehr).
      Die Namen, die in diese beiden Listen eingegeben werden können, sind fix vorgegeben und unterscheiden sich je nach verwendeter Webapplikation (Stadtplan, Kulturgut, und so weiter). Zu beachten ist, dass im Laufe der Zeit eventuell einer dieser Namen nicht mehr unterstützt wird oder umbenannt wird. In diesem Fall muss der Javascript-Code angepasst werden.
    • Außerdem gibt es einen dritten Parameter, der mit true oder false befüllt werden kann, je nachdem ob bereits sichtbare Layer beibehalten werden sollen oder nicht.
  • ShowBookmark (<bookmark>): Dieser Funktion kann ein vorgenerierter Code übergeben werden, der den sichtbaren Bereich des Kartenausschnitts und die sichtbaren Layer enthält. Dieser bookmark-Code kann nur über die Funktion "Link/Lesezeichen" beziehungsweise "Link/Einbetten" der zugrundeliegenden Webapplikation oder in der Vorschauseite der API generiert werden.
  • ShowAddress (<bookmark>, <address | ONRID>, <address | bmadr>): Bei dieser Funktion kann zusätzlich zum bookmark-Code auch eine Adresse (zum Beispiel "Rathausstrasse 1") - die UTF8-codiert angegeben werden muss - oder eine ONR-ID angegeben werden. Der letzte Funktionsparameter definiert, wie im Fall einer gefundenen Adresse die Darstellung erfolgen soll (siehe oben).
  • SetExtent (<x-bottomleft>, <y-bottomleft>, <x-topright>, <y-topright>): Diese Funktion kann dazu verwendet werden, um den sichtbaren Bereich der Karte (im zur Verfügung stehenden Platz des Kartencontainers) neu zu setzen. Die Koordinaten sind im Gauß-Krüger-M34-System anzugeben. Am einfachsten ist die Feststellung dieser Koordinaten mit dem Messwerkzeug "Koordinaten messen" im Stadtplan.
  • GetCurrentPinPosition(): Falls auf der Karte Pins eingezeichnet wurden, liefert diese Funktion die Position des zuletzt eingezeichneten Pins in Gauß-Krüger-M34 zurück.
  • GetCurrentClickPosition(): Diese Funktion liefert die Position des letzten Klicks auf die Karte in Gauß-Krüger-M34 zurück.
  • OnClickOverwrite: Auf diese Variable kann eine selbstdefinierte Javascript-Funktion gesetzt werden, die dann bei jedem Klick auf die Karte aufgerufen wird. Die aufgerufene Funktion erhält die Position des Klicks in Gauß-Krüger-M34 als Parameter. Die ursprüngliche Funktion eines Klicks auf die Karte (Informationen abfragen beziehungsweise Sprechblase) wird dadurch überschrieben.
  • OnClickNoOverwrite: Auf diese Variable kann eine selbstdefinierte Javascript-Funktion gesetzt werden, die dann bei jedem Klick auf die Karte aufgerufen wird. Die aufgerufene Funktion erhält die Position des Klicks in Gauß-Krüger-M34 als Parameter. Die ursprüngliche Funktion eines Klicks auf die Karte (Informationen abfragen beziehungsweise Sprechblase) wird dadurch nicht überschrieben, sondern gleichzeitig ausgeführt.
  • SetPin (<definition>): Diese Funktion kann dazu verwendet werden, einen Pin an eine bestimmte Position in der Karte zu platzieren.
    <definition> ist ein Javascript-Objekt, das folgende Einstellungsmöglichkeiten unterstützt:
    1. MapPosX (float): Die X-Koordinate in Gauß-Krüger-M34, an der der Pin positioniert werden soll
    2. MapPosY (float): Die Y-Koordinate in Gauß-Krüger-M34, an der der Pin positioniert werden soll
    3. SinglePin (boolean): Definiert, ob nur ein Pin oder mehrere gezeichnet werden dürfen. Standard sind mehrere Pins.
    4. PinUrl (string, optional): Falls angegeben, wird dieser Pin angezeigt (als Alternative zum Standardpin)
    5. PinDeltaX (integer, optional): Falls angegeben, wird das Pin-Image um diesen Wert verschoben. Diese Funktion ist nur in Zusammenhang mit PinUrl möglich.
    6. PinDeltaY (integer, optional) : Falls angegeben, wird das Pin-Image um diesen Wert verschoben. Diese Funktion ist nur in Zusammenhang mit PinUrl möglich.
    7. MoveAllowed (boolean): Definiert, ob ein Pin mit der Maus verschoben werden kann. Standard ist: kein Verschieben.
    8. CenterMap (boolean): Definiert, ob die Karte so verschoben wird, dass der Pin in der Mitte sitzt. Standard ist: kein Verschieben.
    9. Tooltip (string, optional): Text der als Tooltip angezeigt werden soll, wenn man mit dem Cursor über das Bild fährt.
    10. ZoomLevel (integer, optional): Ziffer welche die Zoomstufe der Karte angibt (Wertebereich 0 bis 13). Wenn diese Eigenschaft nicht angegeben wird, bleibt die aktuelle Zoomstufe erhalten.
  • DisplayFullVersionLink (visible): Der Parameter visible definiert ob der Link "Vollversion anzeigen" unter der Karte angezeigt wird oder nicht. Es handelt sich um einen booleschen Parameter der auf true oder false gesetzt werden muss. Standardeinstellung ist true.

Für den Stadtplan sind zum Beispiel zusätzliche Inhalte verfügbar.

Verantwortlich für diese Seite:
Stadt Wien | ViennaGIS
Kontaktformular