Bing Maps in Windows Store Apps

Bing Maps in Windows Store Apps

  • Comments 1

In diesem Blogpost erfahrt Ihr, wie einfach es ist, Bing Maps in Eure Windows Store App einzubinden. Eigentlich ist das ganz einfach. Um mit Bing Maps in Eurer App zu arbeiten, benötigt Ihr lediglich einen Bing Maps Account, einen Bing Maps Key und das zugehörige SDK. Dann kann’s auch schon losgehen.

Die gute Nachricht: Kosten & Lizenz

Das Wichtigste zuerst: Viele von Euch werden wissen wollen, ob die Verwendung von Bing Maps Services oder des SDK kostenpflichtig ist. Erfreulicherweise gilt wahrscheinlich für die meisten von Euch, dass Ihr das SDK und die Services kostenlos nutzen dürft. Genauere Info wann und unter welchen Umständen es doch kostenpflichtig ist, findet Ihr in der MSDN Doku und den Terms of Use. http://www.microsoft.com/maps/product/terms.html

Als Daumenregel kann man festhalten: Wenn Eure App frei verfügbar und frei zugänglich ist (das heißt nicht, dass sie kostenlos sein muss), dann kann sie in der Regel auch kostenlos Bing Maps verwenden, so lange die Verwendung den Terms of Use entspricht.

Wenn Eure App nur für einen beschränkten Anwenderkreis verfügbar ist (zum Beispiel eine unternehmensintern LoB-App), dann benötigt Ihr einen Enterpriseaccount, der kostenpflichtig ist. Wie gesagt, das ist zunächst mal einen Daumenregel, die im Einzelfall überprüft werden muss. Genauere Info hierzu gibt’s in der MSDN: http://msdn.microsoft.com/en-us/library/ff428642.aspx .

Bing Maps Account

Zunächst benötigt Ihr einen Account für Bing Maps. Diesen erhaltet Ihr, indem Ihr Euch mit Eurem Microsoft-Account (ehemals bekannt als Live-ID) im Bing Maps Portal anmeldet – sollte also kein großer Akt sein, da ich davon ausgehe, dass Ihr ohnehin schon eine Microsoft-ID habt.

Die URL zum Portal: http://bingmapsportal.com/

Im Portal findet Ihr auch gleich Links zum Bing Maps Blog sowie zu den zugehörigen Foren. Ich bin sicher, dass Ihr hier interessante Info findet, wenn mal Fragen auftauchen.

clip_image002

Bing Maps Key

Wenn Ihr Euch auf der Seite erfolgreich angemeldet und eingeloggt habt, müsst Ihr Euch als nächstes in diesem Portal einen Bing Maps Key beschaffen. Den Key benötigt Ihr, um auf die Bing Maps Ressourcen und Services zugreifen zu können. Hierzu klickt Ihr oben links auf „Create or view keys“. Das öffnet den „Create Key“ Dialog.

clip_image004

Hier müsst Ihr unterschiedliche Angaben darüber machen, wofür Ihr den Key verwenden werdet. Als Application Name und URL könnt ihr potentiell angeben, was Ihr wollt – beide Informationen sind insbesondere für Euch und für die Verwaltung Eurere Keys gedacht. Ihr solltet also halbwegs vielsagende Namen wählen. Als Keytype könnt Ihr zwischen Basic und Trial wählen. Wie oben im Abschnitt zur Lizenzthematik beschrieben, könnt Ihr hier Basic wählen, wenn Ihr eine öffentlich verfügbare App für Windows 8 entwickelt. Als Application Type versteht sich bei Windows Store Apps der Eintrag „Windows Store app“. Anschließend noch das Captcha ausfüllen und abschicken.

Als Ergebnis erhaltet Ihr umgehend einen relativ langen Key. Das ist Euer Key für die Interaktion mit Bing Maps. Jetzt kann’s also ans Entwickeln gehen.

Entwicklung

Nach den administrativen Vorarbeiten können wir jetzt endlich anfangen Code zu schreiben. Zunächst benötigen wir aber noch das Bing Maps SDK. Das gibt es in der Visual Studio Gallery kostenlos als Download. Es handelt sich dabei um eine *.vsix Datei, also eine Visual Studio Erweiterung. Wenn Ihr die heruntergeladene Datei doppelt klickt, wird Bing Maps in Visual Studio 11 verfügbar gemacht.

