Microsoft vient de rendre disponible dans la CTP de juillet 2008, un contrôle serveur ASP.Net pour Virtual Earth regroupant la majorité des possibilités de l'API exposées en langage managé.

virtual earth_header

Le controle annoncé par Chris Pendleton sur le blog développeur officiel et disponible et vous pouvez dès à présent le télécharger depuis le site dédié à travers ce lien.

En quoi est-ce utile ?

Ce contrôle vous permet d'intégrer Virtual Earth dans votre site ASP.Net en un simple glisser-déposer depuis la toolbox sur votre WebForm.

Les propriétés de configuration de la carte sont directement paramétrables depuis la fenêtre de propriété de Visual Studio et on accède à de nombreuses propriétés et fonctions directement depuis le code managé.

 

Mise en pratique :

art_ve_toolbox

Après avoir téléchargé et installé les tools depuis le site dédié, vous observez de nouveaux composants utilisables au sein de vos WebForms disponibles à travers la toolbox :

Pour utiliser ces composants, c'est d'une simplicité habituelle, un simple glisser-déposer dans votre code ou en vue "Design".

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ve:Map ID="MapControl" runat="server" 
        Height="400px" Width="400px" ZoomLevel="4"
        ScaleBarDistanceUnit="Kilometers" 
        Center-Latitude="47" Center-Longitude="3" 
        Locale="fr_fr"
        MapStyle="Aerial" />

Donc voici le code qui peut être inséré et qui peut facilement se paramétrer à travers la fenêtre des propriétés :

art_ve_prop

Le tout pour obtenir un résultat simple et efficace une fois paramètrée comme dans le code au dessus :
art_ve_article

Allons un peu plus loin :

L'intérêt de ce contrôle serveur réside en grande partie dans le fait qu'il est possible d'ajouter des éléments simplement depuis le code-behind.

//Initialize the VEShapeLayer with a single pushpin
ShapeLayer layerPin = new ShapeLayer();
layerPin.AddShape(new Shape(ShapeType.Pushpin, 
new LatLongWithAltitude(47,3))); //Add the layer to the MapControl this.MapControl.AddShapeLayer(layerPin); //------------------------------------------------- //Initialize the VEShapeLayer with a polyline ShapeLayer layerLine = new ShapeLayer(); List<LatLongWithAltitude> linePoints = new List<LatLongWithAltitude>(); linePoints.Add(new LatLongWithAltitude(48, 3)); linePoints.Add(new LatLongWithAltitude(48, 4)); linePoints.Add(new LatLongWithAltitude(49, 4)); linePoints.Add(new LatLongWithAltitude(49, 3)); linePoints.Add(new LatLongWithAltitude(48, 3)); //Add the layer to the MapControl Shape line = new Shape(ShapeType.Polyline, linePoints); layerLine.AddShape(line); this.MapControl.AddShapeLayer(layerLine);

Ce code comme décrit en commentaires, permet d'ajouter une VEShape de type Pushpin et une autre de type Polyline. Il est ici intéressant de noter les possibilités d'ajout et le support complet des possibilités de l'API JavaScript en code managé.

art_codebehind

Limitations :

La solution utilise un UpdatePanel pour mettre à jour les informations sur la carte en utilisant AJAX. Jusque là, les neophytes pourraient n'y voir qu'une solution élégante et rapide d'utiliser AJAX.

Seulement, quelques effets de bords peuvent apparaître dès lors qu'on utilise les UpdatePanel sans se soucier du fonctionnement à plus bas niveau notamment lorsque ces éléments sont utilisés au sein de pages contenant de multiples Webparts elles même utilisant ces UpdatePanels.
La session de Renaud Comte et Aurélien Verla des techdays présentait en quelques exemples ces effets non-voulus, j'essaierai de récupérer les slides et démo au besoin.

 

Conclusion :

Ce contrôle vous permettra d'intégrer plus facilement Virtual Earth dans son état de base et sans se concentrer sur l'optimisation en fonction de besoin notamment en termes de customisation ou bien même concernant les possibilités de clustering que ce soit côté serveur ou côté client pour le moment.

Il faut garder en tête qu'il s'agit d'un wrapper C# permettant une utilisation plus aisée du MapControl de base, ce qui signifie en d'autres termes qu'on est confronté aux mêmes limites techniques !

J'avais il y a quelques mois, développé un projet similaire en interne utilisant différents services de cartographie (VE, Google Maps...) et ajoutant quelques nouvelles fonctionnalités pas présente dans les APIs de base.

Ici il y a de quoi s'inspirer ! Et je ne manquerai pas de venir bloguer quelques exemples plus complets et pratiques d'ici peu !

Aussi, comme ce contrôle est en CTP (v0.1.0.0) n'hésitez pas à remonter vos bugs ou suggestions à travers le forum dédié ou à travers les commentaires ici, je ne manquerai pas de les relayer aux personnes les plus à mêmes de traiter les remarques.

Il est important de noter également que plusieurs intentions de projet autour de l'API Google Maps était déjà disponibles dans une certaines limites comme le projet de la Team Itélios (que je salue au passage).

 

Bonus :

Le petit bonus de ce contrôle... il réside en une simple utilisation de Reflector pour récupérer l'ensemble des classes en code managé autour de l'API VE et les fichiers JavaScript.

Ce reverse-engineering non autorisé ne sera pas blâmé je pense, puisqu'il nous permettra d'améliorer des projets open-source comme DeepEarth auquel je participe mais aussi d'autres projets comme Virtual Earth Wrapper for Silverlight.

Le tout nous permet également de creuser encore et encore l'API et d'observer l'utilisation de pattern intéressant et propre au niveau du JavaScript.

art_ve_reverse

 

Bonus 2 - le retour :

Un petite interface de nouvelle génération...

Oui il s'agit de Surface Sphere qui devra être annoncée officiellement d'ici peu dans le prochain événement dédié, en attendant par ici la vidéo :