Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Bien après avoir testé l'API, il y a peu, j'ai décidé de créer un projet qui vous l'aurez deviné, vous permet d'avoir l'intellisense au sein de Visual Studio 2008.

codeplex_header

Oui c'est vrai je suis assez fan de ce genre de projet, mais il faut reconnaître un intérêt certains pour le développeur. D'autant plus que pour moi, cela me permet de découvrir les différentes classes et méthodes de l'API dans les détails.

C'est d'autant plus intéressant que cela permet également de remonter un avis constructif sur l'API auprès des équipes en charge, ce que je n'ai pas manqué de faire.

 

Comment obtenir cette aide ?

Tout d'abord, il est nécessaire de récupérer le projet sur CodePlex :
http://www.codeplex.com/SeaJS

En téléchargeant la dernière version release, vous obtenez un fichier nommé : SeaJSHelper_Release.js qui contient la documentation adaptée pour offrir l'intellisense au sein de Visual Studio 2008

Placez ce fichier dans votre projet dans le dossier de votre choix et référencez cet élément dans votre fichier JavaScript :

seajs_ref_file 

Vous obtenez alors l'intellisense pour l'API Seadragon AJAX. 

codeplex_seajs_sea 

Enfin, puisque l'API utilise le concept de namespace en JavaScript, il a été nécessaire d'adapter la documentation.
En effet, Visual Studio 2008 ne supporte pas comme il se doit ce concept au niveau de l'intellisense.

Il faut donc remplacer (CTRL + H) : "SeadragonJS" par "Seadragon." pour faire la correspondance avec la réelle API.

 

Remarques et feedbacks

Comme à l'habitude pour ce genre de projet, le support et les remarques peuvent être faites à travers le site CodePlex dédié.

Je vais profiter de quelques moments de temps libre pour essayer d'implémenter plus complètement et plus proprement l'API VE dans ce contrôle ou l'inverse... Je vais voir quelle solution est la plus intéressante et simple.

Microsoft vient de mettre à disposition une librairie AJAX permettant de retrouver les fonctionnalités de DeepZoom au sein d'une page, sans pour autant avoir à utiliser Silverlight 2.0.

 seadragon_header

Intérêts

Plus de Silverlight
On peut retrouver plusieurs avantages à cette solution, tout d'abord le fait de ne pas à avoir à embarquer une application Silverlight peut déjà ravir certains.

Expérience utilisateur
Ensuite cette librairie peut vous aider à intégrer une expérience sympathique pour naviguer sur des images de haute résolution ce qui n'est clairement pas un mal.

Support multi-navigateurs
Enfin, un réel avantage que j'ai pu directement vérifié, c'est le support complet des navigateurs que j'utilise (je n'ai pas testé la gamme Safari ni Chrome, mais le script les gère), mais déjà avoir une application simili-DeepZoom qui fonctionne correctement dans Opera en plus des autres navigateurs, ça surprend même si c'est pas essentiel, au moins ça fonctionne.
 

Utilisation simple

Plusieurs tutoriaux sont présentés sur le site officiel à travers ce lien que je vous invite à consulter si vous êtes intéressés.

Observons comment mettre en oeuvre le viewer avec pour commencer une base issue de nos propres images dans une page statique (html).
 

Génération des tiles et de la scène

Tout d'abord, générons une pyramide de tiles à partir d'une image de notre choix, pour cela, on peut utiliser l'outil DeepZoom Composer qui va générer la scèen pour nous.

Une fois le tout importé et la scène générée, on souhaite obtenir une fichier dzi, pour cela l'outil SparseImageTool.exe est prévu pour généré cela, il suffit de se rendre dans le dossier d'installation de DeepZoom Composer en ligne de commande et de lancer l'outil avec les paramètres nécessaires :

    C:\Program Files\Microsoft Corporation\Deep Zoom
    Composer>SparseImageTool.exe CreateDeepZoomImage
    CHEMIN_VERS_VOTRE_COLLECTION/SparseImageSceneGraph.xml

 
Un prompt apparait pour sauvegarder le fichier dzi, le fichier et les dossiers images sont générés.

On peut alors s'occuper du code à utiliser dans la page statique.
 

Développement

Le développement est relativement simple, il suffit de référencer le script de l'API (distant ou local à vous de voir)

<!-- Seadragon script reference -->
    <script type="text/javascript" 
            src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>

Ensuite on ajoute une simple DIV qui accueuillera le contrôle.

<body onload="onLoad();">
    <div id="sea_map" style="width: 500px; height: 300px; 
        background-color: black; border: 1px solid black;
        color: white;">
    </div>
</body>

Une méthode de chargement associée à l'événement onload du body de la page permet ensuite d'initialiser le contrôle et de charger la collection :

<script type="text/javascript">
    var seaElement = null;

    function onLoad() {
        seaElement = new Seadragon.Viewer("sea_map");
        seaElement.openDzi("images/wyg_pict/wyg_dz.dzi");
    }    
</script>

Et le tout fonctionne comme vous pouvez l'observer sur cette page (pour observer le code : Voir la source) ou directement ici :

La WygTeam au moment dy Wygday dans le contrôle Seadragon.

ASTUCE : la plupart des hébergeurs n'ont pas le MIME type dzi configuré (voir bloqué), rien ne vous empêche de le renommer en .xml qui lui est configuré.

 

Allons plus loin

virtual earth_header

Présentation

Pour aller plus loin, je vous propose d'utiliser les tiles de Virtual Earth au sein de Seadragon AJAX library.

Alors j'ai réalisé un PoC qui ne présente pas de réelle architecture digne de ce nom, il n'est d'ailleurs pas recommandé d'utiliser les tiles par accès direct puisque la version 6.2 de l'API Virtual Earth propose un Web Service dédié.

Enfin, pour le moment, c'était davantage dans une logique de test plus que la création d'un réel projet.
Il va de soit que la communauté VE risque de s'y intéresser et qu'un DeepEarth-like risque de voir le jour, suffit de motiver quelques bras doigts pour coder tout ça ensemble.

Développement

