Université de Toulouse-Le Mirail Décembre 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou

Transcription

1 Université de Toulouse-Le Mirail Décembre 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U50_B33 Les clients légers du WebMapping : APIs et bibliothèques de fonctions 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 de grandes API 1 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 : Outils Le développement côté client en JavaScript ne nécessite pas d'outils logiciels très lourds, car les scripts sont exécutés (sans compilation lourde) 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. 1 API : Application Programing Interface, ou interface de programmation, ensemble de fonctions qui donnent accès à des données et des services distants.

2 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) : Komodo (multi) : NetBeans (multi) : Aptana Studio : Les débogueurs / traceurs en JavaScript les plus intéressants sont directement intégrés aux navigateurs : - Firebug, un plugin pour FireFox : - Chrome Developer Tools : 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 progressivement, sur plusieurs niveaux. 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. Elles ont été rejointes depuis par d'autres, comme Apple et Amazon (Nokia Maps pour ce dernier). Ce service consiste en des cartes (routières tout d abord, puis 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 et par des services publics comme l Ordnance Survey au Royaume-Uni et l IGN en France (avec le GéoPortail). Ces services web permettent aussi de représenter en plus ses propres données, et d utiliser certaines fonctions d interactivité (réaction au clic, recherches, calculs d'itiniéraires). 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 depuis 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.

3 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 disponibles dans ce service 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 dans une certaine limite d'accès et à la condition que le site Internet utilisant l'api soit accessible directement, sans identification préalable des visiteurs. Ainsi, le contenu de Google Maps n est pas utilisable en Extra/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» (environ 8000 euros / an). Les limites de : 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 à 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 de l'api 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 devant contenir la carte (typiquement un élément HTML de type DIV), 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.

4 a- Utilisation simple Un exemple d'utilisation simple est en ligne à cette adresse : 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érêt. 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. Démonstration en ligne : 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 JavaScript 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 :

5 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 :

6 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 des vecteurs, 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 distantes, notamment les webservices aux normes OGC, mais aussi de lire des fichiers KML, GeoJSON et des fichiers images stockés sur le serveur. 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) : - Atelier cartographique d Obediences.net : 1.1/client/examples/php/fichier_lieux.php - Atlas interactif de la CAF-31 :

7 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) pour utiliser certaines fonctions. 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é donc facilement lisible, 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 développement (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> de votre fichier HTML; généralement dans le bloc <head>. 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" " <html xmlns=" <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 :

8 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 : On utilise la dernière version disponible (2.12) d'openlayers 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 latlon.org, qui diffuse en tant que service WMS les données OpenStreetMap. 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é)

9 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 : 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.

10 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 dans un format compatible pour pouvoir être consommées. Des scripts PHP s'en chargeront. Enfin, côté client, une application 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, Carthage et se stations de mesures 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ées dans 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" : 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 :

11 - Les formats GML / KML (utilisés notamment par Google Earth et Maps) - Le GeoRSS (mais il ne peut traiter que des points) - Les formats Vectoriels génériques (cf. 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 donc 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 correspond à la syntaxe des données JavaScript, donc il sera directement géré par l'application cliente, sans qu'il soit besoin de traduire les données. Enfin, 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 le format voulu. Les fonctions disponibles sont présentées dans la catégorie "Geometry Outputs" de la documentation officielle : 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 code_dept, 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 enregistrements de la table. Pour générer un fichier correct, il faudra "enrober" ces nouvelles données des éléments nécessaires à une structure de données conforme au format. 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 de générer les informations sur la sortie standard (avec la commande PHP "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 : La documentation officielle du format est disponible ici :

12 b- L'application cliente Les données étant stockées et transmissibles dans un format compatible, 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 en ligne : Code source HTML : Code source JS : Objectif : Moyens : Une carte interactive présentant les données vecteur IGN GéoFla et statistiques de l'insee stockées dans une table PostGis, avec une interface graphique moderne. Les APIs OpenLayers (cartographie) et EXT-JS (interface), rassemblées par la bibliothèque GeoExt 2. Concrètement, une carte OpenLayers est munie d'un fond Google Maps, puis insérée dans un cadre de mise en page Ext, comportant aussi un tableau interactif. Un FeatureStore GeoExt est alimenté par une source distante (GeoJSON généré par un script PHP en AJAX), qui fournit des polygones accompagnés de données attributaires. Ces polygones sont fournis à une couche OpenLayers de type vectoriel, dont le style d'affichage prévoit une classification selon la valeur d'un attribut.

13 Préparation du serveur : Il faut tout d'abord télécharger APIs et les installer sur le serveur. Comme il s'agit d'apis JavaScript, une simple copie des répertoires dans un endroit accessibles par le serveur web (http) suffit. Ces APIs seront ensuite appelées par la page HTML. OpenLayers : ExtJS : GeoExt : 1) La page HTML de structuration La page HTML qui contient l'application est relativement courte. On y trouve en fait les appels des bibliothèques de fonctions des APIs utilisées, un titre et un <div> qui contiendra la mise en page produite par GeoExt. Cf. : 2) 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.panel.Map 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.GridPanel pour présenter les données sous forme de tableau, qui utilisera un mode de gestion des sélections seltype: 'featuremodel' fourni par GeoExt 2, qui gère le lien entre carte et tableau de données.

14 Exercices : Ajouter l'évolution de la population entre 1999 et 2007 dans le tableau de données. Représenter cartographiquement cette nouvelle variable.