Université de Toulouse-Le Mirail janvier 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U50_B33 Le WebMapping côté client : les API et bibliothèques Javascript Positionnement Le dernier aspect du Webmapping que nous allons évoquer est celui qui est le plus directement visualisé et manipulé par les utilisateurs : le côté client. Cette partie des solutions de webmapping est celle qui connaît en ce moment le plus fort développement, notamment avec la progressive mise en place des API JavaScript et du HTML5, elle même issue de l amélioration importante de la puissance des moteurs d exécution JavaScript des navigateurs. Illustration : Source : http://www.slideshare.net/chanezon/hdc09-keynote-browser-mobile-cloud-social-geo-portrait-of-thedeveloper-as-a-kid-in-a-candy-store Outils Le développement côté client en JavaScript ne nécessite pas d'outils logiciels très lourds, car les scripts sont interprétés (sans compilation et linkage) directement par le navigateur. Cependant il est très utile de pouvoir rédiger le code en utilisant un éditeur de texte intelligent, et ensuite de suivre son interprétation exécution de très près par le navigateur.
Les éditeurs de texte qui sont adaptés au JavaScript sont nombreux. Parmi les plus utilisés, voici quelques références FOSS (Free and Open Source Software) : Notepad++ (windows) : http://notepad-plus-plus.org/ Komodo (multi) : http://www.activestate.com/komodo-edit NetBeans (multi) : http://netbeans.org/ Aptana Studio : http://aptana.org/products/studio3 Les débogueurs / traceurs en JavaScript les plus intéressants sont directement intégrés aux navigateurs : - Firebug, un plugin pour FireFox : http://getfirebug.com/ - Chrome Developer Tools : https://code.google.com/chrome/devtools/docs/overview.html Chrome possède l'intérêt supplémentaire de présenter l'historique des appels de fonctions pour pouvoir remonter à la source d'une erreur directement. Présentation Depuis 2005, plusieurs grandes sociétés du web (Microsoft, Yahoo et Google) proposent un service de cartographie accessible aux développeurs web. Ce service consiste en des cartes, routières tout d abord, et des photographies aériennes, interactives et interrogeables (adresses, trajets, équipements et services), cartes que l on peut intégrer à des pages web en utilisant un accès par la programmation (API). Ces sociétés ont depuis été rejointes par d autres, comme Michelin (avec http://viamichelin.com), et par des services publics comme l Ordnance Survey au Royaume-Uni et l IGN en France. Ces services web permettent aussi de représenter ses propres données par-dessus celles servies, et d utiliser certaines fonctions d interactivité (réaction au clic, requêtes, calculs). Leur fonctionnement ne nécessite aucune installation logicielle sur le serveur Internet, l intégration des cartes et leur interactivité étant réalisée par des fonctions javascript organisées en API (Application Programming Interface, interface d accès à une application par la programmation). C est donc le navigateur qui va exécuter les fonctions de cartographie, après avoir téléchargé un fichier javascript sur le serveur du fournisseur de cartes ou sur le serveur http de la page. (cf. schéma n 10 ci-dessous). Il s agit donc d une offre couplant à la fois des données (des fonds de carte et des éléments localisés) et des outils de programmation pour afficher ces données et gérer les interactions avec l utilisateur.
1- Aperçu des possibilités de l API Google Maps JavaScript Google Maps est au départ un site de visualisation de cartes et de recherches de lieux ou itinéraires. Mais la très grande quantité de données spatiales visualisables sur ce site est réutilisable de manière personnalisée sur un site Internet. La licence d utilisation de ces services est originale : on peut utiliser librement le service sur tout site Internet accessible directement, sans qu il faille que les visiteurs s enregistrent et/ou payent un abonnement. Ainsi, le contenu de Google Maps n est pas utilisable en Intranet ou s il fait partie d un site réservé à des visiteurs abonnés. Dans ce cas il faut acquérir une licence d utilisation de type «Premier / Entreprise». Cependant, il existe des limitations à cet usage : l'utilisation du service est limitée à 1000 appels par jour et par utilisateur client, depuis octobre 2011, l'utilisation gratuite du service est limitée à 25000 appels par site et par jour pour la carte simple et 2500 appels par site et par jour pour la carte stylisée. (4$ ou 8$ par millier de page supplémentaire à ces limites seront demandés, respectivement). Jusqu à la version 2 il fallait posséder un compte Google pour pouvoir utiliser ce service, et demander l attribution d une clé d identification (code) liée au serveur. Avec la version 3, disponible depuis 2009, ce n est plus nécessaire, et on peut appeler le fichier JavaScript directement. L affichage de la carte est déclenché par un appel à une fonction JavaScript, du côté du navigateur, donc. Cet appel comporte des paramètres pouvant préciser la taille du rectangle de la carte, les coordonnées de son point central, le niveau de zoom, et le type d informations à afficher (couches à choisir parmi une liste de fonds disponibles). Des données personnalisées peuvent ensuite être ajoutées à cette carte, sous la forme d une couche qui viendrait se superposer, toujours en faisant appel à des fonctions JavaScript. a- Utilisation simple Un exemple d'utilisation simple est en ligne à cette adresse : http://www.geotests.net/apis/google/v3/carto_kml.html (Comme il s'agit de JavaScript, le code source est dans la page HTML).
b- Marqueurs Une des utilisations les plus courantes de l API Google Maps consiste à pouvoir ajouter des puces, ou marqueurs, sur une carte, par exemple pour indiquer un point d intêret. Ces marqueurs peuvent être ajoutés de manière fixe dans le code, en décrivant leur position et leurs propriétés de présentation, mais on peut aussi imaginer les générer dynamiquement en allant chercher ces informations dans une base de données, par exemple pour présenter les localisations des participants d un forum, de ressources diverses. Démonstration en ligne : http://www.geotests.net/apis/google/v3/marqueur.html Un marqueur est capable de déclencher l événement click lorsque l on clique dessus. Cet événement est alors gérable par le navigateur qui peut lancer une fonction Js déclarée dans l écouteur (listener) de cet événement. De cette manière, on peut déclencher l ouverture d un objet infobulle au clic sur un marqueur : http://www.geotests.net/apis/google/v3/marqueur2.html c- Géocodage L un des outils les plus intéressants de l API Google Maps JS est son géocodeur automatique, qui répond rapidement et avec une qualité inégalée parmi les outils gratuits. Le principe est assez simple : on envoie une chaîne de caractères correspondant à une adresse, et le géocodeur répond par une position géographique et une indication de la qualité de cette information. Cette qualité est exprimée en fonction de l échelle géographique à laquelle ces coordonnées correspondent à l adresse donnée, de la région au bâtiment en passant par la ville, la rue, etc. Exemple : http://www.geotests.net/apis/google/v3/geocodeur.html
2- Aperçu des possibilités de l'api OpenLayers OpenLayers est une bibliothèque de fonctions JavaScript développée au départ par la société MetaCarta pour ses besoins propres, puis versée dans le domaine public et retenue comme projet open source par l OSGEO. Cette bibliothèque permet, côté client donc, d afficher des données géospatiales, de les explorer (zoom, pan, interrogations), et d offrir à l utilisateur le moyen d ajouter ses informations au clic. Pour le programmeur, ces données géospatiales deviennent des objets JS manipulables et interactifs (reprojection, styles d affichage, réaction au clic et même dessin). OpenLayers offre donc un ensemble de fonctions utiles pour visualiser des données spatiales et permettre des interactions avancées dans le cadre d une interface graphique complète. OpenLayers est capable de se connecter à un grand nombre de sources de données spatiales, notamment les webservices aux normes OGC, mais aussi de lire des fichiers KML et des fichiers images calés. OpenLayers a été sélectionné par l IGN pour son API d accès au GéoPortail, qui en est une extension. Exemples avancés d utilisation (avec la participation d étudiants de Sigma) : - Carte interactive du laboratoire Terrae : http://w3.terrae.univ-tlse2.fr/carte/carte.php - Atelier cartographique d Obediences.net : http://www.obediences.net/mapfish- 1.1/client/examples/php/fichier_lieux.php a- Principes de l utilisation d OpenLayers et première carte interactive On peut tester l utilisation d OpenLayers en local, mais il faut bien sûr que les fichiers soient servis en http (par Apache par exemple). Une fois téléchargée, la bibliothèque est disponible sous deux formes : un seul fichier dont le code JS est compacté, ou un fichier appelant de nombreux sous-fichiers, dont le code JS est lisible, décompacté, ce qui est intéressant pour le débogage (avec le plugin FireBug de FireFox par exemple).
On appelle l un ou l autre de ces fichiers selon que l on est en mode de test (débogage facilité) ou en mode de production (rapidité apportée par la version «compressée»). Comme il s agit d une bibliothèque de fonctions JavaScript, pour l utiliser il faut ajouter un lien dans une balise <script> du bloc <head> de votre fichier HTML. Par exemple, si on place le répertoire OpenLayers dans un sous-répertoire nommé «OpenLayers» du répertoire contenant le fichier HTML l appel sera de la forme suivante : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>exemple d utilisation d OpenLayers</title> <script src="./openlayers/openlayers.js" type="text/javascript"> </script> </head>... Une fois la bibliothèque chargée, ses fonctions deviennent disponibles à la programmation en JavaScript. Par exemple, commençons par faire afficher une carte OpenLayers dans un <div> de notre page HTML, carte qui sera issue des données WMS GéoSignal, la couche raster 1000K. Exemple en ligne : http://www.geotests.net/apis/ol/index.html Explication : Lors du chargement de la page, la fonction init() est appelée. Cette fonction contient les commandes OL pour créer la carte, c'est à dire : initialiser les objets map et layer_wms créer un objet carte OL dans le div dont l'id est map créer un layer de type WMS en allant consommer le WMS Geosignal ajouter ce layer à l'objet map créer un objet point de coordonnées correspondant à la Haute-Garonne, en lat/long convertir ce point en coordonnées L2C, qui est le système utilisé par le WMS Géosignal centrer la carte sur ce point et zoomer dessus au niveau 8
b- Ajout de contrôles utilisateur et multiples couches WMS Pour aller un peu plus loin et ajouter un peu d'interactivité, nous allons utiliser les fonctionnalités offertes par OpenLayers. Un grand nombre de fonctionnalités d'interaction utilisateur sont en effet disponibles en utilisant des objets OpenLayers simples. Exemple en ligne ici : http://www.geotests.net/apis/ol/index2.html On utilise la dernière version disponible (2.10) d'ol car elle permet de mieux gérer les couches WMS de grande taille. De même, pour réduire la charge serveur on définit l'option MaxExtent de l'objet map pour réduire l'extension des requêtes WMS qui sont lancées. Le serveur utilisé est celui de la société allemande WhereGroup, qui diffuse en WMS les données OpenStreetMap. Nous allons consommer quelques layers de ce serveur : Autoroutes, Villes, Rivières principales et le fond des frontières européennes. L'ensemble des couches disponibles est visible dans une application web basée sur MapBender : http://osm.wheregroup.com/basic Les contrôles utilisateur OL présents sur cette page sont : Navigation (gestion de la souris : drag et clics) PanZoomBar (flèches de panning et curseur de zoom) LayerSwitcher (Liste des couches et leur visibilité) Permalink (lien pour retrouver une carte identique) ScaleLine (barre d'échelle) MousePosition (affichage des coordonnées du la position de la souris) EditingToolbar (Barre d'outils d'édition et de dessin) Ces couches étant non projetées (lat/long WGS84, EPSG:4326), nous n'avons pas besoin de reprojeter notre point de centrage+zoom.
c- Ajout de marqueurs et d'objets vectoriels Enfin, nous allons voir comment ajouter un marqueur (puce) cliquable sur une carte, statiquement (dans le code). Un exemple de génération dynamique de marqueurs cliquable est visible dans le code source de la carte interactive du laboratoire Terrae (lien cité). Exemple en ligne ici : http://www.geotests.net/apis/ol/index3.html Description du code source : Une carte basée sur une seule couche WMS (MetaCarta basic layer) on ajoute un layer de type Marker On crée un objet de type feature, à des coordonnées fournies, sur le layer WMS On créer un objet de type marker, dans le layer Markers, localisé sur cet objet feature On lie un évènement au clic sur ce marqueur, en indiquant la fonction à lancer On définit cette fonction de réaction au clic : ellecréera un objet popup sur l'objet feature dans la couche Markers (sauf si le popup existe déjà, alors on le rend invisible s'il était visible, et inversément) 3- Travaux dirigés : une application transversale de WebMapping Pour mettre en pratique les connaissances acquises depuis le début de ce module, nous allons mettre en place une application simple de webmapping qui fera appel à diverses techniques, du côté serveur au côté client. Schéma de principe :
Les données seront stockées dans un serveur PostGreSQL / PostGIS commun, ainsi que chez certains fournisseurs de WebServices de données comme Google et l'ign. Les données PostGIS devront être mises en forme et diffusées pour pouvoir être consommées. Des scripts PHP s'en chargeront. Enfin, côté client, une application DHTML (HTML+JS) sera créée pour proposer une interface d'exploration des données, en utilisant les API et bibliothèques de fonctions intéressantes. a- Stockage et diffusion des données : PostGIS et PHP Lors de la séance à propos de PostGIS, nous avions mis en place des tables contenant des données GeoFla, BD Carthage et hydrologiques. Comme nous allons nous passer de logiciel serveur de WebServices spécifique, il va falloir créer une passerelle entre ces données situéesdans des tables PostGIS et notre application cliente. Pour trouver quelles sont les solutions disponibles, il faut alors rechercher quelles sources de données sont acceptées par la bibliothèque de fonctions OpenLayers qui va être le moteur cartographique de cette application. La documentation officielle d'openlayers liste ces types de sources dans le chapitre "Layers" : http://docs.openlayers.org/library/layers.html On y retrouve les sources classiques : WebServices et fournisseurs de données, mais aussi des sources plus techniques de données vectorielles qui peuvent être générées par PostGIS et diffusées par un script PHP : - Les formats GML / KML (utilisés notamment par Google Earth) - Le GeoRSS (mais il ne peut traiter que des points) - Les formats Vectoriels génériques (cf. http://dev.openlayers.org/docs/files/openlayers/format-js.html) o GeoJSON (Geographical JavaScript Object Notation) o GPX (Format d'échange de données GPS) o WKT (Well-Known Text) Pour faire notre choix, il faut ensuite regarder du côté des possibilités de conversion de format de données de PostGIS, et évaluer les performances relatives de ces formats.
D'un côté le WKT est un des formats internes de PostGIS, de l'autre le GeoJSON est déjà de la notation de donénes JavaScript, donc il sera dirctement géré par l'application cliente, sans qu'il soit besoin de traduire les données. Le KML a comme avantage d'être compatible avec beaucoup d'applications lourdes clientes SIG. Requêtes PostGIS de formatage des données Avant de penser à diffuser les données, il faut déjà les extraire des tables PostGIS dans les formats voulus. Les fonctions disponibles sont présentées dans la catégorie "Geometry Outputs" de la documentation officielle : http://www.postgis.org/docs/reference.html#geometry_outputs On y retrouve les formats repérés plus haut : - KML : ST_AsKML() - WKT : ST_AsEWKT() - GeoJSON : ST_AsGeoJSON() (Attention ces fonctions sont disponibles avec les versions récentes de PostGIS, par exemple à partir de la version 1.3 pour ST_AsGeoJSON). Ainsi, pour extraire les données de la table departement (GéoFla) en GeoJSON, on pourra réaliser la requête suivante : SELECT NOM_DEPT, ST_AsGeoJSON(the_geom) FROM DEPARTEMENT; Cependant ces fonctions PostGIS ne vont formater que les données elles-mêmes, les géométries des enreistrements de la table. Pour générer un fichier correct, il faudra "enrober" ces nouvelles données des éléments nécessaires. Mise en forme des données en flux http GeoJSON par un script PHP Le format GeoJSON est un format texte qui décrit les données selon la syntaxe des données JavaScript (accolades imbriquées). Pour générer ce type de flux il suffit de préciser le mimetype "text/html" et la page de code, puis sortir les informations sur la sortie standard (avec la commande "echo", par exemple). Un appel à ce type de script PHP reçoit en réponse des données formatées sous la forme d'un flux de texte. Exemple : http://www.geotests.net/test/olsymb/getdata2.php EXERCICE : Rédiger un script PHP qui va extraire les départements de la base PostGIS et générer un fichier GeoJSON de type FeatureCollection contenant des polygones. Guides : Vous pouvez vous inspirer du script PHP suivant : http://www.portailsig.org/content/getdata http://www.geotests.net/test/olsymb/getdata2.txt La documentation officielle du format est disponible ici : http://geojson.org/geojson-spec.html#polygon b- L'application cliente Les données étant stockées et transmissibles dans un format comaptible, il faut maintenant construire l'application cliente. On partira d'une simple carte interactive minimale OpenLayers pour progressivement ajouter une interface et des possibilités. On se basera sur l'exemple décrit dans cet article du PortailSIG : http://www.portailsig.org/content/carte-en-symboles-proportionnels-avec-geoext-openlayers-et-postgis Le code source JavaScript est disponible directement : http://www.portailsig.org/content/moteurjs Exemple simplifié : http://www.geotests.net/test/olsymb/index2.html
Carte interactive OpenLayers simple EXERCICE : Reprendre l'exemple de la carte OpenLayers présenté au 2.a ci-dessus pour lui ajouter les données GeoJSON générées par notre script PHP. Guides : Il faut tout d'abord télécharger les fichiers d'openlayers et les déposer dans un répertoire accessible à votre serveur http, ou lier directement une version en ligne. Il faut ajouter un objet "layer" de type vector, qui sera alimenté par une requête AJAX à notre script PHP qui fournira les données géométriques. Cela se réalise assez simplement directement dans la déclaration de l'objet, la requête AJAX étant traitée autoatiquement par la prorpiété "protocol". Exemple : var lineslayer = new OpenLayers.Layer.Vector("Route Sections", { style: { strokecolor: "blue", strokewidth: 3, cursor: "pointer"}, protocol: new OpenLayers.Protocol.HTTP({ format: new OpenLayers.Format.GeoJSON({ ignoreextradims: true, internalprojection: map.baselayer.projection, externalprojection: map.baselayer.projection }) }) }); map.addlayer(lineslayer); (Attention à bien définir les objets projection auparavant). Ajout d'éléments d'interface OpenLayers Assez simples à mettre en place, les widgets d'interface d'openlayers n'en sont pas moins utiles. Il suffit de les mentionner dans la déclaration de l'objet "map", ou de les créer par la suite, ce sont les objets de type "control" de la bibliothèque de fonctions (http://docs.openlayers.org/library/controls.html). EXERCICE : Ajouter à la carte les éléments d'interface suivants : - Une échelle graphique - Une mini-carte de localisation - Un lien permanent vers la carte affichée. Ajout d'un fond de carte d'habillage Pour que les données vectorielles apparaîssent sur un fond de carte adapté, il faut ajouter à l'objet map un layer correspondant. Le plus simple est d'utiliser une source de données extérieure, comme par exemple un fond Google Maps. Attention cependant à la projection, les données Google Maps raster nétant disponible que dans leur projection "Google Mercator", malheureusement.
Ajout d'une interface GeoExt Enfin, pour terminer, nous allons améliorer l'interface générale de l'application en ajoutant une présentation avec fenêtres, et un tableau interactif des données, grâce aux widgets de la bibliothèque de fonctions ExtJS (Sencha) rendus accessibles et compatibles avec les objets d'openlayers grâce à la biblothèque GeoExt. a) La page HTML de structuration Tout d'abord, il faut télécharger et installer ExtJS et GeoExt (attention aux versions pour qu'elles soient compatibles). Ensuite il faut rédiger la page HTML pour qu'elle fasse appel à ces bibliothèques, ainsi qu'à OpenLayers, et qu'elle contienne des <div> qui vont permettre de positionner les éléments de l'interface. Exemple : http://www.geotests.net/test/olsymb/index2.html b) Les objets GeoExt de base Le principe de fonctionnement de GeoExt consiste à ajouter à ExtJS des objets et des fonctions qui lui permettent de dialoguer avec des objets OpenLayers. Pour rester relativement simple, nous allons utiliser : - Un objet GeoExt.MapPanel qui contiendra notre carte interactive OpenLayers ; - Un objet GeoExt.data.FeatureStore qui stockera les données géométriques (GeoJSON de source PHP) ; - Un objet Ext.grid.EditorGridPanel pour présenter les données sous forme de tableau. c) La gestion du clic Enfin, pour que notre application soit véritablement interactive, nous allons ajouter les fonctions qui vont écouter et réagir aux clics de l'utilisateur sur la carte et dans le tableau de données : - Un objet OpenLayers.Control.SelectFeature pour le clic sur la carte, qui fera apparaître une infobulle (popup); - Un objet GeoExt.grid.FeatureSelectionModel pour le clic dans le tableau, qui sélectionnera la ligne correspondante.