InformationsmanagementMM-SYS-2PortfolioTutorialWebentwicklungWebLab

Tutorial: Interaktive Karte – Kiosktour Hannover

Kiosktour durch Hannover

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Interaktive Karte – Kiosktour Hannover

Autor: Marina Cordes und Catarina Schultz

Idee

Wir haben uns zu Anfang dieses Projekts gefragt, was das Studentenleben in Hannover besonders macht und was ein “Ersti” der Hochschule Hannover unbedingt für seine zukünftige Zeit in dieser schönen Stadt mitnehmen sollte. Sofort kam uns das Alleinstellungsmerkmal der höchsten Kioskdichte in Hannover in den Sinn. Ein absolut typischer Charakter unserer Landeshauptstadt und Basis für eine kostengünstige Freizeitaktivität für Studenten.

Also war das Ziel klar: Wir möchten eine geführte Kiosktour in Form einer Google-Karte mit zusätzlichen Informationen und Tipps erstellen.

Welcher Weg und welche Highlights für einen ersten durstfreien Spaziergang geeignet sind soll mithilfe einer Google-Karte aufgezeigt werden und durch Pop-up-Fenster mit Informationen einen zusätzlichen Mehrwert bieten.

 

Umsetzung und Erläuterung

Als Grundlage dient uns eine auf Codepen zur Verfügung gestellte Google-Karte. Diese Karte beinhaltet bereits eingebetteten Code für rote Map-Marker, die mittels der Angabe von den Koordinaten unsere Zwischenstopps einzeichnet und mit einer Legende, welche auf der rechten Seite der Karte eingeblendet wird, verbindet.

Nach und nach setzten wir sieben Markierungen (siehe Abbildung 1), die durch die aufsteigende Beschriftung mit Zahlen die Route verdeutlichen. Die angelegte Legenden-Box auf der rechten Seite zeigt, welches Ziel sich hinter welcher Nummer verbirgt. Durch einen Hover-Effekt auf den eingetragenen Zielen, wird farblich visualisiert, zu welchem Standort Informationen angezeigt werden würde, sollte der Nutzer hier klicken. Der Klick auf ein Ziel in der Legende öffnet den Informationskasten über dem Standort auf der Karte. Nicht nur über die Legende auf der rechten Seite, sondern auch beim Klick auf einen der Marker wird der Informationskasten geöffnet.

Screenshot - Beschreibung und Koordinaten von 2 Zwischenstopps
Abbildung 1: Beschreibung (grün) und Koordinaten (orange) von 2 Zwischenstopps in JavaScript (Screenshot aus Codepen)

Ein weiterer Hover-Effekt auf dem geöffneten Informationskasten lässt diesen größer werden, sodass der gesamte Text lesbar ist. Der Kasten ist vorerst etwas kleiner, um beim Erscheinen auf der Karte nicht zu viel von ihr zu verdecken. Außerdem ändert sich die Hintergrundfarbe des Kastens von einem etwas dunkleren zu einem helleren grün während des Hochskalierens, damit für das Auge des Nutzers noch klarer wird, dass sich der Inhalt verändert.

Auf der linken Seite der Karte ist ein weiterer, grüner Informationskasten angelegt, welcher als Überschrift und Einleitung in die Seite dient. Damit dieser auch als erstes gelesen und beachtet wird, haben wir einen Jumping-Effekt hinzugefügt, sodass der gesamte Kasten kontinuierlich leicht auf und ab schwebt. Dazu verwendeten wir Teile aus dem Codepen von Bandula Gamage.

Wir haben uns bei der Gestaltung für den Farbbereich “grün” entschieden, da die grüne Farbe auch bei der Google-Map aufgenommen wurde. So ergibt es ein harmonisches Bild und der Nutzer kann sich leichter orientieren, da allein die Marker in einem auffallenden rötlichen Ton gestaltet sind.

 

Code

Bei der Umsetzung der Map für eine Kiosktour haben wir HTML, CSS und JavaScript angewandt. Jegliche Styles und Effekte sind im CSS-Code beschrieben. Markierungen auf der Karte und die Legende sind mit JavaScript erstellt und auch mit CSS gestylt.

Zu aller erst haben wir die Website-Struktur im HTML-Teil bearbeitet. Hier war bereits eine Klasse mit dem Namen “map” vorhanden. Für die Informationsbox an der linken Seite fügten wir eine ID mit dem Namen “box” hinzu. Diese Box sprechen wir im CSS-Teil an und definierten diese mit Angaben wie zB. Viewport-Breite, Viewport-Höhe, Hintergrundfarbe im RGBA Farbraum etc..

Den oben genannten Jumping-Effekt der Box fügten wir mit “animation: jump 2s infinite ease-in-out” ein. In dieser Zeile wird angegeben, dass die Box unendlich oft im zwei Sekunden Takt hoch und runter hüpft. Des Weiteren wird der Übergangseffekt mit einem langsamen Start und Ende spezifiziert. Durch das Einbringen von “-moz-” und “-webkit-” ist gegeben, dass der Effekt in den Webbrowsern Safari, Google Chrome und Mozilla Firefox richtig angezeigt wird.
Die Klasse “.gm-style-iw” gibt alle Styles und Effekte der Informationskästen wieder, welche Aufklappen, wenn man auf einen der Marker klickt. Die Klasse “.gm-style-iw:hover” zeigt die Styles und Effekte an, wie sich der Informationskasten verhält, wenn man mit dem Cursor über den Kasten fährt.

Hier können die Codes und das Ergebnis der interaktiven Kiosktour angesehen werden. Abbildung 2 zeigt einen Ausschnitt unseres Endergebnisses.

Screenshot aus Codepen: Pen zur Kiosktour in Hannover
Abbildung 2: Pen zur Kiosktour in Hannover (Screenshot aus Codepen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.