Tutoriel : Consommer le service de données OGDI avec jQuery – 2nde partie

Article
08/12/2011

Dans la première partie de ce tutoriel, nous avons présenté l’application à réaliser ensemble et les données à consommer, en l’occurrence la liste des équipements publics de la ville de Bordeaux. Nous sommes ensuite intéressés à la création de la page HTML5, à l’importation des bibliothèques jQuery et Bing Cartes AJAX, à l’intégration de la carte Bing Cartes de la Communauté Urbaine de Bordeaux (CUB), et enfin à la consommation du service de données OGDI (Open Governement Data Initiative) qui expose les données souhaitées sous un format directement utilisable et interrogeable.

Il convient de compléter ce socle en ajoutant deux fonctions complémentaires, à savoir l’affichage d’informations additionnelles lors d’un clic sur une punaise et une fonction de recherche pour pouvoir filtrer les données affichées sur la carte.

Affichage d’un pop-up lors du clic sur une punaise

Comme évoqué ci-dessus, nous désirons implémenter, à présent, une fonctionnalité qui permet lors du clic sur une punaise, d’obtenir plus d’informations sur l’établissement en questions.

Pour cela, l’astuce est de rajouter une balise « div » qui sera cachée dans le code html de notre page, puis, lors du clic sur une punaise (Cf. le code commenté dans la première partie), appeler une fonction qui va se charger de rendre cette balise « div» visible puis d’afficher les informations relatives à la punaise cliquée dans les éléments de cette balise « div ».

Il convient tout d’abord de rajouter le code html suivant dans notre page :

<body>

<header>Etablissements scolaires de Bordeaux</header>

<div id='infoBox' style='visibility: hidden; position: absolute; top: 0px;

left: 0px; max-width: 500px; z-index: 10000; font-family: Verdana;

font-size: 12px">

<table style='height : 50px; width: 510px; border: medium solid Orange;

position: absolute; background-color: White">

<tr>

<td>

</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<a id='bingSearch' target='_blank'>Plus d'informations</a>

</td>

</tr>

</table>

</div>

</body>

Ensuite il faut décommenter la ligne « //pushpinClick = MM.Events.addHandler(pushpin, 'click', displayInfoBox); » de la fonction initializePushpin précédemment créée, puis rajouter les fonctions JavaScript suivantes :

//Affichage de la boite de dialogue

