im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

Im dritten Teil haben wir angeschaut, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

In diesen Beitrag werden wir die auf SQL Azure gespeicherten Daten in einer ASP.NET MVC Applikation anzeigen und editieren. Außerdem werden wir das Bing Maps Ajax Control verwenden, um die Lokations-Daten der Kollegen auf der Karte anzuzeigen! Keine Angst, das geht alles ganz einfach, die APIs für Bing Maps sind gut dokumentiert und können hier live ausprobiert werden.

Unsere kleine Web Applikation soll natürlich auch auf Azure laufen, dafür können wir das Web Projekt (für die ADO.NET Data Services) aus dem letzten Beitrag gut weiterverwenden.

Wir brauchen nur die Basisfunktionalität aus ASP.NET MVC. Wir werden genau eine Seite erstellen, die gesamte Datenverarbeitung im Zusammenspiel mit dem Service machen wir per Ajax.

Als Goodie können wir die Standard-Zugriffsverwaltung  von ASP.NET verwenden, dadurch können wir den Zugriff auf Kollegen beschränken und wissen innerhalb der Applikation immer wer angemeldet ist.

  • (Für eine “echte” Unternehmensanwendung wäre natürlich eine Integration mit Active Directory sinnvoll. Das ist mit Hilfe von  Azure Appfabric Access Control technisch relativ einfach zu realisieren.)

Hier ist ein Screenshot, der zeigt,  wie die fertige Applikation aussehen soll:

image

Der angemeldete Benutzer sieht eine Karte, auf der alle Kollegen in seiner Nähe in Form von kleinen Images abgebildet sind.

dazu kann er seine aktuelle Position eingehen (Rechtsklick auf die karte) , und ein paar Infos eingeben, z.B. Uhrzeit und Restaurantvorschläge, etc..

Wie funktioniert das ?

Bing Maps stellt ein Ajax Control zur Verfügung, dass mit wenigen Zeilen Code für eigene Anwendungen verwendet werden kann.

das Control ist vollständig in Javascript realisiert, es gibt keine ASP.NET Servercontrols oder ähnliches. es ist wird über eine Script-Referenz in unsere HTML Seite integriert.

    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>

Für die Darstellung in der Webseite wird das Control an ein ganz normales <div> gebunden, unseres heisst 'myMap'. 

Das geschieht per Javascript, siehe  Function “GetMap()” weiter unten. 

 

Wie passen wir das Bing Maps Control für unsere Applikation an?

 

In unseren Beispiel möchten wir “Pushpins” auf der Karte abbilden, jeweils an den Koordinaten die der Mitarbeiter als seinen Standort angeklickt hat. Es sollen kleine Icons mit dem Foto des Mitarbeiters angezeigt werden, damit man gleich sieht, mit wem man es zu tun hat !

Dazu benutzen wir 2 Fähigkeiten de Controls:

1. Die Koordinaten eines Mausklicks auf der Karte auszulesen 

2. eine Liste von Objekten auf der Karte anzuzeigen ( per GeoRSS)

hierfür brauchen wir ein bisschen Javascript, um mit dem API des Bing Maps Controls zu interagieren.

hier fängt wie immer alles an (wir verwenden die ASP.NET Ajax Library) :

Sys.onReady(function () {
           
           GetMap();
           AddMyLayer(VEDataType.GeoRSS);
        
       });

jetzt wird das Map Control geladen und auf eine beliebige Startposition (Mittelpunkt der Karte) initialisiert.

function GetMap() {
           map = new VEMap('myMap');
           map.LoadMap(new VELatLong(47.4312372344898, 8.5603666305542063), 12);
           map.AttachEvent("onmousedown", MouseHandler);
       }
 

diese Funktion liest einen GeoRSS feed mit den Koordinaten unserer Kollegen, und setzt sie als Mini-Bilder auf die Karte:

var layer = new VEShapeLayer();

function AddMyLayer(type) {

           layer .DeleteAllShapes();

           layer .SetClusteringConfiguration(VEClusteringType.Grid); // determines how clusters of pushpins are displayed
            var veLayerSpec = new VEShapeSourceSpecification(type, 'GeoFeed.svc', l);
            map.ImportShapeLayerData(veLayerSpec, onFeedLoad);


        }

Hinter dem Geofeed steckt eine Stored Procedure die wir über die ADO.NET Data Services exponieren.

Den T_SQL Code sowie die Deklaration des Services zeige ich im nächsten Beitrag.

das Map Control zentriert die Karte danach automatisch, so dass alle Punkte der Liste sichtbar sind.

wenn der GeoRSS Feed geladen wurde, wird diese callback function  aufgerufen, welche die Icons platziert:

function onFeedLoad(feed) {
            //alert('RSS or Collection loaded. There are ' + feed.GetShapeCount() + ' items in this list.');
            var icon_org = '<img src="https://Picturesite.com/ma_photos/$.jpg" alt="£" width=25 />';
            var icon = icon_org;
            for (var i = 0; i < l.GetShapeCount(); i++) {
                var shape = layer.GetShapeByIndex(i);
                icon = icon.replace('$', shape.GetTitle());
                icon = icon.replace('£', shape.GetDescription());
                shape.SetCustomIcon(icon);
                icon = icon_org;
            }
        }


jetzt haben wir alle Mitarbeiter als kleine Mini-Bildchen auf der Karte platziert.

Als nächstes wollen wir unsere eigene Position festlegen:

Der Mousehandler gibt uns (beim Rechtsklick) die aktuelle Position als Latitude/Longitude Kombination.

Wir setzen dann ein Pushpin (Shape), das auf der Karte anzeigt, wo wir selbst uns befinden.

 
function MouseHandler(e) {

     if (e.rightMouseButton) {
         pixel = new VEPixel(e.mapX, e.mapY);

         // this magic function calculates the geo position from the pixel that was clicked on the control!
         var LatLong = map.PixelToLatLong(pixel);

         //...later we will update our data here with the new geolocation

         // clear current shape
         DeleteShape();
         // set new pushpin at mouse position
         AddPushpin(LatLong);

         // we reload the list of geopoints with collegues near to us
         UpdateColleguesListPoint(LatLong);

     }
 }
function AddPushpin(LatLong) {
            shape = new VEShape(VEShapeType.Pushpin, LatLong);
            map.ClearInfoBoxStyles();
            shape.SetTitle("<h2>Ich!</h2>");
            shape.SetDescription('hier bin ich.');

            //Add the shape to the map         
            map.AddShape(shape);

        }
function DeleteShape() {
            if (shape != null) {
                map.DeleteShape(shape);
                shape = null;
            }
        }

Das ist eigentlich alles was man für die Integration einer Bing Maps Karte in eine Web Applikation braucht!

Zu sagen bleibt noch, das wir die gleiche serverseitige Funktionalität (GeoRSS Feed)  auch für die Windows Phone 7  Applikation verwenden werden!

Al nächstes wollen wir die Distanz zu unseren Kollegen in Metern auf der Webseite anzeigen, und zwar synchronisiert mit dem Mausklick auf der Karte. Wie das geht, erfahrt Ihr im nächsten Beitrag . Außerdem werden wir unseren OData Service per Ajax Data Binding  an unsere Seite anbinden, und so CRUD Funktionalität für die TVDLunch Tabelle  bereitstellen.

 

 

Technorati-Tags: ,,,,,