[MUSIQUE] [MUSIQUE] [MUSIQUE] Me revoilà donc. C'est avec grand plaisir que je vous retrouve pour cette leçon qui va porter sur certains aspects de la relation entre cartographie et Internet. Il s'agit d'un thème d'une grande actualité puisque, de plus en plus souvent, les applications informatiques, et notamment les applications dans le monde des systèmes d'information géographique, s'appuient sur l'Internet pour proposer des solutions multiplateformes, donc utilisables aussi bien sur des ordinateurs de bureau que des tablettes ou des smartphones, et qui permettent d'utiliser différents types de système d'exploitation, que ce soit dans le monde Windows, le monde MacOS, Linux, Android, et j'en passe. L'objectif de cette leçon consiste donc à aborder de manière générale et forcément un peu superficielle, le thème des relations entre systèmes d'information géographique et Internet, puis d'approfondir un peu le thème de l'intégration d'éléments de cartographie dynamique et interactive dans des pages Web, ce que l'on désigne généralement par le terme de Web SIG. Au terme de la leçon, vous devriez être en mesure de décrire les principes des architectures client-serveur, et vous devriez être capables de réaliser une page Web simple contenant un élément de carte. Nous aborderons donc successivement le thème de l'architecture client-serveur, en relation avec les systèmes d'information géographique, puis nous nous concentrerons sur les éléments fondamentaux de la page Web, que sont le langage HTML et le CSS, qui sont les prémices qui nous permettront d'aborder ensuite le thème de la cartographie dans les pages Web, donc le thème du Web SIG, et nous terminerons la leçon par un exemple d'application, donc de réalisation d'une page Web qui contient un élément cartographique dynamique et interactif. [MUSIQUE] Un serveur est donc un logiciel, ou une machine, qui est capable d'écouter le réseau et qui est capable de recevoir des requêtes émanant de différents clients et de répondre à ces requêtes. Donc l'objectif d'un serveur est de permettre le partage de données ou le partage de ressources matérielles ou logicielles entre plusieurs clients, dans une architecture qualifiée d'architecture client-serveur. Il existe un très grand nombre de types de serveur différents : des serveurs de base de données, des serveurs simplement de fichiers, des serveurs de courriel, des serveurs Web, des serveurs de jeux, etc., etc. Les serveurs écoutent donc le traffic sur le réseau Internet afin d'identifier des requêtes qui leur sont adressées, et le portail qui leur permet d'écouter sur le réseau est ce qu'on appelle un port logiciel, qui est en fait le point d'accès au système d'exploitation d'un ordinateur. Les ports logiciels sont numérotés de 1 à 65 536, et sur une même machine, en fait, on peut avoir plusieurs logiciels serveurs qui fonctionnent simultanément, chacun écoutant ou travaillant avec un ou deux ports logiciels spécifiques, souvent un port pour le traffic entrant et un second port pour le traffic sortant. Comme exemple de numéros de port fréquemment utilisés, on peut citer les ports 20/21, qui sont utilisés pour les protocoles de transfert de fichier FTP, 20 pour le flux entrant 21 pour le flux sortant, le port 80 pour la consultation de pages Web sur un serveur Web HTTP, le port 443 dans le cas où ce serveur Web serait sécurisé avec le protocole HTTPS, ou encore le port 5432 pour la connexion sur une base données PostgreSQL. Les logiciels serveurs ne doivent pas nécessairement être hébergés sur une machine distante mais peuvent être hébergés sur la machine locale, en même temps que les logiciels clients, ce qui est particulièrement utile si l'on fait du développement. Il faut simplement que les conditions de fonctionnement soient les mêmes que si les serveurs étaient sur une machine distante, à savoir que la communication entre le client et le serveur passe par les mêmes ports logiciels que si ces serveurs étaient sur une machine distante. La machine locale, dans une adresse URL, est désignée par le terme de localhost, qui désigne en fait l'interface logique de cette machine locale. L'adresse localhost est également associée à une série d'adresses IP. Dans le cas de IPv version 4, l'adresse 127.0.0.1 qui est la plus fréquemment utilisée, mais la série des adresses suivantes est également utilisable. Finalement, dans une adresse URL, si l'on veut spécifier un port particulier, on ajoute simplement deux points et le numéro de port pour viser ce port-là, donc si on veut taper sur le port 3 000 d'une machine locale, l'URL serait du type http://localhost:3000. Une architecture client-serveur est donc en général constituée par un logiciel serveur, qui donc écoute le traffic sur le réseau, qui est capable d'identifier une requête qui lui est adressée et ensuite de renvoyer une réponse. De l'autre côté, on a un logiciel client qui lui est capable de formuler des requêtes, de les envoyer au serveur, et puis de récupérer la réponse du serveur et de l'interpréter pour afficher l'information qui a été transmise. Finalement, les échanges entre client et serveur sont souvent gérés par un logiciel intermédiaire appelé intergiciel, ou encore middleware en anglais. Dans le contexte particulier des systèmes d'information géographique, le côté serveur est souvent simplement constitué d'un serveur de données. Il arrive cependant fréquemment que l'on ait deux serveurs en série, le premier étant destiné à gérer les requêtes et la fabrication des réponses, alors que le second se limite à la fourniture de données. Cette structure présente notamment des avantages du point de vue sécuritaire puisque l'accès aux données n'est autorisé que pour le serveur intermédiaire, qui lui peut gérer les droits d'accès des différents clients. Du côté client, on aura une interface utilisateur composée soit d'un logiciel SIG, QGIS, Manifold, Mapinfo, ArcGIS, etc., soit d'un navigateur Web comprenant un composant cartographique, association que l'on désigne généralement par l'expression Web SIG. Et à nouveau, on retrouvera divers protocoles de communication entre client et serveur. Le plus répandu de ces logiciels qui gèrent les communications entre client-serveur est le logiciel ODBC, pour Open Data Base Connectivity. Il s'agit d'un logiciel développé au départ par Microsoft pour le monde Windows, mais repris par la suite par d'autres éditeurs pour les plateformes Unix/Linux et Java. Les requêtes de manipulation de données sont formulées en langage SQL dans le logiciel client, puis transmises au serveur de données par l'intermédiaire de ODBC. Le schéma de fonctionnement implique que les fabricants de logiciels de gestion de base de données ont dû développer des pilotes ODBC spécifiques pour chaque système de gestion de base données. On voit ici dans le cas de QGIS que lorsque l'on ajoute, par exemple, une couche vectorielle, on a la possibilité d'aller rechercher cette couche dans une base de données, et les types de connexion base de données qui sont proposés comprennent différentes bases de données de différents fabricants, donc Oracle, MSSQL, Microsoft, Postgres, MySQL, mais également le pilote générique ODBC qui permet de se connecter à des bases de données en utilisant ce protocole particulier. Deux autres exemples de middleware assez fréquemment rencontrés dans le monde Windows : OLEDB, pour Object Linking and Embedding Database, qui est en fait un successeur d'ODBC, basé sur les interfaces COM, et ADO.NET, qui est le composant d'accès aux données du framework .NET de Microsoft. Finalement, dans le cours consacré aux sources de géodonnées, nous avions déjà parlé un petit peu du protocole HTTP, en particulier pour interroger des géoservices, donc des serveurs VMS et VFS. Dans le cas particulier du protocole HTTP, nous avons donc, du côté serveur, soit un serveur HTTP, soit des géoservices de type Web Map Service ou Web Feature Service. Côté client, un navigateur Web avec un composant SIG ou, plus occasionnellement, le logiciel SIG, qui va généralement pas utiliser un serveur HTTP mais qui peut aller rechercher des tuiles dans des géoservices comme on l'a vu lors du cours sur les sources de géodonnées. La communication dans le sens client-serveur s'appuie donc sur le protocole HTTP, qui peut éventuellement comporter des paramètres, comme on l'avait vu pour définir les éléments que le serveur doit retourner. Et dans le sens client on va trouver simplement un flux d'information sous la forme de HTML, d'images, de fichiers json, gml, etc. Dans la suite du cours, nous allons maintenant nous concentrer plus particulièrement sur le cas où le client est constitué d'un navigateur web qui comprend des fonctionalités système d'information géographique. [MUSIQUE] Avant d'aborder la question de l'intégration de composants géographiques dans une page web, il est nécessaire de rappeler un petit peu les fondements de l'organisation et de la construction d'une page web, donc le langage HTML pour HyperText Markup Language et le CSS pour les éléments de style. C'est donc l'objet de cette deuxième partie du cours, une revue accélérée un petit peu des principes de base de cette structuration de pages web. Une page web est donc avant tout un document HTML, donc un fichier point HTML, qui est un fichier de texte annoté afin de définir différents types de contenu, l'entête, les pieds de page, les paragraphes, des titres, etc., etc. Ces annotations qui portent le nom de Markup sont formées par des balises que l'on appelle des tags, qui sont en fait des mots-clés placés entre chevrons et qui signalent le début et la fin d'un élément de contenu ou élément HTML. Dans l'exemple qu'on a ici sous les yeux, on voit que la balise principale est la balise HTML qui définit en fait la page HTML, elle-même subdivisée en un entête, avec la balise head qui contient un titre, avec la balise title. Entête suivi d'une partie body qui est en fait le corps de la page, qui contient un paragraphe avec un texte, Bienvenue sur l'e-Atals de l'Orontes, et une image caractérisée par ses propriétés. Le chemin d'accès à l'image a un texte de substitution au cas où l'image ne serait pas accessible et la taille en largeur de cette image. Les documents HTML devraient donc débuter et se terminer par des balises de début et de fin, balises HTML. Elles doivent contenir une section d'entête et une section de contenu, avec les balises head et body. Et finalement on note que la syntaxe du HTML n'est pas sensible à la casse, mais qu'en général on utilise plus volontiers des minuscules partout, par confort de lecture. Et finalement, comme on l'a vu, l'entête contient des métadonnées, des références vers des bibliothèques, vers des ressources externes, souvent le titre de la page, et dans le corps on va placer les différents éléments de contenu, les différents éléments HTML que l'on souhaite voir apparaître sur la page elle-même. Quelques exemples de balises courantes avec les balises de titre de niveau un à niveau six, la balise <p> pour les paragraphes, et puis une série de balises qui permettent de renforcer du texte en italique ou en gras, le saut de ligne, la ligne horizontale. Le lien HyperText avec la balise simplement <a> qui peut pointer soit vers un site web, lorsque l'on donne comme paramètre href, l'adresse, l'url d'un site web, ici l'exemple du site web de l'École Polytechnique, ou vers un élément de la page, situé plus haut ou plus bas, qui définit par son identifiant, ici on a l'exemple d'une phrase, this is the top, qui est caractérisée par son ID qui s'intitule top, et la référence renvoie à cet emplacement de la page, avec le caractère dièse que nous reverrons plus tard, qui cible en fait un objet qui porte un ID top. Les balises permettant de définir des listes ordonnées avec la balise <ol>, non ordonnées avec la balise <ul> et la balise <li> pour les éléments de listes. La balise image que nous avons déjà vue, avec pour particularité le fait que cette balise ne nécessite pas de balise de fin et comme autre particularité que ses deux attributs, la source et le texte de substitution, sont des attributs obligatoires. Et on note au passage que la valeur des attributs est caractérisée par un texte pris entre guillemets ou apostrophe. La définition des chemins d'accès suit les règles standards, ainsi par exemple dans le cas d'une source qui se trouve dans le même dossier que le fichier HTML, la source sera un peu moins constituée par le nom du fichier ou éventuellement par la syntaxe, point, qui désigne le dossier dans lequel on se trouve, slash le nom du fichier. Si on a un dossier image qui est placé au même niveau que le fichier HTML sur lequel on travaille, le lien vers la source prendra la forme point, slash, dossier image, slash, nom du fichier. Il peut arriver que le dossier image soit au même niveau que le dossier HTML qui contient le fichier HTML sur lequel on travaille, et dans ce cas pour remonter d'un cran dans la hiérarchie, on va avoir une syntaxe du type deux points, slash, dossier image, fichier, source, point jpg. Et finalement dans le cas où l'image serait hébergée sur un site web distant, on aurait simplement pour la source l'url de cette image. La balise <table> qui définit une table composée donc de lignes, avec la balise <tr> pour row, chaque ligne étant composée de cellules décrites par la balise <td>. On peut trouver une liste complète des balises de HTML sur le site w3schools, dans la partie HTML de ce site. Pour terminer encore, les éléments neutres constitués par les balises <div> et <span>, qui sont en fait simplement des conteneurs pour accueillir d'autres éléments HTML et qui sont principalement utilisés pour structurer et styliser un document HTML. L'élément div est lui encadré par des sauts de ligne, donc il s'agit d'un élément de bloc, et chaque élément suivant va se retrouver à la ligne suivante, alors que l'élément span lui est un élément en ligne, il peut s'appliquer à une section de ligne, avec ici l'exemple du moins important qui est stylisé en rouge à l'aide d'un span, dans la phrase titre, et puis le second exemple, un élément div qui est colorié en gris, un arrière fond en gris, et puis un texte en bleu, style qui est appliqué au contenu de ce conteneur, donc le titre de niveau h trois et le paragraphe qui suit. Nous avons vu là deux exemples de style appliqués aux contenus de deux conteneurs, d'un conteneur span et d'un conteneur div. De manière générale, les éléments HTML ont tous un attribut style qui est composé en fait d'une chaîne de caractères, qui liste une série de paramètres sous une forme nom, deux points, valeur, séparés par des point-virgules. Il existe un très grand nombre de paramètres de style que l'on peut utiliser et l'on peut, comme on le voit ici, aller piocher là-dedans pour trouver des détails. On trouvera une description assez complète de nouveau sur le site w3schools, dans la rubrique CSS. La méthode qui consiste à définir le style des éléments HTML par des paramètres associés à ces éléments possède un certain nombre d'inconvénients. En premier lieu le fait que lorsque l'on veut faire un changement de style, une mise à jour, on est obligé d'aller changer le style spécifiquement de chacun des éléments, ce qui est une tâche assez fastidieuse. Les éléments de style prennent de plus en plus de place, ça alourdit en fait la lisibilité de la page web. Et finalement, si on répète les mêmes styles de nombreuses fois, en fait on augmente la taille des fichiers, ce qui peut ralentir en fait les temps de chargement des pages web. C'est pour cette raison que l'on utilise des méthodes alternatives comme on l'illustre au travers de cet exemple, où l'on a en fait simplement deux conteneurs, l'un au-dessus de l'autre, first div, second div. L'un qui n'occupe que 70 % de la largeur de la page, avec une hauteur de 50 pixels et un fond gris clair et le second qui a un fond bleu foncé, un texte de couleur blanche, une hauteur de 100 pixels et qui occupe la moitié de la largeur disponible. Alors si l'on veut alléger un petit peu la définition des styles, on va regrouper en fait les éléments de stylisation dans une section particulière. de la page. Section que l'on caractérise par les balises style. Et dans laquelle, on va référencer en fait les différents objets auxquels ces styles s'appliquent, avec le caractère dièse pour rechercher l'élément qui porte cet identifiant. En l'occurrence ici, div1. Donc le style s'applique à un seul objet. Le caractère point pour appliquer le style à une classe d'objets dont les attributs d'un objet, définir une classe. Et on peut avoir plusieurs objets qui ont la même classe. Et donc, que l'on peut styliser avec un seul style. Et finalement, le type HTML lui-même avec un style qui s'appliquerait alors à l'ensemble des éléments HTML de ce type-là. L'étape suivante de la rationalisation des éléments de style consiste à sortir la section style de l'en-tête de la page HTML pour regrouper tous les styles dans une page de style, donc une page .css que l'on référence ensuite dans la page HTML avec une balise de type link. Cette feuille de style que l'on crée regroupe toutes les informations stylistiques dans un seul fichier, un fichier .css pour Cascading Style Sheet. Et peut être appliqué à l'ensemble des pages HTML d'un site Web. On a ici un exemple de différents types de stylisation qui sont appliqués à une seule et même page, à un même contenu. Mais avec des mises en formes diversifiées. Cela, c'est la page telle qu'elle se présente sans style aucun. Et on retourne à la case départ. On voit donc que pour rationaliser la gestion des styles dans une page ou un ensemble de pages web, on va commencer par référencer les différents éléments HTML des pages web par leur identifiant, leur classe ou leur type. Et que l'on va regrouper les informations de styles, soit dans une section particulière caractérisée par la balise style dans l'en-tête de la page HTML, soit dans un fichier séparé de type .css. Avec cette façon de procéder, le style d'un élément peut être défini en fait à plusieurs endroits et s'applique alors la hiérarchie suivante où on passe d'abord du style par défaut de la page web au style défini dans la page CSS, puis dans la section de la page HTML puis comme attribut de l'objet lui-même. Et pareillement, dans la hiérarchie de la typologie, on va aller d'abord du type général. Et puis si un style particulier est défini pour une classe particulière, c'est la classe qui va prendre le dessus. Et dans le cas où l'objet même a un style défini, c'est le style de l'objet qui va s'appliquer. [MUSIQUE] [MUSIQUE] Nous avons donc vu les éléments de base de la construction et de la stylisation des pages web. Il nous reste encore à voir comment on va pouvoir intégrer dans ces pages web des éléments de cartographie et faire en sorte que cette cartographie puisse être interactive. Nous avons vu que le langage HTML est quand même limité et ne suffira pas pour ce type d'applications un peu plus complexes. Les possibilités qui s'offrent à nous, c'est de compléter en fait le HTML, ce qui peut se faire soit du côté client en ajoutant du code exécutable à l'intérieur même de la page HTML, ce code peut prendre la forme de Javascript, de vbscript ou du dhtml, par du code exécutable à télécharger et à utiliser avec une page HTML. Il s'agit alors de scripts dans différents langages de programmation, du Python par exemple, des composants activeX ou des applets Java. Il existe une grande variété de produits disponibles pour ce genre de fonctions. Et par des interfaces applications quasiment complets spécifiques que l'on doit installer sur le client, ce que l'on désigne généralement sous le nom de plug-in. Les possibilités peuvent également être enrichies du côté serveur en ajoutant des exécutables ou des librairies DLL, voire même des scripts qui seraient exécutés sur le serveur et dont la fonction est en fait de créer de manière dynamique les pages HTML qui sont renvoyées au client. Et là, on utilise beaucoup le common gateway interface, le CGI, ou alors par du code exécutable qui est intégré à la page HTML mais qui est exécuté au niveau du serveur. L'exemple le plus fréquemment utilisé est celui du PHP, donc le code PHP qui se trouve dans la page en l'occurrence une page PHP envoyée par le client au serveur. Le serveur doit disposer d'un interpréteur PHP pour exécuter ce code, fabriquer la page HTML et la renvoyer au client. Alors, nous n'avons pas le temps de passer en revue de manière exhaustive toutes ces différentes formes d'enrichissement du HTML. Et nous allons nous concentrer dans la suite du cours sur la solution Javascript, donc du code exécutable Javascript inséré dans la page HTML et exécuté du côté client. Le Javascript a entre autres particularités le fait d'être un langage fonctionnel. C'est-à-dire que les fonctions sont des objets. Ici, on a l'exemple d'une fonction de deux paramètres a et b qui renvoient le produit de ces deux variables. Cette fonction peut être définie dans une variable elle-même qui s'appellerait myFunction et on peut utiliser cette variable pour exécuter la fonction donc, dans le calcul de quatre fois trois. Le Javascript permet d'accéder aux éléments de la page HTML via le Document Object Model, ou DOM, qui comme on le voit sur cette illustration permet d'accéder alors à la page HTML qui est l'élément racine et puis à ses composants, l'en-tête et le corps. Et dans l'en-tête, le titre, le texte du titre ou dans le corps, les différents éléments HTML qui le composent. Il est également possible d'accéder aux éléments du navigateur via le BOM, Browser Object Model, qui permet d'accéder en fait à la fenêtre, à l'historique du navigateur, au type de navigateur, etc., etc. A nouveau, si vous voulez approfondir vos connaissances sur le Javascript, je vous recommande de commencer par consulter le site w3schools qui propose toutes sortes d'exercices dans ce domaine. Nous allons nous intéresser maintenant à la manière d'intégrer du Javascript dans une page HTML avec pour commencer un exemple très simple d'un bouton dans une page HTML. Et on aimerait que lorsque l'on clique sur ce bouton, s'affichent le jour, la date, l'heure, etc. La syntaxe du fichier HTML est simple. Donc, ici, pas d'en-tête. Juste le corps, avec dans le corps, le type, le bouton, et puis un paragraphe avec l'ID demo qui doit recevoir en fait le texte de la date et de l'heure généré par la fonction. Et on voit que dans les attributs du bouton, on a une propriété onclick, donc un événement qui va exécuter la fonction qui est décrite entre guillemets. Donc, on va partir de document qui est donc le DOM. On va rechercher l'objet qui s'appelle demo, dont l'ID est demo. Et puis, on va assigner au contenu HTML de cet objet la fonction Javascript date qui renvoie la date courante. Tout comme pour les éléments de style, nous avons aussi la possibilité ensuite d'extraire l'ensemble du code Javascript d'une page HTML ou d'une série de pages HTML pour les regrouper dans une page js, Javascript et puis de référencer ensuite ces différentes fonctions dans l'en-tête avec une balise script qui pointe sur le fichier Javascript tout en gardant au niveau de l'événement onclick sur le bouton, l'événement myFunction qui est défini dans la page myScript.js. Ici à nouveau, ce procédé permet de simplifier et de faciliter la lecture de la page HTML et de regrouper tous les éléments Javascript à un même endroit. L'intégration d'une cartographie interactive dans une page web va donc, en utilisant du Javascript, va donc passer par l'utilisation de librairies SIG Javascript. Il existe un grand nombre de ces librairies parmi lesquelles en particulier Openlayers Leaflet, la librairie Mapstraction, Polymaps, la librairie Cesium pour des représentations tri-dimensionelles, etc. Au delà de ces librairies open source, on trouve aussi une série de librairies qui sont en général libres fournies par les grands producteurs que sont Google Microsoft ESRI etc. C'est des librairies qui sont libres mais qui ne sont pas open source. [MUSIQUE] [MUSIQUE] Dans cette dernière partie du cours, nous allons démontrer comment utiliser une de ces librairies JavaScript cartographiques, en l'occurrence la librairie Openlayers, pour fabriquer une page HTML qui contient une carte géographique interactive. On commence donc par créer un fichier intitulé Openlayers_Seychelles.html dans lequel on va retrouver les éléments de base, l'en-tête et le corps avec un élément que l'on a encore pas vu qui est la déclaration de type !DOCTYPE html qui en fait se substitue aux balises html. On ajoute ensuite dans l'en-tête, un titre, puis toujours dans l'en-tête deux références, une première référence à la librairie Openlayers, et un lien vers un fichier CCS, un fichier de style, par défaut qui accompagne la librairie Openlayers. On ajoute ensuite, dans le corps de la page un conteneur, auquel on assigne l'IDMap et on définit quelques éléments de style, dans une section style de l'en tête, avec tout d'abord pour l'ensemble de la page HTML et du corps ou body la volonté d'occuper tout l'espace disponible, donc 100 % de la hauteur et de la largeur et pour l'élément MAP, également 100 % de la hauteur et puis on donne une couleur de fond gris clair pour pouvoir s'assurer que cet élément HTML carte, ce conteneur va bien occuper tout l'espace disponible, ce que l'on peut vérifier en ouvrant le fichier dans un navigateur, en l'occurrence ici, Google Chrome ; Et on voit qu'effectivement le composant, le conteneur MAP occupe tout l'espace disponible, à l'exception d'une petite marge en haut et à gauche. On ajoute ensuite une section pour héberger le code JavaScript, avec les balises script et dans cette section script on va ajouter le code qui permet de créer l'objet carte, donc on crée un nouvel objet OL pour openlayers.map donc un objet MAP de la librairie Openlayers que l'on assigne à la variable map et cet objet, dans ses propriétés on dit que la cible que l'on vise c'est le conteneur qui s'appelle map. Donc on va mettre cet élément cartographique dans le conteneur ou div qu'est l'IDMap et puis on définit une vue pour cette carte, donc on crée une nouvelle vue qui est centrée sur le point latitude, longitude 55 47 et -4 67 qui correspond à peu près au centre de l'île de Mahé et cette vue, on lui définit également un niveau de zoom, ici la valeur 12. Pour que quelque chose soit affiché dans cette carte on va donc ajouter une couche, en l'occurrence la couche OpenStreetMap donc on crée une nouvelle couche de type tuile avec comme source OSM, qui est la source OpenStreetMap. Et on ajoute cette couche OSM layer à l'objet map qui est donc la carte Openlayers. On peut constater que si l'on ouvre maintenant ce fichier HTML dans un navigateur comme Google Chrome, on a la carte OpenStreetMap des Seychelles, de l'île de Mahé, qui s'affiche dans la page. Pour ajouter du contenu et de l'interactivité à cette carte, il va falloir maintenant développer le code JavaScript, raison pour laquelle on va sortir ce script de la page web pour l'héberger dans un fichier JavaScript que l'on va intituler Openlayers_Seychelles.js et on va référencer ce fichier dans l'en-tête de la page. En reprenant ce code JavaScript on va commencer par séparer la définition de la variable map de l'utilisation de celle-ci pour lui assigner la nouvelle carte Openlayers que l'on a créé, ce qui permet de mettre le code de création de la carte et d'ajout de la carte OpenStreetMap dans une fonction qui sera exécutée une seule fois au moment du chargement de la page. Une fois que la page est chargée on exécute le code qui ajoute la carte et la couche OpenStreetMap avec les mots clés document ready, etc. A noter au passage que le symbole $ se réfère à une librairie de JavaScript qui s'appelle jQuery, librairie qu'il a fallu pour pouvoir utiliser valablement ce symbole, librairie qu'il a fallu ajouter dans la page HTML, dans les références. Supposons maintenant que l'on veuille enrichir un petit peu notre carte, par exemple, en ajoutant les districts des Seychelles que l'on a stocké ici dans un fichier JSON qui se trouve, on le voit par l'URL, dans un dossier GeoJSON qui se trouve lui-même au même niveau que notre fichier JavaScript et notre page HTML. Donc on crée une couche vecteur, avec un style qu'il va falloir définir, et on définit comme source de cette couche vecteur ce fichier GeoJSON, et on ajoute la couche à la carte. On définit donc ici la symbologie pour la couche des districts en créant un nouveau style composé d'un remplissage, donc un objet remplissage créé à partir d'une couleur et d'une transparence, et un objet stroke, qui définit le style de trait pour la bordure des polygones basé également sur une couleur, une transparence, et sur une largeur Alors on peut faire ensuite la même chose pour ajouter la couche des routes, la couche des hôtels et puis si on veut vraiment ajouter de l'interactivité on pourrait écrire le code, on ne va pas le faire ici car ça devient un peu compliqué mais on pourrait écrire le code qui permet, lorsque l'on clique sur un district ou sur un hôtel d'avoir un petite fenêtre pop-up qui s'ouvre dans la page web et qui donne la liste des propriétés, des attributs de l'hôtel, du district etc... Mais pour que tout cela fonctionne, il faut encore rendre ces fichiers JSON accessibles, donc il faut pouvoir les exposer sur un serveur, en l'occurrence on peut se contenter d'un simple serveur statique qui ne va pas faire de manipulations et simplement servir ces fichiers, serveur statique que l'on peut créer avec la librairie node.js, donc également du JavaScript, dans un fichier que l'on va appeler server.js et on voit qu'en fait, en cinq lignes de code on crée ce serveur. On utilise une variant de node qui s'appelle Node Express qui est une forme simplifiée de serveur Node que l'on définit en fait, le dossier public dans lequel se trouvent les fichiers que l'on va rendre accessible, qui est en l'occurrence le dossier dans lequel se trouve ce fichier serveur.js et toute l'arborescence qui est située en aval. On va dire que le serveur doit écouter le port 3000 et puis envoyer un message à la console pour dire que le serveur a démarré et qu'il écoute le port 3000. Donc si on jette un petit coup d'oeil sur l'arborescence des fichiers que l'on a créés, on a donc dans le dossier Openlayers_Samples, ces trois fichiers HTML JavaScript, pour la page web elle-même server.js pour le serveur, les différents modules de la librairie node qui vont permettre de faire tourner ce serveur, et dans un dossier GeoJSON, on va trouver les trois fichiers contenant les districts, les hôtels et les routes des Seychelles. On voit ici que l'étape suivante consiste, dans une fenêtre terminale, à descendre dans l'arborescence jusqu'à ce dossier Openlayers_Samples et puis d'envoyer la commande, node serveur.js ce qui va lancer le serveur node, et on a le message comme quoi ce serveur a démarré et qu'il écoute les requêtes sur le port 3000 Pour charger notre page web, il faut donc ouvrir un navigateur internet et comme url taper localhost puisque l'on est sur une machine local, :3000 pour rechercher le port 3000, donc le serveur node que l'on vient de démarrer et puis accéder à la page Openlayers_Seychelles.html qui va exécuter le code JavaScript associé, qui va lui-même aller chercher les fichiers GeoJSON et qui va les ajouter sur la carte, ce qui fait que l'on retrouve ici en fait les districts, les routes et les hôtels. Comme dit tout à l'heure, on peut développer ce code pour ajouter de l'interactivité à cette carte sous toutes sortes de formes [MUSIQUE] [MUSIQUE] Voilà, dans cette leçon, nous avons donc vu divers aspects liés à l'architecture client/serveur, de façon générale puis spécifiquement dans le monde SIG, avec notamment les protocoles d'échange basés sur le logiciel ODBC qui permet en fait de transmettre des requêtes SQL du client vers le serveur et ensuite de récupérer les données sélectionnées qu niveau du serveur de données. Et le protocole HTTP qui permet d'envoyer des requêtes HTTP paramétrées soit vers un serveur HTTP soit vers des géoservices types VMS, VFS. Nous avons également ensuite vu de manière un peu plus spécifique les bases de construction d'une page html et puis comment on pouvait enrichir du HTML avec du JavaScript pour fabriquer des interfaces web SIG Et finalement nous avons vu un petit exemple, de comment concrètement on pouvait développer le code JavaScript pour aller en direction d'une cartographie interactive sur le web. [MUSIQUE] [MUSIQUE]
