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.