Der Download Link des Bing Maps SDKs: http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca

Anschließend benötigt Visual Studio einen Neustart. Um zu validieren, dass wir tasächlich mit Bing Maps arbeiten können, legen wir ein neues Projekt an - in unserem Fall eine Windows Store App basierend auf Xaml/C#. Wir fügen eine neue Referenz auf Bing Maps zum Projekt hinzu um das SDK einzubinden. Unter Windows à Extensions finden wir das Bing Maps SDK. (Siehe Screenshot).

clip_image006

Wenn wir nun versuchen das Projekt zu bauen, werden wir eine Fehlermeldungen erhalten, die ungefähr so lautet: The processor architecture of the project being built "Any CPU" is not supported by the referenced SDK "Bing.Maps.Xaml, Version=1.0". Please consider changing the targeted processor architecture of your project (in visual studio this can be done through the Configuration Manager) to one of the architectures supported by the SDK: "x86, x64, ARM".

Wie uns die Fehlermeldung unmissverständlich mitteilt ist der Grund für den Fehler, dass wir noch nicht spezifiziert haben, was die Target-Platform unserer App sein soll. Wir müssen also über den Configuration Manager die Zielplattform einstellen, beispielsweise x86. Anschließend lässt sich das Projekt bauen.

clip_image008

Für unser kleines Beispiel fügen wir in der Xaml Datei in der Mainpage eine Referenz auf den Bing Maps Namespace hinzu.

clip_image009

Außerdem binden wir das Bing Maps Control ein – das heißt ein UI Element, das letztlich die Karte darstellen soll. Hier müssen wir unseren Bingmaps Key angeben – dazu fügen wir einfach den im Bing Maps Portal angelegten Key als Credentials-Property ein.

clip_image010

Wenn Ihr hier den falschen Key angebt, dann erhaltet Ihr eine Meldung im sichtbaren Bereich der App, wenn Ihr die App ausführt (siehe Screenshot), anderenfalls wird die App korrekt laufen.

clip_image012

Die Map kann ohne weitere Konfiguration bereits auf Touchevents reagieren, der Anwender kann also ein- und auszoomen, pannen etc. Um die Karte zu postionieren, fügen wir eine Initialisierungsmethode ein, die dafür sorgt, dass die Karte vergrößert dargestellt wird und initial auf Unterschleißheim zielt. Über das Property „Center“ des Map Controls kann man die Koordinaten festlegen, über die die App initial steht. Über das Property ZoomLevel kann ich auf einer Skala von 1-20 einstellen, wie weit ich einzoome. Mir scheint 16 hier ein gutes Level zu sein. Außerdem geben wir über das MapType Property an, dass wir die Karte als Road-Darstellung sehen möchten, also nur Straßen, keine Luftaufnahme.

clip_image013

Das Ergebnis sieht dann ungefähr so aus:

 clip_image015

Um anzuzeigen, wo sich ein bestimmtes Ziel auf der Map befindet, können wir Pushpins platzieren. Diese Pushpins sind eigentlich nichts anderes als kleine Stecknadelköpfe, deren Position wir frei wählen können. Um das zu tun, erstellen wir eine Instanz der Klasse Pushpin, fügen diese Instanz an die Karte hinzu und positionieren diese dann.

clip_image016

Das Ergebnis zeigt jetzt eine blaue Markierung an der von uns ausgewählten Stelle.

clip_image018

Bing Maps Services

Zum Abschluss lassen wir uns jetzt noch eine Route berechnen – und verwenden dabei die Bing Maps Rest Services. Die Funktionalität der Bing Maps Services geht weit über das hier gezeigte Beispiel hinaus. Eine komplette Dokumentation der Bing Maps Services findet Ihr hier: http://msdn.microsoft.com/en-us/library/jj819168.aspx

An dieser Stelle der MSDN Dokumentation findet Ihr auch die notwendigen Datacontracts, um sinnvoll mit Bing Maps Rest Services arbeiten zu können. Dazu kopiert Ihr einfach die Data Contracts in einen neue Datei eures Projekts (die zum Beispiel DataContracts.cs heißen kann). Zum Zeitpunkt der Erstellung dieses Artikels gab es die DataContracts leider nur in VB.NET. Glücklicherweise gibt es reichlich kostenloser Konverter von VB.NET zu C#-Code im Netz.

clip_image020

