Webmapping - Outils OpenSource

1. WEBMAPPING
OUTILS
OPENSOURCE
Ghassen AOUINTI
Février 2020

2. Plan
• Rappels sur Internet / HTML
• Modes de représentation
• Elaboration d’un SIG Web
• Où est ce qu’on peut aller ?
• OpenStreetMap
• Débat

3. Qu’est-ce que HTTP ?
• Protocole de transmission
permettant à l'utilisateur
d'accéder à des pages web
par l'intermédiaire d'un
navigateur.
Qu’est-ce qu’une URL ?
• Format de nommage universel pour désigner
une ressource sur le réseau.
Rappel sur
HTML

4. Qu’est-ce que Javascript :
• Langage de script léger, orienté
objet, qui ajoute de l'interactivité à
votre site web.
• JavaScript est considéré comme
l'une des technologies cœur
du World Wide Web.

5. Qu’est-ce que CSS :
• Langage informatique qui décrit la
présentation des documents HTML et
XML.
• L’objectif principal est de dissocier le
contenu de la page de son apparence
visuelle.
Exemple

6. Modes de
représentation

7. Données
Trois modes de représentation peuvent
cohabiter sur une carte :
• le point : un entrepôt, un client, un
hydrant, une agence ;
• la ligne : un fleuve, un tronçon de route,
un itinéraire ;
• la surface : un étang, une zone de
chalandise, une commune, un bois, une
parcelle.

8. Classification
On peut classer la donnée à représenter en
3 catégories :
• qualitative qui différencie des entités :
une parcelle de feuillus, conifères ou
plantée ;
• ordonnée pour comparer des éléments :
une classe d’enfants de moins de 5 ans,
de 5 – 7 ans, de 8 – 11 ans ;
• quantitative qui mesure des objets : le
nombre d’habitants par commune.

9. Classification

10. Classification

11. Elaboration
d’un SIG Web
L’écosystème cartographique

12. • Visualisation simple d’une carte ;
• Fonctions de déplacement sur une carte
(zooms, pan) ;
• Fonctions de présentation (affichage de
couches, changement d’échelle, vue
globale) ;
• Fonctionnalités avancées (acquisition,
manipulation, gestion et traitement des
données géographiques et attributaires) ;
Notion d’interactivité

13. Comment choisir ?
Comment la carte est générée ?
Notion de site statique / site
dynamique

16. • Leaflet est une bibliothèque JavaScript
libre de cartographie en ligne.
• Leaflet est notamment utilisée sur les
sites OpenStreetMap, Flickr, Wikipédia,
Foursquare, craigslist, IGN, Washington
Post, Wall Street Journal,
Geocaching.com, City-Data.com,
StreetEasy, etc..

17. Ressources :
• Site officiel de Leaflet ;
• Sources de Leaflet sur GitHub ;
• Docs et Tutorials ;
• Leaflet plugins ;
• Stackoverflow (> 9500 questions).

18. • Bibliothèque de fonctions JavaScript
assurant un noyau de fonctionnalités
orienté vers la mise en place d'applications
clientes Web cartographiques fluides.
• OpenLayers prend en charge les données
GeoRSS, KML, GML, GeoJSON et les
données cartographiques de toute source
utilisant les normes OGC comme WMS ou
WFS.

19. Ressources :
• Site officiel d’Openlayers ;
• Dépôt d’Openlayers sur GitHub ;
• Docs et Tutorials ;
• Openlayers workshop ;
• 3rd party libraries ;
• Stackoverflow (> 3800 questions).

20. vs

22. Coté Serveur : Que choisir ?

23. • Geoserver
• Mapserver
• QGIS Server
• Mapnik
• MapGuide Open Source
• GeoWebCache
Coté Serveur : Que choisir ?

24. • Serveur cartographique open source et
libre ;
• écrit en Java ;
• permet de partager et modifier des
données géographiques ;
• Conçu pour l'interopérabilité, il publie
les données de toutes les sources
principales de données spatiales utilisant
des normes ouvertes OGC.
Geoserver

25. • Il gère les connexions à des services
propriétaires tels que Google
Maps et Bing Maps.
• GeoServer fonctionne en tant
qu'implémentation de référence du
standard du Web Feature Service de
l'Open Geospatial Consortium et le Web
Map Service.
Geoserver

