Entwicklung & Design

jQuery Mobile in Zusammenarbeit mit HTML5: Geolocation

Im letzten Artikel zu jQuery Mobile habe ich euch die ersten Schritte in diesem Framework präsentiert. Natürlich ist es nicht sinnvoll, einfache Webseiten mit jQuery Mobile zu erstellen, sondern es ist vor allem dazu da, um richtige Webapplikationen erstellen zu können. Und wie ihr das mit Hilfe von HTML5 macht, lest ihr hier.

HTML5 ist der zukünftige de-facto Standard für das Erstellen von Webseiten. Die meisten Smartphone-Browser unterstützen auch die neuen Möglichkeiten von HTML5. Die interessantesten dabei sind wohl die Möglichkeiten der Geolocation auf dem Smartphone oder auch Web Storage.

Das Grundgerüst

In diesem Tutorial werdet ihr sehen, dass ihr nicht mehr als ein bisschen JavaScript benötigt, um eine erste kleine WebApp zu erstellen.

Was wir benötigen:

  • jQuery
  • jQuery Mobile
  • Einen HTML5-kompatiblen Browser (empfohlen sind hier die zahlreichen Gecko- oder Webkit-Browser)
  • GoogleMaps-API für die Karten (wir könnten genauso auch andere Kartendienstleister nutzen, jedoch werden die meisten schon bereits mit der Google-API gearbeitet haben)

Zuerst kümmern wir uns um die Struktur unserer Seite. Wir möchten neben einer Startseite, eine Seite zum Einchecken des aktuellen Standortes und eine Seite zur Anzeige des letzten Standortes haben. Dazu legen wir uns folgende Seite an:

<!DOCTYPE HTML>
<html>
  <head>
    <title>MyStandort</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

  </head>
  <body>
      <div data-role="page" id="startseite">
          <div data-role="header" data-position="fixed">
              <h1>MyStandort</h1>
          </div>
          <div data-role="content">
              <p>Hier k&ouml;nnen sie ihren Standort einchecken. Viel Spa&szlig; dabei !</p>
          </div>
          <div data-role="footer" data-position="fixed">
              <div data-role="navbar">
                  <ul>
                      <li><a href="#startseite" class="ui-btn-active">Startseite</a></li>
                      <li><a href="#letzterStandort">Letzter Standort</a></li>
                      <li><a href="#einchecken">Einchecken</a></li>
                  </ul>
              </div>
          </div>
      </div>
            <div data-role="page" id="letzterStandort">
          <div data-role="header" data-position="fixed">
              <h1>MyStandort</h1>
          </div>
          <div data-role="content">
              <h3>Lassen sie sich ihren letzten Standort anzeigen:</h3>
              <p><a href="#" data-role="button" id="letzterStandortanzeigen">Anzeigen</a></p>
          </div>
          <div data-role="footer" data-position="fixed">
              <div data-role="navbar">
                  <ul>
                      <li><a href="#startseite">Startseite</a></li>
                      <li><a href="#letzterStandort" class="ui-btn-active">Letzter Standort</a></li>
                      <li><a href="#einchecken">Einchecken</a></li>
                  </ul>
              </div>
          </div>
      </div>
            <div data-role="page" id="einchecken">
          <div data-role="header" data-position="fixed">
              <h1>MyStandort</h1>
          </div>
          <div data-role="content">
              <h3>Checken sie hier ihren derzeitigen Standort ein:</h3>
              <p><a href="#" data-role="button" id="btneinchecken">Einchecken</a></p>
              <div id="karte"></div>
          </div>
          <div data-role="footer" data-position="fixed">
              <div data-role="navbar">
                  <ul>
                      <li><a href="#startseite">Startseite</a></li>
                      <li><a href="#letzterStandort">Letzter Standort</a></li>
                      <li><a href="#einchecken" class="ui-btn-active">Einchecken</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </body>
</html>

Die Geolocation-API

