View source for 10. Lehreinheit

=== Benötigte Bestandteile ===
Damit wir die Daten, die wir in den vergangenen Sitzungen strukturiert erfasst haben, in Kartenform visualisieren können, benötigen wir verschiedene Komponenten<ref group="A">Der Bezug der Daten aus der DB erfolgt über ein PHP-Skript. Die Daten werden unmittelbar in die JavaScript-Datei importiert; das hat den Vorteil, dass die Karte lokal mit allen Funktionalitäten abgerufen werden kann, nachdem die Daten einmal importiert wurden. Die PHP-Datei wurde im Kursrahmen nicht selbst erstellt, sondern von der ITG bereit gestellt.</ref>:
* Eine HTML-Datei, auf der die Oberfläche der Webseite, also das Front-End basiert
* Eine JavaScript-Datei, die in diese HTML-Seite eingebunden wird, um dynamische Elemente zu generieren (in unserem Fall die Google Map mit verschiedenen Funktionalitäten)
* Eine CSS-Datei, die wir ebenfalls in unsere HTML-Seite einbinden, um das Aussehen der einzelnen Komponenten der HTML-Seite zu gestalten
<br \>
Hinweis: Selbstverständlich ist es auch möglich, alle oben genannten Informationen in der HTML-Datei unmittelbar zu vereinen und auf das Anlegen mehrerer Dateien zu verzichten. Sobald jedoch bestimmte Elemente nicht nur in einer, sondern in mehreren Seiten eingebunden werden sollen, ist es sinnvoller, diese einmal an zentraler Stelle für alle Dateien abzulegen<ref group="A">Dieses Vorgehen ist Ihnen bereits aus der Normalisierung von Forschungsdaten in relationalen DB-Systemen bekannt.</ref>.

=== Praktische Vorgehensweise ===
Auf dem Virtuellen Desktop legt jeder Teilnehmer im Bereich "Persönlicher Ordner" einen Ordner "habsburg" an; dieser Ordner simuliert unseren Webspace (normalerweise auf dem Webserver). In diesem Ordner legen wir zwei Unterordner an, zum einen "css" für Cascading Stylesheet, zum anderen "js" für JavaScript.

Anschließend öffnen wir einen Editor unserer Wahl (im DHVLab beispielsweise Kate oder Sublime 2) und erstellen drei neue Textdateien:
* habsburg.html (wird im Ordner "habsburg" abgelegt)
* style.css (wird im Unterordner "css" abgelegt)
* map.js (wird im Unterordner "js" abgelegt)