Enfin trève de blabla, quels sont les éléments que j'ai modifié du premier exemple pour arriver au résultat présenté dans mon PoC.

Tout d'abord, j'ai modifié manuellement les propriétés contenues dans le fichier dzi qui sera chargé dans le viewer.

Ensuite, j'ai modifié le fichier de script de Seadragon afin de changer le comportement lors du chargement des tiles, les lignes intéressantes sont ici :

this.getTileUrl = function(level, x, y) {
    var quadKey = "";
    for (var i = level; i > 0; i--) {
        var digit = 0;
        var mask = 1 << (i - 1);
        if ((x & mask) != 0) digit++;
        if ((y & mask) != 0) digit += 2;



quadKey += digit.toString(); } if (level > 8) quadKey = quadKey.substr(quadKey.length - level + 8); return ["http://r0.ortho.tiles.virtualearth.net/tiles/r", quadKey, '.', fileFormat, "?g=209&mkt=fr-fr&shading=hill" ].join(''); };

Alors quelques explications :

  • La méthode getTileUrl() est appelé avec en paramètres le niveau de zoom et la valeur x et y correspondant à l'emplacement sur la grille des tiles. On utilise alors une technique pour récupérer la quadKey afin de faire correspondre les tiles de VE. Plus d'infos ici.
  • Je supprime les zéro inutiles (et même gênants) devant la quadKey générée.
  • L'url des tiles ici est présentés uniquement à titre expérimental, il ne faut pas utiliser cette astuce pour accèder aux tiles, un web service dédié existe depuis la version 6.2 !

Une fois les propriétés de chargement modifées dans le code JavaScript de chargement, on peut observer le résultat en fonctionnement.

Pour vous, ça se passe soit par cette page, soit directement ici :

  
Pour récupérer les sources du projet ça se passe par ici.

 

Conclusions

Cette sympathique API risque de s'enrichir et de s'améliorer, nuls doutes que de nombreux projets vont être créés autour de ce composant qui plait toujours lorsqu'on le présente en fonctionnement.

Gageons que d'ici peu on aura la possibilité de retrouver des projets divers qui offriront cette fonctionnalité au sein des contrôles habituels.

Je vois dès ce soir avec d'autres pour créer 2 projets autour de cette API sur CodePlex.
Le premier projet aura pour but d'utiliser cela comme contrôle d'affichage des cartes comme Virtual Earth ou bien d'autres.
Le second sera orienté développeur puisque ce sera le Seadragon AJAX Helper offrant l'intellisense pour ces éléments.

Il y a quelques mois, je lançais le projet sur la plateforme CodePlex permettant d'obtenir l'intellisense pour l'API Google Maps au sein de Visual Studio 2008.

codeplex header Google Maps Intellisense Helper

Après plusieurs mois, j'ai eu à utiliser à nouveau cette API et j'ai donc mis à jour le projet pour sortir une version contenant l'ensemble des classes de la dernière version de l'API GMap à savoir la version 2.111.
 

Comment obtenir cette aide ?

Tout d'abord, il est nécessaire de récupérer le projet sur CodePlex :
http://www.codeplex.com/GMapJS

En téléchargeant la dernière version release, vous obtenez un fichier nommé : GMAPJSHelper_Release.js qui contient en quelque sorte, la documentation.

Placez ce fichier dans votre projet dans le dossier de votre choix.

Codeplex Sample GMAPJS Intellisense Helper Project VS

Référencez cet élément dans le fichier JavaScript de votre choix comme suit :

codeplex_ref

Vous obtenez alors l'intellisense pour Google Maps :
codeplex_gmapjs 
 

En quoi cela vous aide pendant votre développement ?

L'intellisense est devenue omniprésente dans tous les IDE dignes de ce nom, on a même parfois du mal à s'en passer.

Avec la version 2008 de Visual Studio, il est possible d'obtenir une intellisense dans le code JavaScript et c'est une fonctionnalité qui au quotidien est réellement appréciée.

Le langage JavaScript est case-sensitive, de plus on n'est pas à l'abri de faire une faute d'écriture dans le nom d'une méthode ou autre, l'intellisense aide à ne pas se tromper sur ces points (CTRL + Space aidant).

De plus ce projet en proposant l'intellisense sur l'API Google Maps, fournit une documentation issue du site officiel présentant ainsi les classes de l'API, mais aussi les méthodes associées, les paramètres de ces dernières. Bref, bien plus qu'une simple vérification textuelle, c'est un gain de temps dans vos développement.
 

Remarques et feedbacks

Actuellement, certains bugs doivent encore être présents dans la documentation de même que certaines fonctionnalités de l'API qui doivent être manquantes ou mal documentées mais franchement, la référence en ligne de Google Maps est très loin d'être parfaite.

Ce projet CodePlex est ouvert à tous.

Bref si vous trouvez ça utile dans vos développements, n'hésitez pas à participez et à remonter les éventuels bugs et suggestions à travers CodePlex.
 

 

Remarques (bis)

Oui c'est bel et bien du Google Maps... et alors ? :p
Je me rattraperai dans les prochains jours !

Les webcasts en approche et la communauté quelque peu remuée par cette v6.2, plusieurs informations commencent à filtrer sur le net.

virtual earth_header

A propos des prochaines fonctionnalités et amélioration à prévoir :

  • Les “Static maps” : les cartes statiques comme chez Google, elles assureront encore plus de possibilités pour le mobile
  • L’accès direct aux tiles : Microsoft à ce sujet a toujours été très tolérant, on avait pu le voir avec le projet DeepEarth. Ici il confirme et réponde aux besoins
  • Metadonnées sur les images aériennes
  • Clustering automatique des points d’information : Plus besoin de se tracasser la tête à faire du clustering à la main. La version 6.0 améliorait déjà ce point en disposant les éléments hors-zone courante
  • Possibilités améliorées de calculs d’itinéraire
  • Amélioration du géocodage : toujours plus de contenu et de géocodage basé sur les toits aux USA (rooftop geocoding) permettant un géocodage plus précis et non une interpolation en fonction du numéro de rue.
  • Météo temps réel intégrée dans le mode 3d

