Vous êtes sur la page 1sur 36
Cartographie sur le web (webmapping) ULg - Arlon Campus Environnement ENVT3023-1 – Partim Information spatiale
Cartographie sur le web (webmapping) ULg - Arlon Campus Environnement ENVT3023-1 – Partim Information spatiale

Cartographie sur le web (webmapping)

ULg - Arlon Campus Environnement

ENVT3023-1 – Partim Information spatiale Cartographie sur le web (webmapping)

Julien Minet, Bernard Tychon

Plan du cours

1. Introduction, cartographie et sémiologie web (Mar 26/11) 1.1.SIG et webmapping : définitions

1.2.Principes de cartographie/sémiologie sur le web

1.3.Projections

1.4.Données en webmapping

1.5.Organisations & contexte

1.6.La directive européenne INSPIRE

2. Un exemple pratique avec des logiciels de webmapping (Mar 03/12)

1. Vue d'ensemble

2. Un serveur cartographique : MapServer

3. Un client cartographique : OpenLayers

3. OpenData et OpenStreetMap (Mar 03/12)

Dans ce cours

Introduction : Vue d'ensemble des technologies

Logiciels de webmapping & exercice pratique :

comment réaliser une application de webmapping - à partir des résultats d'ArcSWAT

D'autres exemples d'applications

Et puis

Un serveur internet dédié :

« 80% of all data has a spatial component »*

*Or at least <100% of all data, cfr

1.1 Définitions

SIG & webmapping

SIG = Système d'Information Géographique : logiciel de traitement et d'analyse de l'information géographique et d'édition de cartes. Ex : ArcGIS, QGIS.

Webmapping = « Cartographie sur internet » : solution d'affichage et/ou d'analyse de l'information géographique sur internet.

Et aussi

Webgis : SIG sur internet, insiste sur les capacités de traitement de l'info géographique

Néogéographie

Géomatique 2.0 : insiste sur l'aspect collaboratif

1.1 Définitions

SIG & webmapping

Le webmapping est à la croisée de nombreuses compétences !

Géographie

Géomatique

Cartographie

Graphisme et infographisme

Programmation web (HTML, CSS, Javascript, …)

Selon la thématique : Environnement, Urbanisme, Tourisme, Commercial, Ingénierie, Développement, ICT, …

Les SIG, GPS & le webmapping ont changé la façon d'utiliser l'information géographique, de s'orienter et de cartographier.

1.1 Définitions

Webmapping – historique

1997 : 1ère version de MapServer, logiciel de webmapping

2004 : Création d'OpenStreetMap

2005 : Naissance de Flickr, qui permet le geotagging de photos

2005 : Google Maps

2005 : Google Earth

2005 : 1ère version de OpenLayers, logiciel de webmapping

2006 : 1ère conférence FOSS4G (Free and Open Source Software for Geoinformatics)

2009 : Foursquare

2012 : GoogleMaps devient payant pour une certaine utilisation. Foursquare & Apple passent à OpenStreetMap

1.1 Définitions

Webmapping – exemples

Le plus connu : https://www.google.be/maps/

Geotagging de photos : http://www.flickr.com/map

Portail géographique français: http://www.geoportail.gouv.fr/

Des données à cartographier: http://geodata.grid.unep.ch/

1.1 Définitions

Webmap = Carte sur internet

Avantages possibles:

Animation : la généralisation est fonction du niveau de zoom/échelle

Interactivité : possibilité d'ajouter de l'information et/ou des liens sur clic

Temps réel : par ex. une carte du trafic routier

Géolocalisation par GPS (sur un support mobile)

Collaboration : l'information géographique ou le contenu en information peut être ajouté ou mis à jour par les utilisateurs, par ex. openstreetmap, wikimapia,

Inconvénients possibles (par rapport à une carte en papier):

Manque de vue d'ensemble

Exactitude de l'information peut laisser à désirer

Dépend de la technologie : électricité, réseau, GPS

Vie privée : géolocalisation des personnes, images satellites intrusives, …

1.2 Principes de cartographie sur le web

Principes de cartographie : comment créer une carte + afficher quoi sur une carte