26. GeoServer lit de nombreux
formats de données, parmi
lesquels PostGIS, Oracle Spatial,
ArcSDE, DB2, MySQL, Shapefiles,
GeoTIFF, GTOPO30, ECW, JPEG
2000, MBTiles, etc..
Geoserver

27. • Il génère des fichiers KML, GML,
Shapefile, GeoRSS, PDF, GeoJSON,
JPEG, GIF, SVG, PNG et plus.
• GeoServer comprend un
client OpenLayers intégré pour la
prévisualisation des couches de
données.
Geoserver

28. • GeoServer fonctionne comme un
nœud dans une infrastructure de
données spatiales ;
• Il s'appuie sur GeoTools, une
bibliothèque lui permettant
d’effectuer les traitements
spatiaux.
Geoserver

29. Ressources :
• Site officiel ;
• Blog et Docs ;
• Plugins ;
• Source Code Repo ;
• Issue Tracker.
Geoserver

30. • QGIS Server est une implémentation
open source WMS, WFS et WCS, qui
propose des fonctionnalités
cartographiques avancées pour le
rendu thématique ;
• écrit en C++ ;
• fonctionne avec un serveur web.
QGIS Server

31. • QGIS Server utilise QGIS comme
backend pour la logique des couches
SIG et le rendu cartographique.
• QGIS Server fonctionne comme un
module CGI/FastCGI dans le serveur
web Apache.
QGIS Server

32. Caractéristiques :
• Web Map Service (WMS) - images
• OGC Web Map Tile Service (WMTS)
• Web Feature Service (WFS) - vecteurs
• Sortie PDF incluse
• Création de carte WYSIWYG avec QGIS
• Symbolisation cartographique avancée
• Support le Styled Layer Descriptor (SLD)
• Paramètres supplémentaires comme, par
exemple, FILTER, SELECTION, DPI, …
QGIS Server

33. QGIS Server

34. Exemple :
GET http://localhost:8080/cgi-bin/qgis_mapserv.fcgi?
MAP=/qgis-
server/projects/helloworld.qgs&SERVICE=WMS&VERSIO
N=1.3.0&
SELECTION=world%3A44&REQUEST=GetMap&FORM
AT=image%2Fpng&TRANSPARENT=true&
LAYERS=world&CRS=EPSG%3A4326&STYLES=&DPI=1
80&WIDTH=1794&HEIGHT=1194&
BBOX=31.7944%2C-18.2153%2C58.0297%2C21.20361
QGIS Server

35. QGIS Server

36. Où est ce qu’on
peut aller ?

37. • C’est quoi ?
• Guide de démarrage
• Architecture Technique
• Demo en ligne
• Références
• Docs for Admins, Users and
Dev Teams

38. OpenStreetMap est un projet cartographique
participatif, en ligne et mondial ;
Utilisation :
• Fonds de cartes (intégration depuis Leaflet ou
Openlayers) ;
• Routing ;
• Geocoding ;
• Faire sa propre carte.
OpenStreetMap

39. Fonds de cartes dérivés d’OpenStreetMap :
OpenStreetMap

40. OpenStreetMap
OsmAnd, calcul d’itinéraire OsmAnd, naviguer hors ligne

41. OpenStreetMap
Maps.me, calcul d’itinéraire Maps.me, naviguer hors ligne

45. Les services et projets utilisant
OpenStreetMap sont répertorié en thème :
Cartes artistiques, historiques, spotives,
d’intérieur, 3D, services d’isochronie, de
calcul d’itinéraire, de geocodage, d’export,
d’édition, de comparaison de sources,
d’accessibilité, etc…
OpenStreetMap
Services

46. • TopOSM : carte topographique à base
d’OpenStreetMap ;
• Dépôt GitHub : code source, scripts et
feuilles de style, ainsi que les
instructions de mise en place de son
propre serveur TopOSM ;
OpenStreetMap
Autres utilisations

48. • Etat des plateformes OSM ;
• Serveurs de rendu et de tuilage ;
• Hardware : configurations et
statistiques ;
OpenStreetMap
Composition

49. Merci pour
votre attention
Questions ?