=== Die HTML-Datei ===
Im Folgenden wenden wir uns der Erstellung der HTML-Datei zu<ref group="A">Für eine Einführung in HTML, CSS und JavaScript siehe das Handbuch "[[Einführung in die Website-Erstellung]]".</ref>:
<br \><br \>
<nowiki><!DOCTYPE html></nowiki><br \>
<nowiki><html lang="de"></nowiki><br \>
<nowiki><head></nowiki><br \>
<nowiki><!-- Das ist unser ein Kommentar, den der Browser nicht ausgibt--></nowiki><br \>
<nowiki><!-- Head-Bereich, enthält Metainformationen über die Webseite (werden nicht im Browser ausgegeben) --></nowiki>
<br \><br \>
<nowiki><title>Habsburger Grabdenkmäler</title></nowiki><br \>
<nowiki><!-- Seitentitel, im Browserfenster, Leesezeichen, Suchmaschinen --></nowiki><br \>
<nowiki><meta charset="utf-8"></nowiki><br \>
<nowiki><!-- Mit utf-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute ö, ä, ü) --></nowiki>
<br \><br \>
<nowiki><link rel="stylesheet" type="text/css" href="css/style.css"></nowiki><br \>
<nowiki><!-- Datei style.css mit Informationen zur Gestaltung unserer HTML-Seite - befindet sich im Ordner css --></nowiki>
<br \><br \>
<nowiki><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script></nowiki><br \>
<nowiki><!-- Einbinden der Google Maps API --></nowiki><br \>
<nowiki><script type="text/javascript" src="js/map.js"></script></nowiki><br \>
<nowiki><!-- Einbinden unserer JavaScript-Datei, die die Funktionen zu unserer Karte enthalten wird. --></nowiki>
<br \>
<nowiki></head></nowiki>
<br \><br \>
<nowiki><body></nowiki><br \>
<nowiki><!-- Umfasst den Inhalt, der im Browser ausgegeben wird --></nowiki>
<br \><br \>
<nowiki><h1>Die Grabstätten der Habsburger</h1></nowiki><br \>
<nowiki><h2>Ein Datenbankprojekt des Hauptseminars, WiSe 2016/17</h2></nowiki><br \>
<nowiki><!-- Überschriften vom Typ 1 und 2 --></nowiki><br \>
<nowiki><div id="canvas"></div></nowiki><br \>
<nowiki><!-- Das Google-Maps Layer wird mit einem div-Container eingebunden --></nowiki><br \>
<nowiki><p align="center"> Ich bin ein Textblock mit einem <br /> Zeilenumbruch darin. Außerdem findet sich hier ein Link auf unsere <b>'echte'</b> <a href="http://www.habsburg.gwi.uni-muenchen.de/">Habsburg-Projektseite</a>. Wenn wir möchten, dass sich der Link in einem neuen Fenster öffnet, fügen wir noch das Attribut <i>target="blank"</i> hinzu: Wir verlinken also auf erneut auf die <a target="blank" href="http://www.habsburg.gwi.uni-muenchen.de/">Habsburg-Projektseite.</a></p></nowiki><br \>
<nowiki><button onmousedown="init(); marker();">Marker</button></nowiki><br \>
<nowiki><button onmousedown="line();">Linie</button></nowiki><br \>
<nowiki><!-- Es werden zwei Schaltflächen erstellt, die unterschiedliche Funktionalitäten besitzen. Bei Klick auf die erste Schaltfläche werden die Marker gesetzt, bei der zweiten eine Verbindungslinie zwischen den Markern gezogen. Ihre Funktionalität erhalten sie über JavaScript-Funktionen, zu denen wir weiter unten kommen werden.--></nowiki><br \>
<nowiki></body></nowiki><br \>

=== Die CSS-Datei ===
Nun bearbeiten wir die erstellte CSS-Datei im Editor, um ausgewählten Bereichen in unserer HTML-Datei Gestaltungsmerkmale zu übergeben. Wir beschränken uns dabei auf einige wenige Merkmale:
<br \><br \>
html, body {<br \>
	height: 100%;<br \>
	margin: 0px;<br \>
	padding: 0px;<br \>
	   }<br \>
<nowiki>#canvas {</nowiki><br \>
	width: 90%;<br \>
	height: 80%;<br \>
	margin: auto;<br \>
	}<br \>
/* Ein Kommentar in CSS */<br \>
/* canvas ist der Bereich für den Google Maps Layer. Das Doppelkreuz signalisiert, dass es sich hier um ein bestimtes div-Element mit der ID "canvas" handelt. */<br \>
h1 {<br \>
	text-align: center;<br \>
   }<br \>
h2 {<br \>
	text-align: center;<br \>
	color: green;<br \>
   }<br \>