function displayInfoBox(e) {

if (e.targetType = "pushpin") {

var pix = map.tryLocationToPixel(e.target.getLocation(),

MM.PixelReference.control);

var infoTitle = document.getElementById('infoTitle');

infoTitle.innerHTML = e.target.name;

var infoDescription = document.getElementById('infoDescription');

infoDescription.innerHTML = e.target.type;

var infoDescription = document.getElementById('infoDescription');

infoDescription.innerHTML = e.target.type;

var bingSearch = document.getElementById('bingSearch');

bingSearch.href = 'https://www.bing.com/search?q=' + e.target.name + ' Bordeaux';

var infobox = document.getElementById('infoBox');

infobox.style.top = (pix.y - 60) + "px";

infoBox.style.left = (pix.x + 20) + "px";

infoBox.style.visibility = "visible";

document.getElementById('myMap').appendChild(infoBox);

}

//Fermeture de la boite de dialogue

function closeInfoBox() {

var infoBox = document.getElementById('infoBox');

infoBox.style.visibility = 'hidden';

}

Si vous avez une croix qui s’affiche à la place du bouton close, c’est normal ! En effet, à ce stade, vous n’avez encore les images référencées. Ces images sont bien sûr fournies avec le code source de la page en téléchargement.

Fonction de recherche

Enfin, pour compléter notre application, on désire implémenter une dernière fonctionnalité, en l’occurrence celle de pouvoir filtrer les données affichées sur la carte.

Pour cela on va tout simplement rajouter un champ input dans notre page html qui va servir de filtre. Par exemple, si dans ce filtre on rentre la chaine « coll » ou « collège », il n’y aura plus que les collèges de Bordeaux qui seront affichés sur la carte. Il faut donc implémenter une fonction en JavaScript qui sera appelée à chaque fois qu’une lettre sera rentrée dans ce champ input.

Commençons par rajouter dans notre code html ce champ input (à noter que l’on rajoute une image qui ne sera pas affichée pour le moment) :

<body>

<header>Etablissements scolaires de Bordeaux</header>

</div>

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

<div id='infoBox' style='visibility: hidden; position: absolute; top: 0px;

left: 0px; max-width: 500px; z-index: 10000; font-family: Verdana;

font-size: 12px">

<table style='height : 50px; width: 510px; border: medium solid Orange;

position: absolute; background-color: White">

<tr>

<td>

</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<a id='bingSearch' target='_blank'>Plus d'informations</a>

</td>

</tr>

</table>

</div>

</body>

Ensuite, il ne nous reste plus qu’à rajouter la fonction JavaScript qui permettra de filtrer les punaises affichées :

// Fonction de recherche: à chaque touche tappée, on ne rend visibles

//que les punaises dont le nom ou le type contiennent le contenu de

//la textbox 'rechercheInput'

$(document).ready(function () {

$('#rechercheInput').keyup(function () {

pushpins.forEach(function (pushpin) {

if (pushpin.name.toLowerCase().indexOf($('#rechercheInput').val().toLowerCase()) == -1

&& pushpin.type.toLowerCase().indexOf($('#rechercheInput').val().toLowerCase()) == -1) {

pushpin.setOptions({ visible: false });

}

else {

pushpin.setOptions({ visible: true });

}

});

En guise de conclusion

Voilà, ce second tutoriel est maintenant terminé. Vous avez vu comment consommer des données exposées par le service OData d’une instance OGDI avec la bibliothèque jQuery.

jQuery est une initiative open source très populaire soutenue par Microsoft qui s’implique beaucoup dans le développement de l’écosystème autour de cette bibliothèque en proposant de nombreuses contributions et plugins qui sont ensuite intégrés dans le « jQuery Core », c’est-à-dire le cœur de la bibliothèque.

Nous vous invitons à consulter les sites de jQuery et jQuery UI pour obtenir plus d’informations, de documentation et de tutoriaux sur cette bibliothèque.

Nous avons ensuite utilisé la version AJAX du SDK de Bing Cartes. Vous donc pu voir une introduction sur les possibilités offertes par ce moteur de cartographie. Si vous désirez capitaliser sur cette technologie, nous vous invite à consulter la documentation MSDN dédiée à Bing Cartes AJAX ainsi que le site SDK interactif de Bing Cartes qui vous permet de découvrir les multiples fonctionnalités proposées par ce SDK.

Une fois la feuille de style CSS et les images ajoutées à votre répertoire contenant votre page Index.html, vous devriez obtenir un résultat similaire :

Vous disposez maintenant d’une base pour réaliser des applications apportant une vraie valeur ajoutée. En partant de cet exemple, on peut très bien imaginer une application qui fait un mash-up de ces données avec les données des lignes de bus ou de tramway de la ville ; ce qui permettrait de savoir quel est le meilleur moyen pour se rendre au collège le plus proche, à la piscine la plus proche, à la mairie, etc.

Ceci rendrait l’accès aux transports en commun plus facile et permettrait de le favoriser au détriment de la voiture individuelle. On peut aussi imaginer un scénario assez classique du style « Je dois amener mon enfant de 4 ans à la maternelle, déposer mon enfant de 7 ans à l’école primaire et ensuite je dois aller au bureau, quel est le trajet le plus optimisé pour moi en utilisant les transports en commun ? ».

Avec un peu d’imagination, on se rend compte que l’on peut créer une large variété d’applications utiles et, dans la pratique, pas très compliquées à développer une fois que l’on dispose des données que l’on souhaite.

Source.zip

Tutoriel : Consommer le service de données OGDI avec jQuery – 2nde partie

Affichage d’un pop-up lors du clic sur une punaise

Fonction de recherche

En guise de conclusion

Additional resources