Tutoriel : Consommer avec Google Maps un flux KML exposé par OGDI

image

Au cours de ce billet, nous allons voir comment nous pouvons simplement consommer un flux KML (Keyhole Markup Language) exposé par une instance du kit de démarrage OGDI (Open Government Data Initiative) et l’afficher sur une carte Google Maps cette fois-ci.

Pour cela, nous reprenons le jeu de données utilisé avec le tutoriel Consommer le service de données OGDI avec jQuery et qui contient la liste des équipements publics de la ville de Bordeaux, tous géo-localisés. Cet ensemble de données provient du portail Open Data de la Communauté Urbaine de Bordeaux (CUB) à partir duquel on peut télécharger des ensembles de données très diverses et dans des formats très variés. Malheureusement, aucune API ne permet de consommer directement ces données.

Pour remédier à cette situation, nous avons hébergé cet ensemble de données sur l’instance de test OGDI mise à disposition par Microsoft France dans le Cloud Windows Azure : https://ogdifrance.cloudapp.net/DataBrowser/frOpenData/CUBEquipementsPublics.

Contrairement au tutoriel précédent dans lequel nous consommions le flux de données au format JSON, cette fois-ci, nous consommons le flux de données au format KML et l’affichons directement sur la carte.

Pour commencer, il suffit de créer une simple page HTML en important la bibliothèque JavaScript Google API V3, la dernière en date à l’écriture de ce billet, avec un peu de CSS pour la mise en forme de la carte :

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">  

        html { height: 100% }

       body { height: 100%; margin: 0; padding: 0 } 

       #map_canvas { height: 100% }

    </style>

    <script type="text/javascript"

            src="https://maps.googleapis.com/maps/api/js?sensor=false">

    </script>

</head>

<body>

    <div id="map_canvas" style='width: 100%; height: 100%'>

    </div>

</body>

</html>

Maintenant il nous faut écrire le code JavaScript qui permet, dans un premier temps, de créer un objet google.maps.Map ; ce dernier crée une carte à l’intérieur d’un élément HTML (typiquement un élément div). Dans un second temps il nous faut rajouter une couche de données géo-localisées KML sur cette carte grâce à un objet google.maps.KmlLayer(qui peut aussi afficher une couche de données à partir de données aux formats KMZ ou GeoRSS) ; celui-ci pointe sur le service de données OGDI.

function initialize() {

  var latlng = new google.maps.LatLng(44.8366346955299, -0.581039562821388);

 

  var myOptions = {

        zoom: 9,

        center: latlng,

        mapTypeId: google.maps.MapTypeId.ROADMAP

  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 

  var layer = new google.maps.KmlLayer("https://ogdifrancedataservice.cloudapp.net/v1/frOpenData/CUBEquipementsPublics/?$filter=themeid%20eq%20'A'%20and%20commune%20eq%20'BORDEAUX'&format=kml");

 

  layer.setMap(map);

}

Notez au passage que, dans la requête OData envoyée à l’instance OGDI, tous les espaces ont été encodés pour être passés dans l’url (caractère %20). Il suffit maintenant d’exécuter ce code au chargement de la page pour qu’il soit effectif :

<body onload="initialize()">

    <div id="map_canvas" style='width: 100%; height: 100%'>

    </div>

</body>

Vous pouvez maintenant ouvrir votre fichier HTML dans votre navigateur pour voir le résultat :

image

Comme vous pouvez le constater, lorsque l’on clique sur une punaise, une infobulle s’ouvre affichant les éléments name et description des éléments KML de chacun des points de données. L’élément name contient le GUID de chaque enregistrement contenu dans les tables Windows Azure de la solution OGDI. Il n’est donc pas nécessaire de l’afficher à l’utilisateur. Une des solutions est de personnaliser le contenu de l’infobulle lors du clic sur une punaise. Pour ce faire, on peut se servir du code suivant à rajouter dans la fonction JavaScript initialize :

google.maps.event.addListener(layer, 'click', function (kmlEvent) {

   kmlEvent.featureData.name = kmlEvent.featureData.description;

   kmlEvent.featureData.description = "<a target='_blank' href='https://www.google.com/search?q=" + kmlEvent.featureData.name + " Bordeaux'>Plus d'informations</a>";

});

image

Vous avez maintenant un affichage plus significatif et fonctionnel pour l’utilisateur final.

A noter que, contrairement au précédent tutoriel Consommer le service de données OGDI avec jQuery sur le même thème, nous ne pouvons pas filtrer les données affichées à l’aide d’un champ de recherche pour la simple et bonne raison qu’il n’est pas possible de récupérer la liste des punaises contenues dans une carte lorsque celles-ci ont été créées depuis un flux KML.

Une solution possible serait de consommer les données au format JSON, de créer les punaises en parsant ce flux JSON et de stocker leurs références dans un tableau d’objets. On voit donc ici les atouts et les inconvénients de chaque solution de consommation des données avec du code JavaScript client. On peut consommer et afficher les données au format KML avec très peu de code, mais avec très peu de contrôle sur la personnalisation des infobulles et des punaises. Si l’on souhaite plus de contrôle et la possibilité de rajouter des fonctionnalités ultérieurement à la solution, il vaut mieux consommer les données au format JSON, parser le JSON côté client pour créer de façon programmatique les punaises et ainsi pouvoir les contrôler et les personnaliser en contrepartie de quelques lignes de code supplémentaires.

A noter que la documentation pour la bibliothèque Google Maps JavaScript API V3 est disponible en ligne à l’adresse https://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/.

image

A noter aussi l’existence d’une initiative jQuery appelée gmap3, qui est en fait un plugin jQuery permettant d’interagir avec l’API Google Maps JavaScript V3 suivant le paradigme de programmation jQuery. Si vous êtes déjà à l’aise avec ce Framework, ce plug-in a le mérite de rajouter plusieurs fonctionnalités qui viennent enrichir et faciliter le développement avec Google Maps.

Index.html