image

Après un premier tutoriel sur la consommation de données OData avec Windows Phone 7/Mango, ce second tutoriel vous apprendra à consommer des données OData cette fois avec la bibliothèque JavaScript Open Source jQuery.

L’interaction de cette bibliothèque avec la technologie AJAX (Asynchronous Javascript and XML) la rend particulièrement pertinente pour consommer un service OData de façon asynchrone et donc, à la clé, avec une meilleure expérience utilisateur.

Ce tutoriel se montre le plus accessible possible, néanmoins si vous voulez parfaire votre connaissance de jQuery, nous vous invitons à consulter le site Microsoft Web Camps qui propose des formations sur les technologies Web, et notamment dans notre contexte jQuery : http://trainingkit.webcamps.ms/JQuery.htm.

Présentation de l’application

Tout d’abord présentons les données que nous allons consommer. La ville de Bordeaux (plus exactement la communauté urbaine de Bordeaux, la CUB) a mis en ligne un portail Open Data à partir duquel on peut télécharger des ensembles de données très diverses et dans des formats très variés. Malheureusement, il n’y a aucune API permettant de consommer directement ces données.

Pour remédier à cette situation, nous avons donc hébergé un jeu de données sur l’instance de test OGDI (Open Government Data Inititiave) mise à disposition par Microsoft France dans le Cloud Windows Azure : http://ogdifrance.cloudapp.net/DataBrowser/frOpenData/CUBEquipementsPublics.

Cet ensemble de données contient la liste des équipements publics de la ville, tous géo-localisés. Nous allons donc nous servir de ce jeu de données très riche pour réaliser une application simple qui répond à un besoin simple mais pourtant non-résolu, à savoir: afficher sur une carte la liste des établissements scolaires de la ville de Bordeaux et permettre d’effectuer une recherche sur ces établissements.

image

Nous allons donc réaliser cette application à l’aide de jQuery pour consommer les données ainsi que le kit de développement logiciel (SDK) Contrôle AJAX 7.0 de Bing Cartes pour la technologie de cartographie.

Création de la page et importation des bibliothèques

Nous allons réaliser cette application à l’aide d’une simple page Index.html, la base consiste donc à créer cette page avec le balisage suivant : (notez au passage la simplification du balisage grâce à HTML5.)

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <header>Etablissements scolaires de Bordeaux</header>

</body>

</html>

Maintenant que la base de la page est créée, il convient d’importer les bibliothèques jQuery et Bing Cartes AJAX depuis le réseau de diffusion de contenu (Content Delivery Network) de Microsoft. Pour cela, rajoutez les lignes suivantes dans votre balise « head » :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title></title>

  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"

          type="text/javascript"></script>

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"

          type="text/javascript"></script>

</head>

<body>

  <header>Etablissements scolaires de Bordeaux</header>

</body>

</html>

Intégration de la carte Bing Cartes

Nous allons maintenant afficher la carte Bing Cartes. Pour cela, il va nous falloir une balise « div » en HTML qui va contenir la carte, ainsi qu’un peu de code JavaScript qui va l’initialiser.

On va donc commencer par rajouter la balise « div » dans notre code HTML :

<body>

  <header>Etablissements scolaires de Bordeaux</header>

  <div id='myMap' style='position: relative; width: 800px; height: 800px;'></div>

</body>

Il ne reste plus qu’à écrire un peu de code JavaScript (enfin du code !) qui va initialiser la carte :

<head>

  <title></title>

  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"

          type="text/javascript"></script>

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"

          type="text/javascript"></script>

  <script type="text/javascript">

    var MM = Microsoft.Maps;

    var map = null;

    var pushpins = new Array();

 

    $(document).ready(initializeMap);

       

    //Initialisation de la carte

    function initializeMap() {

      map = new MM.Map(document.getElementById("myMap"), {

        credentials: "AjBJEt9YbgQMUfUcSgKVHt4OO-nfzOyMZs6MeLOJ636QF6kdUN7XUuj-tvM_evEi",

        center: new MM.Location(44.8366346955299, -0.581039562821388),

        mapTypeId: MM.MapTypeId.auto,

        zoom: 13

        });

    }

  </script>