Unter http://msdn.microsoft.com/en-us/library/ff701717.aspx erfahren wir, welche Möglichkeiten es gibt uns Routen berechnen zu lassen. Für unser Beispiel navigieren wir mal von unserem Pushpin nach München zum Marienplatz – und zwar zu Fuß! Indem wir unterschliedliche Waypoints angeben, können wir Start und Ziel sowie gegebenenfalls noch Zwischenziele definieren. In unserem Fall besteht die URL, die wir anfragen also aus unserer Startposition als Koordinaten und dem Ziel als Zeichenkette. Die notwendige URL ist dann folgendermaßen aufgebaut:

Über „Walking“ legen wir fest, dass wir eine Fußgängerroute wollen: http://dev.virtualearth.net/REST/V1/Routes/Walking

Der erste Wegpunkt (wp.0) beinhaltet unsere Ausgangskoordinaten mit Komma getrennt.

?wp.0=48.2905,011.5823

Der zweite Wegpunkt beinhaltet eine Zeichenkette, den Marienplatz in München. Der Bing Maps Service wird selbst herausfinden, was die entsprechenden Koordinaten dafür sind.

&wp.1= Marienplatz,Munich

Wir möchten den kürzesten Weg, also optimieren wir hinsichtlich Distanz:

&optmz=distance

Wir möchten JSON als Ausgabeformat. Alternativ wäre hier auch XML möglich.

&output=json

Und natürlich übergeben wir den Key:

&key=MyBingMapsKey

Insgesamt sieht unsere URL also folgendermaßen aus:

http://dev.virtualearth.net/REST/V1/Routes/Walking?wp.0=48.2905,011.5823&wp.1=Marienplatz,Munich&optmz=distance&output=json&key=MyBingMapsKey

Diese Url fragen wir jetzt innerhalb einer kleinen Routine an, die uns die Antwort asynchron zur Verfügung stellt:

clip_image022

(Kleiner Hinweis: Diese Routine habe ich von Ricky Brundritts Blog übernommen, der in jedem Fall lesenswert ist: http://rbrundritt.wordpress.com/)

Wenn wir uns nun das Ergebnis dieses Tasks im Watch Window ansehen, werden wir feststellen, dass wir jede Menge Wegpunkte zurückgeliefert kriegen, die wir wiederum einzeln abfragen können. Das Ergebnis der Service Requests sieht im Watch-Fenster in Visual Studio ungefähr so aus:

clip_image024

Alle sogenannten ItineraryItems sind Wegpunkte, die uns zum Ziel führen. Natürlich könntent wir diese Wegpunkte jetzt nutzen um auf die Karte zu zeichnen, oder weitere Pushpins zu setzen. In diesem Posting will ich es jetzt aber mal bei der einfachen Abfrage belassen.

Das Navigationsbeispiel ist nur eine der unzähligen Möglichkeiten, wie man Bing Maps in der eigenen App unterbringen kann. Ich der Meinung, dass sehr viele Apps durch die Integration von Navigationslösungen und Kartenmaterial profitieren können. Ob Paketverfolgung, Reisetipps, Geocaching, Sportapps, Games oder Umgebungsinformationen, die einem das Leben erleichtern – der Fantasie sind keine Grenzen gesetzt!

Hier findet Ihr nochmal alle wichtigen Links und Downloads im Überblick.

Bing Maps Portal:

http://bingmapsportal.com/

Bing Maps SDK:

http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca

Bing Maps Terms of Use:

http://www.microsoft.com/maps/product/terms.html

MSDN Doku zum Bing SDK:

http://msdn.microsoft.com/en-us/library/dd877180.aspx

Viel Spaß beim Erweitern Eurer App mittels Bing Maps!

Über den Autor

DanielMeixner_IMG_4345

Daniel Meixner ist Developer Evangelist bei Microsoft Deutschland.

In seiner langjährigen Erfahrung in unterschiedlichen Rollen hat er das „Gute, Schlechte und Hässliche“ in der Softwareentwicklung zu genüge und aus unterschiedlichsten Blickwinkeln kennengelernt. Vor seiner Zeit bei Microsoft war er zuletzt Consultant und Architekt für Application Lifecycle Management Lösungen im Enterprise Umfeld.

Leave a Comment
  • Please add 5 and 7 and type the answer here:
  • Post
Page 1 of 1 (1 items)