Geodatenanwendungen. Sommersemester Prof. Dr. Hans-Peter Wiedling. Vorgänger ancestor. Eltern parent. Geschwister. sibling.

Transkript

1 Geodatenanwendungen Sommersemester 2012 Prof. Dr. Hans-Peter Wiedling Vorgänger ancestor Eltern parent Geschwister sibling Kinder, child Nachfolger descendant

2 Lernziele Die Studierenden erlernen an Praxisbeispielen die Grundlagen zur Entwicklung von Geodatenanwendungen und entsprechender Infrastruktur Zum Einsatz kommen XHTML, CSS, JavaScript/DOM, AJAX, HTTP und Google MAPS API Android für die mobile Komponente PHP und XSLT Angestrebte Kompetenzen: Die Studierenden verstehen die spezifischen Probleme bei der Planung, Entwicklung und Qualitätssicherung von Geodatenanwendungen und können sicher mit Geodaten umgehen Die Teilnehmer verstehen das Zusammenspiel der verschiedenen Techniken lernen die wesentlichen Standards kennen können komplexe und interaktive Geodatenanwendungen erstellen erlernen Grundlagen, um sich in weitere Geodatenanwendungen einzuarbeiten Geodatenanwendungen, Seite 2

3 Lehrinhalte Prozesskette Akquisition, Weitergabe, Aufbereitung, Visualisierung und Verknüpfung von Geodaten Typische Algorithmen auf geografischen Datenstrukturen Grundlagen in der Programmierung mit der Google MAPS API Entwicklung einer mobilen Geodatenanwendung unter Android Strukturtransformation mit XSLT und XPath Geodatenanwendungen, Seite 3

4 Bibliographie DE/apis/maps/documentation/mapsdata/developers_guide_java.html Arno Becker, Marcus Pant: Android Grundlagen und Programmierung. dpunkt-verlag. 1. Auflage, ISBN Frederik Ramm, Jochen Topf: OpenStreetMap Die freie Weltkarte nutzen und mitgestalten. lehmanns media. 1, Auflage ISBN Reto Meier: Professional Android Application Development. Wiley, 2008, ISBN Geodatenanwendungen, Seite 4

5 Motivation Anwendungen, Geodateninfrastruktur

6 Anwendungen Bodenmanagement (Kataster)... Flottenmanagement... Routenplanung... Tourismus, Freizeit... Social networking... Entertainment, Gaming,... Wetterinformation... Precision Farming... Verkehrsinformationen (Flugzeug, Schiff, Auto)... Neben Kommunikation ist Mobilität ein hohes menschliches Grundbedürfnis mit all seinen wirtschaftlichen und sozialen Aspekten! Geodatenanwendungen, Seite 6

7 Communites Umfeldsuche Spiele Google Open Street Map Radtouren Hessen Deutschlandviewer Precision Farming... Wetterinformationen..u. v. m. Geodatenanwendungen, Seite 7

8 GDI: Geodateninfrastruktur Das ist Ziel, Nutzer von Geodaten und -informationen und deren raumbezogene Anwendungen von Daten in eine vernetzte Geodateninfrastruktur einzubinden (aus dem Vortrag von Dr. Schweitzer, Hessisches Landesamt für Bodenmanagement: Geodateninfrastruktur Hessen Mehrwert für den Nutzer; 11. u. 12. Oktober 2005): Leitprojekte mit Kommunen und Anwendern Landesbehörden entwickeln gemeinsam mit Wirtschaft und Kommunen Dienste und stellen diese zur Verfügung, die insbesondere einen digitalen prozess-orientierten Datenfluss für Geschäftsprozesse ermöglichen. Nutzen einer Geodateninfrastruktur aufzeigen Geodatenanwendungen, Seite 8

9 Die Ziele dieser Leitprojekte GDI in die Fläche bringen Standards und Komponenten der GDI-Hessen in die breite Nutzung bringen Kommunen und Private einbinden Nutzer steht dabei im Mittelpunkt Wiederverwendbare Komponenten erzeugen Synergieeffekte nutzen durch standardisierte Webservices als Teil einer GDI einmal entwickeln und mehrfach nutzen Geodatenanwendungen, Seite 9

10 Geodatenanwendungen, Seite 10

11 Webservices Durch die Nutzung standardisierter Schnittstellen können heterogene Datenquellen, also auch proprietäre Geodatenformate, interoperabel bereitgestellt werden, ohne diese Datenquellen selbst in ein anderes Format überführen und redundant halten zu müssen. Anwendungen können die angebotenen Geodatendienste direkt ansprechen und verschafft dem Anbieter die nötige Investitionssicherheit, da die Bereitstellung auf aktuellem Stand der Technik ermöglicht wird. Geodatenanwendungen, Seite 11

12 GDI als serviceorientierte Architektur (SOA) Das Architekturkonzept der GDI-DE spiegelt sich aus technischer Sicht in dem Publish-Find-Bind-Muster der serviceorientierte Architektur (SOA) wider: 1. Der Anbieter (Provider) von Geodaten/-diensten veröffentlicht diese durch Registrierung in einem Katalog bzw. Verzeichnis (publish). 2. So werden diese für den Anwender (Consumer) recherchierbar: Der Anwender durchsucht den Katalog nach Geodaten/-diensten. Der Katalog liefert ein Suchergebnis zurück (find). 3. Der Anwender (Consumer) kann die gefundenen Geodaten/-dienste ansprechen und gemäß Nutzungsbedingungen verwenden (bind). Geodatenanwendungen, Seite 12

13 Architektur GDI-DE Quelle: Architektur der Geodateninfrastruktur Deutschland Version 2.0 (beta) Geodatenanwendungen, Seite 13

14 Prozesskette Akquisition, Anreichern Sammeln, Verwalten, Verknüpfen, Archivieren Verknüpfen Kontrollierte Weitergabe Idee, Planung, Bestandsaufnahme Anzeigen, Nutzen, Recherche Geodatenanwendungen, Seite 14

15 Datenstrukturen und Math. Berechnungen Satellitendaten/Orthophotos Punkt-, Linien- und Flächeninformation Distanz, Inside, Remove und Simplify

16 Digitale Orthophotos Orthophotos sind eine realitätstreue Darstellung der Erdoberfläche. Sie entstehen durch eine differenzielle Entzerrung der Original-Luftbilder. Die Digitalen Orthophotos werden im Blattschnitt der Deutschen Grundkarte (2 x 2 km) nach bundeseinheitlichen Standards erstellt. Die Genauigkeit beträgt ± 1m. Die digitalen (Farb-) Orthophotos liegen für Hessen flächendeckend mit einer Bodenauflösung von 0,4 m (DOP40) vor. Für Teilgebiete sind auch Color-Infrarotbilder verfügbar. Quelle: Geodatenanwendungen, Seite 16

17 Ressource Bild: Ein Blick hinter die Kulissen Geodatenanwendungen, Seite 17

18 Das Bild besteht aus Kacheln 0.. tx.. maxtilex ty.. maxtiley - 1 Geodatenanwendungen, Seite 18