Cette liste témoigne d’une grande écoute de la part de l’équipe Virtual Earth et de l’importance de leurs “survey” réguliers.

A cela s’ajoute bien entendu une réelle volonté de support mobile et d’internationalisation du contenu dont j’ai déjà parlé plus tôt. L'apparition d’un Web Service Virtual Earth dédié (1.0) devrait etre aussi de la partie.

Disponibilité :

Une autre précision, cette prochaine version 6.2 de l’API Virtual Earth est prévue pour le 22 Septembre 2008. Oui oui, lundi ;)…
Cette disponibilité est avancée sur le blog de Nate Irwin et par bien d’autres ce qui laisse présager que du bon pour la semaine à venir.

Voilà un peu moins de 6 mois la version 6.1 de l’API Virtual Earth était mis en ligne apportant son lot de nouveautés.

Fidèle à son habitude, l’équipe VE prépare la version suivante et nous annonce la disponibilité dès le 3 octobre 2008.

virtual earth_header

La prochaine version qui sera alors la version 6.2 (eh oui déjà :p) intégrera de nombreuses nouvelles fonctionnalités parmi lesquelles un support mobile plus complet, des données cartographiques internationnalisées (depuis le temps qu’on insiste !) et bien d’autres fonctionnalités qui viendront s’ajouter à l’existant.

Pour le moment, rien ne laisse présager l’apparition d’un contrôle Silverlight pour cette v6.2, et les retours de Chris Pendleton lors de la sortie de DeepEarth n’annonçaient pas de disponibilité prochaine de ce nouvel élément, mais sait-on jamais...
L’intégration plus complète de la technologie Photosynth ne sera certainement pas non plus pour cette version.

L’effort d’intégration de données cartographiques de qualité mérite également d’être souligné. Ces derniers temps Microsoft se paie le luxe de nouer des partenariats permettant de couvrir de plus en plus de région en haute qualité comme le témoigne le récent accord avec l’IGN en France annoncé plus tôt par Arnaud.
Est-ce que cela sera suffisant face aux possibilités nouvelles offertes par GeoEye1 pour Google ? Dans tous les cas cela proposera de nouveaux contenus et certainement de nouvelles formes de contenu.

 

Je ne manquerai pas de reporter des informations sur ce que nous annonce la prochaine version dès que j’aurai des nouvelles.

D’ailleurs pour être tenu au courant, plusieurs conférences et webcasts live seront présentés par les responsables de l’équipe :

Présentation en anglais

Conférence et événement en Français

  • Arnaud Gstach : VE - Business Development Manager EMEA
    Matinée de présentation pour les décideurs, déjeuner et session technique (peut-être la présence de Johannes Kebeck pour la partie technique ?)

    Le Mardi 21 octobre 2008 pour les clients (existants ou prospects)
    Le Mercredi 22 octobre 2008 pour les partenaires
    Lien vers les événements : séminaire client ou séminaire partenaire

 

Bref il y aura de l’actualité pour ce mois d’octobre et un bon nombre de nouveautés à analyser de prêt avec cette v6.2.

Voilà, Microsoft Photosynth vient d'ouvrir ses portes cette nuit et en un mot, c'est une "tuerie" !

Annoncée sur leur blog officiel et surement bientôt relayée comme il se doit par la compagnie, vous pouvez dès aujourd'hui tester cette technologie.

photosynth_header 

Rappel et présentation :

Photosynth est issu de Microsoft Labs et s'appuie sur la technologie SeaDragon permettant un pseudo-streaming intelligent des images pour la peine décomposées en tiles.

image

En clair, il ne s'agit ni plus ni moins qu'un DeepZoom en 3d permettant de naviguer entre différentes photos composant une scène le tout toujours avec cette fluidité particulière et détonante.

Utilisation

Au niveau de l'utilisation, cela s'avère relativement simple, après avoir installé le plugin Photosynth (et autorisé dans IE si besoin est), vous obtenez une simple fenêtre invitant à se connecter avec un compte Live.

 photosynth_main 

Après avoir cliqué sur "Start a new synth", vous pouvez ajouter vos propres photos. Vous pouvez également renseigner des méta-informations concernant votre collection comme le titre, les tags et les informations de droits d'images.

image

Enfin en cliquant sur "Synth", le processus de composition s'exécute et vos images sont uploadées sur un espace qui peut atteindre 20 Go.

Vous obtenez alors un pourcentage "Synthy" permettant d'évaluer la capacité à composer une scène à partir des différentes images, de les positionner, fusionner entres elles.

 photosynth_gallery

Votre collection uploadée peut être envoyée à vos amis (un lien) ou peut être exportée comme une ressource embed sur votre site.

Sur certaines scènes, comme celle sélectionnée ici, un contrôle apparait permettant de contrôler la rotation dans la scène de manière plus précise.

photosynth_torus

Conclusion

Cette technologie et l'utilisation qui pourra en découler va véritablement révolutionner le monde de la photographie online.

L'exploitation d'une base considérable d'image pourra apporter encore bien plus au projet en complétant des existants comme Virtual Earth par exemple.

Alors qu'il y a peu, certains faisaient échos de visites virtuelles de bâtiments en 3d directement au sein de Virtual Earth, on s'aperçoit que la technologie est là et qu'il ne reste plus qu'à lier ces contenus.

C'est bientôt chose faîte puisque l'équipe PhotoSynth vient il y a quelques semaines d'être incorporée à celle de Virtual Earth pour nous réserver toujours plus !

 

L'équipe Microsoft PhotoSynth vient de sortir un produit, une technologie incroyable qui mérite le détour ! (ci-dessous l'équipe)about_teamphoto

Dans tous les cas, je sais ce que je vais m'amuser à faire de mes jours de repos :)

Alors que depuis quelques semaines, on a pu voir le lien vers le site pour son intégration de Virtual Earth et l'utilisation de SQL Server 2008.

Relayé par de nombreux blogs et annonces diverses, aviez-vous remarqué que le site Eye-On-Earth était intégré à un existant SharePoint ?

