Geolocation API im Zusammenspiel mit Bing Maps

Damit ist die gesamte Geolocation API abgedeckt. Simpel und einfach. Interessant wird es wenn man das ganze noch im Kontext eines Anwendungsfalles macht. Meine Demo verwendet die Bing Maps API in der Version 7 und zeichnet einen Pushpin auf die ermittelte Position.

Für die Bing Maps API V7 benötigt man einen Developer Key, dieser ist kostenlos und erlaubt es eine Bing Maps basierte Anwendung zu entwickeln. Die Demo habe ich bereits hier kommentarlos publiziert, so das ich jetzt zumindest noch die watchPosition Funktion erklären möchte. watchPosition ruft in dem Beispiel zwei Funktionen auf, eine zum Zeichnen der Karte, die andere um ein <div> Tag mit den Koordinaten zu erzeugen. Das Zeichnen der Karte erfolgt in showPositionOnMap() und sieht folgendermaßen aus;

   1: var pin = new Microsoft.Maps.Pushpin({
   2:         latitude: position.coords.latitude,
   3:         longitude: position.coords.longitude
   4:     });
   5:  
   6: var mapOptions = { 
   7:     credentials: "Dein-Developer-Key-Hier",
   8:     mapTypeId: Microsoft.Maps.MapTypeId.aerial,
   9:     height: 590,
  10:     width: 590
  11: };
  12:  
  13: if( map == null)
  14: {
  15:     map = new Microsoft.Maps.Map(document.getElementById("map"), mapOptions);
  16:     $("#map").show();
  17: }
  18:  
  19: var viewOptions = {
  20:     center: {
  21:         latitude: position.coords.latitude,
  22:         longitude: position.coords.longitude
  23:     },
  24:     zoom: 18,
  25:     mapTypeId: "auto"
  26: }
  27:  
  28: map.setView(viewOptions);
  29: map.entities.push(pin);

In Zeile 1-4 wird der Pushpin erzeugt, mit den ermittelten Koordinaten des Browsers. Danach ist alles wie gehabt, Karte erzeugen (Zeile 15), auf die Koordinaten zentrieren (Zeile 19-28) und den Pushpin drauf zeichnen (Zeile 29). Fertig.

Fazit

Mit der Geolocation API ist es für Web Anwendungen möglich Positionsbezogene Informationen anzubieten und das mit relativ einfachen mitteln. Ich bin gespannt welche Anwendungen in Zukunft von der API Gebrauch machen werden und welche Ideen dabei entstehen.

HTML5 Geolocation

Geolocation im Browser (Seite 1)

getCurrentPosition Beispiel (Seite 2)

Geolocation API im Zusammenspiel mit Bing Maps (Seite 3)

DotNetKicks-DE Image