En webmapping, certains principes de cartographie doivent être adaptés.

Une carte papier doit afficher:

Orientation (souvent Nord)

Échelle

Légende

Système de projection

Sources des données

1.2 Principes de cartographie sur le web

Généralisation : tout ne doit pas s'afficher à chaque échelle

Cartes des routes ?

OpenStreetMap, Belgique, toutes les « highway » sauf « path » & « track »

toutes les « highway » sauf « path » & « track » OpenStreetMap, Belgique, toutes

OpenStreetMap, Belgique, toutes les « highway » = «motorway» & «primary»

En webmapping, la généralisation peut (doit) se faire en fonction de l'échelle !

1.2 Principes de cartographie sur le web

Généralisation : tout ne doit pas s'afficher à chaque échelle

La généralisation est fonction du niveau de zoom/échelle

La généralisation est fonction du niveau de zoom/échelle GoogleMaps, Province de Lux., zoom normal G o

GoogleMaps, Province de Lux., zoom normal

de zoom/échelle GoogleMaps, Province de Lux., zoom normal G o o g l e M a

GoogleMaps, Province de Lux., zoom + 2

1.2 Principes de cartographie sur le web

Taille du symbole : respecter un ordre logique

sur le web Taille du symbole : respecter un ordre logique OpenStreetMap, Belgique, toutes les «
sur le web Taille du symbole : respecter un ordre logique OpenStreetMap, Belgique, toutes les «

OpenStreetMap, Belgique, toutes les « highway » = «motorway» & «primary» à la même taille

OpenStreetMap, Belgique, toutes les « highway » = «motorway» & «primary» à deux tailles différentes, mettant en évidence les « motorways »

1.2 Principes de cartographie sur le web

Choix des labels : ni trop, ni trop peu, à la bonne taille

1.2 Principes de cartographie sur le web Choix des labels : ni trop, ni trop peu,
1.2 Principes de cartographie sur le web Choix des labels : ni trop, ni trop peu,

1.2 Principes de cartographie sur le web

Choix des couleurs

Couleurs en accord avec l'élément cartographié

Tout ce qui concerne l'eau est souvent en bleu, les éléments naturels sont souvent en vert, etc.

Couleurs chaudes ou froides -> Variables « chaudes » ou « froides »

Utiliser une couleur spécifique pour les 'No data' (ci-dessous, les océans) :

pour les 'No data' (ci-dessous, les océans) : Source:

1.2 Principes de cartographie sur le web

Choix des couleurs

Cartographier une variable continue avec une palette

Ne pas toujours utiliser la même palette arc-en-ciel

Penser aux photocopies N/B

Penser aux daltoniens

● Penser aux photocopies N/B ● Penser aux daltoniens Source:
● Penser aux photocopies N/B ● Penser aux daltoniens Source:

1.2 Principes de cartographie sur le web

Choix des couleurs

Types de palettes pour différents types de variables :

Données séquentielles (ex : temperature, indice de végétation) → palette séquentielle :

indice de végétation) → palette séquentielle : 1 2 3 4 5 6 7 8 9

1

2

3

4

5

6

7

8

9

Données divergentes (changement +/– par rapport à une situation de départ) → palette divergente :

à une situation de départ) → palette divergente : -4 -3 -2 -1 0 1 2

-4

-3

-2

-1

0

1

2

3

4

Données catégoriques (ou qualitatives) :

-1 0 1 2 3 4 ● Données catégoriques (ou qualitatives) : A B C D

A

B

C

D

E

F

G

H

I

1.2 Principes de cartographie sur le web

Choix du fond de carte

En webmapping, plusieurs « fonds de carte » sont disponibles, mais souvent les mêmes sont utilisés (i.e., GoogleMaps)

En webmapping, plusieurs « fonds de carte » sont disponibles, mais souvent les mêmes sont utilisés
En webmapping, plusieurs « fonds de carte » sont disponibles, mais souvent les mêmes sont utilisés

1.2 Principes de cartographie sur le web

Choix des données à afficher

Quelques lignes de conduites à se souvenir :

Ne pas surcharger la carte