image

De même que le portail de l'agence environnementale européenne (EEA) à l'origine du site repose sur un SharePoint très largement customisé et qui se détecte à peine.

Un bel exemple de WCM !

image image

La force d'un produit est celle aussi de ne pas être ressentie comme un charge pour l'utilisateur. Ici, à première vue, c'est un pari réussi.

 

Je reviendrai d'ici peu pour de l'information autour de Virtual Earth et SharePoint.

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 :

Un petit billet pour poster quelques pistes de solution pour enfin revoir votre console VPC sur votre écran principal.

vpc_header

En effet dans certains cas, on peut remarquer que la console placée sur un second écran n'était plus accessible ni déplaçable ce qui peut être particulièrement génant (en clientèle/démo par exemple).

L'astuce trouvée sur le net consiste à supprimer le fichier Options.xml situé dans "%appdata%\Roaming\Microsoft\Virtual PC" sauf qu'en faisant ça, l'ensemble de la configuration de VPC est supprimée.

Du coup, j'ai réalisé une petite application console qui réalise la chose en 1 seul clic et qui repositionne votre console dans le coin supérieur gauche de votre écran principal. Il suffit de lancer l'application.

 

Pour montrer patte blanche, je fournis les sources également.
Cela fonctionne sous Vista et sous XP, n'hésitez pas à remonter un quelconque bug et bien entendu, je vous invite dans un premier temps à sauvegarder votre fichier original.

Bien entendu, merci Kim !

0 commentaire(s)
Classé sous : ,

Virtual Earth et Google Maps proposent une utilisation à travers un contrôle HTML auquel s'ajoute des plugins pour gérer le mode 3d. Ces derniers ne cessent d'évoluer mais pour le moment ils restent relativement simples.

virtual earth_header

La prochaine version de Virtual Earth présentée par Chris Pendleton lors du Mix08 intégrera un MapControl totalement en Silverlight avec des possibilités d'intégration de média au sein d'une expérience cartographique innovante.

En attendant, je vous propose d'intégrer les images de ces services cartographiques directement dans Silverlight 2.0 en utilisant la technologie DeepZoom pour améliorer la navigation sur la carte.

La démo est en dessous soit en "live" soit en vidéo.

Tout d'abord, je tiens à préciser que cette présentation est issue de l'excellent d'article de mon collègue CodePlexien, à savoir John O'Brien de Soulsolutions.
Il a pu dès l'apparition de la Beta 2 de Silverlight 2.0, se pencher sur les possibilités d'extension de la classe MulitScaleImage récemment annoncées par Scott Guthrie, ceci dès la sortie.

 

Explication détaillée de la solution de visualisation :

Lors de sa première tentative que j'avais étudié toute une soirée/nuit et adapté (voir suite), la solution utilisait un de nos propres serveurs pour servir de proxy de téléchargement des tiles de Virtual Earth.

Cette solution présentait un réel inconvénient puisque le serveur utilisé téléchargeait véritablement l'image et la renvoyait au client d'où un problème de lenteur et surtout de charge importante (bande passante surtout).

La redirection des tiles s'effectuait en quelque sorte "côté serveur".

Voici ce qui se passait dans cette solution :

 proxy_server

On remarquera que techniquement ce n'est pas une solution optimale et envisageable dans un scénario de forte utilisation.

 

Comme indiqué plus tôt, on peut avec Silverlight 2.0 Beta 2 étendre les possibilités de la classe MultiScaleImage afin de définir où les tiles doivent être téléchargées et ceci du côté client.

Voici un schéma des différentes communications réalisées par la solution de John et expliquée sur son site :

 john_solution

Cette solution est donc le meilleur compromis que l'on puisse trouver pour communiquer avec les serveurs de Virtual Earth pour récupérer les données cartographiques. A termes c'est même cette solution qui sera utilisée sur le MapControl Silverlight officiel.

 

Adaption générique :

Afin d'enrichir cette solution, j'ai tout d'abord choisi de refactoriser le code et ensuite tout en conservant l'idée de pouvoir connecter d'autres systèmes cartographiques.

Ceci est démontré ici en incluant le service Google Maps au sein de DeepZoom.

Voici alors ce qui se passe maintenant au niveau des communications :

 nico_solution

On remarque donc que les possibilités d'extensions de cette classe sont un véritable atout que l'on peut exploiter simplement.

Pour réaliser cela, j'ai modifié la technique de redirection utilisée par John afin de créer plusieurs méthodes générant les différentes url des tiles à utiliser. Cela me permet ainsi de connecter différentes sources de données très simplement.

 

Allons plus loin :

Nous allons réaliser un semblant de MapControl Silverlight pour ces services cartographiques puisqu'il est désormais possible de changer dynamiquement la source de données.

Ainsi ici nous allons proposer un contrôle Silverlight utilisant un élément MultiScaleImage bindé sur différentes sources de données que l'on choisira via programmation. 

Voici en attendant ce que je propose :

 

 Allez-y molo avec Google Maps sinon vous serez rapidement blacklisté pour une période plus ou moins longue. J'espère aussi que la démo sera toujours "live".

Démonstration :

Vous pouvez tout à fait le tester dès à présent à travers ce lien ou dans l'aperçu ci dessus.

Indications :

Si vous observez une erreur sur l'iframe (impossible d'accéder à la page) et sur la page, bien ça veut tout simplement dire que la page n'est plus accessible puisque j'héberge cela sur mon serveur et je n'ai pas forcément une ligne en conséquence.

Il se peut également que le serveur qui héberge les images de basses résolutions tombe (c'est arrivé il y a quelques jours, c'est un truc mutualisé...), je ne pense pas que cela puisse à nouveau arriver, mais cela résulte en général par un mauvais fonctionnement du contrôle voir un crash du plugin.

 

Voici un aperçu vidéo en cas de problème.

Bon sur la vidéo ça saccade un peu, si vous pouvez tester le contrôle vous même, vous verrez que ce n'est pas le cas, c'est "ultra fluide".

 