=== Die JavaScript-Datei ===
==== Beispiel 1 ====
In diesem ersten Beispiel werden wir eine Karte erstellen, auf der sich mehrere, verschiedenfarbige Marker befinden und diese mit einer Linie verbinden. Sowohl die Marker als auch die Linien sollen nur dann erscheinen, wenn der Benutzer auf den zugehörigen Button klickt.
<br \><br \>
onload = init;<br \>
<nowiki>//mit dem Laden der Seite soll das Initialisieren der Karte einhergehen.</nowiki>
<br \><br \>
var map, mapOptions<br \>
var muenchen = new google.maps.LatLng(48.149600, 11.574481)<br \>
var paris = new google.maps.LatLng(48.859836, 2.359529)<br \>
var frankfurt = new google.maps.LatLng(50.110556, 8.682222)<br \>
var m1, m2, m3<br \>
<nowiki>// Variablen können nebeneinander, durch Kommata getrennt, geschrieben werden.</nowiki><br \>
<nowiki>// Wir weisen den geographischen Längen- und Breitenangaben Variablennamen zu (muenchen, paris, frankfurt)</nowiki><br \>
<nowiki>// m1, m2, m3 sind Variablen, die wir als Marker unten zu diesen Geodaten einsetzen werden</nowiki>
<br \><br \>
<nowiki>// Zunächst einmal muss die Google Maps initalisiert werden.</nowiki><br \>
<nowiki>function init()</nowiki> {<br \>
<nowiki>map = new google.maps.Map( </nowiki><br \>
<nowiki>// Der Variable map wird die JavaScript-Klasse google.maps.Map zugewiesen.</nowiki><br \>
<nowiki>// Wir legen eine neue Instanz dieser Klasse mithilfe des JavaScript-Operators new an.</nowiki>
<br \> <br \>
<nowiki> document.getElementById("canvas"),</nowiki><br \>
<nowiki>// Referenz zum JavaScript-Objekt document.</nowiki><br \>
<nowiki>mapOptions = {</nowiki><br \>
<nowiki>// Nun definieren wir mit der Variable mapOptions das Aussehen unserer Karte; es sind kaum Grenzen gesetzt.</nowiki><br \>
<nowiki>center: new google.maps.LatLng(48.149600, 11.574481),</nowiki><br \>
<nowiki>zoom: 7,</nowiki><br \>
<nowiki>streetViewControl:false,</nowiki><br \>
<nowiki>scaleControl: true,</nowiki><br \>
<nowiki>mapTypeControl:true,</nowiki><br \>
<nowiki>mapTypeControlOptions: {</nowiki><br \>
<nowiki>style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,</nowiki><br \>
<nowiki>position: google.maps.ControlPosition.BOTTOM_CENTER</nowiki><br \>
<nowiki>},</nowiki><br \>
<nowiki>zoomControl:true,</nowiki><br \>
<nowiki>zoomControlOptions: {</nowiki><br \>
<nowiki>position: google.maps.ControlPosition.RIGHT_BOTTOM</nowiki><br \>
<nowiki>},</nowiki><br \>
<nowiki>mapTypeId: google.maps.MapTypeId.TERRAIN</nowiki><br \>
<nowiki>}</nowiki><br \>
<nowiki>);</nowiki><br \>
<nowiki>}</nowiki><br \>
<nowiki>// die verwendeten Optionen finden sich allesamt in der offiziellen Google Maps API-Beschreibung:</nowiki><br \>
<nowiki>// https://developers.google.com/maps/documentation/javascript/tutorial?hl=de</nowiki><br \>
<nowiki>// Probiert die unterschiedlichen Möglichkeiten aus, indem ihr false durch true ersetzt, andere Koordinaten einsetzt, eine andere Zoomstufe oder die in KAPITÄLCHEN gesetzten Style-Informationen verändert.</nowiki>
<br \><br \>
<nowiki>function marker() {</nowiki><br \>
<nowiki>// Eine weitere Funktion, die dem Setzen von Markern gilt.</nowiki><br \>
<nowiki>m1 = new google.maps.Marker(</nowiki><br \>
<nowiki>{ map: map, position: muenchen, animation: google.maps.Animation.DROP, icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"</nowiki><br \>
<nowiki>});</nowiki><br \>
<nowiki>// Wir weisen der oben definierten Variable m1 die JavaScript-Klasse google.maps.Marker zu.</nowiki>
<br \>
<nowiki>// In geschweiften Klammern finden sich Anweisungen, was das Programm erledigen soll:</nowiki><br \>
<nowiki>// "Verwende die Karte "map", setze den Marker an die Position "muenchen" (also die eingangs definierte Variable mit den Geokoordinaten). "Wende die Animation "Drop" an, verwende ein blaues Icon. Die Standardfarbe ist rot -> siehe Frankfurt.</nowiki>
<br \><br \>
<nowiki>m2 = new google.maps.Marker(</nowiki><br \>
<nowiki>{ map: map, position: paris, animation: google.maps.Animation.DROP, icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"</nowiki><br \>
<nowiki>});</nowiki>
<br \><br \>
<nowiki>m3 = new google.maps.Marker(</nowiki><br \>
<nowiki>{ map: map, position: frankfurt, animation: google.maps.Animation.DROP</nowiki><br \>
<nowiki>});</nowiki><br \>
<nowiki>}</nowiki>
<nowiki>function line() {</nowiki><br \>
<nowiki>// Es gibt viele weitere Möglichkeiten der Visualisierung, z.B. die Verbindung einzelner Marker mit Linien.</nowiki><br \>
<nowiki>new google.maps.Polyline(</nowiki><br \>
<nowiki>{ map: map, path: [muenchen, frankfurt, paris], geodesic: true</nowiki><br \>
<nowiki>})</nowiki><br \>
<nowiki>}</nowiki><br \>
<nowiki>// wir binden diese Funktion über einen Button in die HTML-Datei ein.</nowiki>