Afficher des données en rapport avec le thème/message de la carte

Afficher une légende (si nécessaire)

Afficher une échelle : scalaire

Afficher les sources des données & droits d'auteurs (copyright)

: scalaire ● Afficher les sources des données & droits d'auteurs (copyright) plutôt que fractionnelle
: scalaire ● Afficher les sources des données & droits d'auteurs (copyright) plutôt que fractionnelle

plutôt que fractionnelle

1.2 Principes de cartographie sur le web

Principes cartographiques

Résumons

1. Généralisation des données : ne pas tout afficher à la même échelle

2. Taille des symboles (& labels)

3. Choix des labels

4. Choix des couleurs

5. Choix du fond cartographique

6. Choix des données à afficher

7. Légende

8. Échelle

9. Source des données & droits d'auteurs (©)

1.3 Projections

Différents type de projection

Projection cartographique : permet de représenter la Terre (~une sphère) sur un plan.

Nombreux type de projections, mais les plus courantes :

Nombreux type de projections, mais les plus courantes : Mercator (conserve angles) Peters (conserve surfaces) Plus

Mercator (conserve angles)

mais les plus courantes : Mercator (conserve angles) Peters (conserve surfaces) Plus d'infos sur les

Peters (conserve surfaces)

1.3 Projections

Projections : attention à la projection Mercator !

L'Afrique est en réalité 14,5 fois plus étendue que le Groenland !

Utiliser d'autres projections pour des cartes globales :

! ● Utiliser d'autres projections pour des cartes globales : Cartes du GIEC : projection qui
! ● Utiliser d'autres projections pour des cartes globales : Cartes du GIEC : projection qui

1.3 Projections

Projections : attention à la projection Mercator !

Projections alternatives : intéressantes mais peu appliquées !

alternatives : intéressantes mais peu appliquées ! Orientation Sud-Nord Projection de Fuller : ni haut, ni
: intéressantes mais peu appliquées ! Orientation Sud-Nord Projection de Fuller : ni haut, ni bas,

1.3 Projections

Projections : attention à la projection Mercator !

Projection polaire :

1.3 Projections Projections : attention à la projection Mercator ! Projection polaire : http://uxblog.idvsolutions.com/

1.3 Projections

Projections : attention à la projection Mercator !

Les projections s'appliquent aussi aux webmaps, pas seulement aux cartes en papiers

La projection « standard » en webmapping est (malheureusement) le « Spherical Mercator », « WGS84 Pseudo-Mercator », « Google Mercator » ou « Web Mercator »

Elle a le code EPSG 3857 ou

900913.

C'est la projection par défaut des fonds carto de GoogleMaps, BingMaps, OpenStreetMap et donc de la plupart des webmaps.

par défaut des fonds carto de GoogleMaps, BingMaps, OpenStreetMap et donc de la plupart des webmaps.

Ex : GoogleMaps

1.4 Données en webmapping

Données en webmapping

Différence fondamentale en SIG et webmapping :

matricielle (=raster) >< vectorielle

3 types de données couramment utilisées dans les webmaps :

1. Fichiers : vectoriel ou matriciel

2. Web Map Services (WMS) : matriciel

3. Couches tierces-parties (3rd party layers) :

matriciel

1.4 Données en webmapping

Données en webmapping

Données en SIG : fichiers informatiques (& services web)

Matricielles (rasters) : GeoTiff, GRID, JPEG,

Vectorielles : SHP, …

Données webmapping : fichiers & services web

Matricielles : service WMS, couches tierces-parties :

images tuilées (GoogleMaps, OpenStreetMap, …) souvent utilisés pour faire un fond de carte.

Vectorielles : fichiers : KML, GML, GeoJSON, …

services : WFS

1.4 Données en webmapping

Données en webmapping

Principaux services web standardisés: créés par l'OGC depuis 2000.

Web Map Service (WMS) :

Fournit des images (rasters)

C'est « le » format raster en webmapping

De multiples WMS sont disponibles à travers le monde

Peut être visualisé dans un SIG (QGIS, ArcMap,

)

Web Feature Service (WFS) :

