Open Source im professionellen Einsatz
Linux-Magazin 10/2012
549

Standortbestimmung

Das Geolocation-API ist in allen aktuellen Versionen der Webbrowser Firefox, Opera, Chrome, Safari und Internet Explorer implementiert, funktioniert in Firefox unter Linux aber leider nicht. Eine alternative Möglichkeit zur Bestimmung der Geolocation mittels Google ist das Skript Geolocation Shim [9]. Auf jeden Fall sollte beim Betrieb die Wifi-Schnittstelle eingeschaltet sein.

Listing 7 zeigt, wie der Programmierer das Geolocation-API einsetzt. Die Funktion »getCurrentPosition()« in den Zeilen 3 bis 7 ermittelt den Standort asynchron. Der Success-Callback findet sich im ersten, der Error-Callback im zweiten Parameter der Funktion.

Listing 7

Wrapper-Objekt für Geolocation-API

01 window.Geolocation = {
02  current : function() {
03   navigator.geolocation.getCurrentPosition(
04    function(pos) {Geolocation.success(pos)},
05    function(err) {console.log(err.code);},
06    {highAccuracy:true, maximumAge:0, timeout:1000}
07   );
08  },
09
10  watch : function() {
11   navigator.geolocation.watchPosition(
12    function(pos) {Geolocation.success(pos)}
13   );
14  },
15
16  success : function(pos) {
17   Geolocation.latitude = pos.coords.latitude;
18   Geolocation.longitude = pos.coords.longitude;
19  }
20 };

Das Objekt im dritten Parameter konfiguriert den Aufruf: »highAccuracy« ermittelt, unter Umständen unter größerem Energieverbrauch, den Standpunkt möglichst genau, »maximumAge« erlaubt die Verwendung von gespeicherten Geolocations, die nicht älter als angegeben sind, und »timeout« bestimmt die Zeit, nach der die Ortung abbricht. Beide Angaben verwenden Millisekunden als Einheit. Die Angabe »maximumAge=0« verzichtet auf gespeicherte Geolocations. Die Funktion »watchPosition()« beobachtet die aktuelle Position dauerhaft. Falls sich die Position merklich ändert, führt der Code den Success-Callback aus. Dieser speichert ab Zeile 18 den aktuellen Breiten- und Längengrad.

Open Layers

Geolocations lassen sich mit Hilfe der freien Javascript-Bibliothek Open Layers [10] in einer Karte anzeigen, etwa von Openstreetmap oder Google Maps. Aktuell liegt Open Layers in Version 2.11 vor. Listing 8 zeigt, wie das »script« -Element in Zeile 5 die Bibliothek in ein HTML-Dokument einbindet. Der »div« -Container in Zeile 9 nimmt die Karte auf.

Listing 8

Open Layers

01 <!DOCTYPE html>
02 <html>
03 <head>
04  <meta charset="UTF-8"/>
05  <script src="js/OpenLayers.js"></script>
06  <script src="listing-12.js"></script>
07 </head>
08 <body>
09    <div id="osmap" style="width:512px;height:256px"></div>
10 </body>
11 </html>

Das Anzeigen der Standorte mit Javascript demonstriert Listing 9. Zeile 6 initialisiert den Kartenbereich, Zeile 7 fügt ihm eine Schicht mit der Openstreetmap-Karte hinzu, Zeile 9 die Schicht für die Markierungen. Die Methode »addMarker()« in Zeile 15 zeigt eine Geolocation, indem sie einen Klon des Bildobjekts aus Zeile 12 herstellt und an den durch »coords« (Zeile 20) transformierten Koordinaten einfügt. Abschließend macht das Skript die neue Markierung zum Mittelpunkt des Kartenausschnitts.

Listing 9

Wrapper-Objekt für Open Layers

01 window.Map = {
02  map: undefined,
03  ipath : 'img/marker.png',
04
05  init : function() {
06   this.map = new OpenLayers.Map({div:"osmap", zoom:12});
07   this.map.addLayer(new OpenLayers.Layer.OSM());
08   this.marker = new OpenLayers.Layer.Markers();
09   this.map.addLayer(this.marker);
10   var size = new OpenLayers.Size(21,25);
11   var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
12   this.icon = new OpenLayers.Icon(this.ipath, size, offset);
13  },
14
15  addMarker : function(lon, lat) {
16   this.marker.addMarker(new OpenLayers.Marker(this.coords(lon, lat), this.icon.clone()));
17   this.map.setCenter(this.coords(lon, lat));
18  },
19
20  coords : function (lon, lat) {
21   return new OpenLayers.LonLat(lon, lat).transform(
22    new OpenLayers.Projection("EPSG:4326"),
23    new OpenLayers.Projection("EPSG:900913")
24   );
25  }
26 };

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Firefox OS

    Javascript, HTML 5 und jede Menge Linux- und Android-Erbschaften: Das ist Firefox OS, das Smartphone-Betriebssystem, mit dem Mozilla auf den Markt der günstigen Smartphones drängt. Das Linux-Magazin hat die ersten beiden Referenz-Entwicklergeräte Keon und Peak von Geeksphone getestet.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

  • Firefox-OS-Apps

    Erst Apps bringen die Smartness aufs Smartphone, da macht Firefox OS keine Ausnahme. Im Unterschied zur Konkurrenz bauen die Entwickler ihre Apps jedoch mit offenen Webtechnologien wie HTML 5, Javascript und CSS 3. Der Artikel zeigt das exemplarisch anhand einer App zum Stimmen von Gitarren.

  • Backbone.js

    Die Javascript-Engines moderner Browser sind leistungsfähig genug, um die Anwendungslogik zu übernehmen. Wie auf dem Server beschleunigen auch hier Frameworks die Entwicklung. Ein herausragendes Beispiel für diese Gattung ist Backbone.js, das ein lokales Datenmodell umsetzt.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.