Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 21): Positionsbestimmungen (1)

Web-Apps erstellen (Teil 21): Positionsbestimmungen (1)

Eine interessante Anwendung für die App ist zweifellos die Positionsbestimmung. Denn damit kann man beispielsweise dynamische Anfahrtsskizzen generieren oder zeigen, welche Restaurants und Kinos sich in der Nähe des aktuellen Standorts befinden. All das lässt sich mit der Geolocation API von HTML5 umsetzen. Wie ihr diese effektiv für eure App nutzen könnt, erfahrt ihr in diesem Video-Training.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Mittels der vom W3C vorgelegte Spezifikation Geolocation API kann man geografische Ortsangaben über Besucher einer Webseite ermitteln.

Bilder



Für Web-Apps ist das natürlich eine perfekte Lösung, um dynamische Inhalte präsentieren zu können. Die Geolocation API definiert eine Reihe von Objekten, die mit dem ECMAScript-Standard übereinstimmen. ECMAScript ist eine von der Ecma International standardisierte Skriptsprache. Das von Netscape entwickelte JavaScript orientiert sich an diesem Standard. Gleiches gilt für andere Sprachen wie beispielsweise JScript und ActionScript.

 
Bevor ihr die aktuelle geografische Position der Besucher auslest, solltet ihr aber unbedingt einen Blick auf die Datenschutzbestimmungen werfen. Ausführliche Informationen zu den Google Location Services gibt es unter http://www.google.com/privacy-lsf.html.

Die entsprechenden Bestimmungen von Mozilla stehen auf der Seite http://www.mozilla.com/en-US/legal/privacy/firefox-en.html.

Bilder



Die Positionsbestimmungen erfolgen immer in geografischer Länge und Breite, auch Longitude und Latitude genannt. Um den aktuellen Standort zu ermitteln, wird die Methode getCurrentPosition() verwendet. Als Parameter können eine Callback-Funktion für den Erfolgsfall, eine Callback-Funktion für den Fehlerfall und ein Objekt mit Konfigurationsoptionen übergeben werden.
if (navigator.geolocation) {
   /* // Die Geolocation-API ist verfügbar */
   navigator.geolocation.getCurrentPosition(success, error);
}
else {
   alert("Achtung: Die Geolocation ist nicht verfügbar.");
}

 
Im vorliegenden Beispiel wurden getCurrentPosition() zwei Callback-Funktionen als Parameter übergeben. Dabei handelt es sich um success und um error. Beim Aufruf von success wird ein Positionsobjekt als Parameter übergeben, von denen coords sicherlich am interessantesten ist. Mehr zu coords dann im Anschluss.

Dem Abfangen möglicher Fehler dient error.