19 Karten als Web-Service Mit jedem Zoom und Pan werden die Kacheln alle einzeln per Request geladen Kacheln werden auch schon über die sichtbare Kartenansicht hinaus, herunter, erst in einem Bereich, in dem keine Kacheln existieren, ist es nötig neue Kacheln nachzuladen. Die Anzahl der Kacheln steigt dabei exponentiell. Dabei findet die Bildpyramide Anwendung und die Kacheln werden dabei nach der hierarchischen Quadtree-Struktur unterteilt (Parameter beim Request, Bsp: Geodatenanwendungen, Seite 19

20 Punkt-, Weg- und Flächeninformation <node>, <way> und closed way (aus OSM) Ein Knoten (node) besteht zumindest aus Positionsinformation (Längenund Breitengrad), üblicherweise einem Zeitstempel und gegebenenfalls aus einer Höheninformation: <node id=" " lat=" " lon=" " version="1" changeset="203496" user="80n" uid="1238" visible="true" timestamp=" t11:40:26z"> <tag k="highway" v="traffic_signals"/> </node> Knoten können mehrere Wege oder Gebieten zugeordnet sein Ein Weg (way) besteht aus mindestens 2 und höchstens 2000 Knoten Knoten können mehreren Wegen zugeordnet sein Geodatenanwendungen, Seite 20

21 <way> Wege sind Punktfolgen, die neben den Punkten (hier nd) zusätzliche Informationen (Name, Klassifikation,...) enthalten: <way id=" " visible="true" timestamp=" t19:07:25z" version="8" changeset="816806" user="blumpsy" uid="64226"> <nd ref="822403"/> <nd ref=" "/> <nd ref="821601"/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref="823771"/> <tag k="highway" v="unclassified"/> <tag k="name" v="clipstone Street"/> <tag k="oneway" v="yes"/> </way> Flächen (Seen, Gebäude,...) sind beschrieben als geschlossene Punktfolgen Geodatenanwendungen, Seite 21

22 Geopunkt class GpsData { public String time; public double lat;// Latitude/Breitengrad public double lon;// Longitude/Längengrad public double elevation; // Altitude/Höhenangabe...// weitere Merkmale, z.b. Genauigkeit public GpsData ( double lat, double lon, double elevation, String time) { this.time = time; this.lat = lat; this.lon = lon; this.elevation = elevation; } } // GpsData Geodatenanwendungen, Seite 22

23 Ein bisschen Mathematik... R = Q + t * v, mit v = P Q Skizze Gerade: t R Strahl: t >= 0 Kante: 0 <= t <= 1 Q R v P Die Angaben haben immer einen Bezugspunkt (Ursprung), auch wenn die Achsen oder der Ursprung nicht angegeben sind. Geodatenanwendungen, Seite 23

24 POI in nächster Nachbarschaften (Nearest Neighbour), Abstandabschätzungen In planaren Abbildungen werden die folgenden Abstandsformeln zwischen zwei Punkten verwendet: Euklidscher Abstand: d 2 (neighbour) = ( this.x - neighbour.x ) 2 + ( this.y - neighbour.y ) 2 neighbour ist ein weiteres (benachbartes) Objekt; Häufig findet man auch folgende Abstandsformeln: Maximum-Distanz: d(neighbour,obj)= max (neighbour i -obj i ) oder Manhatten- bzw. Taxi-Distanz d(neighbour,obj)= Σ neighbour i -obj i Da es sich um Abstände auf der Erdoberfläche und somit einer Sphere handelt, kann der Euklidsche Abstand aufgrund sich kumulierender Ungenauigkeiten nicht angewendet werden. Geodatenanwendungen, Seite 24

25 Distanz Punkt-Kante (I) L(t) = P 0 + t * v und v = P 1 - P 0 Skalarprodukt verwenden: P 2 P 1 (P 2 -L(t)) * v = 0 (P 2 P t * v) * v = 0 (P 2 - P ) * v = t * v * v P 0 v P 2 t = ((P 2 - P 0 ) * v) / (v * v) (nicht kürzen; v ist ein Vektor!) t in (I) einsetzen liefert benötigten Punkt auf der Kanten, dann kann die Distanz dist berechnet werden: dist = P 2 P 0 + ((P 2 - P 0 ) * v) / (v * v) * v Alternative Berechnung: Information über die Fläche nutzen... Geodatenanwendungen, Seite 25

26 Distanzberechnung über die Fläche P 2 P 2 = P 0 P 1 x P 1 P 2 (P 0 P 1 ) P 1 P 2 x P 2 P 0 liefert die Größe der aufgespannten Fläche; wenn man nun die Fläche des Parallelogramms durch die Länge der einen Seite teilt, erhält man die Länge der anderen Seite genau das suchen wir! Bemerkung: im 2D entspricht P 0 P 1 x P 1 P 2 der Determinanten. Die Determinante kann wie folgt berechnet werden: im 2D: det a b = a * d b * c Prinzip: c d Geodatenanwendungen, Seite 26

27 Quelle: Geoinformatik in Theorie und Praxis von Norbert de Lange Geodatenanwendungen, Seite 27

28 Distanz Distanzberechnungen finden also auf einer Kugeloberfläche (Großkreis) statt. Die Kugeloberfläche ist nur eine Annährung an die tatsächliche Oberfläche der Erde! Geodatenanwendungen, Seite 28

29 Abstand auf der Kugeloberfläche (Großkreis) public static double distance(gpsdata p1, GpsData p2) { double d; double R = 6371; // Erdradius in km d = Math.acos(Math.sin(Math.toRadians(p1.lat)) * Math.sin(Math.toRadians(p2.lat)) + Math.cos(Math.toRadians(p1.lat)) * Math.cos(Math.toRadians(p2.lat)) * Math.cos(Math.toRadians(p2.lon - p1.lon))); return d * R; } // distance Quelle: Bem.: Angaben müssen im Bogenmaß erfolgen (radian = grad * π / 180) Geodatenanwendungen, Seite 29

30 Distanz zwischen 2 Punkten (Links) Formelsammlung (als Einstieg): Distanzformel (Großkreis) d zwischen zwei Punkten mit den Koordinaten {lat1,lon1} und {lat2,lon2} lautet: d = acos(sin(lat1)*sin(lat2)+cos(lat1)*cos(lat2)*cos(lon1-lon2)) Für kurze Distanzen eignet sich auf die folgende Formel (weniger Rundungsfehler): d = 2*asin(sqrt((sin((lat1-lat2)/2))^2 + cos(lat1)*cos(lat2)*(sin((lon1-lon2)/2))^2)) d mit radius multiplizieren! Wenn man es ganz genau machen möchte: Evtl. auch noch interessant sind die Projektionen: Geodatenanwendungen, Seite 30

31 Konvexe und konkave Flächen Konkav Konvex Bedingung/Test: Man nehme bel. Punkte, die innerhalb der Fläche (oder auf deren Rand) liegen, und verbinde sie zu einer Linie, dann müssen auch alle Punkte, die auf dieser Linie liegen, innerhalb der Fläche liegen Bedingung erfüllt: Fläche konvex Bedingung nicht erfüllt: Fläche konkav obwohl die Bedingung mathematisch nicht zu beanstanden ist, können wir praktisch nicht mit ihr arbeiten Alternativen: jeder Innenwinkel ist 180 Schnittpunktberechnung zwischen bel. Kanten darf keine Lösung besitzen Geodatenanwendungen, Seite 31

32 Inside Test Anzahl Schnittpunkte zwischen Strahl und Kanten ist ungerade, dann liegt der Punkt innerhalb Vorab kann ein Test mit der Bounding Box erfolgen und somit der Berechnungsaufwand reduziert werden: xmin <= x <= xmax && ymin <= y <= ymax 1 2 Geodatenanwendungen, Seite 32

33 Konvexe Hülle umschließt alle Punkte einer Menge Für jede Kante gilt alle Punkte liegen in einer Halbebene Diese Kanten können mit Hilfe der Determinanten berechnet werden: Die Vorzeichen müssen für alle Punkte gleich sein, dann handelt es sich um eine Kante Geodatenanwendungen, Seite 33

34 Simplyfication/Ausdünnen/Bereinigen Geopunkte am Anfang oder am Ende einer Aufzeichnung können streuen. Das Ziel ist dann, diese Punkte durch wenige zu ersetzen: Dazu können z. B. die Koordinaten des Schwerpunkts der entsprechenden Punkt oder immer wiederholt von drei Punkt gebildet werden. Der Schwerpunkt ist das arithmetische Mittel der Koordinaten der Punkte: Punktfolgen für Wege werden geglättet und letztendlich mit weniger Punkten beschrieben: dazu wird aus der Punktfolge P 0.. P n-1, der Punkt gesucht, der am weitesten von P 0 P n-1 entfernt ist Geodatenanwendungen, Seite 34

35 Glätten: Douglas-Peucker-Algorithmus P 0 Pn-1 Das Verfahren sucht zunächst in der Punktfolge, den Punkt P d, der von P o P n-1 am weitesten entfernt ist. P d Falls P d weiter als ein vorgegebenes Maß entfernt ist, wird das Verfahren für die Teilpunktfolgen wiederholt. Geodatenanwendungen, Seite 35

36 Viewing mit Google Maps API AJAX, DOM, Google Maps API, POI, Routen

37 : Asynchronous JavaScript and XML AJAX steht für zwei mächtige Browsertechniken welche bereits seit Jahren existieren, jedoch zunächst von Webentwicklern wenig beachtet wurden. Diese Techniken gewinnen an Beachtung, seit Services wie Google Maps, Google Mail oder Google Suggest diese verwenden. Mit diesen Techniken können Requests an den Server abgesetzt werden, ohne die Seite neu laden zu müssen und XML-Dokumente geparst und bearbeitet werden Seiten im Netz Geodatenanwendungen, Seite 37

38 AJAX: eine neue Technologie? AJAX wird häufig als neue Technologie dargestellt, mit der sich den Web-Entwicklern ganz neue Möglichkeiten eröffnen: Bereits 1999 wurde diese Technologie unter dem Namen XMLHTTPRequest von Microsoft eingeführt. Der Begriff AJAX geht auf einen im Februar 2005 veröffentlichten Artikel Ajax: A New Approach to Web Applications von Jesse James Garrett von der Firma Adaptive Path zurück. Die XMLHTTPRequest genannte Technologie wird unter dem Namen AJAX vorgestellt und bekannt. AJAX als Synonym für eine Technologie zur Schaffung Web Oberflächen. Geodatenanwendungen, Seite 38

39 Prinzipskizze Geodatenanwendungen, Seite 39

40 1. Schritt: Request-Objekt erzeugen var http_request = null; function initrequest() // http_request Objekt anlegen { try { // Mozilla, Opera, Safari sowie Internet Explorer (ab v7) http_request = new XMLHttpRequest(); } // try catch(e) { var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; for (var i = avers.length -1; i >= 0; i--) { try {http_request = new ActiveXObject(avers[i]); break; } catch(e1) {} }//for }// catch e if (http_request!= null) { if (http_request.overridemimetype) http_request.overridemimetype('text/xml'); } else alert('xmlhttp-instanz kann nicht erzeugt werden!'); } // initrequest Geodatenanwendungen, Seite 40

41 2. Schritt: Anfrage an den Server senden... // Funktion, die ausgeführt wird nach Antwort des Servers http_request.onreadystatechange = neuerinhalt; // 1. Parameter: HTTP-Methode GET oder POST // 2. Parameter: abgefragte URL ( es kann kein anderer Server // als der ursprüngliche abgefragt werden!) // 3. Parameter: true (asynchron)/ false (synchron) http_request.open('get', url, true); // enthält anwendungsspez. Daten für Server (Suchanfrage) http_request.send(null);... Bem.: bei der Methode POST sollte der MIME-Typ angepasst werden: http_request.setrequestheader ('Content-Type', 'application/x-www-formurlencoded'); Geodatenanwendungen, Seite 41

42 3. Schritt: Die Antwort des Servers auswerten... function neuerinhalt() { // Callback if (http_request.readystate == 4) { // Prüfung des Requests if (http_request.status == 200) { // Prüfung der Antwort alert(http_request.responsetext); var xmldoc = http_request.responsexml; (*) } } else { alert('beim Request ist ein Problem aufgetreten.'); } } Bem.: http_request.responsetext liefert Antwort als Textstring http_request.responsexml gibt die Antwort des Servers als ein XMLDocument-Objekt; unter dem IE gab es Probleme mit der Auswertung; siehe Folgeseite Hier (*) können JavaScript DOM-Funktionen können genutzt werden Geodatenanwendungen, Seite 42

43 Umgang mit ResponseXML im IE if (window.activexobject) { var toappend = document.createelement('xml'); //responsetext in innerhtml einfügen toappend.setattribute('innerhtml',http_request.responsetext); // mit einem eindeutigen ID kennzeichnen toappend.setattribute('id', 'auniqueid'); // gesamten Zweig irgendwo einhängen document.body.appendchild(toappend); // XML Zweig anhand der ID suchen und als xmldoc ansprechbar machen xmldoc = document.getelementbyid('_makeauniqueid'); // Tag wieder entfernen document.body.removechild(document.getelementbyid('auniqueid')); }... Xmldoc verwenden... Es gibt nach wie vor Browserunterschiede! Geodatenanwendungen, Seite 43

44 4. Schritt: Antwort als XML-Objekt verarbeiten... var xmldoc = http_request.responsexml; var root_node = xmldoc.getelementsbytagname('root').item(0); alert(root_node.firstchild.nodevalue);... Der gesamte Prozess wird durch ein Benutzerereignis ausgelöst: <a href="javascript:macherequest('tour.gpx')">route anzeigen</a> Geodatenanwendungen, Seite 44

45 Methoden des XMLHTTPRequest-Objekts (I) abort() Stoppt die gegenwärtige Server-Anfrage getallresponseheaders() Gibt die vom Server gesendeten Header als String zurück. getresponseheader("headerlabel") Gibt den benannten Header als String zurück. open("method", "URL"[, asyncflag[, "username"[, "password"]]]) Öffent eine Verbindung zum Server. Parameter:method: GET POST PUT HEAD POST solte verwendet werden, wenn die gesendeten Daten größer als 500 bytes sind. HEAD wird verwendet, wenn nur Response-Header und keine Daten angefordert werden. Dieses kann z.b. verwendet werden, wenn für eine Datei auf dem Server das Datum der letzen Änderung (Last-Modified) abgefragt werden soll. URL: Pfad (relative oder absolut) + ggf. Querystring asyncflag: true false Asynchrone (true) oder synchrone (false) DatenübertragunguserName: password: Benutzername und Passwort für eine Ressource auf dem Server Geodatenanwendungen, Seite 45

46 Methoden des XMLHTTPRequest-Objekts (II) send(content) Sendet die Daten an den Server.Parameter:content: null bei GET oder ein Query-String bei POST setrequestheader("label", "value") Hierüber können Header gesetzt werden, z.b. der Content-Type. setmimetype("mimetype") setzen des Mimetyps der angeforderten Daten (Response). Wird vom Internet Explorer nicht unterstützt. Parameter: mimetype der MimeType als String (z.b. "text/xml") Geodatenanwendungen, Seite 46

47 Eigenschaften des XMLHTTPRequest-Objekts onreadystatechange Event-Handler der jedesmal aufgerufen wird, wenn sich der Verbindungsstatus (readystate) ändert readystate Enthält den aktuellen Verbindungsstatus. Mögliche Werte: 0 = Verbindung noch nicht geöffnet ('open()' noch nicht aufgerufen) 1 = Noch keine Anfrage gesendet ('send()' noch nicht aufgerufen) 2 = Anfrage gesendet, Antwort-Header und Antwort-Status kann abgefragt werden. 3 = Daten vom Server kommen nach und nach an. 'responsetext' enthält die bislang vom Server gesendeten Daten. 4 = Kommunikation mit dem Server ist abgeschlossen. Alle Daten sind angekommen (status = 200), wenn kein Fehler aufgetreten ist. Geodatenanwendungen, Seite 47

48 Eigenschaften des XMLHTTPRequest-Objekts responsetext Enthält die vom Server gesendeten Daten als Text responsexml Enthält die vom Server gesendeten Daten als XML-Daten. Wenn die Daten als Plaintext gesendet worden sind, enthält responsexml null. status Enthält den HTTP-Status der Verbindung als Zahl (z.b. 200 für Erfolg oder 0 bei Erfolg bei Dateizugriff oder 404, wenn die angeforderte Ressource nicht existiert) statustext Enthält den HTTP-Status als Text-Meldung (z.b. "Not found") Geodatenanwendungen, Seite 48

49 Kommunikation mit AJAX Die Kommunikation mit dem Server über AJAX ist einfach umzusetzen Die Schwierigkeit liegt eher in Browserspezfika; bestimmte Methoden und Verhaltensweisen sind von den Browsern unterschiedlich implementiert Achten Sie auf die Trennung von Layout und Inhalt; das erleichtert die Entwicklungs- und Wartungsarbeit Die Interaktion mit der Seite durch Benutzerin/Benutzer stellt nicht selten relativ hohe Anforderungen an die Synchronisation der Ereignisse (Umfangreiche) Tests sind unvermeidlich: Code a litte Test a little Geodatenanwendungen, Seite 49

50 Ein Beispiel mit AJAX und DOM Von einem Server (z.b. können entweder Sehenswürdigkeiten (poi.gpx) oder Touren (tour.gpx) abgerufen werden Die Ergebnisse werden in HTML eingefügt Anfrage wird konfiguriert via AJAX und DOM werden die Tabellen befüllt Geodatenanwendungen, Seite 50

51 HTML Code (1/2): Formular <style> tr.title {background-color:#00bb00} </style> <body onload="initrequest()"> <h1>besuchen Sie das Jugendstilzentrum Darmstadt</br> <img src="darmstadt.jpg" width="40%"></h1> <form> <table> <tr> <td>sehenswürdigkeit: </td> <td> <INPUT TYPE="Text" NAME="query" id="query" value="poi" SIZE="10" MAXLENGTH="20"></td> <td></td></tr> <tr><td>art: </td> <td><input type="checkbox" name="art[]" id="bauwerk" value="bauwerk"> Bauwerk<br> <input type="checkbox" name="art[]" id="kirche" value="kirche"> Kirche<br> <input type="checkbox" name="art[]" id="museum" value="museum"> Museum</td><td></td> </tr> <tr> <td>entfernung: </td> <td> <INPUT TYPE="Text" NAME="dist" id="dist" value="km" SIZE="6" MAXLENGTH="20"></td> <td> <INPUT TYPE="button" NAME="senden" VALUE="Auswahl" onclick="javascript:request('antwort.php')"></td> </tr></table></form> Geodatenanwendungen, Seite 51

52 HTML Code (2/2): Ergebnisbereich(e) <div id="poi" style="visibility:visible"> <p>point of Interest:</p> <table border="1" id="wp" width="170"> <tbody> <tr class="title"> <th>nr</th><th>lat</th><th>lon</th><th>poi</th></tr> </tbody> </table> </div> <div id="tour" style="visibility:visible"> <p>tour:</p> <table border="1" id="route" width="290"> <tbody id="route"> <tr class="title"><th>nr</th><th>lat</th><th>lon</th></tr> </tbody> </table> </div> </body> </html> Geodatenanwendungen, Seite 52

53 Request erzeugen function request(url) { initrequest(); waypoints = true; // CallbackFunktion, weil Aufruf asynchron http_request.onreadystatechange = showwaypoints; query = document.getelementbyid ('query'); sstr = "select=" + query.value; } dist = document.getelementbyid ('dist'); dstr = "+dist=" + dist.value; bstr = ""; bauwerk = document.getelementbyid ('bauwerk'); if ( bauwerk.checked) bstr = "+art[]=bauwerk"; kstr = ""; kirche = document.getelementbyid ('kirche'); if ( kirche.checked) kstr = "+art[]=kirche"; mstr = ""; museum = document.getelementbyid ('museum'); if ( museum.checked) mstr = "+art[]=museum"; url = url + "?" + sstr + dstr + bstr + kstr + mstr; http_request.open('get', url, true); http_request.send(null); function initrequest() // http_request Objekt anlegen { http_request = new XMLHttpRequest();... } Geodatenanwendungen, Seite 53

54 Waypoints anzeigen function showwaypoints (xmldoc) { var wpt = xmldoc.getelementsbytagname('wpt'); var tabelle = document.getelementbyid('wp'); for (i = 0; i < wpt.length; i++) { row = document.createelement ("tr"); nrnode = document.createelement ("td"); nrnode.appendchild ( document.createtextnode(i) ); row.appendchild (nrnode); latnode = document.createelement ("td"); lat = wpt[i].getattribute('lat'); latnode.appendchild ( document.createtextnode(lat) ); row.appendchild (latnode); lonnode = document.createelement ("td"); lon = wpt[i].getattribute('lon'); lonnode.appendchild ( document.createtextnode(lon) ); row.appendchild (lonnode); } } Geodatenanwendungen, Seite 54

55 Geocode Google bietet über deren Google Maps API den so genannten Geocoder an. Geocoding bezeichnet die Ermittlung einer Position anhand einer Adresse. Als Adresse akzeptiert der Dienst Angaben vom Land bis hin zu einer Straßenangabe. Je genauer die Adresse ange-geben wird, desto genauer kann die Antwort, also die Position, sein. Die Adressangabe liegt als Text vor und wird an Googles Server gesendet, welcher mit den enthaltenen Informatio-nen versucht eine passende Position zu ermitteln und diese als Ergebnis zurückzuliefern. Findet der Google Service ein oder mehrere passende Positionen, sendet er diese per default als JSON-Objekt (JavaScript Object Notation). JSON ermöglicht einen einfachen Da-tenaustausch und den Zugriff auf enthaltene Daten mit JavaScript. Alternativ kann auch ein XML-Format angefordert werden. Bei mehreren Ergebnissen, muss die Anwendung ent-scheiden, wie sie damit umgehen möchte. Eine Möglichkeit kann sein, dem Nutzer eine Auswahl aller Ergebnisse anzubieten. Geodatenanwendungen, Seite 55

56 Geocode Wenn Google kein Ergebnis ermitteln kann, kann dies anhand eines, in der Antwort mit gesendeten, Status erkannt werden. Das unten stehende Code-Beispiel zeigt den Aufruf und die Auswertung einer Geocoder Anfrage. Hierbei wird zuerst ein Objekt des Geocoders der Google API erstellt. Von dem Objekt wird die geocode-methode mit zwei Parametern aufgerufen. Parameter eins ist die Adresse, für die die Position gesucht wird. Der zweite Parameter ist eine JavaScript-Funktion, welche das Ergebnis verarbeitet. Diese Funktion erhält das besagte JSON- oder XML-Objekt und den Status der Anfrage. Wurde mindestens ein Ergebnis gefunden (Status OK), kann das JSON- bzw.xml-objekt ausgewertet werden. Im Beispiel werden die enthaltenen Informationen nur für das erste Ergebnis ausgelesen und in Variablen gespeichert. Geodatenanwendungen, Seite 56

57 Geocode var geocoder = new google.maps.geocoder(); var address = "Darmstadt, Germany"; geocoder.geocode({'address':address}, function(result, status) { if ( status == google.maps.geocoderstatus.ok) { } else }); { } var lat = result[0].geometry.location.lat(); var lon = result[0].geometry.location.lng(); alert("geocoder Fehler: "+status); Geodatenanwendungen, Seite 57

58 Geolocation Auch auf Geolocation wurde oben bereits im Rahmen von HTML5 kurz eingegangen. Im Gegensatz zu einer Adressangabe ermöglicht die W3C HTML5-Spezifikation den Einsatz der Geolocation-API. Der Entwickler muss sich nicht darum kümmern, woher die Informationen kommen. Als Quelle dienen GPS, Funkzelle und IP-Adresse. Da ein Browser nicht alle Informationen zur Bestimmung des Aufenthaltsort besitzt, setzt dieser auf externe Dienstleister. Diese Dienstleister können anhand einer Funkzelle, WLAN oder IP eine ungefähre Position nennen. Gerade bei IP-Adressen, kann die Position nicht genau der eigenen entsprechen, da dynamisch-vergebene IPs eines Internet-Service-Providers keinen Bezug auf eine konkrete Position haben. Geodatenanwendungen, Seite 58

59 Geolocation Benutzer müssen der Datenübermittlung an einen Dienstleister zustimmen. Dadurch wird sichergestellt, dass Webseiten nicht einfach eine Position autonom ermitteln können. Die Nutzung, mit Hilfe von JavaScript, zeigt das folgende Codebeispiel: Vor der Nutzung wird geprüft ob der Browser die Geolocation-API unterstützt. Ist das der Fall, wird über die Methode getcurrentposition ( callsuccess, callerror ); versucht, eine Position zu ermitteln. Bei erfolgreicher Ermittlung wird eine Callback-Methode aufgerufen, in welcher die Positionsdaten ausgewertet werden. Diese Daten liegen jetzt im Dezimalformat (z. B. latitude = / longitude = 8.64) vor. Diese Position kann daraufhin z. B. auf einer Karte zur Informationsdarstellung genutzt werden. Geodatenanwendungen, Seite 59

60 Geolocation if ( navigator.geolocation ) { navigator.geolocation.getcurrentposition } ( callsuccess, callerror ); else { //Browser unterstützt Geolocation nicht } function callsuccess(position) { var lat = position.coords.latitude; } var lon = position.coords.longitude; function callerror(position) { } //Position konnte nicht ermittelt werden. Geodatenanwendungen, Seite 60

61 Geolocation Ein weiterer optionaler Parameter der Methode, ist maximumage. Dieser Parameter spezifiziert das maximale Alter der angeforderten gespeicherten Position. Sind nur ältere Positionen im Zwischenspeicher, wird nach einer neueren gesucht. Geodatenanwendungen, Seite 61

62 DHTML: HTML + CSS + JS DHTML Sichtbarkeit von div-tags verändern: <div id="tour" style="visibility:visible"> <p>tour:</p> <table border="1" id="route" width="290"> <tr class="title"><th>nr</th><th>lat</th><th>lon</th></tr> </table> </div> tour = document.getelementbyid ('tour'); tour.style.visibility = "hidden"; Weitere Elemente sind die Reihenfolge (z-index), Position, clip-rect. Cross Origin Request Scripts ary Geodatenanwendungen, Seite 62

63 Same Origin Policy bedeutet, Skriptsprache im Browser erlaubt nur den Zugriff auf den eigenen Server Ist wichtiges Sicherheitskonzept für Client-/Browserseitige Skriptsprachen Beispiele sind Das Zurücksenden von Cookies nur an den ursprünglichen Server Die Verbindung einer HTTP-Request aus JavaScript zu dem Server, von dem auch das JavaScript bezogen wurde Dennoch besteht das Interesse, unterschiedliche Server anzufragen Namensdienste (von Google oder OpenStreetMap) sind Beispiele dafür Ein Ansatz ist, über einen Proxy die Anfrage zu gewährleisten JSON (JavaScript Object Notation) ist eine weitere Möglichkeit Eine andere Möglichkeit ist, den Zugriff über HTTP doch kontrolliert zu erlauben Geodatenanwendungen, Seite 63

64 Anfrage über einen Proxy Server XMLHttpRequest (XHR) an einen fremdem Server ist nicht erlaubt: Client Skript XHR Response XHR nicht erlaubt! Eigener Server arbeitet als proxy und erfüllt die Anfrage Client Skript XHR Response Request Response Geodatenanwendungen, Seite 64

65 Access-Control-Allow-Origin Mit einem GET oder POST HTTP Request wird ein HTTP Header gesendet: Der Origin Header enthält Information über den ursprünglichen Server von dem das Script stammt: das Protokoll, die Domäne und den Port Der Server kann damit entscheiden, ob die Anfrage beantwortet wird oder nicht; Beispiel: Origin: Wenn der Server die Anfrage erlaubt, dann sendet er einen entsprechenden Header zurück: Access-Control-Allow-Origin: oder * Fehlt der Header oder er stimmt nicht überein, dann wird der Request vom Skript im Browser nicht ausgeführt; im anderen Fall wird der Request ausgeführt. Weder der Request noch der Response enthalten Cookie Informationen! Geodatenanwendungen, Seite 65

66 Cross Origin Resource Sharing (CORS) Anfrage generiert HTTP Request Server Response Merkmal wird von HTTP Request Objekt ausgewertet Aus Sicherheitsgründen ist der Zugriff nur auf die ursprüngliche Domäne erlaubt: same origin-policy Ein Ansatz für diese Mashups: Server übernimmt die Anfragen (cross domain proxy) Die Google API und Nominatim senden das Merkmal Access-Control-Allow-Origin: Geodatenanwendungen, * Seite 66

67 Cross-Origin Resource Sharing XDomainRequest wird zunehmend von den Browsern unterstützt: function createcorsrequest(method, url) { var xhr = new XMLHttpRequest(); if ("withcredentials" in xhr) // dann ist es FireFox, Safari, Chrome { xhr.open(method, url, true); } else if (typeof XDomainRequest!= "undefined") // dann ist es IE 8 { xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createcorsrequest("get", " if (request) { request.onload = function(){ //do something with request.responsetext }; request.send(); } Geodatenanwendungen, Seite 67

68 Zugriff auf Dokumentstruktur via DOM Die Dokumentstruktur kann aus JavaScript heraus mit den folgenden Methoden manipuliert werden Das document-objekt bietet die Methoden getelementbyid() direkter Zugriff über die ID des Elements getelementsbytagname() liefert Array mit Objekten des entsprechenden Tags an, um auf Elemente zuzugreifen. Ein Element kann auch über das Array childnodes angesprochen werden. Dabei wird das i-te Kind eines Knotens x mit x.childnodes[i] referenziert. Die Eigenschaft firstchild und lastchild repräsentieren das erste und letzte Kind. Das "Durchhangeln" durch den DOM-Baum mit diesem Array ist sehr umständlich. Eine Kombination mit den Methode getelementbyid() wird daher oft verwendet. Den Inhalt eines Knotens liefert die Eigenschaft "nodevalue". Geodatenanwendungen, Seite 68

69 Beispiel So kann auf den Text "Test" im Beispiel innerhalb von JavaScript etwa durch var x1 = document.getelementbyid("wp"); var y1 = x1.childnodes[1].childnodes[0]; alert(y1.nodevalue); zugegriffen werden. Eine Veränderung wird im o. a. Beispiel dann durch folgende Zuweisung realisiert: y1.nodevalue = "Point of Interest"; Geodatenanwendungen, Seite 69

70 Beispiel: DOM Geodatenanwendungen, Seite 70

71 HTML: Knoten, Attribute und Inhalt <html><head> <title>synchrone Ansichten auf Geodaten</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> </style> </head> <body id= "body" onload = "initialize()"> <div id="map_canvas" class="mymap" ></div> <table id= "wp" border="1" width="170"> <tbody id="route"> <tr class="title"> <th>poi</th><th>latitude</th><th>longitude</th><th>typ</th></tr> </tbody> <tr id="poi" style="background-color:#bbbbbb"> <td> Luigi</td><td> </td><td> </td><td>pub</td></tr> <tr style="background-color:#bbbbbb"> <td>kavaliershaus</td><td> </td><td> </td><td>castle</td></tr> </table></body></html> Geodatenanwendungen, Seite 71

72 HTML als Baumstruktur Geodatenanwendungen, Seite 72

73 Content ändern <script language="javascript"> var x1 = document.getelementbyid("poi"); var y1 = x1.childnodes[1].childnodes[0]; alert("vorher: "+y1.nodevalue); y1.nodevalue = "Nico"; alert("nachher: "+y1.nodevalue); </script> Geodatenanwendungen, Seite 73

74 Knoten einfügen (1/2) Im letzten Beispiel wurde die Struktur des DOM-Baumes nicht verändert. Das nächste Beispiel zeigt wie durch die Methoden createtextnode(content), createelement(tag) und appendchild(node) Elemente hinzugefügt werden können: var wpt = xmldoc.getelementsbytagname('wpt'); // z.b. Dokument via AJAX var tabelle = document.getelementbyid('wp'); for (i = 0; i < wpt.length; i++) { row = document.createelement ("tr"); nrnode = document.createelement ("td"); nrnode.appendchild ( document.createtextnode(i) ); row.appendchild (nrnode);... Geodatenanwendungen, Seite 74

75 Knoten einfügen (2/2) <script language="javascript"> var x2 = document.getelementbyid("body"); var y2 = document.createtextnode("essen und Trinken"); x2.appendchild(y2); var x3 = document.getelementbyid ("body"); var y3 = document.createelement ("h1"); var z3 = document.createtextnode ("meine Favoriten"); if (confirm("anhaengen?")) { y3.appendchild(z3); x3.appendchild(y3); } </script> Knoten werden in den DOM-Baum wird mit der Methode "appendchild()" eingefügt. Geodatenanwendungen, Seite 75

76 Knoten löschen (1/2) <script> var x5 = document.getelementbyid("map_canvas"); var y5 = document.getelementbyid("body"); /* body */ if (confirm("löschen?")) {y5.removechild(x5);} </script> Knoten werden aus dem DOM-Baum wird mit der Methode "removechild()" gelöscht. Geodatenanwendungen, Seite 76

77 Knoten löschen (2/2) Das Entfernen von Knoten aus dem DOM-Baum wird mit der Methode "removechild(node)" veranlasst. Im Beispiel werden alle Kindknoten ab dem Knoten mit dem id wp" gelöscht und es können erneut Waypoints eingefügt werden: anz = tabelle.childnodes.length; for (i = 0; i < anz-2; i++) tabelle.removechild (tabelle.childnodes[2]); Warum werden im Beispiel die Kindknoten an der Position 0 und 1 nicht gelöscht? Geodatenanwendungen, Seite 77

78 Attribute ändern und einfügen <script language="javascript"> var x4 = document.getelementbyid("body"); var y4 = document.createelement("img"); y4.setattribute("src", " if (confirm("anhaengen?")) { x4.appendchild(y4);} </script> Attribute eines Knotens können mit der Methode "setattribute(name)" gesetzt oder mit getattribute(name, value)" erfragt werden. <script language="javascript"> marke = document.getelementbyid('strecke'); marke.setattribute ("style", "color:red"); </script> Geodatenanwendungen, Seite 78

79 Weitere Eigenschaften und Methoden attributes liefert die Attribute zum aktuellen Knoten parentnode liefert den Vorgängerknoten previoussibling liefert Vorgängerknoten auf gleicher Ebene (jüngerer Geschwisterknoten) nextsibling liefert Nachfolgerknoten auf gleicher Ebene (älterer Geschwisterknoten) appendchild() fügt einen Teilbaums an einen Knoten (am Ende des Arrays childnodes) ein insertbefore() zum Einfügen eines Knotens (innerhalb des Arrays childnodes) clonenode() zum Kopieren von Knoten (und Teilbäumen, wenn der 1. Parameter zu true auswertbar ist). Eine Liste aller Methoden und Eigenschaften sind unter zu finden Geodatenanwendungen, Seite 79

80 Google Maps JavaScript API V3 Karte, Ausschnitt, Markierungen, Routen, Flächen, Overlays, Interaktion (Listener u. Events) Geodatenanwendungen, Seite 80

81 HTML-Rahmen <html> <head> <title>hello Map</title> Google MAPS API <script type="text/javascript" src=" </script> <script type="text/javascript" src="geomapapi.js"></script> <style type="text/css"> div.mymap { width:600; height:300;} </style> Darstellungsbereich </head> für die Karte <body onload="initialize()"> <div id="map_canvas" class = mymap"></div> </body> </html> Geodatenanwendungen, Seite 81

82 Karte und Ausschnitt festlegen var geocoder; var geopoint; var map; function initialize() { // Define the two corners of the bounding box var sw = new google.maps.latlng(59.0, 13.12); var ne = new google.maps.latlng(60.35, 16.90); Zoomstufe, Mittelpunkt, Kartenart: HYBRID ROADMAP SATELLIT TERRAIN // Create a bounding box var bounds = new google.maps.latlngbounds(sw, ne); var latlng = new google.maps.latlng( , ); var myoptions = { zoom: 12, center: bounds.getcenter(), //latlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); // Karte zentrieren map.setcenter(latlng); // oder bounds.getcenter(); geocoder = new google.maps.geocoder(); // Geocoder erzeugen codeaddress(); // Geocoding anwenden drawmarker(); drawarea(); drawroute (); // Markierung setzen etc. }// initialize Geodatenanwendungen, Seite 82

83 Markierungen // Markierung zeichnen function drawmarker () { var latlng = new google.maps.latlng( , ); var markeroptions = new Object(); Instanziierung // Literale Syntax (nicht zwingend) } markeroptions = {//map: map, Einfache position: latlng, Markierung mit title:"jogging"}; Position und Titel var marker = new google.maps.marker(markeroptions); marker.setmap(map); Geodatenanwendungen, Seite 83

84 Routen // Route zeichnen function drawroute () { var red = '#ff0000'; var lightblue = '#000099'; var thickness = 3; var points = [geopoint, new google.maps.latlng( , ), new google.maps.latlng( , ), new google.maps.latlng( , )]; var polyline = new google.maps.polyline({ path: points, strokecolor: red, strokeopacity: 1.0, strokeweight: thickness }); polyline.setmap(map); } Namenloses PolylineOption s Objekt Wegpunkte, Farbe, Transparenz und Linienbreite Geodatenanwendungen, Seite 84

85 Flächen // Fläche zeichnen function drawarea () { var blue = '#0000ff'; var lightblue = '#000099'; var thickness = 3; var area = [new google.maps.latlng( , ), new google.maps.latlng( , ), new google.maps.latlng( , )]; var polygon = new google.maps.polygon({ paths: area, fillcolor: lightblue, fillopacity: 1.0, strokecolor: blue, strokeopacity: 1.0, strokeweight: thickness }); polygon.setmap(map); } Eckpunkte, Farbe und Transparenz in der Fläche, Farbe, Transparenz und Breite der Begrenzungslinie Geodatenanwendungen, Seite 85

86 Geocode (1/2) Google bietet über deren Google Maps API den so genannten Geocoder an. Geocoding bezeichnet die Ermittlung einer Position anhand einer Adresse. Als Adresse akzeptiert der Dienst Angaben vom Land bis hin zu einer Straßenangabe. Je genauer die Adresse ange-geben wird, desto genauer kann die Antwort, also die Position, sein. Die Adressangabe liegt als Text vor und wird an Googles Server gesendet, welcher mit den enthaltenen Informatio-nen versucht eine passende Position zu ermitteln und diese als Ergebnis zurückzuliefern. Findet der Google Service ein oder mehrere passende Positionen, sendet er diese per default als JSON-Objekt (JavaScript Object Notation). JSON ermöglicht einen einfachen Da-tenaustausch und den Zugriff auf enthaltene Daten mit JavaScript. Alternativ kann auch ein XML-Format angefordert werden. Bei mehreren Ergebnissen, muss die Anwendung ent-scheiden, wie sie damit umgehen möchte. Eine Möglichkeit kann sein, dem Nutzer eine Auswahl aller Ergebnisse anzubieten. Geodatenanwendungen, Seite 86

87 Geocode (2/2) Wenn Google kein Ergebnis ermitteln kann, kann dies anhand eines, in der Antwort mit gesendeten, Status erkannt werden. Das unten stehende Code-Beispiel zeigt den Aufruf und die Auswertung einer Geocoder Anfrage. Hierbei wird zuerst ein Objekt des Geocoders der Google API erstellt. Von dem Objekt wird die geocode-methode mit zwei Parametern aufgerufen. Parameter eins ist die Adresse, für die die Position gesucht wird. Der zweite Parameter ist eine JavaScript-Funktion, welche das Ergebnis verarbeitet. Diese Funktion erhält das besagte JSON- oder XML-Objekt und den Status der Anfrage. Wurde mindestens ein Ergebnis gefunden (Status OK), kann das JSON- bzw.xml-objekt ausgewertet werden. Im Beispiel werden die enthaltenen Informationen nur für das erste Ergebnis ausgelesen und in Variablen gespeichert. Geodatenanwendungen, Seite 87

88 Geocoder function codeaddress() { var address = document.getelementbyid("address").value; Geocode Marker mit Image und InfoWindow if (geocoder) { geocoder.geocode( { 'address': address}, function (results, status) { if (status == google.maps.geocoderstatus.ok) { //map.setcenter(results[0].geometry.location); geopoint = results[0].geometry.location; var image = 'poi.png'; var marker = new google.maps.marker({ map: map, position: geopoint, //results[0].geometry.location title:"dieburg", icon: image } ); var info = new google.maps.infowindow ( { content: "<img width='40 src='winterwald.jpg'/><br\>winterspaziergang"}); //info.open (map, marker); google.maps.event.addlistener(marker, 'click', function() { info.open(map, marker); }); } else {alert("geocode nicht erfolgreich: "+status); } }); } // if geocoder }// codeaddress Geodatenanwendungen, Seite 88

89 Interaktion mit der Map // Listener für click-ereignis google.maps.event.addlistener(map, 'click', addamarker);... function addamarker(event) { var marker = new google.maps.marker({ position: event.latlng, title: '#' + path.getlength(), map: map }); } Geodatenanwendungen, Seite 89

90 Overlays Overlays sind Objekte auf der Karte, die an Breitengrad/Längengrad-Koordinaten gebunden sind, sodass sie sich beim Ziehen und beim Vergrößern oder Verkleinern der Karte mitbewegen. Overlays spiegeln Objekte wider, die Sie zur Karte hinzufügen, um Punkte, Linien, Bereiche oder Objektsammlungen zu kennzeichnen. marker.setmap(map); // zuordnen bzw. setzen marker.setmap(null); // von der Karte entfernen // von der Karte entfernen und Marker löschen marker.setmap(null); marker = null var markersarray = []; markersarray.push (marker); // neuen Marker hinzufügen // Marker mit best. Merkmal suchen: if (markersarray) { for (i in markersarray) { if (markersarray[i].gettitle() == h_da ); alert ( Marker gefunden! ); } } Weitere Aktionen können den Marker ein- bzw. ausschalten Geodatenanwendungen, Seite 90

91 Anwendungsspez. Objekterweiterungen Objekte (Marker, Polyline, Polygon,...) können in JavaScript im Sinne der Anwendung einfach erweitert werden: var marker = new google.maps.marker({ } ); map: map, position: ageopoint, title: "h_da", icon: image, // eigenes Merkmale, z.b. Tag zu markieren myid: alert ("Id: "+ marker.myid); // spez. Auswertung des Merkmals Geodatenanwendungen, Seite 91

92 Smartphones Resource, Activity, Google Maps API unter Android Service, Intent und SAXParser,

93 Warum Android? Open Source, von Google entwickelt mit Apache v2 Lizenz Für Programmierer mit Java Kenntnissen bietet sich einfacher und schneller Einstieg; das motiviert und liefert bei entsprechender Lernkurve attraktive Resultate Betriebssystem und kompletter Software Stack für mobile Geräte Betriebssystem / Treiber Libraries und Basisdienste Applikationsmodell / Framework Anwendungsprogramme Entwicklungstools auf vielen Geräten verschiedener Hersteller lauffähig Geodatenanwendungen, Seite 93

94 Warum Android? Offen Java umfangreiche Bibliotheken und Frameworks marktrelevant Geodatenanwendungen, Seite 94

95 Geodatenanwendungen, Seite 95

96 Entwicklung unter Android Mit entsprechendem plug-in (fast) reguläre Java-Entwicklung mit eclipse Internetzugang, GPS, graph. Display, GUI, Touchscreen,... Spezifika, d.h. wie der Code zu organisieren ist, ergeben sich aufgrund der Plattform und dann auch durch die Bibliothek (android API: Permissions Activity Resource für Layout und Formatierung des GUI sowie für Strings und Konstanten (z. B. Realisierung von Mehrsprachigkeit) Intent und Service XML-Parser Geodatenanwendungen, Seite 96

97 Ein erstes Beispiel: SMS senden Das App soll die Möglichkeit bieten, eine SMS zu erstellen und zu versenden Klasse zum SMS versenden Überlegung zur GUI (zunächst als Skizze): Sende eine SMS an einen Freund Nr: Text: Label Textfeld Komponenten, Layout Eventhandling (Texteingabe, Anklicken) Mehrsprachigkeit Versenden Button Beschreibung in Ressourcen Geodatenanwendungen, Seite 97

98 Ein erstes Beispiel: SMS senden Klasse zum SMS versenden: SmsManager Resource mit Layout und Componenten... und Konstanten Text Layout Label Button public class mysmsmaker extends Activity Code: Activity Eventhandling Intents Manifest <manifest onclick... <permission>... Emulation Geodatenanwendungen, Seite 98

99 Resource main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="fill_parent android:layout_height="wrap_content" android:text="empfängernr. " /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="message" /> <EditText android:layout_width="fill_parent" android:layout_height="150px" android:gravity="top" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="send SMS" /> </LinearLayout> Geodatenanwendungen, Seite 99

100 AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="mysms.maker" android:versioncode="1" android:versionname="1.0"> <application <activity android:name=".mysmsmaker" <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.send_sms"> </uses-permission> <uses-permission android:name="android.permission.receive_sms"> </uses-permission> </manifest> Permission ergänzen! Geodatenanwendungen, Seite 100

101 strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">hello World, mysmsmaker!</string> <string name="app_name">smsmaker</string> <string name="hint">nummer und Nachricht eingeben</string> </resources> Zugriff über R.string.hint Geodatenanwendungen, Seite 101

102 Activity: mysmsmaker (1/3) package mysms.maker; import android.app.activity; import android.app.pendingintent; import android.content.intent; import android.os.bundle; import android.telephony.gsm.smsmanager; import android.view.view; import android.widget.button; import android.widget.edittext; import android.widget.toast; public class mysmsmaker extends Activity { Button btnsendsms; EditText txtphoneno; EditText txtmessage; Geodatenanwendungen, Seite 102

103 Layouts, Views,... <Button android:layout_width="wrap_content" android:layout_height="wrap_content" Button mybutton = (Button) findviewbyid(r.id.my_button); Siehe auch /ui/layout-objects.html utorials/views/hello-formstuff.html Geodatenanwendungen, Seite 103

104 Activity: mysmsmaker (2/3) /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); btnsendsms = (Button) findviewbyid(r.id.btnsendsms); txtphoneno = (EditText) findviewbyid(r.id.txtphoneno); txtphoneno.settext("***"); txtmessage = (EditText) findviewbyid(r.id.txtmessage); btnsendsms.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { String phoneno = txtphoneno.gettext().tostring(); String message = txtmessage.gettext().tostring(); if (phoneno.length() > 0 && message.length() > 0) sendsms(phoneno, message); else Toast.makeText(getBaseContext(), R.string.hint, Toast.LENGTH_SHORT).show(); } }); }// oncreate Fehlerhinweis: Objekt für kurze Zeit anzeigen Geodatenanwendungen, Seite 104

105 Activity: mysmsmaker (3/3) private void sendsms(string phonenumber, String message) { PendingIntent pi = PendingIntent.getActivity (this, 0, new Intent(this, mysmsmaker.class), 0); SmsManager sms = SmsManager.getDefault(); sms.sendtextmessage(phonenumber, null, message, pi, null); } } // mysmsmaker Empfänger Absende r Nachricht sent Intent reciepent Intent Geodatenanwendungen, Seite 105

106 Activity public class MyLogger extends Activity { private EditText geodata; private GpsData gd; /** Called when the activity is first created. */ Activity public void oncreate(bundle savedinstancestate) { übernimmt das super.oncreate(savedinstancestate); Eventhandling setcontentview(r.layout.main); geodata = (EditText) this.findviewbyid(r.id.edittext01); geodata.settext("test my Service"); }// oncreate public void onstop() { super.onstop(); } public void onstart() { super.onstart(); } } // MyLogger Geodatenanwendungen, Seite 106

107 Activity muss im manifest definiert werden stellt view dar interagiert mit dem Benutzer Hat Zustände: active: Activity ist sichtbar, hat den Focus und alle Ressorucen stehen bereit paused: Activity ist nicht ganz verdeckt, sie hat aber nicht den Focus, z.b. durch einen Dialog stopped: wenn sie verdeckt ist, kommt die Activity in den Zustand inactive: der Übergang erfolgt durch Android Wenn die Anwendung aus mehreren Views besteht, dann muss mit setcontentview entsprechend umgeschaltet werden oder die verschiedenen Views in weiteren Activities behandelt werden Darf nicht blockiert werden: nach 5 sec gibt es eine Meldung! Geodatenanwendungen, Seite 107

108 Zustanddiagramm Geodatenanwendungen, Seite 108

109 Reaktion auf Zustandsänderungen Bedarfsweise können in der Activity folgende Methoden überschrieben werden: void oncreate(bundle bundle) // unbedingt erforderlich void onstart() void onrestart() void onresume() void onpause() void onstop() void ondestroy() Geodatenanwendungen, Seite 109

110 Tipps zum Debuggen Die Klasse android.util.log stellt Klassenmethoden für das Logging bereit: Fehler: Log.e(String tag, String message ) Warnungen: Log.w(String tag, String message ) Informationen: Log.i(String tag, String message ) Debugging: Log.d(String tag, String message ) Verbose (ausführliche Erläuterung): Log.v(String tag, String message ) Alle Methoden haben ein Tag (etwa als Typkennzeichnung) für die Quelle der Meldung und die Nachricht selbst Anzeige mit LogCat View in eclipse oder durch Aufruf des Programms logcat auf der Emulation Geodatenanwendungen, Seite 110

111 Resource, Layout, View, Events <Button android:layout_column="2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="go" android:padding="3dip" android:minwidth="35px" android:layout_gravity= "center_vertical center_horizontal"> </Button> go = (Button) this.findviewbyid(r.id.send); go.setonclicklistener(perform);... Objekt und Resource verknüpfen OnClickListener perform = new OnClickListener() { public void onclick(view arg0) Geodatenanwendungen, Seite 111 { selecttour(); Prof. Dr.-Ing. } Hans-Peter Wiedling };

112 Layouts - LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="red" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/>... <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="row one" android:textsize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } Geodatenanwendungen, Seite 112

113 Layouts - TableLayout <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchcolumns="1"> <TableRow> <TextView android:text="@string/table_layout_4_open" android:padding="3dip" /> <TextView android:text="@string/table_layout_4_open_shortcut" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="@string/table_layout_4_save" android:padding="3dip" /> <TextView android:text="@string/table_layout_4_save_shortcut" android:gravity="right" android:padding="3dip" /> </TableRow> </TableLayout> public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } Geodatenanwendungen, Seite 113

114 Layouts - RelativeLayout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/blue" android:padding="10px" > <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="type here:" /> <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/label" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignparentright="true" android:layout_marginleft="10px" android:text="ok" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toleftof="@id/ok" android:layout_aligntop="@id/ok" android:text="cancel" /> </RelativeLayout> public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } Geodatenanwendungen, Seite 114

115 UI Componenten: Spinner // Spinner configure spinner = (Spinner) this.findviewbyid(r.id.spinner01); ArrayAdapter<Buddy> adapter = new ArrayAdapter<Buddy>(this, android.r.layout.simple_spinner_dropdown_item); 1-aus-n Auswahl adapter ist das Container- /Model- ArrayList<String> buddies = { Peter, Stefan, Karin, Birgit }; Objekt for (String b : buddies) adapter.add(b); adapter.setdropdownviewresource(android.r.layout.simple_spinner_dropdown_item); spinner.setadapter(adapter); selectlistener = new OnItemSelectedListener() { public void onitemselected(adapterview parent, View v, int position, long id) { gotoselected();} Eigene Adapter von public void onnothingselected(adapterview arg0) {} BaseAdapter ableiten }; Object getitem(int position) spinner.setonitemselectedlistener(selectlistener); View getview(int position, Geodatenanwendungen, View convertview, Seite ViewGroup 115 Prof. Dr.-Ing. parent) Hans-Peter Wiedling

116 Componenten Menu Spinner ProgressDialog modaler Dialog Toast Geodatenanwendungen, Seite 116