</head>

A noter que vous aurez besoin d’une clé pour l’utilisation de l’API Bing Cartes. Pour obtenir cette clé, il faut vous créer un compte sur le portail http://www.bingmapsportal.com. Une fois votre compte créé, vous pourrez obtenir jusqu’à 5 clés pour développer vos applications. L’obtention de ces clés est bien évidemment gratuite. Nous avons décrit la procédure à suivre de l’obtention des clés dans le premier tutoriel. Vous pouvez vous y référer si besoin. La clé Bing Cartes est à préciser dans l’argument credentials du code précédent.

Consommation du service OData

Maintenant que la carte est en place, il nous faut consommer les données exposées par le service OData de l’instance de test OGDI France puis afficher sur la carte une punaise pour chaque établissement téléchargé.

Vous noterez que, pour des raisons de sécurité, lorsque l’on souhaite consommer depuis un script des données JSON (JavaScript Object Notation) provenant d’un autre domaine que le domaine d’origine de la page contenant le script, on utilise la technique du JSONP (JSON with Padding) qui permet de préciser dans l’URL d’accès aux données un paramètre contenant le nom de la fonction qui sera appelée par OGDI au retour des données :

<script type="text/javascript">

  var MM = Microsoft.Maps;

  var map = null;

  var pushpins = new Array();

 

  $(document).ready(initializeMap);

       

  //Initialisation de la carte

  function initializeMap() {

    map = new MM.Map(document.getElementById("myMap"), {

      credentials: "AjBJEt9YbgQMUfUcSgKVHt4OO-nfzOyMZs6MeLOJ636QF6kdUN7XUuj-tvM_evEi",

      center: new MM.Location(44.8366346955299, -0.581039562821388),

      mapTypeId: MM.MapTypeId.auto,

      zoom: 13

    });

  }

       

  //Filtrage des données pour ne contenir que les établisements scolaires

  //(themeid = 'A') de la ville de Bordeaux.

           $(document).ready(readOgdiData("http://ogdifrancedataservice.cloudapp.net/v1/frOpenData/CUBEquipementsPublics/?$filter=themeid eq 'A' and commune eq 'BORDEAUX'&format=json"));

       

  //Lecture du flux de données JSONP exposé par OData.

  //Le paramètre callback contient le nom de la méthode JavaScript

  //qui sera appelée par OGDI au retour des données.

  function readOgdiData(requestUrl) {

    $.ajax({ dataType: "jsonp",

             url: requestUrl + "&$callback=odataCallback",

             success: odataCallback

          });

  }

 

  //Fonction appelée à la réception des données d'OGDI

  //Pour chaque établissement scolaire dans le flux de données,

  //on appelle la fonction 'initializePushpin' qui va se charger

  //d'afficher une punaise sur la carte Bing Maps.

  function odataCallback(data) {

    MM.Pushpin.prototype.name = null;

    MM.Pushpin.prototype.type = null;

    $.each(data.d, initializePushpin);

  }

 

  //Ajout d'une punaise à la carte

  function initializePushpin(i, establishment) {

    var pushpin = new MM.Pushpin(new MM.Location(establishment.latitude,

             establishment.longitude),

             {

                 //icon: 'Icons/pushpin.png',

                 //height: 30,

                 //width: 30

             });

    pushpin.name = establishment.nom;

    pushpin.type = establishment.sstheme;

    //pushpinClick = MM.Events.addHandler(pushpin, 'click', displayInfoBox);

    map.entities.push(pushpin);

    pushpins.push(pushpin);

  }  

</script>

Comme vous pouvez le voir, certaines lignes sont commentées dans la fonction initializePushpin, nous supprimerons les commentaires de ces lignes plus tard quand nous rajouterons la fonctionnalité qui affichera une fenêtre en pop-up dès que l’on cliquera sur une punaise pour obtenir plus d’informations, c’est-à-dire dans la seconde partie de ce tutoriel.