Die Geolocation API erlaubt das Sammeln geografischer Daten. Nun wäre es für eure Besucher aber natürlich wenig hilfreich, wenn hier ausschließlich Zahlenkolonnen präsentiert werden würden, die jeweils die geografische Länge und Breite zeigen. Stattdessen sollte man ihnen echte Karten präsentieren. Üblicherweise wird dafür auf die Karten von Google Maps zurückgegriffen, die sich kostenlos nutzen lassen. (Aber Achtung: Gewinnorientierte Websites dürfen bis zu 25.000 Kartenladevorgänge pro Tag mithilfe des Google Maps JavaScript APIs Version 3 generieren. Wer mehr Karten ausliefert, muss die Google Maps API für Unternehmen kaufen. Mehr dazu unter https://developers.google.com/maps/documentation/business/?hl=de.)

Bilder



Um Karten einzubinden, wird auf die sogenannte Google Maps JavaScript API zurückgegriffen. Der Vorteil dieser Variante liegt auf der Hand. Ihr könnt die Karten kostenlos – siehe Einschränkung oben – nutzen und sie sind direkt bei Google gehostet.


 

Die Karten einbinden

Es geht nun also darum, wie ihr die ermittelten Positionsdaten für die Darstellung innerhalb dynamischer Karten verwenden könnt.

Um eine Map abzubilden, muss im Dokument ein leerer Bereich reserviert werden.
<div id="map"></div>

Dieser Bereich lässt sich mittels CSS auf die gesamte zur Verfügung stehende Anzeigengröße bringen. (Kopf- und Fußzeile der App bleiben aber unverändert sichtbar).
#map { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Der Dienst selbst wird, und das ist bereits angeklungen, von Google zur Verfügung gestellt. Um ihn nutzen zu können, müsst ihr die entsprechende API bei euch einbinden. Ein typischer Aufruf sieht folgendermaßen aus:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Neben dem eigentlichen Skript-Aufruf gibt man hier auch den Parameter sensor an. Hierüber wird bestimmt, wie die Lokalisierung letztendlich erfolgen soll. Tatsächlich gibt es für die Positionsbestimmung nämlich ganz unterschiedliche Möglichkeiten:

• GPS-Sensor
• WLAN-Netzwerke
• IP-Adresse
• Mobilfunkzellen

Am genauesten funktionieren die GPS-Sensoren. Allerdings brauchen diese leider auch vergleichsweise viel Energie. Die Geolocation-API verwendet von Hause aus GPS-Sensoren. Sind diese nicht verfügbar, wird auf eine der anderen Varianten zurückgegriffen.

Nun zu einer ersten Anwendung. Das Ganze packt man üblicherweise in eine if-Abfrage, um zu überprüfen, ob die Geolocation-API tatsächlich verfügbar ist. So könnt ihr immer darauf reagieren, wenn das nicht der Fall sein sollte. Im einfachsten Fall – so mache ich das im folgenden Beispiel – wird eine Fehlermeldung ausgegeben. Ihr könntet aber beispielsweise auch eine statische Karte in Form einer Grafik einbinden.
<script type="text/javascript">
 if (navigator.geolocation) {
    /* // Die Geolocation-API ist verfügbar */
   $(function(){
         navigator.geolocation.getCurrentPosition(function(position){
         longi = position.coords.longitude;
         lati = position.coords.latitude;
          var optionen = {
           zoom: 15,
              center: new google.maps.LatLng(lati, longi),
               mapTypeId: google.maps.MapTypeId.ROADMAP
              };
               karte = new google.maps.Map(document.getElementById('map'), optionen);
               });
          });
 } 
 else {
    alert("Achtung: Die Geolocation ist nicht verfügbar.");
 }                              
 </script>

Jetzt ein Blick auf die einzelnen Code-Bestandteile der zuvor gezeigten Syntax. Der aktuelle Standort lässt sich über die Methode getCurrentPosition() ermitteln.
navigator.geolocation.getCurrentPosition()

Dabei lassen sich getCurrentPosition() verschiedene Attribute übergeben. Am interessantesten dürfte dabei sicherlich coords sein. Denn über eben jenes coords übergibt man die jeweiligen Koordinaten. Im Zusammenhang mit coords tauchen dann auch immer wieder die Eigenschaften latitude und longitude auf. Diese beschreiben die geografische Breite und Länge.

 
Zusätzlich werden getCurrentPosition() im vorherigen Beispiel einige Optionen übergeben. Da wäre zunächst der Zoomfaktor, der auf 15 festgelegt wurde. Dabei entspricht ein Zoomfaktor von 0 einer vollständigen Weltkarte.

Bilder



 
Je höher die Zoomstufe, umso detaillierter wird die Karte. Persönlich empfinde ich einen Zoomfaktor von 15 als einen guten Kompromiss. Hier erkennt man ausreichend Details, der Kartenausschnitt hat aber gleichzeitig eine vernünftige Größe.

Bilder



Im nächsten Schritt werden die geografischen Breiten- und Längenangaben definiert.
center: new google.maps.LatLng(lati, longi),

Die über longi = position.coords.longitude und lati = position.coords.latitude ermittelten Koordinaten für die geografischen Breiten- und Längenangaben werden der Karte übergeben. Um die Umwandlung der Daten in die geografischen Positionen müsst ihr euch dabei übrigens nicht selbst kümmern, das erledigt die API für euch.

 
Weiter geht es mit der Art der Darstellung der Karte. Auch die lässt sich nämlich explizit festlegen.
mapTypeId: google.maps.MapTypeId.ROADMAP

Durch die zuvor gezeigte Syntax bestimmt man die bekannte 2D-Darstellung.

Bilder



Wem dieser Kartentyp nicht gefällt, der kann auch zu Alternativen greifen.

SATELLITE zeigt Fotokacheln an.
HYBRID zeigt eine Mischung aus Fotokacheln und eine Kachelebene für markante Merkmale an (Straßen, Ortsnamen).
TERRAIN zeigt Reliefkacheln für Erhebungen und Gewässer (Berge, Flüsse usw.) an.

 
Um die Karte nun tatsächlich anzeigen zu können, erzeugt man ein JavaScript-Objekt.
karte = new google.maps.Map(document.getElementById('map'), optionen);

Hier wird eigentlich nichts anderes bestimmt, als dass die Karte im Element mit der ID map dargestellt werden soll.

Das waren die grundlegenden Schritte zum Einbinden entsprechender Karten. Wie sich das dann tatsächlich in der App nutzen lässt, wird im nächsten Tutorial gezeigt.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Balu..der..Bär
Portrait von MicroSmurf
  • 17.09.2014 - 00:25

Wieder sehr interessant. Vielen Dank.

Portrait von Caesarion2004
  • 07.08.2014 - 17:32

Vielen Dank für das sehr informative Tutorial samt Datei.

Portrait von johen
  • 07.08.2014 - 16:40

Danke für die Textversion der Reihe.

Portrait von hierkarl
  • 07.08.2014 - 16:36

vielen dank für das sehr gute Tut!

Portrait von Kundentest
  • 07.08.2014 - 15:33

Herzlichen Dank für das Tutorial.

Portrait von aloh47
  • 07.08.2014 - 14:37

Super; vielen Dank für die Info

Portrait von Steve007
  • 07.08.2014 - 13:32

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von BOPsWelt
  • 07.08.2014 - 13:17

Vielen Dank für einen weiteren Teil der tollen Reihe, klasse!

Portrait von Caesarion2004
  • 08.07.2014 - 10:53

Vielen Dank für das weitere sehr informative Tutorial.

Portrait von Kundentest
  • 08.07.2014 - 09:11

Herzlichen Dank für das Video.

Portrait von Domingo
  • 07.07.2014 - 23:06

Das Video hat mir sehr geholfen. Vielen Dank.

Portrait von MicroSmurf
  • 07.07.2014 - 21:11

Interessantes Video.
Allerdings wäre ein Link zur deutschen Version der "Privacy Policy" sicher nützlicher. Ein juristischer Text in einer Fremdsprache, da kann man sich ja gleich im Knast anmelden. Man versteht ja oft nicht mal Juristen-DEUTSCH.

Portrait von johen
  • 07.07.2014 - 20:32

Tolles Video vielen Dank!

x
×
×