Damit haben wir das Design festgelegt. Im Unterschied zum ersten Tutorial haben wir die Header und Footer fixiert. Als Nächstes möchten wir nun, dass die Daten aus der HTML5-Geolocation ausgegeben werden.
Dazu legen wir einen neuen  Script-Teil im head an und schreiben folgendes dort hinein:
<script type="text/javascript">
        jQuery(window).ready(function(){
            jQuery("#btneinchecken").click(geolocation_starten);
        });

        function geolocation_starten() {
            navigator.geolocation.getCurrentPosition(geolocation_action, errors_action);
        }

        function errors_action(error) {
            switch(error.code){
                case error.PERMISSION_DENIED: alert("Der Nutzer m&ouml;chte keine Daten teilen.");break;
                case error.POSITION_UNAVAILABLE: alert("Die Geodaten sind nicht erreichbar.");break;
                case error.PERMISSION_DENIED: alert("Timeout erhalten");break;
                default: alert ("Unbekannter Error");break;
            }
        }

        function geolocation_action(position){
            var browserbreite = 200;
            var karte_url = "http://maps.google.com/maps/api/staticmap?sensor=true&center="+ position.coords.latitude +","+ position.coords.longitude +"zoom=15&size="+ browserbreite +"x250&markers=color:red|label:A|"+ position.coords.latitude +","+ position.coords.longitude;

            jQuery("#karteAktuell").remove();
            jQuery("#karte").append(
                jQuery(document.createElement("img")).attr("src", karte_url).attr('id','karteAktuell')
            );
        }

    </script>

 

Was wir mit diesem Script gemacht haben, ist relativ einfach zu erklären. Zuerst warten wir darauf dass der Button mit der ID „btneinchecken“ geklickt wird. Wenn er geklickt wird, starten wir die Geolocation-API mit:

navigator.geolocation.getCurrentPosition(geolocation_action, errors_action);

 

Der Funktion getCurrentPosition übergeben wir zwei Fallback-Funktionen, eine zum Ausführen, wenn die Ermittlung der Daten geklappt hat und die zweite Funktion zum Error-Handling. In der Funktion errors_action lassen wir den Fehlercode durch eine Fallabfrage genauer ermitteln. Das sollte aber durchaus selbsterklärend sein.

In der Funktion geolocation_action wird der nun eigentlich spannende Code ausgeführt. Im Objekt position sind verschiedenen Informationen erhalten. Zum Beispiel:

  • Latitude (latitude)
  • Longitude (longitude)
  • Geschwindigkeit (speed)
  • Höhe (altitude)
  • Genauigkeit (accuracy)
  • Geschwindigkeit (speed)
Wir nutzen die Positionsangaben für Longitude() und Latitude mit:
position.coords.longitude
position.coords.latitude

Mit Hilfe dieser Angaben erzeugen wir eine Variable karte_url. Diese Variable enthält eine URL auf eine statische GoogleMaps-Karte.

Mit Hilfe von

jQuery("#karteAktuell").remove();

entfernen wir alle eventuell angezeigten Karten um Platz für die neue Karte zu schaffen. Und mit

jQuery("#karte").append(
  jQuery(document.createElement("img")).attr("src", karte_url).
attr('id','karteAktuell')
            );

fügen wir in den DIV karte ein neues Bild ein mit der Quelle der statischen GoogleMaps-Karte. Klickt ihr nun auf den Button „Einchecken“ werdet ihr zuerst gefragt ob die Seite auf den Standort zugreifen darf, und anschließend wird die Karte angezeigt.

jQuery Mobile Geolocation API

jQuery Mobile Geolocation API

Ausblick

Natürlich ist die App nun noch lange nicht fertig. Im nächsten Tutorial wird es darum gehen, die Geolocation-Informationen mit Hilfe von HTML5 zu speichern und den letzten Standort auszugeben.

Was haltet ihr von der Geolocation-API, nutzt ihr sie? Oder geht ihr lieber den Umweg über PhoneGap?

Die aktuellen News auf t3n zu den Themen jQuery und HTML5:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

9 Kommentare
Yanik
Yanik

Gibt es auch eine Möglichkeit, ein Route in einer jQuery-Mobile-Webapp anzuzeigen? Meine versuche sind bis jetzt immer gescheitert..

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.