Limites techniques de la solution :

Comme indiqué, pour le moment nous ne nous disposons pas des fonctionnalités de ces services cartographiques. Il est en effet impossible d'y ajouter des punaises, des polylignes, des polygones.

Bref pour le moment il s'agit surtout d'un Proof of Concept qui exploite les possibilités de Silverlight 2.0 Beta 2 et qui prouve que l'on peut utiliser les services existants tout du moins leurs données.

codeplex_header

L'objectif à termes avec John et bien d'autres personnes motivées, c'est de pouvoir réaliser un MapControl-like en Silverlight 2.0 pour y ajouter des fonctionnalités existant sur le véritable contrôle. Nous irons bien plus loin que les fonctionnalités de base. 
John va très prochainement rendre disponible le projet CodePlex auquel je participerai pour apprendre et découvrir toujours plus.

Je défenderai également des idées que je souhaite intégrer/retrouver dans un tel contrôle notamment en termes d'internationalisation.

Si vous êtes intéressé, contactez-moi via les commentaires ou par contact.
Je communiquerai sur le projet dès qu'il sera accessible par tous et que l'on aura une première version disponible.

 

Limite d'utilisation :

Une autre limite importante concerne l'aspect "légal" de l'utilisation. En effet, si Microsoft tolère et prévoit même une solution pour utiliser les tiles depuis d'autres éléments que le MapControl de base (2d et 3d), Google lui ne prévoit pas cette alternative.

Il est d'ailleurs très important d'y aller molo avec le MapControl ici présenté puisque le téléchargement de tiles se fait de manière inhabituel et est détecté comme une tentative de téléchargement illicite par les serveurs de Google, d'où possible blacklisting (il faut alors entrer le texte d'un captcha...).