Fournit des données vectorielles

Contient une information géographique mais aussi attributaire

WFS-T (WFS – Transactional) : Permet l'édition des données vectorielles

1.4 Données en webmapping

Données en webmapping

Insérer un WMS dans un SIG : démo sur ArcMap avec le WMS des orthophotoplans 2009-10 de la Région Wallonne

Adresse du WMS :

http://geoservices.wallonie.be/arcgis/services/IMAG

ERIE/ORTHO_2009_2010/MapServer/WMSServer?

NB : Pour l'insérer dans QGIS (un autre SIG) ou OpenLayers (webmapping), cfr

1.4 Données en webmapping

Données en webmapping

De nombreux WMS existent !

Ils sont souvent délivrés par les agences cartographiques ou de géodonnées gouvernementales

Liste de WMS : taper « List+WMS » dans Google :

1.4 Données en webmapping

Données en webmapping

Couches tierces-parties :

GoogleMaps : satellite, roads, physical

OpenStreetMap : nombreux fond de cartes dérivés

Yahoo!Maps

BingMaps

ESRI

Aperçu des principales couches disponibles : TB site →

1.5 Organisations

Organisations

Open Geospatial Consortium (OGC) :

Consortium

d'entreprises/universités/agences

gouvernementales

Définit les standards de données en webmapping

OSGeo :

Fondation de support au développement de logiciels open-source en géospatial (pas seulement webmapping)

Organise une conférence annuelle depuis 2006: FOSS4G

logiciels open-source en géospatial (pas seulement webmapping) ● Organise une conférence annuelle depuis 2006: FOSS4G
logiciels open-source en géospatial (pas seulement webmapping) ● Organise une conférence annuelle depuis 2006: FOSS4G
logiciels open-source en géospatial (pas seulement webmapping) ● Organise une conférence annuelle depuis 2006: FOSS4G

1.6 La Directive INSPIRE

Directive européenne INSPIRE

1.6 La Directive INSPIRE Directive européenne INSPIRE = Infrastructure for Spatial Information in the European Community

= Infrastructure for Spatial Information in the European Community

for Spatial Information in the European Community

1.6 La Directive INSPIRE

Directive européenne INSPIRE

1.6 La Directive INSPIRE Directive européenne INSPIRE = Infrastructure for Spatial Information in the European Community

= Infrastructure for Spatial Information in the European Community

Directive Européenne de 2007, sera pleinement appliquée en 2019, mais évidemment déjà en cours (processus)

A pour but de créer la Spatial Data Infrastructure (SDI) de l'Union Européenne : comme une infrastructure routière

Données géographiques sont produites à des niveaux locaux/nationaux mais devront être disponibles au niveau Européen

Les données doivent être rendues libres de consultation/téléchargement aux citoyens européens

Favorise le développement de l'industrie du géospatial dans les prochaines années

1.6 La Directive INSPIRE

Directive européenne INSPIRE

1.6 La Directive INSPIRE Directive européenne INSPIRE = Infrastructure for Spatial Information in the European Community

= Infrastructure for Spatial Information in the European Community

Définit des standards dans la construction des données géographiques et cela a une répercution mondiale

Définition de métadonnées (donnée sur la donnée)

Concrètement : Permet de mettre au niveau de normes tout le processus de production des données géographiques dans chaque état-membre. Chaque État-membre doit « se mettre à jour »

Un viewer sera disponible dans le futur avec toutes les données européennes : http://inspire-geoportal.ec.europa.eu/discovery/

1.6 La Directive INSPIRE

Directive européenne INSPIRE

L'application en Wallonie de la directive INSPIRE : WalOnMap :

+

européenne INSPIRE L'application en Wallonie de la directive INSPIRE : WalOnMap : Un géoportail + Un
européenne INSPIRE L'application en Wallonie de la directive INSPIRE : WalOnMap : Un géoportail + Un
européenne INSPIRE L'application en Wallonie de la directive INSPIRE : WalOnMap : Un géoportail + Un
européenne INSPIRE L'application en Wallonie de la directive INSPIRE : WalOnMap : Un géoportail + Un