==== Beispiel 2 ====
Im folgenden wählen wir einen leicht veränderten Ansatz. Wir nehmen an, dass durch ein vorgeschaltetes PHP-Skript Datensätze aus unserer Datenbank in die JS-Datei in Form eines Arrays eingespeist wurden. Auf diese Informationen wird im Anschluss dynamisch zugegriffen:
<br \><br \>
<nowiki>onload = init;</nowiki>
<br \><br \>
<nowiki>var map, mapOptions</nowiki><br \>
<nowiki>var marker = []</nowiki><br \>
<br \>
<nowiki>var p = [</nowiki><br \>
<nowiki>['Adelgunde von Bayern','Herzogin von Modena','w','1823','1914','61234',48.205673,16.370173],</nowiki><br \>
<nowiki>['Adelheid (Maria Adelaida)','Königin von Sardinien','w','1855','231856',45.080833,7.767500]</nowiki><br \>
<nowiki>];</nowiki><br \>
<nowiki>// Vorteil: der komplette DB-Bestand wird zunächst abgerufen und in die Karte eingebunden; dadurch sind alle eingebundenen Funktionen (z.B. eine Timeline) nach einmaligem Laden durch den Benutzer auch offline benutzbar.</nowiki>
<br \><br \>
<nowiki>// Zunächst einmal muss die Google Maps initialisiert werden.</nowiki><br \>
<nowiki>function init() {</nowiki><br \>
<nowiki>map = new google.maps.Map( </nowiki><br \>
<nowiki>// Der Variable map wird die JavaScript-Klasse google.maps.Map zugewiesen.</nowiki><br \>
<nowiki>// Wir legen eine neue Instanz dieser Klasse mithilfe des JavaScript-Operators new an.</nowiki>
<br \><br \>
<nowiki>document.getElementById("canvas"),</nowiki><br \>
<nowiki>// Referenz zum JavaScript-Objekt document.</nowiki><br \>
<nowiki>mapOptions = {</nowiki><br \>
<nowiki>// Nun definieren wir mit der Variable mapOptions das Aussehen unserer Karte; es sind kaum Grenzen gesetzt.</nowiki><br \>
<nowiki>center: new google.maps.LatLng(48.149600, 11.574481),</nowiki><br \>
<nowiki>zoom: 7,</nowiki><br \>
<nowiki>streetViewControl:false,</nowiki><br \>
<nowiki>scaleControl: true,</nowiki><br \>
<nowiki>mapTypeControl:true,</nowiki><br \>
<nowiki>mapTypeControlOptions: {</nowiki><br \>
<nowiki>style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,</nowiki><br \>
<nowiki>position: google.maps.ControlPosition.BOTTOM_CENTER</nowiki><br \>
<nowiki>},</nowiki><br \>
<nowiki>zoomControl:true,</nowiki><br \>
<nowiki>zoomControlOptions: {</nowiki><br \>
<nowiki>position: google.maps.ControlPosition.RIGHT_BOTTOM</nowiki><br \>
<nowiki>},</nowiki><br \>
<nowiki>mapTypeId: google.maps.MapTypeId.TERRAIN</nowiki><br \>
<nowiki>}</nowiki><br \>
<nowiki>);</nowiki>
<br \><br \>
<nowiki>for (var i in p){</nowiki><br \>
<nowiki>marker[i] = new google.maps.Marker(</nowiki><br \>
<nowiki>{map: map, position: new google.maps.LatLng(p[i][6], p[i][7]), opacity: 0.66, title: p[i][0], id:i, label: '*'});</nowiki><br \>
<nowiki>}</nowiki><br \>
<nowiki>// For-Schleife wiederholt die Anweisung, solange die Bedingung (var i in p vorhanden) zutrifft. Der nachfolgende Anweisungsblock wird beim Durchlauf ausgeführt, in unserem Fall 2x.</nowiki><br \>
<nowiki>// Bei den einzelnen Parametern wird jeweils die Position der Information im Array angegeben (z.B. p[i][0] = Name der Person). Label fügt dem Marker ein Symbol hinzu.</nowiki><br \>
<nowiki>}</nowiki>
<br \><br \>
<code>// Hier könnte noch Beispiel 3 (mit Info-Fenstern) ergänzt werden</code>


=== Anmerkungen ===
<references group="A" />