D'autant plus que les requêtes HTTP effectuées ne ressemblent pas du tout à des requêtes d'un navigateur (à ce propos si quelqu'un à une piste pour modifier le header du GET des tiles).

C'est alors que je me suis dis "pas grave je vais exploiter les tiles comme ils le font dans leur tout nouveau plugin 3d"... Et là je découvre que les échanges se font directement en brut. Pas de téléchargement de tiles de manière simple à en croire ce que j'ai rapidement étudié. J'y reviendrai d'ici quelques semaines.

 

Projet d'exemple :

Vous pourrez très prochainement télécharger le projet utilisé pour la démonstration ainsi que le projet CodePlex que nous allons réaliser.

N'hésitez pas à communiquer vos impressions sur le contrôle ou à remonter des bugs.
Oh, bien entendu le design de l'UI sera améliorée :), je ne suis pas designer, tout du moins je ne voulais pas en réaliser une très compliquée ici.

sl2_header

Conclusion :

Les possibilités de Silverlight 2.0, mais ce n'est pas une surprise, sont vraiment impressionnantes. L'accent mis sur le fait que ce soit simple à aborder pour un développeur .Net n'est clairement pas une utopie.
Je serai incapable de faire cela en Flash, je le réalise et l'optimise en .Net en langage C#, bref une véritable capitalisation de mes compétences.

Les possibilités étendues de DeepZoom permettent ce genre de réalisation, mais il est tout à fait possible de pousser la chose encore plus loin, je manquerai pas d'appronfondir le sujet avec de la génération dynamique de tiles au sein du contrôle Silverlight et même un miniprojet autour de ça.

Je vais avant la fin de la semaine tenter de créer un truc sympathique avec d'autres collections d'images, bref on verra en fonction du temps disponible.

Ce sera très prochainement, pour le moment je file étudier d'autres technologies et corriger mes erreurs/oublis.

UPDATE :

La projet CodePlex vient d'être mis en ligne :
http://www.codeplex.com/deepearth/

Nous sommes 7 personnes du monde entier à travailler sur le projet :
Shaun Becker, Jonas Follesø, Bronwen Zande, Darko Radiceski, Rob Farley, John O’Brien et moi-même.

Retour à des articles techniques, il était temps.
Afin de continuer la série sur les nouveautés de l'API Virtual Earth, j'ai choisi ici de présenter les possibilités d'import depuis des fichiers statiques.

virtual earth_header

En effet, à travers la version 6 de Virtual Earth, et maintenant la 6.1, il est possible d'importer de multiples formats de fichier XML.
Parmi ceux-ci figurent notamment les flux GeoRSS de même que le format KML récemment approuvé comme standard et enfin le format d'échange standard des GPS à savoir, le format GPX.

Ces possibilités d'import simples figurent parmi une multitude de scénario d'import qui peuvent être présentés à travers ce schéma :
ve_import

Ici nous allons aborder l'import depuis un flux GeoRSS afin de se familiariser avec les classes et méthodes mises en oeuvre. Les autres possibilités seront expliquées par la suite.

Import GeoRSS :

Présentation de l'exemple
Tout d'abord, présentons l'architecture de test que vous pourrez reproduire pour intégrer Virtual Earth dans un site internet :
ve_import_project
Ici : script_ve_page.js correspond au fichier JavaScript de la page en cours, shapefeed.xml est le fichier GeoRss, ve_page.html est la page statique qui sera affichée et ve_page.css son fichier de style. Le dossier images contient les images de la page.

Comme on peut le voir, la mise en oeuvre de cette fonctionnalité peut s'effectuer au sein d'une page HTML statique associée à quelques lignes de JavaScript.

Fichier XML - GeoRSS 

Voici un extrait du fichier XML qui sera importé :
<?
xmlversion="1.0" encoding="utf-8"?>
<
feedxmlns="http://www.w3.org/2005/Atom"
      xmlns:georss="http://www.georss.org/georss">
    <
title>Entreprises</title>

    <
subtitle>Entreprises de ma courte exprience</subtitle>
    <
linkhref="http://blogs.developpeur.org/nicoboo/Default.aspx"/>
    <
updated>2008-01-30T21:30:02Z</updated>
    <
author>
        <
name>Nicolas</name>
        <
email>mymail@mydomain.com</email>
    </
author>
   
<entry>
        <
title>Wygwam</title>

        <
linkhref="http://www.wygwam.com">http://www.wygwam.com</link>
        <
updated>2008-01-30T21:30:02Z</updated>
        <
summary>Expertise Technologique</summary>

        <
georss:point>50.644096 3.13785</georss:point>
    </
entry>
</
feed>

Code HTML

La mise en place de la carte Virtual Earth dans une page HTML s'effectue très simplement, il suffit d'ajouter une DIV identifiée qui accueillera le MapControl de Virtual Earth, lequel sera chargé au traitement JavaScript souhaité (dans notre cas l'événement onload) :

<body onload="GetMap()">
<div id='myMap' style="width: 568px; height: 398px;"> </div>
</body>

Code JavaScript

Nous allons maintenant étudier le code JavaScript, je ne manquerai pas de faire une piqure de rappel des classes utiles, voici donc la méthode GetMap() appelée sur l'événement onload de la page :

function GetMap()
{
  //Instanciate the MapControl
  map = new VEMap('myMap');
 
  //Set the onload event
  map.onLoadMap = onMapLoaded; 
  
  //Load the map
  map.LoadMap(new VELatLong(latitude,longitude), 
              mapZoom, mapStyle, mapFixed, mapMode, mapDashboard);
  
  //Set infos and properties 
  map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
     
  //Events
  map.AttachEvent("onobliqueenter", showBirdMode);
  map.AttachEvent("onobliqueleave", hideBirdMode);
}

Ainsi qu'est il important de noter pour cet exemple d'import, tout d'abord on remarque que l'on associe la méthode onMapLoaded() à l'événement onLoadMap du MapControl. C'est à travers cette méthode que l'on va effectuer l'import effectif de données.

Voici le code associé de la méthode onMapLoaded :

function onMapLoaded()
{
    //Adding the geoRss informations
    var layer = new VEShapeLayer();    
    var veLayerSpec = 
       new VEShapeSourceSpecification(VEDataType.GeoRSS, feedPath, layer);  
    map.ImportShapeLayerData(veLayerSpec, onGeoRSSFeedLoad, true);
}

Tout d'abord il est nécessaire de créer un élément de type VEShapeLayer qui accueillera les informations importées. Ce type d'objet permet de regrouper logiquement des éléments du MapControl et également de régler certaines propriétés sur ce regroupement (visibilité, titre et description...).

Il faut ensuite donner des informations sur l'import de données, ce qui est fait en créant un objet de type VEShapeSourceSpecification. Le constructeur prend plusieurs paramètres :

  • dataType = valeur de l'énumération VEDataType :
    • GeoRSS, VECollection, ImportXML
  • dataSource = chaîne indiquant le chemin vers le fichier XML à importer
    • Attention dans certains cas (KML), ce chemin doit être accessible depuis l'extérieur (depuis un service tiers)
    • Dans le cas de l'import d'une Live Collection, ce paramètre correspond à l'identifiant (nous y reviendrons dans un prochain post)
  • layer = objet de type VEShapeLayer dans lequel s'effectuera l'import
    • Mettre à null pour ajouter les éléments au layer de base

L'objet de type VEShapeSourceSpecification étant créé, on peut maintenant faire appelle à la méthode ImportShapeLayerData() de la classe VEMap.
Cette méthode prend à son tour quelques paramètres :

  • shapeSource = objet de type VEShapeSourceSpecification précédemment créé et correctement initialisé.
  • callback = méthode qui sera déclenchée une fois l'import réalisé
    • Mettre la valeur null pour ne rien déclencher
  • setBestView = booléen indiquant si l'on souhaite modifier la vue courante afin d'afficher l'ensemble des données importées
    • Ce paramètre est à false par défaut

L'import peut être effectué automatiquement. Ici j'ai choisi de spécifier une méthode de callback qui sera déclenchée au moment de l'import.

Cette méthode permet notamment de récupérer une référence vers les objets importés et éventuellement d'afficher un message ou customiser les informations après chargement.

function onGeoRSSFeedLoad(feed)
{
    document.getElementById("ve_info").innerHTML = "Flux GeoRSS charge - ";
    document.getElementById("ve_info").innerHTML += feed.GetShapeCount(); 
    document.getElementById("ve_info").innerHTML += " elements ajoutes";
    document.getElementById("ve_info").style.visibility = "visible";
}

Dans mon cas, cette méthode permet simplement de modifier le contenu d'une DIV insérée pour informations. On remarque surtout que cette méthode peut récupérer les informations sur les données importées à travers ses paramètres.

Démonstration

Vous pouvez tester et observer cet exemple en fonctionnement par ici.

Conclusion

Comme on peut le voir à travers ce cours exemple, l'import de fichier XML standard est relativement simple. Dans ce cas présent, il s'agit d'un fichier XML GeoRSS déposé sur un serveur web, il est cependant tout à fait possible de générer le fichier XML à la demande et d'ainsi se simplifier l'import des données.

Nous verrons d'autres possibilités d'import de données par la suite.

Un peu de fun pour se détendre et étendre sa culture geek :)

fun_bsg_xpIl y a peu, je voyais une news passée sur Digg qui soulignait un détail lors d'un épisode de Battlestar Galactica où on pouvait voir l'utilisation de ce qui semble être Windows XP dans l'un des vaisseaux mères des Cylons (robots super évolués et ennemis dans la série) : 
 
Source :  http://gizmodo.com/393426/cylons-baseships-run-windows-xp

Aussi quelques mois plus tôt, Aurélien me faisait remarquer que dans l'un des premiers épisodes de Stargate on pouvait apercevoir du code JavaScript pour dialoguer avec la porte et du coup j'ai fais quelques recherches sur le net afin de trouver une paire de ces perles et retrouver celles qui étaient déjà parues.

Le JavaScript comme langage surpuissant :
Dans Stargate comme le soulignait Aurélien, mais ici dans le dernier film sorti en DVD (Stargate - The Ark of Truth), le code des réplicateurs :

fun_sg_js  
Source : http://thedailywtf.com/Articles/Stargate-Code-of-the-Replicators.aspx 

Mais il est également présent dans le dernier film Hitman : 
fun_hm_js

Bien sûr les films n'oublient pas non plus les autres langages, pour les inconditionnels :

Ici un peu de ce qui semble être du C++ tiré une nouvelle fois de Stargate (Episode 9 saison 7 - "Avenger 2.0") : 
fun_sg_cpp

Du Visual Basic dans la série "The Sarah Connor Chronicles" tournant autour de l'univers de Terminator (pour les curieux cela se situe entre le 2e et le 3e film).
Même l'ordinateur à l'origine de Skynet du film semblerait faire tourner du VB.
fun_scc_vb 

 Et vous ? Vous avez comme ça remarquer une paire de films dans lesquels vous avez prêtez éventuellement attention à du code ou à des OS en particulier ?

Oh je suis sûr que les films de pseudo hackers (Opération Espadon & Cie...) nous en auraient révélé de bien bonnes.

UPDATE :

Dans une autre catégorie, et Matou me l'indique dans les commentaires, on retrouve également l'utilisation de l'outil de scan Nmap dans plusieurs films.

Matrix Reloaded :
fun_nmap_matrix 

Die Hard 4 :
fun_nmap_dh4

La liste complète parmi lesquels figure The Bourne Ultimatum (La vengeance dans la peau) est disponible ici : http://nmap.org/movies.html

J'en profite à nouveau pour poster un lien qui regroupe les apparitions de matériels informatiques dans les films : http://www.starringthecomputer.com/

Avec l'événement Google IO pour les développeurs qui a eu lieu récemment à San Francisco, je profite des sessions orientées géolocalisation autour du service Google Maps. image

Lors d'une récente démonstration de leur prochain système d'exploitation pour téléphone portables (PDA) nommé Android, vous aurez peut être remarqué les applications innovantes autour des thèmes de la cartographie à la limite de la réalité virtuelle.


imageEntre ce genre d'application et celles issues du grand concours Android Developer, des projets tel le projet Eye-phone que je trouve génial, et bien d'autres innovations utiles : la mobilité prend vraiment une autre dimension.


Si vous les avez manqué, voici les vidéos des démonstrations :

La première utilisant Google Streetview et une toute autre façon d'utiliser cette fonctionnalité à travers le téléphone :

La seconde démontre l'utilisation de Google Maps en plein écran :

 

Je suis, comme beaucoup surement, très curieux de voir quelles seront les évolutions sur ces technologies et voir l'utilisation qu'on pourra en faire. Surtout du point de vue développeur...


... Bon, j'arrête de poster des choses non-techniques :p

L'intégration d'un mode 3d dans les services de cartographie en ligne est une vraie problématique surtout lorsqu'on regarde parmi ces derniers, lesquels offrent cette possibilité.

Tandis que Virtual Earth propose la 3d au sein du navigateur depuis la version 5 nommée "Spaceland" pour l'occasion, Google vient d'annoncer la prochaine disponibilité d'un plugin permettant d'obtenir un semblant de Google Earth dans les navigateurs suivants sous Windows uniquement : Firefox 2.x (et dérivés), IE6 et IE7. Il fonctionne également avec IE8 de manière partielle.

Retrouvez toutes les informations à travers dans la zone dédiée à l'API à travers ce lien.gmap_3d 

Aspect technique :

Ce plugin n'a de Google Earth que le nom puisque l'application Google Earth va bien au delà des possibilités proposées ici.

La navigation est sympathique et fluide mais il manque encore clairement une réflexion autour de l'utilisabilité ne serait-ce que le binding des touches du clavier qui par défaut reste sur la configuration américaine (ZQSD pour se déplacer).


On ne peut pas changer le mode ou style de carte via un simple bouton sur l'interface dans cet exemple de base et comme il n'y pas de binding sur la clavier pour changer de style de carte, on reste en style satellite.
On pourra bien entendu le gérer puisque il s'agit de l'API Google Maps, vous pouvez même développer avec l'intellisense JavaScript dédiée depuis peu. Mais on aurait apprécié que ce soit fait directement.

Cela étant, ceci reste très simple à utiliser puisqu'il ne s'agit ni plus ni moins d'un type de nouveau type de carte ainsi dans votre méthode d'initialisation vous ajoutez :

map.addMapType(G_SATELLITE_3D_MAP);

Et vous obtenez une nouvelle option "Earth" dans le menu de sélection des styles/types de carte en mode 2d. 
 gmap_3d_integration

 gmap_3d_hybrid

Bienvenue chez nous zotes, les ch'tis 

Avis et à propos de contenu :

Bien entendu, cela est à prendre avec des pincettes car Google comme à son habitude fera très rapidement évoluer ce produit (pas toujours de manière cohérente, mais les goûts et les couleurs... sont souvent aux détriments du développeur :p).

gmap_3d_sanfrancisco 
Vous reconnaitrez ici la ville de San Francisco 

Voilà donc de quoi proposer désormais un mode 3d pour l'API Google Maps, pas de contenu 3d pour le moment en France, encore moins de vues obliques pour les habitués de Virtual Earth.
La gestion de l'éclairage (orientation vis à vis du soleil) est quelque chose d'intéressant dans certains cas !

Du contenu 3d sera forcément disponible, rassurez vous, on peut déjà en voir un aperçu à travers cette vidéo :

N'hésitez pas à tester les exemples développés pour l'occasion (le GeoWhiz est très sympathique) et regroupés sur cette page.

Quelques petites astuces :

CTRL + Drag = changement de l'orientation du point de vue
ZQSD = Pan sur la carte

Conclusion :

Je ne manquerai pas de tester cette nouvelle fonctionnalité dès que possible et surtout en y ajoutant du contenu pour voir comment le plugin 3d se comporte lorsqu'on l'utilise "vraiment".

Même si l'API reste pour moi un énorme ensemble qui manque de cohérence pour le développeur, comparé à la concurrence, mais c'est justement cette dernière qui fait bouger les choses et sur ce coup, on ne peut que s'en réjouir !

Maintenant il faut aussi être conscient que l'installation d'un plugin, la consommation en ressources de ce dernier et les besoins machines associés réduiront l'intérêt d'une telle fonctionnalité, mais elle a au moins le mérite d'être présente aujourd'hui pour Google Maps.

0 commentaire(s)
Classé sous :

Ayant participé au projet VEJS : Virtual Earth JavaScript Helper, permettant d'obtenir une intellisense pratique et fonctionnelle pour l'API Virtual Earth au sein de Visual Studio 2008, j'avais commencé à faire la même chose pour l'API Google Maps il y a plusieurs semaines.

codeplex_header

Alors que j'avais laissé le projet en attente, je vois que Roger Chapman, met à disposition une première version de cela, codé par ses soins mais ne comportant qu'une partie de l'API Google Maps.

J'ai donc décidé de mettre en ligne le travail que j'avais commencé et de créer un projet CodePlex ce qui permettra de s'organiser au mieux et de se partager la charge.
J'ai naturellement invité Roger à participer à ce projet en tant que coordinateur et nous pourrons alors combiner nos efforts.

codeplex_gmapjs

Ca se passe sur le site du projet Google Maps JavaScript Helper aussi appelé GMapJS, pour les personnes qui souhaiteraient participer ou simplement exploiter le projet dans son état. Les détails pour obtenir l'intellisense sont disposées sur la page de description.

N'hésitez pas à me tenir au courant de vos attentes et toute forme d'aide sera appréciée, la version définitive arrivera dès que l'ensemble des classes seront traitées et elle sera maintenue au fil des versions de l'API.

 

... Et dire qu'il y en a encore qui croient que je m'arrête ou me bloque lorsque je lis le nom devant l'API :)... bon ok, c'est pas toujours faux :p

Depuis la version 6.0 de l'API Virtual Earth et aujourd'hui la 6.1, l'ensemble des méthodes ont été optimisées afin de garantir des performances élevées.

virtual earth_header

C'est le cas de la méthode d'ajout d'élément sur la carte, ces élements peuvent être des punaises, des polylignes (polylines) ou des polygones (polygons).

Il est en effet possible maintenant d'ajouter de nombreux points très rapidement en passant tout simplement un tableau de points à la méthode d'ajout. L'initialisation de ce tableau est bien plus rapide que l'ajout successif dans le DOM de chacun des points.

Méthode classique d'ajout :

function addPins() 
{
  var Now = new Date();      // Grab the current date.
  Start = Now.getTime();
  var latLong = map.GetCenter();
             
  for(var i = 0; i < limitPin; i++) 
  {
    var shape = new VEShape(VEShapeType.Pushpin, latLong);
    shape.SetTitle("Titre de la punaise " + i);
    shape.SetDescription("Description de la punaise " + i);
    map.AddShape(shape);
  }
  alert("total time = " + elapsedmilliseconds() + "milliseconds");
}

Le passage mis en gras est celui le plus intéressant dans le cas présent.
On créé un objet de type VEShape en initialisant quelques une des propriétés dans le constructeur puis à l'aide des appels qui suivent aux méthodes SetTitle() et SetDescription() de cette même classe.
On ajoute cet objet au MapControl en utilisant la méthode AddShape() de la classe VEMap.

L'ensemble de ce traitement est effectué dans une boucle un nombre de fois défini plus tôt. Les autres lignes concernent une méthode simple de mesure du temps.

 

Méthode d'ajout en masse : Bulk Addition

function addBulkPins() 
{
  var Now = new Date();      // Grab the current date.
  Start = Now.getTime();
  var latLong = map.GetCenter();        
             
  var shapes = new Array();
             
  for(var i = 0; i < limitPin; i++) 
  {
    shapes[i ] = new VEShape(VEShapeType.Pushpin, latLong);
    shapes[i ].SetTitle("Titre de la punaise " + i);
    shapes[i ].SetDescription("Description de la punaise " + i);                 
  }
  map.AddShape(shapes);   //Bulk addition
             
  alert("total time = " + elapsedmilliseconds() + "milliseconds");
}

Comme précédemment, le passage en gras est celui qui nous intéresse.
Ici après avoir créé un tableau qui accueillera nos points, on ajoute un objet de type VEShape puis on initialise ses propriétés comme vu au dessus.

La différence survient au moment de l'ajout, ce dernier s'effectue en dehors de la boucle et la méthode AddShape() de la classe VEMap prend cette fois le tableau d'objet de type VEShape en paramètre.

 

Quels sont les gains ?

Ici, sans avoir optimisé au plus fin le code JavaScript de manipulation du tableau (j'entend par là que la manipulation du tableau pourrait certainement être amélioré), on obtient déjà un gain important que ce soit sur des quantités faibles ou importantes de données.

Voici un tableau de temps relevant cela :

Navigateur - Meth. 100 punaises 1000 punaises 5000 punaises
IE8 - Classique 510 ms 6600 ms 60300 ms
IE8 - Bulk 160 ms 1900 ms 8400 ms
FF2 - Classique 350 ms 6800 ms * Crash *
FF2 - Bulk 130 ms 1700 ms 14500 ms

Ici les temps sont données qu'à titre purement indicatif, ils peuvent variés selon les configuration. IE8 était en mode "Emulation IE7".
J'avais réalisé le test sur IE7 il y a quelques semaines, et on peut également voir qu'IE8 améliore largement les performances.

 

Conclusion :

Enfin, on remarque que quelque soit la quantité de données ajoutées, l'ajout est bien plus rapide et donc cette fonctionnalité d'ajout de masse ou Bulk Addition est très efficace.

Cette méthode ne semble, par contre, pas être disponible sur la classe VEShapeLayer, il n'est donc pas possible d'ajouter les éléments au layer en passant en paramètre un tableau d'objet de type VEShape. L'information sera remontée dès que possible à l'équipe VE.


Restons cependant prudent avec ces ajouts, il est déconseillé de dépasser 500 éléments sur le MapControl afin de garantir un fonctionnement optimal et c'est une recommandation que je