Cartographie

et informatique

Lycée Blaise-Cendrars

Juin 2023

Sous la direction de

Jean-Philippe Rawyler et Vincent Guyot

Discipline obligatoire Informatique

Lycée Blaise-Cendrars La Chaux-de-Fonds (Suisse)

“Imaginez un monde dans lequel chaque

personne pourrait partager librement

l’ensemble des connaissances humaines.”

- Jimmy Wales. Fondateur de Wikipedia.

Table des matières

Table des matières iii

Liste des figures vii

Liste des codes sources x

1 Introduction 1 1.1 Dotation horaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.2 Cartographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 Logiciels de cartographie . . . . . . . . . . . . . . . . . . . . . . . . 2 1.4 Critique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Les cartes 5

I Année 2022 - 2023 7

TABLE DES MATIÈRES  TABLE DES MATIÈRES

2.1 Urbanisation neuchâteloise . . . . . . . . . . . . . . . . . . . . . . . 8 2.2 Cartonomique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.3 Ganymède . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.4 Merveilles de La Chaux-de-Fonds . . . . . . . . . . . . . . . . . . . 14 2.5 Orientations politiques . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.6 Panomatricks à l’Hôpital . . . . . . . . . . . . . . . . . . . . . . . . 18 2.7 Menhirs de Bretagne . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2.8 Le corps humain . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 2.9 De la Pangée à nos jours . . . . . . . . . . . . . . . . . . . . . . . . 24 2.10 Parc d’attractions des rêves . . . . . . . . . . . . . . . . . . . . . . 26 2.11 Pollutions océaniques . . . . . . . . . . . . . . . . . . . . . . . . . . 28 2.12 LBC cursus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.13 Comédies musicales . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 2.14 Cartographie sur un orchestre symphonique . . . . . . . . . . . . . 34 2.15 Voyage au Tadjikistan . . . . . . . . . . . . . . . . . . . . . . . . . 36 2.16 Niveaux de vie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 2.17 Maison de rêve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3 Développements 43 3.1 Investissement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 3.2 Connaissances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

3.2.1 Cartographiques . . . . . . . . . . . . . . . . . . . . . . . . 45 3.2.2 Informatiques . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4 Conclusion 49 4.1 Évolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 4.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

A Leaflet 51 A.1 Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 A.2 Marqueurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

A.2.1 Lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 A.2.2 Rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 A.2.3 Cercles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 A.2.4 Rectangles SVG . . . . . . . . . . . . . . . . . . . . . . . . . 56

A.3 Pollutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 A.3.1 Échelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 A.3.2 Fond de carte . . . . . . . . . . . . . . . . . . . . . . . . . . 57 A.3.3 Forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 A.3.4 Mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 A.3.5 Informations . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 A.3.6 Grands cercles . . . . . . . . . . . . . . . . . . . . . . . . . . 64

A.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

B Xia et Map Wraper 67

B.1 Xia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 B.1.1 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 B.1.2 Utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 B.1.3 Techniquement . . . . . . . . . . . . . . . . . . . . . . . . . 69

B.2 Map Wraper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

C La projection de Mercator 75 C.1 Équirectangulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 C.2 Mercator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

C.2.1 Loxodromie . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 C.2.2 Mathématiquement . . . . . . . . . . . . . . . . . . . . . . . 77

C.3 Indicatrice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Bibliographie 81 Livres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Ressources en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Liste des figures

2.1 Évolution du nombre de bâtiments dans le canton de Neuchâtel… 9 2.2 Ciel, mes constellations ! . . . . . . . . . . . . . . . . . . . . . . . . 11 2.3 Carte de Ganymède. . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2.4 Les merveilles de la Chaux-de-Fonds. https://umap.

    openstreetmap.fr/fr/map/cdf-sous-un-nouveau-jour_
    828594#14/47.1016/6.8283 . . . . . . . . . . . . . . . . . . . . . . 15

2.5 Tendances politiques des leaders du monde. . . . . . . . . . . . . . 17 2.6 Un Ying - Yang cartographique . . . . . . . . . . . . . . . . . . . . 19

2.7 Ménihrs de Bretagne. https://umap.openstreetmap.fr/fr/map/
    menhirs-de-bretagne_831557#8/48.329/-1.467 . . . . . . . . . . 21

2.8 Carte corporelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.9 De la Pangée à nos jours. . . . . . . . . . . . . . . . . . . . . . . . . 25 2.10 Un parc d’attraction imaginaire. . . . . . . . . . . . . . . . . . . . . 27 2.11 Carte des pollutions océaniques. http://u.osmfr.org/m/888913/ . 29 2.12 Carte, logiciel et vidéo . . . . . . . . . . . . . . . . . . . . . . . . . 31 2.13 Comédies musicales mondiales. https://umap.openstreetmap.

    fr/fr/map/les-comedies-musicales_892510#2/36.7/29.5 . . . . 33

2.14 Un orchestre cartographié. . . . . . . . . . . . . . . . . . . . . . . . 35

2.15 Voyage au Tadjikistan. https://umap.openstreetmap.fr/fr/
    map/projet-tadji_881939#7/38.947/433.828 . . . . . . . . . . . 37

2.16 Les différents niveaux de vie. . . . . . . . . . . . . . . . . . . . . . . 39

2.17 Une maison de rêve. https://home.by.me/fr/project/meike.
    vanewijk-2081/maison-de-reve . . . . . . . . . . . . . . . . . . . 41

3.1 Une légende à l’ouverture du site . . . . . . . . . . . . . . . . . . . 45

A.1 Projection de Merkator . . . . . . . . . . . . . . . . . . . . . . . . . 55

LISTE DES FIGURES  LISTE DES FIGURES

A.2 La carte statique des gyres océaniques. . . . . . . . . . . . . . . . . 59 A.3 Une légende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 A.4 De très grands cercles corrects en projection de Mercator. . . . . . . 66

B.1 À l’ouverture du site . . . . . . . . . . . . . . . . . . . . . . . . . . 68 B.2 Mise en évidence d’une zone au survol de la souris. . . . . . . . . . 68 B.3 Le polygone du labyrinthe. . . . . . . . . . . . . . . . . . . . . . . . 69 B.4 Une des îles sous l’image. . . . . . . . . . . . . . . . . . . . . . . . . 69 B.5 Les formes utilisées. . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 B.6 Les formes utilisées. . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 B.7 Les formes utilisées. . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 B.8 Transformation d’une image en carte. . . . . . . . . . . . . . . . . . 72 B.9 Positionnement de l’image sur la carte. . . . . . . . . . . . . . . . . 73 B.10 Le résultat prévisualisé. . . . . . . . . . . . . . . . . . . . . . . . . . 73 B.11 Exportation sous différentes formes. . . . . . . . . . . . . . . . . . . 73 B.12 Utilisation de la carte de Map Wraper dans Umap. . . . . . . . . . 74

C.1 Projection équirectangulaire (Wikimedia commons). . . . . . . . . . 76 C.2 Indicatrice de la transformation équirectangulaire (Wikimedia com-

mons). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 C.3 Une loxodrome (Wikimedia commons) . . . . . . . . . . . . . . . . 77 C.4 Loxo et ortho-dromie (Wikimedia commons) . . . . . . . . . . . . . 77 C.5 Grandeurs de la projection de Mercator. . . . . . . . . . . . . . . . 78 C.6 Indicatrice de la transformation de mercator (Wikimedia commons). 79

Liste des codes sources

A.1 La partie HTML5 de la carte. . . . . . . . . . . . . . . . . . . . . . 52 A.2 La feuille de style de la carte. . . . . . . . . . . . . . . . . . . . . . 53 A.3 Le javascript de la carte avec ses deux fonds. . . . . . . . . . . . . . 53 A.4 Lignes de latitude et marqueurs texte. . . . . . . . . . . . . . . . . 54 A.5 Les rectangles en latitude-longitude. . . . . . . . . . . . . . . . . . . 55 A.6 Les rectangles en latitude-longitude. . . . . . . . . . . . . . . . . . . 56 A.7 La gyre Pacifique Sud. . . . . . . . . . . . . . . . . . . . . . . . . . 58 A.8 Le marqueur de l’océan indien. . . . . . . . . . . . . . . . . . . . . 58 A.9 L’ellipse de l’océan indien. . . . . . . . . . . . . . . . . . . . . . . . 60 A.10 La gyre de l’Atlantique Sud. . . . . . . . . . . . . . . . . . . . . . . 60 A.11 La gyre Pacifique Nord. . . . . . . . . . . . . . . . . . . . . . . . . 62 A.12 La gyre de l’Atlantique Nord. . . . . . . . . . . . . . . . . . . . . . 62 A.13 Une légende. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 A.14 Importation du module greatCircle. . . . . . . . . . . . . . . . . . . 65 A.15 Une légende. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Chapitre1

Introduction

Le propos du présent document est de rendre compte des travaux en « Cartographie et informatique » réalisés pendant plusieurs années au cours éponyme du lycée Blaise-Cendrars.

Nous étions deux enseignants, l’un géographe et l’autre informaticien, tous deux passionnés de cartographie. En proposant ce cours, essentiellement faits de projets réalisés par des élèves en groupes de deux, l’idée était de faire comprendre ce qu’est une carte à travers sa réalisation pratique.

Plusieurs ouvrages théoriques nous ont menés sur cette voie. Il s’agit de :

Cartographie radicale [16] , un ouvrage fondamental très bien illustré, courageux dans son propos sur l’engagement des cartes par opposition à leur prétendue neutralité scientifique et d’une clarté lumineuse à tout propos.

Ceci n’est pas un atlas [15] , un ouvrage atypique engageant des groupes de cartographes de tout type dans un mouvement de contre-cartographie comme outil d’information et de luttes sociales. Cet ouvrage contient un « Petit manuel de cartographie collective et critique » permettant une initiation à la contre-cartographie particulièrement pertinente.

Opérations cartographiques [6] , un ouvrage portant sur la création de cartes au sens général du terme, puisque la problématique de la construction de cartes de parcours y est abordée.

Ces ouvrages ont déterminés nos choix d’une cartographie dont le formalisme aurait pu limiter les élans, d’une cartographie où « tout est cartographie » du moment que l’espace est dans l’image. La liberté était donc de mise tant au niveau du sujet que des outils. Cependant, cet atelier étant orienté informatique, évidemment que les outils de productions se sont finalement situés dans le registre informatique.

1.1. Dotation horaire  Chapitre 1. Introduction

1.1 Dotation horaire

Chaque atelier a duré la moitié d’une année scolaire, soit environ dix-neuf semaines, à raison d’une heure et demie par semaine, c’est-à-dire environ 29 heures. Sur ces heures, une heure et demie a été consacrée à une introduction générale, une autre heure et demie à une introduction à la cartographie et une dernière heure et demie à une introduction aux logiciels de cartographie. Finalement, trois heures ont été consacrées à une présentation orale de chaque travail et une heure et demi à la conclusion de l’atelier. On peut donc considérer que les travaux ont été réalisés en une vingtaine d’heures au maximum.

1.2 Cartographie

Cette introduction a été donnée par l’enseignant en géographie. L’objectif était de présenter l’intérêt que les élèves pouvaient porter à la cartographie, plutôt que les techniques cartographiques. Ainsi, ce fut plus une présentation de différents types de cartes, plutôt qu’un cours de bonnes pratiques.

1.3 Logiciels de cartographie

Cette introduction a été donnée par l’enseignant en informatique. Une priorité aux logiciels libres a permis de montrer qu’aujourd’hui ces logiciels sont de meilleure qualité que leurs homologues propriétaires, qu’ils couvrent tous les domaines de la cartographie et qu’ils permettent une meilleure compatibilité en terme de formats d’exports et sont généralement bien plus multi-plateforme. Cependant, le choix du logiciel restait celui des élèves.

Plusieurs logiciels tant généralistes que dédiés à la cartographie ont été présentés sans entrer dans les détails de leur présentation. Il s’agit de :

Gimp pour la manipulation des rasters (png, tiff, …). La différence entre logiciels de manipulation de fichiers bitmap (composé de pixels) et de fichiers vectoriels (construits mathématiquement) a été présentée à cette occasion.

Inkscape pour la manipulation d’images vectorielles (svg).

OpenStreetMap/Umap pour les possibilités de cartographie directement sur OpenStreetMap ou pour des cartes personnalisées avec Umap.

Qgis pour une découverte d’un logiciel fortement dédié à la cartographie.

La présentation de ces logiciels a été si rapide qu’on pourrait presque parler d’évocation. L’idée était de laisser les élèves découvrir par eux-mêmes ces logiciels après un choix déterminé par leur projet et en discutant avec l’enseignant d’informatique.

Chapitre 1. Introduction  1.4. Critique

1.4 Critique

On trouvera au chapitre 3, une rapide présentation des problèmes rencontrés au cours de la construction des cartes, une critique générale des prémisses présentés ci-dessus et une analyse de ce que l’ensemble des travaux peut nous dire quant aux regards portés par les étudiants sur le monde.

Les cartes^{Chapitre2}

À partir de la page suivante se trouvent présentées les cartes réalisées par les élèves et en regard ce qu’ils en ont essentiellement dit.

Il faut relever la variété des thèmes abordés et des techniques choisies. Celleci est à l’origine de la réunion de tous ces travaux dans le présent ouvrage. Évidemment, les ouvrages de cartographie radicale [16] et de cartographie comme outil de luttes [15] y sont aussi pour beaucoup.

Si les cartes sont l’élément essentiel de cette présentation, il faut souligner que plusieurs d’entre elles n’ont pas été livrées sous la forme sous laquelle elles figurent ici. En effet, il était impossible de faire figurer des vidéos, des cartes interactives zoomables, cliquables ou des constructions 3D pleinement accessibles uniquement dans le mouvement. Les images qui en ont été tirées sont présentes pour permettre de s’imaginer ces travaux et éventuellement de se rendre sur la carte interactive via un lien. Mais parfois, ce ne fut pas possible en raison des logiciels utilisés.

Les travaux présentés peuvent aussi parfois paraître de mauvaise qualité, tant du point de vue de leur rendu que de celui de l’information qui y figure. Ils sont cependant le reflet des connaissances des étudiants dont l’intérêt pour différents aspects du travail de cartographe, mais aussi de celui d’informaticien, était très divers.

L’objectif du cours étant en premier lieu de leur permettre de découvrir le monde de la cartographie en s’en emparant à travers des problématiques qui leur étaient propres, quelques commentaires ont parfois été ajoutés non pour souligner ces limites, mais pour avertir que d’autres pistes et d’autres solutions existent.

Si nous avons pu mettre en valeur les propos mêmes des étudiants au sujet de leur travail, c’est qu’ils ont dû nous faire un compte rendu écrit de celui-ci à partir duquel nous avons tiré les textes présentés. Mais ceux-ci ne constituent parfois qu’une petite part du compte rendu, en particulier en ce qui concerne les références présentées et le choix des ex-

Chapitre 2. Les cartes

traits de leurs textes fut le nôtre pas le leur. Nous conservons cependant l’ensemble des travaux originaux et, pour autant qu’ils nous aient été remis sous une forme fonctionnelle, en présentons souvent l’aspect multimédia. Enfin, il faut mentionner que l’ensemble des travaux réalisés l’a été avec des logiciels libres (Qgis, Umap, OpenStreetMap, Leaflet, Xia, Map Wraper, Gimp, Inkscape, Synfig, …), à une exception près avec l’utilisation de PowerPoint qui posa des difficultés liées à son coût et absence sur certaines plateformes, comme Linux. Car, même si LibreOffice parvient aujourd’hui à de très bon résultats à l’ouverture des ppt, l’utilisation d’un format créé par un logiciel aussi propriétaire que PowerPoint, pose encore des problèmes. C’est la raison pour laquelle seuls des logiciels libres furent présentés et qu’il fut précisé que chacun devait pouvoir voir et utiliser les cartes réalisées sans devoir acheter de logiciels particuliers.

Première partie Année 2022 - 2023

2.1 Urbanisation neuchâteloise

Maëlle et Charlotte

« […] nous avons finalement opté pour « L’évolution de l’urbanisation dans le canton de Neuchâtel, de 1970 à aujourd’hui ». Ce sujet mêlant géographie, histoire et économie nous plaît beaucoup car, comme ce ne sont pas des données auxquelles nous avons accès, nous avons tout un travail de recherches à effectuer qui nous permettra d’en savoir plus sur notre canton. Nous souhaitions également que notre projet aboutisse à une carte totalement inédite. Notre carte animée montre, à l’aide de couleurs choisies grâce à un barème créé spécialement à cet effet, le nombre de bâtiments par hectare de certaines communes du canton de Neuchâtel en 1970, puis en 2020. »

« Nous avons utilisé plusieurs logiciels et sites pour obtenir notre carte animée. Pour le dessin de la carte nous avons utilisé le logiciel de dessin vectoriel Inkscape car c’est celui que nous savions le mieux utiliser et le plus propice à une base de carte si l’on voulait la voir en plusieurs tailles sans perdre sa qualité d’image. Pour l’animation nous avons utilisé Synfig, c’est un des seuls logiciels que l’on connaissait et que nous avions déjà utilisé. […] Le site qui a été indispensable pour faire les mesures et analyses dont nous avions besoin pour notre carte est map geo admin. Une plateforme de géo-information concernant le territoire suisse mise en place par la Confédération. »

Le travail était complexe non seulement en raison de la recherche et de l’exploitation des données, mais aussi par la diversité des problèmes informatiques qui ont mené au résultat. « Nous sommes donc parties vers une animation faite à partir de deux cartes, une de 1860 et l’autre actuelle. Un autre problème est alors apparu :

Le site sur lequel nous avons pris les informations dont nous avions besoin pour notre projet propose un outil qui nous permets de mesurer les distances et périmètres d’un terrain choisi. Cet outil mesure les surfaces par rapport à une carte actuelle, mais la carte de 1860 sur laquelle nous voulions nous baser étant assez ancienne elle ne représentait pas avec précision les surfaces construites. Les dessins des bâtiments sur la carte de 1860 étaient beaucoup plus grands que ceux sur la carte actuelle. Les proportions n’étant pas les mêmes cela posait un problème. » « nous sommes rendues compte que le tracé de la carte n’était pas fait de manière à ce que nous puissions animer chaque case. » Finalement, l’animation fonctionne et le temps à disposition permet de visualiser l’évolution de plusieurs communes … 8 Figure 2.1 – Évolution du nombre de bâtiments dans le canton de Neuchâtel.

9

2.2 Cartonomique

Mathis et Chiara

« Dans l’idée de ne pas créer une carte conventionnelle, nous avons assez vite pensé à l’astronomie, et décidé de se lancer dans la création d’une carte de constellations illustrées. … nous nous sommes d’abord renseignés sur les possibilités de cartes astronomiques qui s’offraient à nous, en sachant que la création complète d’une carte, avec la position de chaque étoile, serait un travail beaucoup trop ambitieux. En s’inspirant de cartes mythologiquement imagées des constellations du 17ème siècle, nous avons finalement choisi de prendre une carte astronomique existante, de la simplifier pour garder uniquement les constellations qui nous intéressaient, et ensuite d’y reporter des dessins. »

« En nous renseignant sur les constellations que nous avions représentées, nous avons eu l’idée de rendre notre projet plus interactif, et d’y ajouter une simple animation, qui permettrait d’en apprendre plus sur l’histoire de ces constellations. Pour ce faire, nous avons décidé d’utiliser le programme Scratch, qui nous a permis d’animer la carte avec des informations. »

Le logiciel libre Skychart a été utilisé pour récupérer une carte svg du ciel. Puis, « nous avons découvert que le programme GIMP, qui permet la manipulation d’images, possédait une fonction de sélection de couleur, pour pouvoir ensuite la passer vers un canal alpha, qui rend la couleur choisie transparente. Avec nos dessins ainsi formatés, nous avons pu les importer sur le document Inkscape contenant le bout de carte Sky chart et les placer sur leur constellation respective tout en ayant la forme de ces dernières en fond. » Importer la carte comme fond du programme permettant de faire apparaître des bulles interactives ne fut pas simple. Mais le plus informatif était là.

10 Figure 2.2 – Ciel, mes constellations !

11

2.3 Ganymède

Kaïla et Lou

« D’un point de vue géographique notre carte comporte un sens caché … peut-être les adeptes d’astrologie remarqueront-ils cette subtilité ? Effectivement, elle renferme en son sein la constellation du Verseau, signe d’eau, d’où notre idée d’îles entourées d’une mer infinie. Pour justifier ce choix nous allons être honnêtes, cherchant l’inspiration nous sommes tombées dans les tréfonds d’internet ; les étoiles. Comparant les constellations des différents signes du zodiaque nous avons été profondément touchées par l’esthétisme de celle-ci. Trouvant l’aspect de constellation intéressant pour son lien avec la mythologie et en particulier la géographie céleste cela nous a confortées dans notre choix. »

« Nous nous sommes alors munies, dans un premier temps, d’une feuille cartonnée A3 beige, d’une plume et d’encre noire. Nous avons d’abord esquissé les contours des îles au crayon papier, puis nous avons repassé soigneusement chaque trait à l’encre. »

« nous avons, dans un second temps, utilisé un encreur bleu afin d’inscrire nos empreintes digitales de part et d’autre Encrage de la carte de la carte, comme si celle-ci était passée entre les mains de nombreuses générations. Nous avons ensuite versé du café dessus et l’avons marqué des empreintes de la tasse. Finalement, notre touche finale a été de brûler les bords du papier à l’aide d’un briquet allume bougie. Et voilà, notre carte, seulement vieille de quelques semaines, paraissait renfermer les secrets de plusieurs cartographes ayant visité l’archipel de Ganymède au fil des siècles. »

Le rendu final est une carte interactive fournie sur Scratch avec des « bulles noires » d’informations.

12 Figure 2.3 – Carte de Ganymède.

13

2.4 Merveilles de La Chaux-de-Fonds

Margaux et Shanel

« Étant toutes deux des étudiantes au lycée Blaise-Cendrars, il va de soi que la ville que nous fréquentons et connaissons le mieux est La Chauxde-Fonds. Dans le cadre d’un projet d’informatique, nous avons décidé de la mettre à la lumière en référençant ses meilleurs points d’intérêt de notre point de vue d’étudiantes. Voilà pourquoi la carte que nous avons décidé de créer s’intitule ; « Best places in CDF » »

« Nous avons sélectionné vingt endroits pour lesquels nous avons dessiné une icône chacun que nous avons intégré à la carte par la suite, ce qui fut la tache la plus complexe de ce travail. Nous voulions donner un côté créatif et plus divertissant à notre projet, ces créations nous aurons pris environ deux semaines à achever, toutes étant inspirées d’images trouvées sur internet. Dans cette même optique nous avons rédigé, sur le même document LibreOffice que celui précédemment cité, un texte pour chaque point d’intérêt que nous avons intégré à notre carte, pour lui donner un côté ludique. »

« La spécialité [d’Umap] est qu’il est libre de droit, et que par conséquent il permet à n’importe quel utilisateur de créer et modifier des cartes de la façon désirée. » « U-map nous aura servi de base pour notre projet, nous avons sélectionné une carte déjà cartographiée de la Chaux-de-Fonds pour pouvoir la retravailler à notre guise, ce qui nous aura permis de découvrir de nombreuses fonctionnalités du site. La première étape fut de positionner tous nos points d’intérêt qui avaient d’abord une apparence simpliste. » « Continuant d’ajouter de petits détails qui donnent son originalité à notre carte, nous avons décidé d’ajouter quelques liens pour certains endroits afin de pouvoir être directement redirigé vers un site officiel comme par exemple le Musée des Beaux-Arts. Nous n’avons pas pu faire ça pour chaque endroit évidemment, car certains ne possèdent pas de sites conçus à leur effigie. »

14 Figure 2.4 – Les merveilles de la Chaux-de-Fonds.

https://umap.openstreetmap.fr/fr/map/cdf-sous-un-nouveau-jour_828594#14/47.1016/6.8283

2.5 Orientations politiques

Noah et Mattia

« Pour ce projet, nous avons choisi de créer une carte géopolitique du monde montrant les orientations politiques actuelles des leaders des pays. »

« On peut remarquer que beaucoup de dictatures son présentes en Asie centrale. Nous pouvons remarquer que les dictatures gardent leur pouvoir grâce à différentes manières, la plupart malhonnêtes et pas éthiques.

Premièrement, internet est éteint durant les protestations, élections ou conflits dans ces pays, pour empêcher le peuple de se révolter, ce qui est une atteinte à la liberté d’expression, un des droits fondamentaux humains. En général, la censure est beaucoup utilisée par les dictateurs dans ces pays. Elle peut se manifester à travers des lois surtout, mais aussi à l’aide de l’intimidation ou menace. La propagande est aussi utilisée par l’état, pour inciter la désinformation. Finalement, la surveillance de masse est aussi utilisée, en Chine par exemple, pour contrôler les citoyens et punir les potentiels opposants au régime. » Essentiellement, le logiciel QGIS a été utilisé pour récupérer les frontières des pays. « Nous avons aussi utilisé le site NaturalEarthdata.com, permettant d’obtenir une carte sous forme shp, à différentes échelles, dans notre cas nous avons choisi l’échelle la plus vaste, la moins précise. » « Aussi, un autre problème que nous avons rencontré était que les bordures des pays étaient affichées de couleurs différentes que ceux-ci, ce qui n’était pas esthétique, voir image ci-dessus. Le problème venait du fait que les bordures était réglées sur un remplissage dégradé. Nous avons résolu ce problème avec succès, en mettant un remplissage de type normal. » 16 Figure 2.5 – Tendances politiques des leaders du monde.

17

2.6 Panomatricks à l’Hôpital

Robin et Leny

« Premièrement, nous avions choisi de faire une carte en forme de Yin Yang pour symboliser notre amitié car, selon nous, nos deux personnalités relativement bien différentes l’une de l’autre se complètent très bien. Nous avons très vite réalisé qu’il était possible de trouver une encore meilleure signification à cette forme. Certes, celle-ci va vous paraître bien moins sentimentale mais nous sommes tous fortement concernés par la situation dans laquelle nous vivons sur le plan écologique. Nous avons donc décidé de transmettre un message à travers notre carte. » « En-dessus du village il y a un lac […] Le fait que ce lac soit seul et en pleine santé surtout, au Nord-Est de la carte reflète pour nous à quel point la solitude peut parfois faire du bien, cela peut permettre aux gens de se retrouver avec eux-mêmes, se recentrer sur leurs objectifs. » « Passons maintenant au côté gauche de la carte, celui-ci est basé sur un thème moderne, il est majoritairement composé de bâtiments tous identiques ou très similaires, tous rassemblés dans un cadre bien droit, sérieux qui selon nous n’aide pas les gens à trouver une personnalité qui est la leur, une personnalité originale qui n’est pas forcément basée sur des critères que la société impose. »

« Finalement, nous avons décidé d’ajouter un pont qui relie les deux îles présentes sur notre carte pour montrer les similarités que nous pouvons relever entre le passé et les époques durant lesquelles nos ancêtres ont eu la chance de vivre et la nôtre. Ce pont est la touche finale pour encore une fois renforcer notre avis et montrer que le passé que nous imaginons et qui nous est enseigné dans des représentations cinématographiques ou même dans le cadre de cours était plus appréciable que le monde dans lequel nous vivons actuellement. Ce pont se dégrade au fil du temps, plus il s’approche de l’île de la modernité plus il se casse. Le pont représente un fil chronologique, une ellipse qui joint le passé médiéval que nous avons imaginé et notre époque. »

« Nous avons fini par choisir de réaliser notre projet sur le logiciel Inkscape car celui-ci était le logiciel parfait pour ce que nous voulions faire […] » 18 Figure 2.6 – Un Ying - Yang cartographique 19

2.7 Menhirs de Bretagne

Louise et Hayden

« Premièrement, pour la réalisation de ce projet de cartographie libre dans le cadre de notre cours de DF Informatique, nous avons souhaité nous orienter vers la Bretagne, région de France que nous trouvons particulièrement magnifique et pour laquelle nous portons un grand intérêt. Nous hésitions entre deux options possibles : une carte de la Bretagne cartographiée de manière fantastique, dans l’idée d’une carte stylisée et artistique ou alors nous tourner vers un élément folklorique et marquant dans l’histoire de cette région : les menhirs. Après longue réflexion, nous avons opté pour la deuxième option en raison de l’histoire cachée derrière les menhirs que beaucoup de gens ignorent et également afin de pouvoir aider d’éventuels touristes à pouvoir localiser et visiter ces menhirs. Il était aussi question d’avoir la possibilité d’en découvrir plus sur l’histoire de ces monuments mystiques via notre carte. »

« Nous avons tout d’abord tenté de localiser et cartographier nos menhirs avec deux logiciels de dessin : Inkscape et Krita. Sur ces logiciels, nous avons placé une carte vierge libre de droit tirée du Web sur laquelle nous avons essayé de placer des points représentant les menhirs le plus justement possible en nous référant à une carte déjà existante trouvée sur Internet. Les points étant placé à l’œil, le travail était laborieux a effectuer et d’une imprécision totale. Par la suite, nous avons opté pour l’utilisation du site Umap […]. L’idée étant de créer une carte interactive et de classer des informations concernant chaque menhir, ce logiciel a été très efficace grâce à la précision dont nous avons pu faire preuve. Nous avons recherché ces monuments déjà cartographiés sur la carte, puis nous y avons rajouté des points nommant les menhirs ainsi que des informations historiques supplémentaires. La découverte de ce logiciel jusqu’alors jamais utilisé pour aucun de nos précédents travaux a été une expérience très enrichissante. Facile d’utilisation, et parfait pour la création de notre carte regroupant des informations, nous avons pu aisément faire coïncider ces dernières avec précision, ainsi qu’agrémenter nos propos d’images et de liens extérieurs. » 20 Figure 2.7 – Ménihrs de Bretagne.

https://umap.openstreetmap.fr/fr/map/menhirs-de-bretagne_831557#8/48.329/-1.467

2.8 Le corps humain

Zélie et Aurelia

« Pour ce faire, nous avons eu l’idée de représenter le corps humain et ses différents systèmes lui permettant son bon fonctionnement. Nous souhaitions réaliser une carte dynamique, une petite vidéo passant d’une carte à l’autre montrant les informations de façon ludique et dynamique. Notre présentation s’adresse principalement aux enfants. »

« Nous ne pensons pas avoir révolutionné le domaine de la cartographie, car ce genre d’animation se trouvent de plus en plus. En revanche, le fait d’utiliser ce programme dans le cadre de l’école pourrait influencer la vision que l’on peut avoir de l’association de la technologie, de la géographie et de l’art. L’expansion grandissante de l’art digital pourrait grâce à des cartes comme la nôtre rejoindre les bancs des écoles en apportant une autre façon d’enseigner plus ludique. »

« Nous ne voulions pas faire qu’une seule carte, afin d’en créer plusieurs et de les animer, il nous fallait un programme simple à utiliser et accessible. La meilleure option pour la réalisation de notre idée était ce logiciel [Procreate] que l’une d’entre nous avait déjà téléchargé depuis longtemps. Nous avions alors quelques connaissances ainsi qu’un support apporté par le logiciel. » « […] l’étape suivante : la musculature. Nous avons dessiné des muscles à l’intérieur de la silhouette de manière à ce qu’ils puissent se contracter, comme si notre personnage montrait sa force. Puis nous avons procédé de la même façon pour le reste des systèmes, en dessinant à chaque fois le système et en introduisant une petite animation pour montrer sa fonction. […] Le dessin a aussi été un enjeu important, n’étant pas notre matière de prédilection, certains éléments formant l’anatomie de notre personnage, se sont avérés plus compliqués à réaliser surtout pour un minimum de réalisme dans l’articulation des actions et des mouvements. »

Le résultat est une animation présentant plusieurs cartes de l’intérieur du corps humain.

22 Figure 2.8 – Carte corporelle 23

2.9 De la Pangée à nos jours

Olivia et Esteban

« Au bout d’une période, la Pangée nous est venue à l’esprit. Nous vous présentons donc une animation de la position des continents depuis la Pangée jusqu’à nos jours avec l’outil PowerPoint, sous forme de vidéo. »

« Nous avons cherché des cartes de la Pangée sur Wiki Commons, afin d’être sûrs que ces images étaient libres de droit. Nous avons tout de même vérifié sur des sites « plus scientifiques » que celle que nous avons sélectionnée ne montrait pas d’incohérences. Nous tenons à préciser qu’il existe beaucoup de cartes différentes sur la Pangée car, par exemple, elles ne partent pas toutes depuis la même date et ne prennent pas toutes en compte l’Antarctique. »

« Nous avons utilisé la transition « morphose » et le logiciel s’occupait de fluidifier les déplacements des différentes formes. Nous avions juste à changer légèrement leurs positions et leurs formes à chaque nouvelle diapositive pour que le mouvement soit fluide. Au fur et à mesure des diapositives, les continents devaient de plus en plus ressembler à ceux que nous connaissons aujourd’hui. » « Ce travail nous a permis de développer nos compétences techniques et graphiques en PowerPoint. Nous sommes actuellement en mesure d’utiliser une collection d’outils plus large. De plus, nous avons appris que le temps nécessaire pour obtenir des animations complexes sur PowerPoint réussies est bien plus long que ce que l’on imaginait. » Relevons que la qualité du rendu est liée à l’utilisation du logiciel propriétaire, payant et non multi-plateforme Power Point.

24 Figure 2.9 – De la Pangée à nos jours.

25

2.10 Parc d’attractions des rêves

Jocelyne et Vincent

« Notre projet n’est pas vraiment de la cartographie puisqu’il s’agit d’un parc imaginaire. Une vraie carte doit se baser sur la réalité. »

« Notre idée est de concevoir, tels des architectes, un parc d’attractions imaginaire, fictionnel, "idéal", avec des attractions/manèges repris de différents parcs d’attractions existants (Europa-park, Disneyland...). La carte sera comme vue du ciel. Elle est conçue pour pouvoir être lue par des enfants, elle s’apparente au plan qu’on donne aux visiteurs au début de la visite. Le parc d’attractions se compose de deux "îles", deux zones, représentant différents "climats" : En bas se trouve une zone "basses terres". Celle-ci, bien sûr boisée, sera également au bord de l’eau, mais le rivage sera aménagé tout différemment, plus dans l’idée d’un lac de montagne. La deuxième zone, en haut, sera une zone "montagne". Elle sera située un peu en altitude, on pourra y accéder par un téléphérique depuis l’autre zone. Les deux zones seront séparées, on pourra se déplacer de l’une à l’autre par des sentiers pédestres, ou par différents moyens de transport : téléphérique, ascenseur. De nombreux espaces de restauration sont prévus dans chaque zone, de même que des espaces de détente, des bancs, etc. »

« Nous avons commencé par dessiner la carte à la main, au crayon de papier, sur des feuilles de papier format A3. Puis nous avons scanné la carte, afin de pouvoir ajouter des couleurs, la rendre plus visuelle, la retravailler, à l’aide du logiciel Sketchbook. »

« Les cartes « si » Pourtant la carte peut vouloir autre chose. Et pourquoi pas l’impossible ? Si elle se jouait de la réalité elle-même ? Là où les cartes imaginaires nous invitent à l’évasion, à la rêverie, au fantastique, certaines cartes fictionnelles proposent plutôt un monde souhaité, idéal, celui qu’on aimerait voir mis en œuvre. » [16, p. 116] 26 Figure 2.10 – Un parc d’attraction imaginaire.

27

2.11 Pollutions océaniques

Mathilde et Hélène

« Notre projet consiste en la création d’une carte des océans indiquant la pollution plastique et pétrolière de ceux-ci. Nous avons créé une carte du monde interactive sur le site uMap qui précise diverses informations sur la pollution plastique et la pollution pétrolière, mais qui montre aussi les innovations et les projets permettant d’améliorer la situation. La carte indique donc les 5 gyres de plastiques, c’est-à-dire des tourbillons d’eau où le plastique s’accumule, ainsi que différents navires pétroliers qui ont fait naufrage, pour la plupart entre 2022 et aujourd’hui. Elle présente également différents projets qui sont mis en œuvre pour nettoyer les océans. Lorsque l’on clique sur l’une des icônes, des informations, générales ou parfois plus précises, et différentes photos, s’affichent. Le but de cette carte est de sensibiliser, ou du moins informer les gens sur ce que représente réellement la pollution plastique et pétrolière, une problématique dont nous ne sommes pas les premières victimes … »

« uMap permet de choisir plusieurs fonds de carte du monde, notre choix s’est porté sur le fond « OSM Watercolor (Stamen) », car les océans sont représentés dans un bleu très voyant, mettant en valeur notre sujet. Ensuite, après le choix du type de carte, nous avons utilisé la fonction « ajouter un marqueur », que l’on trouve en activant l’édition en haut à droite (émoticône d’un crayon). Cette fonction nous a permis de placer sur la carte les emplacements des bateaux pétroliers, les projets de nettoyage des océans et les gyres. uMap permet ensuite de nommer les marqueurs, de changer leurs formes et leurs couleurs, ainsi que d’ajouter des descriptifs et photos pour les décrire. Nous avons également utilisé la fonction « dessiner un polygone », qui nous a permis de délimiter les zones de gyres, ce qui était nécessaire vu leur grandeur. Malheureusement, créer des cercles sur uMap est une chose impossible. Nous avons dû nous résigner à utiliser la fonction « dessiner un polygone » et tracer nos cercles de façon très approximative, ce qui se remarque assez facilement. » 28 Figure 2.11 – Carte des pollutions océaniques.

      http://u.osmfr.org/m/888913/

2.12 LBC cursus

Maria Clara et Alessia

« En tant que lycéennes en plein milieu de notre cursus, nous avons récemment commencé à avoir un regard rétrospectif sur ces deux dernières années ainsi qu’un regard plus général sur l’ensemble de ce parcours. De ce fait, nous avons constaté, grâce à diverses discussions avec d’autres camarades du lycée, que certains moments marquent ce parcours plus que d’autres. Cette carte découle d’une envie de représenter ce chemin académique de façon réaliste et plus proche des élèves que des brochures d’informations, en démontrant non seulement des faits mais aussi des ressentis et des émotions présentes au long de ces années. »

« Pour ce faire, nous avons décidé de créer une carte regroupant les trois années grâce à un diagramme de Venn, dans lequel chaque ellipse représente une année. Chaque ellipse, ayant une couleur différentes associée à l’année qu’elle représente. Ceci contribue à établir différents ensembles interannuels permettant de voir facilement ce qui appartient à quoi. Ensuite, nous avons recréer et filmer certains moments du cursus pour lesquels nous avons écrit une définition subjective, que l’on peut ouvrir au moyen de bulles interactives disposées selon les années sur la carte. »

« Tout d’abord, la première étape était de créer le diagramme de Venn. Pour ceci, nous avons utilisé le logiciel Inkscape, un logiciel vectoriel qui nous permet de concevoir des ellipses de la taille et de la couleur de notre choix. Sur ce même diagramme nous avons placé les légendes, le tire ainsi que les bulles colorées. Ensuite, nous avons enregistré ce fond en fichier svg. Nous y reviendrons plus tard. La deuxième étape était de filmer les vidéos. Pour ce faire, nous avons tourné à l’aide de deux iPhone 11. Chaque vidéo faisant environ neuf secondes. » « [Pour lancer les vidéos] nous allons rendre la carte interactive en faisant clic droit sur chaque bulle de façon à que la rubrique Create Link puisse être utilisée sur cette dernière, nous avons placé le lien : window.open("https ://inkscape.org","_blank") ; dans lequel nous avons remplacé https ://inkscape.org par le nom de nos vidéos. Ce processus a été fait 19 fois, pour chaque bulle. » 30 Figure 2.12 – Carte, logiciel et vidéo 31

2.13 Comédies musicales

Florane et Kelyan

« Tous deux dans le monde artistique, nous possédons une passion commune : La Comédie Musicale. La première idée qui nous est venue à l’esprit, concernant cette proposition, a été de choisir 20 spectacles et d’en répertorier les tournées mondiales officielles. Nos choix étaient constitués des comédies musicales suivantes : West Side Story, The Phantom of the Opera, The Lion King, Les Misérables, Wicked, Moulin Rouge ! et Hamilton. » « Ce travail a été intéressant à réaliser car nous nous sommes rendus compte que les tournées ne se déroulaient principalement qu’en Amérique du Nord, Oceanie, Europe Occidentale et quelques grands pays d’Asie tel le Japon, la Chine ou la Corée du Sud. Mais aucune tournée ne passe ni par l’Afrique ni par l’Amérique du Sud.

Et ça c’est bien dommage. »

« Notre carte a été réalisée sur le logiciel de cartographie uMap. Nous avons établi un code couleur pour chacune des comédies musicales. Pour chaque spectacle, nous avons choisi une citation célèbre de la comédie musicale en question, que nous avons inscrite dans la carte. » 32 Figure 2.13 – Comédies musicales mondiales.

https://umap.openstreetmap.fr/fr/map/les-comedies-musicales_892510#2/36.7/29.5

2.14 Cartographie sur un orchestre symphonique

Edgar et John

« La cartographie d’un orchestre symphonique permet de visualiser la disposition spatiale des musiciens sur scène. Cela permet non seulement aux auditeurs de mieux comprendre la configuration de l’orchestre, mais aussi aux musiciens de s’orienter et de se positionner correctement pour une performance optimale. En connaissant l’emplacement de chaque musicien et de chaque section instrumentale, il est plus facile de coordonner les mouvements et les interactions entre les membres de l’orchestre. Ainsi la disposition des musiciens dans un orchestre symphonique a un impact direct sur l’acoustique de la salle de concert. En cartographiant l’orchestre, il est possible de prendre en compte les caractéristiques acoustiques de la salle et d’optimiser la disposition des musiciens en conséquence. Cela permet d’obtenir un meilleur équilibre sonore, une meilleure projection sonore et une meilleure fusion des différents pupitres instrumentaux. »

« Nous avons choisi de faire notre carte sur Powerpoint mais pas par souci de facilité. Créer une carte sur PowerPoint peut être extrêmement utile dans de nombreuses situations. […] En résumé, réaliser notre carte sur PowerPoint nous a donné de nombreux avantages, notamment une visualisation claire des informations que nous voulions mettre en avant, une communication visuelle efficace et une personnalisation de notre carte. Nous avons pu faire la carte que nous souhaitions sur un logiciel que nous connaissons bien et que nous savons utiliser. » « Tout est important. On aurait pu envisager faire une deuxième partie dans notre carte sur la géographie de la salle. Avec ses murs, ses sièges mais aussi avec le pris des places suivant leur emplacement. » Relevons que la qualité du rendu est liée à l’utilisation du logiciel propriétaire, payant et non multi-plateforme Power Point.

34 Figure 2.14 – Un orchestre cartographié.

35

2.15 Voyage au Tadjikistan

Manon et Louis

« Le Tadjikistan peut apparaître comme un choix particulier. C’est un petit pays, souvent oublié, et il paraît compliqué au premier regard de créer un projet intéressant là-bas. Notre défi était donc de faire découvrir une culture éloignée et inconnue, en la respectant, et de la rendre intéressante au yeux de lycéens suisses. Nous avons décidés de sortit des trajets touristiques afin de créer quelque chose de plus véritable, en se rapprochant des autochtones. Le Tadjikistan est un pays très montagneux, relativement pauvre , et donc très peu cartographié. Cela a donc représenté en grand enjeu de notre travail. Malgré ça, il regorge d’une diversité culturelle et de magnifiques paysages, vous aurez l’occasion de les voir sur notre carte. »

« La première chose a souligné est le manque de représentation des routes sur les cartes auxquelles nous avons accès sur internet. Les routes montagneuses sont souvent très petite, et n’apparaissent par exemple pas sur Google maps. Parfois, après avoir trouvé l’endroit d’une attraction touristique, nous avons du dessiner les routes uniquement grâce à une photo. Cela est un travail considérable et entache donc à la précision de notre travail. Nous sommes tout de même satisfaits, car avec beaucoup d’application, nous sommes arrivés à un projet relativement complet. Le deuxième point, c’est le manque d’activités touristiques, ou du moins d’activités touristiques répertoriées.En effet, la majorités des attractions sont desservables sur place. Il a donc fallu beaucoup de recherches. Nous nous étions mis la contrainte de suivre les envies de nos camarades, en leur demandant les activités qui les intéressaient. Nous sommes donc passés tantôt d’un hôtel de luxe à une nuit chez l’habitant, tantôt d’une sortie escalade à un concert au conservatoire national du Tadjikistan. »

« Nous avions besoin d’un carte déjà conçue sur laquelle nous allions poser des éléments qui nous intéressaient. Un logiciel libre serait la meilleure option et donc notre choix s’est porté sur Open Street Map [Ndr Umap]. Nous avons choisi la carte du logiciel qui affichait les routes et nous avons posé les points avec les informations trouvées sur Google (images, noms de lieux, informations complémentaires). Nous sous sommes servis du système de couches et de couleurs pour en attribuer une pour chaque élève. Plus une couche pour les routes tracées avec le système de vecteurs dans une couleur à part. Ensuite nous avons implémenté des images dans les points avec la fonction activer cliquant. » 36 Figure 2.15 – Voyage au Tadjikistan.

https://umap.openstreetmap.fr/fr/map/projet-tadji_881939#7/38.947/433.828

2.16 Niveaux de vie

Mathilde, Margaux et Nathanael

« Mais qu’est-ce ces 4 niveaux de vie ? Pour le comprendre il faut se plonger dans le livre du médecin conférencier Hans Rosling, Factfulness. Dans ce livre, Hans Rosling par du constat que notre vision du monde est biaisée par des instincts qui trompent nos analyses. Selon lui, nous avons tendance à toujours imaginer que le monde va de pire en pire, alors qu’en réalité, même s’il n’est pas parfait, il va de mieux en mieux. Pour appuyer ses propos, Hans Rosling se base sur plusieurs principes qu’il va réutiliser à chaque chapitre. Dans ces principes il y a les 4 niveaux de vie. »

« Il se trouve que dans le livre d’Hans Rosling, il y a une myriade de graphiques, statistiques en tout genre, mais il n’y que très peu de carte. En l’occurrence, il n’y en a pas pour les 4 niveaux. Par ce constat, nous avions pensé qu’il serait bon de mettre sous forme cartographique les pays et leurs différents niveaux, à l’aide d’un code couleur, pour mieux visualiser les propos de Rosling. »

« Nous avons, durant ce travail, rencontrés plusieurs problèmes. Voici les deux principaux : Le premier a été de comprendre comment changer les couleurs, le tout a été fait dans un tableau ou chaque pays de la carte avait plusieurs réglages. Le second a été de pouvoir prendre les informations nécessaires pour créer, grâce au logiciel, les explications des couleurs. Pour se faire, nous avons dû supprimer pratiquement tout ce qui se trouvait dans le tableau des attributs, sauf une colonne, que nous avons sélectionné pour la copier dans une fonction qui crée des légendes. » Malheureusement, alors que QGIS est capable d’un export de qualité, celuici s’est fait par une simple capture d’écran, réduisant la qualité de la carte présentée.

38 Figure 2.16 – Les différents niveaux de vie.

39

2.17 Maison de rêve

Diane et Meike

« Une carte métaphoriquement : Notre projet est différent d’une carte normale car ; il n’a pas de légende, C’est un plan en trois dimensions et, le plus important, une carte est une représentation du réel alors que notre plan représente une maison imaginée. C’est dans l’utilité que notre projet devient une carte. Car une des utilités d’une carte, est de trouver son chemin, en évitant les obstacles, pour arriver à destination et notre carte représente la destination comme motivation. Notre projet sert de lumière dans le chemin qu’est notre vie, pour se battre, pour arriver à un objectif ; réussir à faire bâtir notre maison. Une carte de par sa précision : Notre plan 3D est une carte avec les informations de mesures des pièces, de leurs nombres et de leurs formes et les différents matériaux sont tous choisis. La précision du plan est un attrait qui vient de la cartographie. Nos motivations étaient de créer quelque chose de différent et qui transporte nos identités avec. C’est pour cela que nous n’avons pas fait une carte répertoriant quelque chose qui n’avait pas de sens pour nous. Nous voulons montrer un avenir possible et serein à travers une maison simple et pratique. Notre maison est un symbole de futur désirable dans des temps incertains. »

« Le second logiciel home by me nous a convaincues pour plusieurs raisons. La raison la plus importante, c’est qu’en tant que logiciel vectoriel paramétrique nous pouvions choisir toutes les mesures et modifier tous les objets facilement. Mais surtout le logiciel était simple d’utilisation, pratique et totalement gratuit. Tous les objets que nous avons mis sont des objets réels dans le commerce, ce qui rajoute une touche de réalisme. Nous avons donc avancé et terminé sans aucun problème notre projet avec le logiciel Home by me. » Relevons que Home by me est un logiciel propriétaire dont les fonctionnalités ne sont pas gratuites. Il appartient à Dassaut Systems et sans accepter ses cookies, il ne fonctionne pas correctement. Son équivalent libre, Sweet Home 3D est lui exempt de ces défauts.

40

Figure 2.17 – Une maison de rêve.

https://home.by.me/fr/project/meike.vanewijk-2081/maison-de-reve

Chapitre3

Développements

Cet atelier de cartographie et informatique appelle de multiples remarques dont voici les principales.

3.1 Investissement

Tout d’abord, il faut relever une bonne mobilisation des élèves dans la construction des cartes. On peut dire que la raison de cet investissement a tenu dans la liberté de choisir leur sujet. En effet, ils ont ainsi pu exprimer leur propres préoccupations.

Malheureusement, il faut aussi remarquer que les sujets choisis pouvaient soit mal se prêter à la représentation cartographique, soit permettre de détourner le travail cartographique lui-même au profit de techniques déjà maîtrisées par les étudiants sur lesquelles ceux-ci vont se focaliser en minimisant l’importance de leur carte. Ainsi, le recours à la vidéo, le recours à PowerPoint pour préparer une présentation orale et même le recours au texte dans le cas des comédies musicales ou des cartes de points d’intérêt. Si la création de cartes passe nécessairement par l’utilisation de contenu qu’il faut parfois créer par soi-même, à l’instar de la pertinence du choix des informations à présenter sur une carte, il est nécessaire de parvenir à un juste équilibre entre le travail portant sur le contenu et celui relatif à la représentation spatiale de celui-ci. On peut regretter par exemple un gros travail de représentation de l’évolution des continents au détriment d’une nécessaire légende chronologique. Il faut reconnaître cependant la difficulté de beaucoup de jeunes à anticiper les problèmes informatiques. En voyant ainsi trop grand, il perdent de vue des éléments qui sont pour eux au départ secondaires, mais qui manquent finalement.

3.2. Connaissances  Chapitre 3. Développements

Une autre tendance est au rejet de la complexité. Dès qu’un logiciel présente de la complexité, il est simplement déclaré mauvais et soit on en change au profit d’un autre qu’il faut réapprendre, soit il devient la raison de mauvais résultats. On pouvait reprocher autrefois à son crayon d’être le mauvais outil pour éviter d’avoir à se reprocher sa mauvaise utilisation. Aujourd’hui, il en est de même avec les logiciels dont l’utilisation ne va pas immédiatement de soi. La qualité des travaux tient donc finalement dans la pugnacité nécessaire pour parvenir au but, dans le choix des sujets et dans une bonne perception des différentes étapes nécessaires pour parvenir au but dans un temps donné.

3.2 Connaissances

Les étudiants de ce cours de cartographie et informatique avaient préalablement suivi un cours d’informatique générale. Diverses notions comme les communications, la sécurité, les bases de données, les types de fichiers et la programmation des logiciels ont été abordées à l’occasion de ce premier cours. Ce cours a été utile essentiellement en ce qui concerne la différence entre images vectorielles et raster (bien qu’il faille préciser que le mot raster est propre à la cartographie et que son identité avec celui de bitmap sensé être connu ne va pas de soi) et par une rapide introduction aux logiciels propres à ces deux catégories d’images que sont Gimp et Inkscape. Malgré cela, il faut bien reconnaître que la spécificité des logiciels de cartographie (Qgis, Umap, OpenStreetMap) demande un temps d’apprentissage de leurs principales fonctions. Cela implique une nécessaire curiosité, un esprit d’initiative pour les découvrir qui ne va pas non plus de soi. Idéalement, une introduction plus approfondie que celle réalisée serait intéressante pour les élèves ayant choisi ces logiciels spécifiques.

Ce constat légitime un cours d’informatique plus particulièrement orienté sur une discipline et l’étude des logiciels qui lui sont associés dans leurs fonctionnalités. Car, avant de se rendre compte du rôle des algorithmes pour masquer les blancs des cartes thermiques (voir [14, « Du globe virtuel au terrain : une plongée dans la fabrique des données naturalistes. Plus particulièrement la figure « Algorithme pour la génération d’une carte de chaleur », pp. 190, 1901 » ]), il faut bien se rendre compte des fonctions existantes dans ce type de logiciels et donc pour une discipline spécifique.

Si le sens d’un cours de cartographie pour des élèves d’option spécifique physique et application des mathématiques reste parfaitement défendable comme un exemple de l’adaptation des logiciels en fonction des besoins et en tant que support de la valeur indéniable de l’interdisciplinarité, il est évident que le lien qui pourrait exister entre la discipline étudiée au cours d’informatique et l’option spécifique serait un atout important pour une spécialisation des études. Reste à savoir si, dans une école de culture générale, celle-ci est à promouvoir.

Chapitre 3. Développements  3.2. Connaissances

3.2.1 Cartographiques

Les connaissances cartographiques préalables des élèves étaient relativement modestes. Si l’utilisation de cartes était familière pour eux, leur conception théorique ne fut abordée que par l’introduction faite pendant le cours de cartographie et informatique.

3.2.2 Informatiques

Essentiellement, deux logiciels de cartographie ont été utilisés : Umap et Qgis. Ces deux programmes sont très différents.

Umap

Le premier est basé sur OpenStreet-Map et est relativement simple. Il permet de construire une surcouche géométrique à différents fonds de cartes. On peut ainsi positionner des POI, soit des points d’intérêt qui peuvent être munis d’une description écrite ou imagée, des lignes ou des surfaces (voir les figures 2.4, 2.7, 2.11, 2.13 et 2.15).

Ce programme est apprécié en raison de sa simplicité et du fait qu’il permet de partager le résultat sans difficultés.

Mais, si on peut constater à la figure 2.13 l’utilisation de plusieurs couleurs pour référencer les comédies musicales, aucune image ni surtout légende n’est fournie dans ce travail. Au contraire, de la carte des menhirs de Bretagne (figure 2.7) qui présente la légende de la figure 3.1 à l’arrivée sur le site, mais ne discri-Figure 3.1 – Une légende à l’ouverture du site

.

mine pas les éléments par des POI colorés.

Ainsi, les possibilités de mise en forme des informations sur Umap ont-elles été finalement peu utilisées. On trouve dans un seul cas (voir figure 2.11) des éléments graphiques de type polygonaux pour décrire les « continents » de plastique. En outre, les élèves se sont plaints de ne pouvoir remplacer ces polygones par des cercles qui leur semblaient plus appropriés. Mais aucune discussion ni sur la pertinence d’une représentation des surfaces de microplastiques par des cercles, ni sur la symbologie de ces éléments n’est apparue dans leur travail final. Quant à des recherches sur la manière de pouvoir la changer, rien n’a été fait. On constate ainsi non seulement une approche des logiciels fondée sur l’utilisation exclusive d’un logiciel, sans aller chercher plus loin ou sans se renseigner sur comment importer des éléments provenant d’autres logiciels, mais d’avantage que cela, cette approche exclusive est limitée par les outils fonctionnels sans avoir à comprendre quoi que ce soit. S’il est nécessaire d’aller chercher dans les différents paramètres, beaucoup abandonnent en assumant leur non-compétence ou en la reprochant au programme.

Dans le cas d’Umap, la réponse au problème de gestion de la forme des surfaces tient dans une extension nommée Leaflet dont une introduction se trouve en annexe A, page 51. Mais des outils plus simples permettant de réaliser un cercle par exemple existent

aussi : https://www.freemaptools.
com/radius-around-point.htm. Ils né-

cessitent cependant de comprendre comment exporter/importer ces formes et donc de la lecture.

Qgis

Ce logiciel est un monument dédié à la cartographie. Les possibilités qu’il offre sont si nombreuses que son abord en devient difficile. Il est cependant incontournable pour produire des cartes papier et, moyennant une petite introduction, il est possible de le faire utiliser par des étudiants.

Les travaux des paragraphes 2.5 et 2.16 ont ainsi été réalisés avec Qgis. Comme dans le cas du travail sur l’urbanisation neuchâteloise (paragraphe 2.1), le premier problème a été de trouver le fond de carte adéquat. Or, les immenses possibilités de Qgis en terme de types de couches ont nécessité une aide pour trouver un fond de carte exploitable par Qgis des frontières des pays. La différence entre couche raster et vectorielle étant nouvelle pour les étudiants, les recherches n’ont pas été faciles.

Une fois le fond de carte trouvé, c’est le logiciel qui fut source de problèmes. Avec un grand nombre de pays, trouver où attribuer la bonne couleur à chacun et changer manuellement celles-ci a mené à des interrogations intéressantes sur les moyens de le faire automatiquement et donc sur la présence d’une base de données qui pourrait indiquer la couleur à partir d’un chiffre, par exemple.

Parallèlement, avec autant de pays, le problème de la longueur de la légende s’est posé et consécutivement celui de l’enclassement par niveaux de couleurs. Les élèves ont ainsi pu se rendre compte de l’importance d’une légende bien construite et de la difficulté à la réaliser.

Dans le cas du travail sur les niveaux de vie (paragraphe 2.16), les difficultés à découpler la légende de la liste des couleurs des pays ont été telles (pourtant quelques clicks) que les élèves ont proposé de la faire « manuellement » en prenant une capture d’écran de la carte et en y superposant l’image d’une légende réalisée avec un logiciel de dessin. Si ce n’est pas ce qui a été réalisé finalement, le document remis était une capture d’écran, montrant une très mauvaise compréhension des finalités de Qgis.

Graphismes et bases de données

Autant Umap que Qgis sont des logiciels essentiellement orientés interface graphique et non ligne de commande. Soit dit en passant, ce n’est pas le cas de Leaflet, sans pour autant que le constat suivant ne trouve de solution avec celuici en raison de l’utilisation du langage JavaScript, orienté serveur, qui déporte le problème sur l’échange de fichiers.

À part pour les travaux réalisés avec Qgis, qui ont mené les élèves à interroger et à modifier la base de données associées aux fonds de cartes utilisés, il faut constater que la plupart des travaux réalisés se sont surtout focalisés sur le graphisme des cartes au détriment de l’analyse de données.

De ce point de vue, c’est le travail de Maëlle et Charlotte (paragraphe 2.1) qui sort du lot. En effet, l’analyse spatiale y est couplée avec une analyse des données approfondie et même une critique de celle-ci très intéressante.

C’est aussi le travail de Mathilde et Hélène sur les pollutions océaniques (paragraphe 2.11, page 28) qui se base sur une analyse d’événements bien référencés sans pour autant être en relation directe avec une représentation de l’ampleur des phénomènes, par exemple en dimensionnant les « continents » de plastiques sur la base d’éléments factuels.

Dans une moindre mesure, et ce n’est probablement pas un hasard, les travaux utilisant Qgis ont aussi abordé les données permettant la représentation, par les couleurs politiques et les niveaux de vie.

Pour les autres travaux, si l’analyse de données est moins évidente, elle transparaît cependant en arrière plan comme dans les cartes Umap où les POI choisis traduisent évidemment la recherche de données et une analyse des éléments choisis. On peut penser aux menhirs, aux parcours touristiques, comédies musicales ou merveilles chaux-de-fonnières.

Enfin, certains travaux, comme Ganymède, Panomatricks et le Parc d’attractions, se sont simplement abstenus de données pour privilégier la représentation graphique. On est là plus dans une cartographie artistique, même si un élément cartographique typique comme la légende est présent.

Conclusion^{Chapitre4}

4.1 Évolution

Le cours de cartographie et informatique va se poursuivre. Si les deux premières classes y ayant participé ont rendu des travaux de qualité diverses, tous furent intéressants à divers point de vue.

Les consignes initiales étaient de réaliser informatiquement une carte, de la présenter par écrit et oralement. C’est tout. Il faut remarquer que malgré des consignes aussi minimales, les sujets abordés ont toujours été pertinents pour réaliser une carte.

Le présent compte rendu des travaux réalisés a cependant mis en évidence des points problématiques qui nécessitent une précision des consignes :

— Plusieurs cartes ont été livrées en basse résolution de par l’utilisation d’un logiciel de présentation par exemple, inadapté pour un rendu papier ou en raison d’une méconnaissance des différences de résolution entre écran et papier qui est très présente chez des élèves qui font souvent des copies d’écran avec leur smartphone et n’impriment plus rien. Pour les inviter à mieux prendre conscience de ces problèmes, il sera nécessaire d’imposer un document final sous la forme d’une image pouvant être imprimée en A3 par exemple.

— Plusieurs cartes comprennent des éléments dynamiques, comme des photos, des vidéos ou des POI sur lesquels il faut cliquer pour voir l’information. Or généralement, dans la présentation écrite, seul un lien permet d’accéder à cette information dynamique, ce qui rend l’analyse et la conservation des cartes difficile. Il sera donc nécessaire de préciser que l’ensemble des éléments caractéristiques de la carte doit figurer dans le compte rendu écrit. Pour une vidéo, des images de cellesci peuvent être fournies ; pour une carte cliquable, les éléments développés devront être présents à l’écrit.

4.2. Conclusion  Chapitre 4. Conclusion

— Le compte rendu du travail informatique réalisé pour obtenir les cartes est généralement très lacunaire, voire quasi inexistant. La raison en est simple : la description des outils utilisés ne fait pas sens. Un peintre ne parlera pas de ses pinceaux, un scientifique décrira peu ses outils d’analyse, un géographe ne détaillera pas comment ont été faites les cartes dont il se sert.

Or, aujourd’hui, l’éventail des outils disponibles permet de s’interroger sur la pertinence de leur utilisation, sur leur pérennité pour la conservation des cartes réalisées et sur l’éthique intellectuelle qui les sous-tend. Si aujourd’hui on doit s’interroger sur la nécessité de nos déplacements, sur l’adéquation des véhicules avec ceuxci et sur leurs impacts sur l’environnement, on doit aussi en cartographie répondre des choix des outils informatiques de production des cartes (voir l’introduction à l’ouvrage [3], Les « coulisses » des cartes à l’époque moderne ou Opérations cartographiques [6]).

Un important compte-rendu des étapes et des moyens de construction doit donc être disponible et il faudra insister sur l’importance de ce travail auprès d’élèves peu habitués à lui donner de la valeur.

4.2 Conclusion

La valeur des production de cet atelier de cartographie informatique est manifeste. Il faut remercier les étudiants pour leur intérêt et leur créativité. Mais il faut aussi constater les difficultés qu’ils ont à faire reposer leurs cartes sur des éléments factuels autant qu’à justifier leur travail informatique.

Leaflet^{AnnexeA}

Umap est un logiciel particulièrement attrayant car il permet d’obtenir relativement rapidement un résultat convenable, c’est-à-dire essentiellement des marqueurs de POI (points d’intérêts) de différents types avec des bulles de texte et d’images. On peut aussi mettre des lignes et des surfaces faites de points. Il permet également de gérer différents calques. Il permet aussi de travailler sur des sites mis à disposition par une communauté comme https://umap.

openstreetmap.fr ou https://

umap.osm.ch/fr/ . Ces sites rendent la carte immédiatement disponible et il est possible, moyennant inscription, de travailler sur des cartes mises à disposition de tous tout en verrouillant les informations qui s’y trouvent. Cependant, certains de ces sites ne disposent que d’un nombre limité de fonds de carte et surtout les éléments mis à disposition par Umap restent limités. Ce n’est pas pour autant un défaut. Au contraire, il simplifie la création de cartes. Toutefois la réalisation de cartes particulières n’est pas aisée et il peut devenir souhaitable de découvrir des logiciels plus développés.

Par exemple, avec Umap, la taille des icones n’est pas modifiable, il n’existe pas de formes directement circulaires …

Ainsi, pour de la cartographie orientée vers le web, des solutions plus évoluées existent. Cependant, celles-ci sont évidemment moins facile à mettre en œuvre. L’une de celles-ci, entre les deux extrêmes que sont Umap et le triptyque PostGIS, OpenLayers et MapServer (voir [1]), se nomme Leaflet.

Différents documents d’introduction sont disponibles sur le net. Parmi ceuxci, il faut relever Des cartes sur votre site d’Eskimon (voir [4]) qui est non seulement intéressante de par la clarté de son introduction, mais aussi par le fait que celle-ci est fournie en pdf, epub et tex sous licence libre. De même pour une utilisation avancée de Leaflet avec le

                                  même site https://zestedesavoir.
                                  com/rechercher/?q=leaflet et l’ar-

ticle Leaflet - Utilisation avancée (voir [8]). Ces document sont assez bien faits pour qu’il ne soit pas nécessaire de pro-

A.1. Structure  Annexe A. Leaflet

duire ici une véritable introduction à Leaflet.

Nous allons plutôt nous concentrer sur un exemple particulier. Il s’agit de la carte des pollutions océaniques présentée ci-dessus (voir 2.11). L’objectif n’est certainement pas une critique de ce travail qui est pour nous excellent. Il s’agit de présenter ce que Leaflet peut apporter à un travail où, de l’aveu même des auteures, les outils proposés par Umap ont montré leurs limites, tout en présentant rapidement la philosophie de Leaflet.

A.1 Structure

Leaflet est une surcouche Javascript à un site ordinaire écrit en HTML et CSS. Il est donc nécessaire de disposer d’un serveur web pour y intégrer les pages réalisées avec lui. Ainsi la structure de la carte sur les pollutions océaniques est-elle celle du code A.1. Est associée à la page HTML5, une page CSS3 et un fichier Javascript. La feuille de style associée est celle présentée dans le code A.2. Quant au javascript, il se trouve dans le code A.3. Le code A.3 permet de placer sur la page un fond de carte Watercolor de Stamen sur des données OpenStreetMap par instanciation de l’objet map. Cela est réalisé à la ligne 18. Mais il est aussi prévu la possibilité de choisir un fond de carte OpenStreetMap à la ligne 20.

1 < !DOCTYPE html>
2 <html>
3 <head >
4 < t i t l e >Oceans de p l a s t i q u e s < /
t i t l e >
5 <meta http−equiv= "Content−Type"
content= "t e x t/html;
charset=utf8 ">
6 <meta name= "viewport" content= "
width=device−width ,
i n i t i a l − s c a l e = 1 ">
7 < l i nk href= "css /moncss . css "
type= "t e x t/css " rel= "
s t y l e s h e e t ">
8 < /head >
9 <body id= "body">
10 <h1>Carte des p o l l u t i o n s
p l a s t i q u e s < /h1>
11 <div id= "map">< /div>
12 < footer > Copyleft< /footer >
13 < /body >
14 < !−− Stamen Watercolor −−>
15 < !−−<s c r i p t type= "t e x t/
j a v a s c r i p t " src= "h t t p s : / /
stamen−maps .a . s s l . f a s t l y . net
/j s /t i l e . stamen . j s ?v1 . 3 . 0 "><
/s c r i p t > −−>
16 < !−− L e a f l e t −−>
17 < l i nk rel= "s t y l e s h e e t " href= "
h t t p s : / /unpkg .com /leaflet@1
. 9 . 4 / d i s t /l e a f l e t . css "
i n t e g r i t y ="
sha256−p4NxAoJBhIIN+
hmNHrzRCf9tD/
miZyoHS5obTRR9BMY="
c r o s s o r i g i n = ""/>
18 <s c r i p t src= "h t t p s : / /unpkg .com /
leaflet@1 . 9 . 4 / d i s t /l e a f l e t .
j s " i n t e g r i t y ="

sha256−20nQCchB9co0qIjJZRGuk2

/Z9VM+kNiyxNV1lvTlZBo="
c r o s s o r i g i n = "">< /s c r i p t >
19 < !−− Le j s −−>
20 <s c r i p t src= "j s /monjs . j s ">< /s
c r i p t >
21 < /html>

Listing A.1 – La partie HTML5 de la carte.

Annexe A. Leaflet  A.2. Marqueurs

1 #map {
2 / ∗ l e s dimensions de l a carte sur
t o u t l e viewport ∗ /
/ ∗w i d t h : 100vw; h e i g h t : 100 vh; ∗ /
4 w i d t h : 100%;
h e i g h t : 80vh;
6 border: s o l i d black 1px;

}

8 svg {background: transparent ; }

Listing A.2 – La feuille de style de la

carte.

Le choix du fond de carte Watercolor est celui du groupe des pollutions océaniques. Il est maintenu ici, mais on se demandera par la suite s’il est possible d’en changer au profit d’un fond représentant mieux le fond océanique. En effet, c’est en partie ce dernier qui contraint les mouvements d’eau et construit ainsi les gyres.

A.2 Marqueurs

La notion de marqueurs recouvre essentiellement deux types d’éléments :

— Les éléments graphiques dont la taille est indépendante de l’échelle. Il s’agit d’éléments dont la taille ne va pas varier lors d’un zoom sur la carte. Ces éléments doivent toujours conserver leur taille à l’écran. On peut dire qu’il n’ont de relation avec la carte que dans leur positionnement.

— Les éléments graphiques dont la taille est dépendante de l’échelle. Il s’agit d’éléments d’étendue fixe sur le territoire. En zoomant vers une

1 document . getElementById( ’body ’ ) .
onload = function ( ){
2 / / La carte centrée et zoomée
center : [55 , 0 ] ,
4 zoom : 2
} ); / /. setView ( [ 0 , 0 ] , 2) ;
6 / / Dé c l a r a t i o n des fonds
var baselayers = {
8 osm :L. t i l e L a y e r( ’ h t t p s : / / {s } .
t i l e . openstreetmap . org / {z } / {
x } / {y } .png ’ , {
maxZoom : 19 ,
10 a t t r i b u t i o n: ’&copy ; <a h r e f ="
h t t p: / /www. openstreetmap .
org /c o p y r i g h t" >
OpenStreetMap </a> ’
} ),
12 stamen :L. t i l e L a y e r( ’ h t t p s : / /
stamen − t i l e s −{s } .a . s s l .
f a s t l y . net /watercolor / {z } / {
x } / {y } .jpg ’ , {
maxZoom : 19 ,
14 a t t r i b u t i o n: ’Map t i l e s by <a
h r e f ="h t t p s : / /stamen .com" >
Stamen Design </a> , under CC
BY 4 . 0 . Data by <a h r e f ="
h t t p: / /www. openstreetmap .
org /c o p y r i g h t" >
OpenStreetMap </a> , under <a
h r e f ="h t t p: / /
creativecommons . org /
l i c e n s e s /by/4.0" >CC BY SA</
a>. ’

} ) 16 } ;

/ / Ajout du fond par dé f a u t
18 baselayers . stamen .addTo(map) ;
19 / / Ajout du menu de changement de

fonds

20 L. c o n t r o l . l a y e r s (baselayers , null
, {p o s i t i o n : ’ t o p r i g h t’ ,
collapsed : false } ).addTo(
map) ;

Listing A.3 – Le javascript de la carte avec ses deux fonds.

A.2. Marqueurs  Annexe A. Leaflet

échelle détaillée (grande échelle), il grandissent et en dézoomant vers une vaste échelle (petite échelle), il deviennent de plus en plus petits.

Pour illustrer différents types de marqueurs disponibles avec Leaflet, la figure B.3 présente deux cartes à deux échelles différentes. Essentiellement, quatre types de marqueurs sont présents :

— des lignes de latitude avec des marqueurs textuels liés,

— des rectangles dont les sommets sont donnés en coordonnées [latitude, longitude],

— des cercles dont les centres sont en latitude-longitude, mais dont les rayons sont donnés en mètres et des rectangles pleins dont les coordonnées sont exprimés en pixels d’écran.

L’ensemble de ces marqueurs permet de se rendre compte de la variété des problèmes qu’on peut rencontrer lors du placement de figures sur une projection de Mercator dont l’emprise (la zone visible à l’écran) change en fonction du niveau de zoom.

A.2.1 Lignes

Commençons par expliciter les lignes et leurs marqueurs. Le code A.4 en présente la structure. La variable latlngs déclare deux points en latitude-longitude qui seront les extrémités de la ligne (ligne 1). On construit ensuite dans la variable polyline une ligne placée selon la variable latlngs et de couleur verte qu’on

1 var l a t l n g s = [ [ 8 0 , −80] ,[80 ,

8 0 ] ] ;

2 var p o l y l i n e = L. p o l y l i n e ( l a t l n g s ,
{c o l o r : ’green ’ } ).addTo(map)
3 . b i n d T o o l t i p( "Équateur : l a t i t u d e
0°",
4 {permanent : true ,
d i r e c t i o n : ’ r i g h t ’ ,
6 o f f s e t : [ 6 0 , 0 ]
7 } );

Listing A.4 – Lignes de latitude et marqueurs texte.

ajoute à la carte (ligne 2). À ce niveau, la ligne apparaît sur la carte.

En utilisant la méthode bindTooltip sur cette polyline (ligne 3), on peut alors définir le texte du marqueur et ses caractéristiques, dont le décalace de celui-ci par rapport au centre de la ligne (l’offset de la ligne 6). Attention, ce dernier n’est pas spécifié en degrés de latitudelongitude, mais en pixels de l’écran.

Ainsi définis, ces lignes et marqueurs auront un comportement de deux types. La ligne, ainsi que la position du marqueur, resteront parfaitement fixes sur la carte à toutes les échelles (selon tous les facteurs de zoom). Le texte, par contre ne suivra pas le zoom. En d’autres termes, sa taille restera fixe par rapport à l’écran.

Toutes les commandes utilisées pour réaliser ces lignes font partie du jeu de commandes de Leaflet (son API, l’interface de programmation de l’application). Aucun plugin n’est nécessaire et toutes ces commandes sont décrites dans la documentation. Mais attention à l’ambi-

Annexe A. Leaflet  A.2. Marqueurs

(a) Petite échelle  (b) Grande échelle

Figure A.1 – Projection de Merkator

guïté de la notation [..., ...] dont les composantes peuvent s’exprimer en latitudelongitude ou en pixelssurX-pixelssurY (notez l’inversion puisque le premier nombre n’est pas la longitude).

A.2.2 Rectangles

Les rectangles dont le fond est transparent sont aussi des éléments de l’API de Leaflet. Les paramètres nécessaires à leur construction étant les coordonnées latitude-longitude des sommets, on voit apparaître leur déformation typique de la projection de Mercator. Celle-ci se fait en latitude, mais aussi en longitude, contrairement à ce qu’on pourrait penser en raison du parallélisme équidistant des méridiens. En effet, si la déformation en latitude est évidente, la longueur réelle des côtés « horizontaux », sur la carte (c’est-à-dire sur la projection) d’égale longueur, est inférieure en réalité pour le côté de plus grande latitude à celle de plus faible latitude. Les instructions permettant de tracer ces rectangles sont celles du code A.5.

1 var polygon = L. polygon ( [
2 [ 0 , 0 ] , [ 2 0 , 0 ] , [ 2 0 , −20] ,[0 , −20]
] , {c o l o r : "green "} ).addTo(map) ;

Listing A.5 – Les rectangles en latitudelongitude.

Relevez que la couleur du fond transparent est celle par défaut.

A.2.3 Cercles

Les cercles présentent un élément différent des rectangles, en ce sens que, si leurs centres sont positionnés en latitude-longitude (tous les 20°), leur rayon est identique pour chacun et donné en mètres. Le résultat graphique sur la carte est une série de cercles dont le rayon augmente avec la latitude. Si, à l’instar des rectangles, on comprend bien que cela soit le cas avec la latitude, on pouvait s’attendre à ce qu’il n’en soit pas ainsi avec la longitude. Comment expliquer que cela ne soit pas le cas ? Dans une

A.3. Pollutions  Annexe A. Leaflet

1 var rayon = 1100000
2 var c e r c l e = L. c i r c l e ( [ 3 0 , −50] , {
3 c o l o r : ’yellow ’ ,
4 f i l l C o l o r: ’#101010 ’ ,
5 f i l l O p a c i t y: 0.5 ,
6 radius : rayon
} ).addTo(map) ;

Listing A.6 – Les rectangles en latitudelongitude.

projection de Mercator, les méridiens sont des lignes droites équidistantes. Ce qui n’est évidemment pas le cas sur le globe terrestre, puisque tous ses méridiens se rejoignent aux pôles. La distance vraie entre deux méridiens diminue donc avec la latitude. En effectuant une projection de Mercator qui « redresse » les méridiens pour qu’ils soient parallèles les uns aux autres, on augmente donc les distances sur la projection en fonction de la latitude, ce qui a pour effet d’augmenter le rayon du cercle entre deux méridiens en même proportion qu’entre deux grands cercles. Le résultat se présente donc sous la forme de cercles dont le rayon augmente avec la latitude.

Les instructions permettant de tracer ces cercles sont celles du code A.6. Relevez que la couleur du fond transparent est définie à la ligne 4.

Les deux éléments principaux de ce code sont la définition du rayon (ligne 1), de même valeur pour tous les cercles, et la création du cercle (ligne 2) avec son centre latitude-longitude et ses propriétés comme le rayon.

A.2.4 Rectangles SVG

L’API de Leaflet est limitée dans les formes de base utilisables que sont le point, la polyline (dont la droite), le polygone, le cercle et le rectangle.

Pour des formes plus complexes, on est donc naturellement amené à penser à l’utilisation du dessin vectoriel comme SVG (Scalable Vector Graphics), puisque les navigateurs modernes supportent maintenant bien ce langage.

Le problème tient dans le fait que définir une ligne droite dans un langage vectoriel ne peut se faire que sur la projection. En effet, à la surface d’une sphère, si les deux extrémités sont données en latitude et longitude, une droite n’en n’est plus une.

Leaflet utilise donc trois systèmes de coordonnées qu’il faut bien comprendre sans quoi des surprises de représentation peuvent apparaître.

A.3 Pollutions

Les problèmes posés par la carte des pollutions réalisées par Mathilde et Hélène sont nombreux :

1. la petite échelle de la carte qui la déforme assez pour que la représentation des gyres en soit affectée,

2. le fond de carte qui devrait permettre de comprendre les gyres,

Annexe A. Leaflet  A.3. Pollutions

3. la forme des gyres qui physiquement est difficile à connaître et graphiquement difficile à bien représenter pour qu’elles correspondent au mieux à des courants océaniques,

4. le mouvement de celles-ci et

5. les informations sur celles-ci, comme leur emprise, la quantité de plastique présente, la dimension de leurs éléments, …

Tous ces problèmes se traduisent par des difficultés techniques qui sont toutes caractéristiques des productions cartographiques.

A.3.1 Échelle

La petite échelle de la carte utilisée pour la carte des pollutions constitue la première interrogation. Dans quelle mesure influence-t-elle la représentation des gyres ? La réponse à cette question tient dans la connaissance du type de projection utilisée par défaut par Leaflet. Toutes les projections cartographiques sur le web utilisent la même projection dite Webmercator, Pseudomercator, Mercator sphérique et, officiellement, WGS 84 Web Mercator^{a}. Cette projection est complexe, car s’il s’agit bien d’une projection de Mercator, elle utilise des données provenant d’un géoïde non sphérique, contrairement à ce que sa dénomination peut faire penser. De plus, elle n’est ni conforme, ni équivalente, c’est-à-dire qu’elle ne conserve respectivement ni les angles, ni les surfaces, alors que la transformation de Mercator est conforme. Vous trouverez en annexe C une description plus détaillé de la projection de Mercator, dont notamment son indicatrice de déformation des surfaces. Car, la transformation de Mercator comme wGS 84 Web Mercator, déforme les formes hors équateur, surtout au niveau des régions de grande latitude. Ainsi, représenter une gyre sur une carte à petite échelle ne permettra pas de la représenter correctement de par la nature de la projection utilisée.

A.3.2 Fond de carte

Le fond de carte choisi pour cette carte des pollutions plastiques est Watercolor (voir [17]). Si celui-ci est certainement très esthétique et bien choisi par contraste avec le propos du travail, il n’est pas un fond permettant de mettre en évidence la raison des gyres. Après des recherches pour trouver un fond de carte libre de droit utilisable avec Leaflet (ou même Umap) qui représente le fond des océans, il se trouve que si des projets pour réaliser une telle carte sont en cours, il n’y a pas actuellement de fonds, c’est à dire de tuiles pour les différentes échelles, disponibles dans ces conditions. Une image des fonds marins ne suffit évidemment pas.

A.3.3 Forme

À ce stade, il convient de présenter ce qu’il est possible de faire avec Leaflet pour aller plus loin que la carte des pol-

a. Elle est aussi dénommée Google Web Mercator, mais étant non conforme, elle n’est semble-t-il officiellement pas reconnue (voir Wikipedia)

1 var rayon = 3000000
2 var cercle1 = L. c i r c l e ([ −45 ,
−130] , rayon , {
c o l o r : ’black ’ ,
4 f i l l : ’ t r u e ’ ,
f i l l C o l o r: ’#101010 ’ ,
6 f i l l O p a c i t y: 0.2 ,
} ).addTo(map)
8 . b i n d T o o l t i p( "Gyre du Pacifique
Sud ",
{permanent : true ,
10 d i r e c t i o n : ’ l e f t ’ ,
o f f s e t : [ 0 , 0 ]
12 } );

Listing A.7 – La gyre Pacifique Sud.

lutions océaniques. La figure A.2, page 59, la présente sous une forme statique. Cette carte comprend plusieurs éléments qui vont du plus simple au plus complexe. Commençons par la Gyre du Pacifique Sud. Il s’agit simplement d’un cercle dont on voit la déformation en longitude relative à la projection de Mercator. Le code correspondant est celui du listing A.7. On peut remarquer que la méthode bindTooltip a été utilisée pour permettre de placer une étiquette de texte au centre de la gyre, étiquette affichée de manière permanente et sur la gauche de celui-ci.

Ensuite, avec La gyre de l’océan Indien se trouve tout d’abord un simple marqueur par défaut, ouvert sur le texte de description. Le code de ce marqueur est celui du listing A.8. Puis vient un élément bien plus intéressant. Il s’agit de l’ovale qui délimite la gyre. C’est un élément svgOver-

1 var marker1 = L. marker ( [ − 4 2 . 5 , 6 9 ] )
.addTo(map)
2 . bindPopup( "La gyre de l ’océan
i n d i e n . ")
.openPopup ( ) ;

Listing A.8 – Le marqueur de l’océan indien.

lay de Leaflet. C’est-à-dire qu’il s’agit d’une courbe en SVG, comme le mondre le code A.9. Outre la définition de la boite qui va contenir la figure, définie par ses coins et la variable bounds1, ce code est intéressant par le contenu de la variable svgElement. La ligne 6 déclare l’unité de la grille de représentation du schéma, ici une grille de 100x100. Vient ensuite le dessin luimême, défini à la ligne 7, qui code en svg l’élément <ellipse /> par la position de son centre (cx et cy), la longueur de ses demi-axes (rx et ry), mais aussi par son angle de rotation (-40°) relativement à son centre (50 60). De plus, les éléments de couleur de la ligne et d’opacité du fond (fill-opacity) sont fournis comme attributs du code svg de l’ellipse.

Enfin, vient un élément très intéressant. Il s’agit de la forme de la gyre de l’Atlantique Sud. Comme précédemment, c’est un élément SVG, mais celuici a été voulu plus complexe qu’une forme de base de l’API SVG, comme l’ellipse ou le rectangle. Il s’agit d’un chemin. En SVG, un chemin est d’abord formé de segments constitués chacun de deux Figure A.2 – La carte statique des gyres océaniques.

59

1 var coin20_0 = L. latLng(0 , 23) ;
2 var coin0_20 = L. latLng( −65 , 115) ;
var bounds1 = L. latLngBounds (
coin20_0 , coin0_20 ) ;
4 var svgElement = document .
createElementNS ( "h t t p: / /www.w3
. org /2000/svg ", "svg ") ;
svgElement . s e t A t t r i b u t e( ’xmlns ’ ,
"h t t p: / /www.w3. org /2000/svg ")

;

6 svgElement . s e t A t t r i b u t e( ’viewBox ’
, "0 0 100 100 ") ;
7 svgElement . innerHTML = ’< e l l i p s e
transform="r o t a t e(−40 50 60) "
cx="50" cy="60" rx="45" ry
="30" stroke ="black " stroke −
opacity ="1" f i l l − opacity
="50%"/> ’ ;
8 var forme = L. svgOverlay (
svgElement , bounds1 ) ;
forme .addTo(map) ;

Listing A.9 – L’ellipse de l’océan indien.

points. L’un est l’origine du segment et l’autre son arrivée. À chacun de ces deux points est associé un point supplémentaire nommé poignée de Bésier. La droite qui lie le point à sa poignée de Bésier définit la tangente de la courbe au point considéré. Il est ainsi possible de créer une courbe avec quatre points uniquement.

Pour mieux comprendre la situation, étudions le code permettant de tracer la courbe représentant la gyre de l’Atlantique Sud. Il est donné par le listing A.10.

Les premières lignes ont déjà été expliquées précédemment. Seules les lignes 4 et 5 sont à commenter.

1 var svgElement = document .
createElementNS ( "h t t p: / /www.w3
. org /2000/svg ", "svg ") ;
2 svgElement . s e t A t t r i b u t e( ’xmlns ’ , "
h t t p: / /www.w3. org /2000/svg ") ;
svgElement . s e t A t t r i b u t e( ’viewBox ’ ,
"0 0 100 100 ") ;
4 svgElement . innerHTML = ’<path d="M
85 ,15 C 100 ,40 85 ,85 15 ,85 C
0 ,85 50,−55 85 ,15" stroke ="
black " stroke − opacity ="1" f i l l
− opacity="0%"/ >\
5 <image x l i n k: h r e f ="images /
Mollweide_Cycle . g i f " x="30"
y="20" height ="50" width
="50" / >’ ;
6 var forme = L. svgOverlay (
svgElement , bounds1 ) ;
forme .addTo(map) ;

Listing A.10 – La gyre de l’Atlantique Sud.

Et encore, la seconde donne simplement un exemple de placement d’une image animée de type GIF sur la carte. Elle n’appelle pas vraiment de commentaires.

La première quant à elle est plus complexe car elle présente un élement de type path dont le premier paramètre est difficilement compréhensible. Les autres sont évidents. Commentons donc ce premier paramètre qui comporte les éléments suivant :

d="M 85,15 C 100,40 85,85 15,85 C 0,85 50,-55 85,15"

Pour les comprendre, il faut au préalable se rappeler que la taille de la viewbox, précisée à la ligne 3, est de 100x100. Le chemin commence par un unique point (M) situé aux coordonnées x,y de la viewbox 85,15, soit en haut à droite (le système d’axes utilisés en SVG à l’origine en haut a gauche, x pointant vers la droite et y vers le bas). Viennent ensuite trois couples de nombres après la lettre C qui représentent successivement la poignée de Bésier 100,40 du point M, la poignée de Bésier du point terminal du segment et le point terminal du segment. Le point 15,85 est donc le point terminal du premier segment et 85,85 sa poignée de Bésier associée. Le second C permet de construire le second segment. Comme aucun point M n’est présent juste avant, c’est le dernier point du segment précédent qui constitue l’origine du second 15,85, dont la poignée de Bésier est 0,85. Le point final étant 85,15 et sa poignée de Bésier associée 50,-55, la courbe est fermée.

Pour vous rendre compte que ces points dessinent bien la courbe de la gyre de l’Atlantique Sud, faites un schéma avec les différents points en reliant les poignées de Bésier à leur point.

Vous pouvez aussi consulter le site de La Cascade [18] qui vous présentera clairement d’autres commandes path SVG.

A.3.4 Mouvement

Un premier élément de mouvement se trouve dans l’image animée GIF au centre de la gyre de l’Atlantique Sud. Ce qu’on ne voit pas sur la figure A.2, page 59, c’est que cette image est animée. Pendant la consultation du site, elle se comporte comme un petit film.

Mais, avant de présenter comment superposer à la carte un véritable petit film, signalons, avec l’exemple de la gyre du Pacifique Nord, qu’il ne faut pas négliger la possibilité de représenter le mouvement sans mouvement, c’est à dire avec des éléments vectoriels (au sens de flèches) qui sont depuis longtemps utilisés par la cartographie. Ici, la transparence, rendue disponible par l’utilisation du format d’image PNG, permet de superposer à la carte une image présentant les courants océaniques dans cette zone. Pour autant que cette image ait été créée selon une projection de Mercator (ce qui n’est pas ici le cas), elle peut être un outil particulièrement adapté à la représentation des mouvements marins. Le code de placement de l’image est classique et est précisé dans le listing A.11. Bien entendu, l’idéal serait de récupérer les données (position, sens, direction et grandeur) numériques de ces courants et de les projeter sur la carte dans une couche vectorielle et non par une image bitmap. C’est possible, mais cela dépasse le cadre de cette petite présentation de Leaflet.

Encore plus intéressant est la vidéo représentant les mouvement océaniques de la gyre de l’Atlantique Nord. Les données sont celles de la NASA (voir [5]). La vidéo qui se trouve sur la carte est une simulation du mouvement de bouées en Atlantique Nord, basée sur l’étude de bouées réelles. Comme le dit la NASA :

We distributed thousands of particles (virutal buoys) aroung the world, then ran a si-

1 var imageUrl = ’images /
North_Pacific_Gyre .png ’ ;
2 var e r r o r O v e r l a y U r l = ’ h t t p s : / /cdn
−icons −png . f l a t i c o n .com
/512/110/110686.png ’ ;
var a l t T e x t = ’Wikipedia : h t t p s
: / /commons . wikimedia . org /w i k i/
F i l e : North_Pacific_Gyre .png ’ ;
4 var latLngBounds = L. latLngBounds
( [ [ 6 6 . 6 , −254.5] , [ −15.5 ,
−105.2]]) ;
var imageOverlay = L. imageOverlay (
imageUrl , latLngBounds , {
6 opacity : 1 ,
e r r o r O v e r l a y U r l: errorOverlayUrl ,
8 a l t : a l t T e x t,
i n t e r a c t i v e : true
10 } ).addTo(map)
. b i n d T o o l t i p( "Gyre du Pacifique
Nord", {
12 permanent : true ,
d i r e c t i o n : ’ r i g h t ’ ,
14 o f f s e t : [ 0 , 0 ]
} );

Listing A.11 – La gyre Pacifique Nord.

mulation based on the ECCO2 flow vectors to see where those particles would move to over time. These simulated particles were colored blue/cyan based on the paricle’s speed. Notice that over time garbage patches develop in each of the ocean basins. [5]

Pour une comparaison entre le modèle numérique et les bouées réelles, voyez la référence. Comme le propos ici n’est pas de discuter des éléments scientifiques qui expliquent les gyres, mais de montrer que Leaflet permet différentes représentations de celles-ci, de la vidéo sur l’en-

1 var videoUrls = [
2 ’images /

G y r e A t l a n t i q u e N o r d P e t i t P e t i t

.

mp4 ’ ] ;
3 var e r r o r O v e r l a y U r l = ’ h t t p s : / /cdn
−icons −png . f l a t i c o n .com
/512/110/110686.png ’ ;
4 var latLngBounds = L. latLngBounds
( [ [ 5 7 , −100] , [ 3 . 5 , 1 3 ] ] );
var videoOverlay = L. videoOverlay (
videoUrls , latLngBounds , {
6 opacity : 0.6 ,
7 e r r o r O v e r l a y U r l: errorOverlayUrl ,
8 i n t e r a c t i v e : true ,
autoplay : true ,
10 muted: true ,
p l a y s I n l i n e : true ,
12 keepAspectRatio : false
13 } ).addTo(map) ;

Listing A.12 – La gyre de l’Atlantique Nord.

semble des gyres mondiales, seule la gyre de l’Atlantique Nord a été extraite par découpage avec le logiciel libre Open-Shot et seule la partie simulation a été sélectionnée.

La manière d’introduire cette vidéo sur la carte est présentée dans le code A.12.

Plusieurs vidéos peuvent être lancées successivement. Dans ce cas, elles doivent être spécifiées dans le tableau videoUrls de la ligne 2, séparées par une virgule.

La méthode le l’API Leaflet pour représenter la vidéo sur la carte est videoOverlay, visible à la ligne 5. Elle prend pour arguments le tableau de la/des vidéos, la boite des positions supérieure-gauche et inférieure-droite de la vidéo et des propriétés comme l’opacité (ligne 6) ou le ratio d’aspect (ligne 12). Ce dernier est très utile dans le cas d’une carte intégrée dans la vidéo qui n’est pas conforme à Mercator. Il permet de déformer au mieux la vidéo pour que les contours des côtes collent au mieux à ceux de la carte sous-jacente.

On constate finalement une grande simplicité à gérer des éléments dynamiques avec Leaflet, que ce soit une image comportant des vecteurs, une vidéo de type GIF ou des vidéos classiques, qui dans tous les cas supportent un réglage de l’opacité fort bienvenu sur le fond de carte.

A.3.5 Informations

Notons finalement que les possibilités offertes par Leaflet en terme de présentation de l’information sont très vastes. C’est le cas en particulier pour la gestion de l’information à l’intérieur des popups qui s’ouvrent à l’accueil sur la carte ou par un clic sur l’un de ses éléments. Ce point n’a pas été abordé ici, pas plus que la personnalisation des icônes de ceux-ci. Le site de Leaflet (voir [10]) et en particulier ses onglets Tutorials et Docs vous en diront plus.

Voyons cependant comment mettre en place une légende.

Le code permettant d’obtenir la légende présentée à la figure A.3 est donné dans le listing A.13.

On voit dans ce code plusieurs éléments intéressants.

1 / / Dé f i n i t i o n de l a légende
2 function getColor (d) {
3 return d === ’Océ aniques ’ ? "
#5bc6da " :
4 d === ’ T e r r e s t r e s ’ ? "
#e5c7a9 " :
d === ’ P o l a i r e s ’ ? "#
dadcd2 " :
6 d === ’Dé s e r t i q u e s ’ ? "
#e2ddcf " :
"#cd9474 ";

8 }

var legend = L. c o n t r o l ( {p o s i t i o n
: ’ b o t t o m l e f t ’ } );
10 legend .onAdd = function (map) {
11 var d i v = L. DomUtil. create ( ’ d i v
’ , ’ i n f o legend ’ ) ;
12 l a b e l s = [ ’<strong >Surfaces </
strong > ’ ] ,
categories = [ ’Océ aniques ’ , ’
T e r r e s t r e s ’ , ’ P o l a i r e s ’ , ’Dé
s e r t i q u e s ’ , ’Autres ’ ] ;
14 for (var i = 0; i < categories .
length ; i ++) {
d i v . innerHTML +=
16 l a b e l s . push ( ’<span s t y l e ="
d i s p l a y : i n l i n e − block ;
width:10 px; height :10 px;
border − radius :5 px;
background : ’+ getColor (
categories [ i ] )+ ’;" > </span
> ’+ categories [ i ] );

17 }

18 d i v . innerHTML = l a b e l s . j o i n ( ’<
br> ’ ) ;
19 return d i v ;

20 } ;

legend .addTo(map) ;

Listing A.13 – Une légende.

Figure A.3 – Une légende

Tout d’abord, à la ligne 2, une fonction permettant de retourner une couleur en fonction d’une catégorie de surfaces (Océaniques, Terrestre, …). La grammaire utilisée est celle d’un test ( ?) de différents cas dont la couleur finale correspond à l’ensemble des cas non prévus.

Puis, vient la déclaration d’un élément de contrôle de Leaflet mis à la ligne 9 dans la variable legend.

Si la légende est ajoutée à la carte à la ligne 21, ses éléments sont construits précédemment dans la méthode onAdd de la variable legend, ligne 10. À la même ligne, celle-ci est constituée par une fonction anonyme avec pour paramètre la carte (map).

Dans cette fonction, on crée à la ligne 11 un div en y ajoutant les classes info et legend. Puis, on initialise la variable labels avec l’entête de la légende et on déclare une variable categories, qui va contenir les éléments de la légende. Enfin, on créée une boucle ajoutant à l’entête de la variable label chaque ligne de la légende. Chacune de celles-ci est construite de la même manière, ligne 16 : un span dont les bords sont arrondis pour donner un cercle et dont la couleur correspond à celle de chaque élément des catégories, suivi du teste correspondant à la catégorie en question. Enfin, à la ligne 18, on crée un retour à la ligne à la fin de chacune de celles-ci.

Finalement le div construit est retourné à la carte à la ligne 19.

L’exemple de cette légende permet de comprendre comment on construit une légende, mais aussi d’envisager des légendes dynamiques avec des couleurs qui changent en fonction des cas, car si la variable categories peut contenir du texte, elle peut aussi être numérique.

A.3.6 Grands cercles

Signalons encore ici la faculté de Leaflet à utiliser très simplement des modules.

Par exemple, on peut présenter l’utilisation du module Leaflet.greatCircle.js (voir [9]), permettant de représenter correctement de très grands cercles dans la projection de Mercator.

L’installation du module est très simple. Elle se fait par importation du script javascript de celui-ci à la fin du fichier index.html, après Leaflet, comme le montre le code A.14.

Puis, pour créer un grand cercle, on utilise la syntaxe du code A.15.

Annexe A. Leaflet  A.4. Conclusion

1 <s c r i p t src= "j s /L e a f l e t .
g r e a t C i r c l e . j s ">< /s c r i p t >

Listing A.14 – Importation du module greatCircle.

1 / / Dé f i n i t i o n d ’un grand c e r c l e
avec l e p l u g i n L e a f l e t .
g r e a t C i r c l e permettant
2 / / des grand cercles correctement
dé f i n i s dans l a p r o j e c t i o n de
Mercator .
var grandcercle = new L.
g r e a t C i r c l e ([ −30 , 110] , {
radius : 7000000}) ;
4 grandcercle .addTo(map) ;

Listing A.15 – Une légende.

La construction du grand cercle se fait à la ligne 3 en spécifiant la latitudelongitude et le rayon du cercle.

Le résultat est donné à la figure A.4. On y voit en bleu des cercles si déformés au pôle Sud qu’ils ne se referment pas. Évidemment, l’échelle est très petite de façon à voir le monde dans son ensemble et c’est la raison pour laquelle le cercle se répète.

A.4 Conclusion

Au terme de ce parcours des possibilités offertes par Leaflet, et plus que cela avec notamment les cartes proposées par Mathilde et Hélène, la carte des pollutions océaniques (carte de la figure 2.11, page 29) ou ci-dessus la carte statique des gyres océaniques (figure A.2, page 59), la question est de savoir ce que nous avons appris.

Au départ, la démarche engagée par Mathilde et Hélène nous a fait découvrir (ou nous à engagé à nous rappeler) que les gyres de plastiques ou les catastrophes pétrolières sont une réalité bien peu réjouissante qui se cache dans les océans et qu’il est bon d’en tenter la localisation sur une carte à petite échelle pour mieux en comprendre l’importance en terme de surface.

Puis, aux regrets de Mathilde et Hélène de ne pas avoir pu en préciser les formes, nous nous sommes intéressés aux techniques de représentation des éléments cartographiques d’une carte sur le web. Les modes de représentation des objets sur la carte et les variations d’échelle que ce type de carte implique nous ont alors fait découvrir plusieurs langages (Javascrip, Leaflet, SVG, …) nécessaires à la constitution des cartes.

Mais, l’étude de ces langages, des formes mises à disposition pour la représentation, nous ont interrogés sur la pertinence de celles-ci dans le cas de gyres. De simples cercles nous sommes passés à une représentation du mouvement des particules plastiques dans les courants océaniques. Encore ne sommes-nous pas allés à une représentation en profondeur, c’est-à-dire dans la troisième dimension des couches liquides océaniques. Mais on s’est bien rendu compte que la compréhension des mouvements des masses d’eau pouvait trouver une explication graphique dans une représentation des fonds océaniques. A la recherche d’une telle représentation, on a pu voir la puis-

A.4. Conclusion  Annexe A. Leaflet

Figure A.4 – De très grands cercles corrects en projection de Mercator.

sance de Leaflet pour changer à la volée le fond de carte et découvrir que, malheureusement, il n’existe pas encore de représentation des fonds océaniques tuilée pour permettre le zoom des cartes web. Au final donc, les nécessités de la représentation cartographique nous ont poussés à approfondir de manière conséquente nos connaissances sur le fond des phénomènes que la carte exemplifie. On peut ainsi citer et souligner le titre de l’avant-propos de l’ouvrage La carte invente le monde (voir [2] élaboré au sein de l’Université de Lille).

La carte pour tracer un chemin dans des mondes de connaissances. [2, Avantpropos]

AnnexeB

Xia et Map Wraper

Faire une carte ne suppose pas toujours une relation à un territoire réel. La carte peut être imaginaire. Cela résout et pose un problème.

Généralement un territoire imaginaire n’est pas pensé de manière courbe. Ainsi, les opérations de projection n’ont pas lieu d’être. Aucune géodésie n’est nécessaire. Parfois, même aucun système de coordonnées géographiques ou cartographiques n’est nécessaire ou alors il est inventé de manière assez simple pour qu’il ne s’agisse que d’une grille aisément représentable. On résout ainsi un problème complexe de cartographie.

Par contre, cette absence à la géométrie du territoire pose un problème inattendu. En effet, les SIG (systèmes d’information géographiques) interactifs ne sont paradoxalement pas prévus pour utiliser un fond de carte plan qui ne provienne pas d’un ensemble de couches permettant le zoom. Ils sont donc inadaptés à la création de cartes imaginaires interactives.

Pour de telles cartes, il est impossible d’utiliser Umap, par exemple, puisqu’aucun choix de fond de carte entièrement personnalisé n’y est possible.

Avec un degré de complexité important, QGIS ou Leaflet pourraient permettre une telle représentation (voir par exemple [13] pour des cartes astronomiques avec Leaflet). Mais l’investissement étant alors important, nous allons présenter ici deux autres solutions plus simples.

B.1 Xia

L’idée est ici d’abandonner totalement les SIG et d’utiliser un logiciel de dessin. Les besoins de l’interactivité font que celui-ci doit être vectoriel, comme on va le voir. Le choix se porte donc naturellement sur Inkscape et l’un de ses modules permettant d’exporter les zones interactives créées avec celui-ci sous la forme d’un site web : Xia.

B.1. Xia  Annexe B. Xia et Map Wraper

B.1.1 Installation

L’installation de Xia est très simple puisque le module existe sous la forme d’un paquet deb (il n’est pas dans les dépôt de Raspberrypi). Il suffit donc de le télécharger sur le site de Xia Fundraiders [19] pour linux et d’utiliser apt.

B.1.2 Utilisation

Après avoir redémarré Inkscape, Xia est installé.

Avant de voir précisément comment l’utiliser, il faut en comprendre le fonctionnement général. L’idée est de charger dans Inkscape une image de fond de type raster, du png, par exemple. C’est sur celle-ci que va se trouver toute la carte. Finalement, le fonctionnement de Xia-Inkscape est très proche de celui des SIG, puisque les couches de fond de carte sont des raster et que les éléments qu’on interroge sont vectoriels.

Puis, à l’aide des outils d’Inkscape comme les formes (rectangles, ellipses, polygones fermés, arcs, …), on définit les zones que le survol de la souris permettra de mettre en évidence et qui présenterons au clic des informations dans le bandeau latéral.

La figure B.1 présente la page d’accueil créée par Xia sur la base de la carte du parc d’attraction des rêves présenté au paragraphe 2.10, page 26.

On y voit le bandeau latéral dans lequel des informations générales sur le site peuvent documenter la carte et dans Figure B.1 – À l’ouverture du site .

Figure B.2 – Mise en évidence d’une zone au survol de la souris.

.

lequel viendront des informations sur les objets de la carte qui seront cliqués.

On y voit aussi la carte sur laquelle se trouve en haut une image cliquable et un polygone opaque cliquable qui devient transparent au survol de la souris (voir figure B.2).

Le polygone peut être rendu opaque sous Inkscape en lui attribuant un fond totalement blanc.

Ce qu’on ne voit pas avec la zone circulaire à gauche du labyrinthe, qui a été créée à l’aide de l’outil ellipse d’Inkscape

Annexe B. Xia et Map Wraper  B.1. Xia

(a) Au survol.  (b) Au clic.

Figure B.3 – Le polygone du labyrinthe.

et à laquelle on a attribué un fond entièrement noir.

De cette manière, cette zone devient transparente au survol et est cliquable mais non zoomable, contrairement à la zone du labyrinthe.

En effet, on voit celle-ci au survol de la souris à la figure B.3a et à la figure B.3b le zoom se produisant quand on lui clique dessus.

Parallèlement, on voit aussi sur la figure B.3b dans le bandeau latéral gauche, les informations associées à la zone du labyrinthe.

Finalement, sur la figure B.4, on peut voir une zone elliptique placée sous la zone de l’image en haut à gauche. On voit ainsi qu’il est possible d’ordonner la superposition des éléments graphiques créés avec Inkscape pour que certains soient entièrement cliquables et d’autres pas.

Figure B.4 – Une des îles sous l’image. .

B.1.3 Techniquement

Voyons maintenant comment procéder pour obtenir ce résultat.

On voit sur la figure B.5 l’ensemble des formes géométriques superposées à l’image de fond constituant la carte. Celles-ci sont une ellipse pour l’îlemontagne (en haut), un rectangle pour l’île des basses terres (en bas), un rectangle avec une rotation vers la droite pour le téléphérique entre les deux îles, l’image du dragon en haut, le polygone blanc en bas à droite, l’ellipse noire au milieu et le polygone transparent entou-Figure B.5 – Les formes utilisées.

.

rant le labyrinthe. Toutes ces formes ont été créées avec Inkscape et sont fermées. À l’instar du polygone blanc sélectionné, dont on voit à droite que les propriétés comportent un titre et une description, toutes ces formes ont ces deux catégories des propriétés remplies. Ce sont elles qui vont présenter leur contenu dans le bandeau latéral gauche une fois cliquées, comme on le voit dans la figure B.3b.

Précisons enfin le comportement des trois éléments : polygone blanc, ovale noir et rectangle du téléphérique. En choisissant le blanc pour couleur de fond d’un élément, on permet un masquage de l’image de fond qui devient transparent au survol et dont les propriétés s’affichent au clic dans le bandeau latéral. En choisissant le noir pour couleur de fond d’un élément, on ne masque pas la zone sous-jascente et on permet un clic éventuellement déclencheur d’événements, comme un compteur par Figure B.6 – Les formes utilisées. .

exemple, sans présenter les propriétés de l’objet. En ne choisissant pas de couleur de fond, on ne masque pas la zone sousjascente et on permet un clic présentant les propriétés de l’objet.

Après avoir défini les zones cliquables et leur propriétés : titre et description, on peut réaliser l’étape finale, c’est-à-dire utiliser Xia à partir de ce qu’on a réalisé sur Inkscape. Avant cela, il semble bon d’enregistrer le travail en SVG. Cela fait, comme le montre la figure B.6, on se rend dans le menu Extensions, sous Exporter et on sélectionne Xia.... La figure B.7 montre la fenêtre de Xia qui s’ouvre alors. Elle est très simple car le seul onglet important est celui des Options.

Dans celui-ci on trouve tout d’abord une case à cocher intitulée Single file. Si elle est cochée, celle-ci permet d’obtenir un fichier HTML uniq ue dont les Figure B.7 – Les formes utilisées.

.

librairies nécessaires pour que la page créée fonctionne sont appelée dynamiquement. Il sera alors donc nécessaire d’avoir une connexion internet pour les charger et la page sera dépendante des serveurs les fournissant.

Si elle n’est pas cochée, alors Xia va construire une arborescence de site classique avec les librairies et votre site fonctionnera même sans connexion au réseau. Votre site sera alors plus lourd et sera construit autour de plusieurs fichiers.

On trouve ensuite Select export avec un menu déroulant présentant Sidebar, Material, Game1Click et GameDragAnd-Drop. Il s’agit de modèles pour différentes utilisation de Xia, notamment des jeux. Ici, seul le modèle Sidebar nous intéresse.

Enfin, on trouve Target folder. Il s’agit du répertoire dans lequel Xia va mettre les fichiers. Celui-ci doit donc être créé préalablement.

Ces éléments choisis, on exécute Xia en cliquant sur Appliquer. Cela fait, on peut ouvrir le site en allant dans son répertoire et en ouvrant le fichier .html qui s’y trouve.

Remarquons que le nom du fichier HTML est celui des métadonnées des propriétés du document du menu fichier d’Inkscape. En remplissant celles-ci (les métadonnées) de manière plus approfondies, on construit aussi les informations sur le document accessibles via l’icône i entouré en bas à droite de la figure B.1. À droite de celle-ci se trouvent aussi une icône permettant de mettre le site en plein écran et une autre pour le recharger.

Quant aux information apparaissant dans le bandeau latéral au chargement de la page d’accueil, ce sont celles des propriétés de la carte, c’est à dire de l’image de fond.

La gestion des informations des informations apparaissant au chargement du site comme celles constituant les informations de chaque élément, peut être finement réalisée avec un langage descriptif MARKDOWN supporté par Xia, permettant des titres, l’ajout de liens et d’images, … comme le montre la fin du manuel en français (voir [11]) qu’il faut bien étudier.

Xia est un logiciel très intéressant pour créer des cartes sans géométrie. Évidemment, il est contraignant dans la forme produite et si on ne connaît pas le langage HTML, il sera impossible d’en

B.2. Map Wraper  Annexe B. Xia et Map Wraper

Figure B.8 – Transformation d’une image en carte.

changer. Cependant, son couplage avec Inkscape est très intéressant et sa facilité d’utilisation va permettre de réaliser des cartes cliquables tout-à-fait pertinente et dont la publication sur internet ne posera que peu de problèmes (attention, le code créé par Xia n’est pas responsive et les cartes qu’il produit peuvent ne pas fonctionner sur certains écrans). Si on accepte de mettre quelque peu la main dans le code HTML, les sites fournis par Xia seront une bonne base pour une personnalisation plus avancée qui passera par la maîtrise du HTML.

B.2 Map Wraper

Entre Xia et Leaflet se trouve un logiciel permettant de reporter une image sur un fond comme celui d’OpenStreet-Map. Il s’agit de Map Wraper (voir [12]). Celui-ci nécessite une authentification. Si vous disposez d’un compte sur OpenStreetMap, alors, vous pouvez utiliser celui-ci. La figure B.8 présente le site après la connexion. On y voit un onglet Upload Map qui va permettre d’y envoyer une image ou une carte. Un menu déroulant présente les options Is a map et Not a map. En choisissant « Not a map » et une image à charger, on peut créer un projet de géoréférencement de cette image. On peut penser à une carte papier scannée ou à une carte imaginaire mais qui doit être localisée quelque part sur un fond réel. Il faut cependant bien faire attention à ce qu’on envoie sur Map Warper, car les projets sont par défaut publiques et donc visibles par tout le monde. Un fois l’image sur le site, il est possible de la positionner sur un fond de carte. L’onglet Rectify présenté sur la figure B.9, est là pour cela. Il y est possible en effet de créer des points de correspondance entre l’image et la carte de fond comme on le voit bien sur la figure. Pour cela, il faut utiliser l’outil Add control points en forme de goutte. Pour une

Annexe B. Xia et Map Wraper  B.2. Map Wraper

Figure B.9 – Positionnement de l’image sur la carte.

Figure B.10 – Le résultat prévisualisé.

bonne correspondance, plusieurs points sont nécessaires.

Une fois cela fait, en utilisant le bouton Wrap image !, une carte positionné à l’endroit voulu est crée à partir de l’image.

Une prévisualisation est alors possible, comme le montre la figure B.10 et un export sous différentes formes va Figure B.11 – Exportation sous différentes formes.

permettre d’importer cette carte sous Umap (voir figure B.11).

Pour récupérer cette carte-image avec Umap, il faut se connecter, passer en mode édition et se rendre dans l’édition des paramètres de la carte (la petite roue dentée). On peut alors se rendre dans l’onglet Fond transparent, comme le montre la figure B.12.

Figure B.12 – Utilisation de la carte de Map Wraper dans Umap.

On utilise alors l’url de fond transparent fournie par Map Wrapper sous Tiles (voir figure B.11) et on règle la transparence avec le curseur dédié. Évidemment, l’exemple de l’Étoile de Tir n’est probablement pas le meilleur. En effet, la transparence est celle de l’ensemble de l’image. Si on dispose de données de traces gpx (suivi GPS) et/ou de formes geojson, kml ou autres, on peut les importer directement dans Umap et le problème de la transparence globale n’apparaîtra pas. Mais, pour une carte scannée ou pour un dessin de région imaginaire, ce n’est pas possible et il est même intéressant que ceux-ci apparaissent délimités globalement par la transparence.

AnnexeC

La projection de Mercator

Cette annexe a pour but de se familiariser avec les bases de la projection de Mercator. Au préalable, c’est à la projection cylindrique équidistante ou projection équirectangulaire ou projection géographique que nous allons nous intéresser.

C.1 Équirectangulaire

Sa simplicité apparente en fait un bon point de départ pour appréhender l’intérêt de la projection de Mercator. Une projection équirectangulaire …

[…] se définit (partiellement) comme une projection de la surface du globe sur la surface d’un cylindre, dont l’axe se confond avec l’axe des pôles et contient les origines des vecteurs de projection. Les méridiens sont alors projetés sur des lignes verticales espacées de manière égale, et les parallèles sont aussi projetés sur des lignes horizontales équidistantes (espacement horizontal constant). Ce dernier point différencie cette projection de la projection de Mercator. De plus, contrairement à la projection de Mercator, la projection cylindrique équidistante n’est pas conforme. Elle n’est pas non plus équivalente, mais aphylactique (elle conserve les distances le long des méridiens, d’où le nom « projection cylindrique équidistante »). Wikipedia.

La figure C.1 présente la situation.

Cette projection est intéressante, car, si elle est centrée sur l’équateur et le méridien de Greenwich (latitude et longitude nulles), la projection est mathématiquement très simple :

x = λ
y = ϕ

où λ, ϕ, x et y sont respectivement la longitude, la latitude, la position sur l’abscisse et la position sur l’ordonnée.

C.2. Mercator  Annexe C. La projection de Mercator

Figure C.1 – Projection équirectangulaire (Wikimedia commons).

Figure C.2 – Indicatrice de la transformation équirectangulaire (Wikimedia commons).

Cette transformation ne conserve ni les angles, elle est non conforme, ni les aires, elle est non équivalente. Elle préserve certes les distances sur les méridiens, mais pas sur les grands cercles. La figure C.2 donne son indicatrice de Tissot (voir Wikipedia), une représentation visuelle des déformations qu’elle produit. On voit que le rayon vertical des ellipses présentées demeure constant, alors que sa composante horizontale change.

C.2 Mercator

C.2.1 Loxodromie

Conçue à l’origine pour préserver les angles afin de permettre une navigation à cap constant sur une loxodromie, la projection de Mercator est conforme. En effet, la courbe présentée sur la figure C.3 est construite en parcourant le globe selon un angle β avec les méridiens qui est constant.

Il faut relever qu’une loxodrome n’est pas une courbe minimisant la distance parcourue, comme le montre la figure C.4, avec en jaune la loxodrome et en rouge l’orthodrome de distance minimale.

Avec une projection de Mercator (conforme), une loxodromie est transformée en ligne droite. Ainsi, avec une carte projetée selon Mercator, si on trace une

Annexe C. La projection de Mercator  C.2. Mercator

Figure C.3 – Une loxodrome (Wikimedia commons)

Figure C.4 – Loxo et ortho-dromie (Wikimedia commons) droite à partir d’un point, on visualise sans difficultés où un déplacement à cap constant va nous mener. Il s’agit donc d’une carte très pratique pour la navigation.

Mais comment la construire ? Si avec une projection équirectangulaire la transformation mathématique est évidente, avec une projection de Mercator, c’est loin d’être le cas.

Le travail de Mercator a été réalisé avant la découverte du calcul infinitésimal puisque sa carte a été publiée en 1569. Comme les relations mathématiques qui traduisent cette projection ne peuvent être déterminée qu’avec une équation différentielle, c’est par une construction réalisée par des pas de calculs discrets, qu’elle a pu se faire.

C.2.2 Mathématiquement

On peut obtenir la transformation de Mercator en partant du fait qu’elle est conforme. Comme les angles sont préservés, il existe une homothétie entre un rectangle sur la sphère et sa projection sur la carte. Même si un rectangle sur la sphère n’est pas une figure plane, d’un point de vue infinitésimal on peut considérer que c’est le cas. Une véritable homothétie existe donc entre le rectangle formé de petits arcs de cercles sur la sphère et le rectangle plan de la carte.

Ainsi, si on note dx, dy les côtés du rectangle sur la carte et dl, dL les côtés en longitude et respectivement latitude du rectangle sur le globe, la relation d’homothétie s’écrit alors :

\frac{dy}{dx} = \frac{dL}{dl}  (C.1)

En notant ϕ la latitude et λ la longitude, on peut écrire /dϕ le côté « vertical » et dλ le côté « horizontal » du rectangle sur le globe. En posant R pour le rayon de la terre, on a alors que dl = R cos(ϕ)·dλ et dL = R·dϕ. La relation d’homothétie devient alors :

\frac{dy}{dx} = \frac{R · dϕ}{R cos(ϕ) · dλ}  (C.2)

En effet, si la longueur en latitude dL est directement proportionnelle à la variation de latitude, la longueur en longitude dl dépend de la latitude, puisque les méridiens se rejoignent aux pôles. Or, comme dl est exacte à l’équateur et nulle aux pôles, elle dépend du cosinus de la latitude, comme on peut le constater sur la figure C.5. En effet, la grandeur dl se retrouve à l’identique sur le plan équatorial et diminue au fur et à mesure qu’on s’approche du pôle ou du centre de la Terre, comme le cosinus de la latitude ϕ.

La relation entre la distance horizontale dx sur la carte et celle en longitude dλ sur la sphère est quant à elle triviale. Elle définit l’écart en distance sur la carte entre deux méridiens, par exemple. Cela s’exprime par :

dx = c · dλ ⇒ \frac{dx}{dλ} = c  (C.3)

Figure C.5 – Grandeurs de la projection de Mercator.

dλ ϕ R dx  dl cylindre de projection plan de projection

À partir des équations C.2 et C.3, on peut écrire :

\frac{dy}{dϕ} = \frac{R · dx}{R cos(ϕ) · dλ} ⇒
\frac{dy}{dϕ} = \frac{c}{cos(ϕ)} = \frac{c}{sin(π/2 + ϕ)}

= \frac{c}{2 · sin(π/4 + ϕ/2) cos(π/4 + ϕ/2)}

= c · \frac{\frac{1}{2·cos^{2}(π/4+ϕ/2)}}{tan(π/4 + ϕ/2)}

= c · \frac{\frac{d(tan(π/4+ϕ/2))}{dϕ}}{tan(π/4 + ϕ/2)}  (C.4)

En effectuant le changement de variable :

z = tan(π/4 + ϕ/2)  (C.5)

on peut écrire :

\frac{dy}{dϕ} = c · \frac{dz/dϕ}{z} ⇒
dy = dz/z  (C.6)

Annexe C. La projection de Mercator  C.3. Indicatrice

L’équation C.6, s’intègre facilement :

∫_{0}^{y} dy = c · ∫ \frac{1}{z}dz ⇒
y = c · ln(z)

et en resubstituant l’expression de z, on trouve finalement :

y(ϕ) = c · (ln(tan(\frac{π}{4} + \frac{ϕ}{2}))) (C.7)

Pour d’autres propriétés et quelques calculs très bien faits, consultez [7].

C.3 Indicatrice

Voici avec la figure C.6 l’indicatrice de la transformation de Mercator qui montre bien les déformations en latitude et longitude, cette dernière étant due au redressement des méridiens qui normalement convergent aux pôles (voir paragraphe A.2.3).

Figure C.6 – Indicatrice de la transformation de mercator (Wikimedia commons).

Bibliographie

Livres

[1] David Collado. Géomatique webmapping en open source. Ouvrage très technique, mais extrèmement cohérent et entièrement orienté logiciels libres. ellipse, 2019 (cf. p. 51).

[2] Collectif. La carte invente le monde. Sous la dir. de Patrick Picouet. Fantastique ouvrage dont la diversité de propos redonne foi en la cartographie. Presses universitaires du Septentrion, 2019 (cf. p. 66).

[3] Collectif. Les usages des cartes (XVIIe-XIXe siècle). Sous la dir. d’Isabelle Laboulais. Comment crée-t-on des cartes ? Presses universitaires de Strasbourg, 2008 (cf. p. 50).

[6] Sous la direction de Jean-Marc Besse & Gilles A. Tiberghien. Opérations cartographiques. Peut-on envisager les opérations cartographiques nécessaires à la production de cartes ? Actes Sud ENSP, 2017 (cf. p. 1, 50).

[14] Matthieu Noucher. Blancs des cartes et boites noires algorithmiques. Ouvrage relativement simple sur la relation entre cartographie et informatique. CNRS Editions, 2023 (cf. p. 44).

[15] Kolletiv Orangotango. Ceci n’est pas un atlas. Sous la dir. de Nepthys Zwer. La cartographie comme outil de luttes 21 exemples à travers le monde. édition du commun, 2023 (cf. p. 1, 5).

[16] Nepthys Zwer et Philippe Rekacewicz. Cartographie radicale Explorations. Une référence en la matière. La Découverte, 2021 (cf. p. 1, 5, 26).

Ressources en ligne

[4] Des cartes sur votre site. url :

https : //zestedesavoir.com/
tutoriels/1365/des -cartes -
sur -votre -site/ (visité le

22/07/2023) (cf. p. 51).

[5] Garbage Patch Visualization Experiment. url : https://svs.

gsfc.nasa.gov/4174 (visité le

10/08/2023) (cf. p. 61, 62).

[7] La cartographie. url : https://

dms.umontreal.ca/~rousseac/
Cartographie.pdf (visité le

07/08/2023) (cf. p. 79).

BIBLIOGRAPHIE  BIBLIOGRAPHIE

[8] Leaflet - Utilisation avancée.

url : https://zestedesavoir.
com/tutoriels/4053/leaflet -
utilisation-avancee/ (visité le

22/07/2023) (cf. p. 51).

[9] Leaflet.greatCircle.js. url :

https     :     //github.com/
nuclearsecrecy/Leaflet.
greatCircle  (visité  le

29/08/2023) (cf. p. 64).

[10] Leafletjs. url : https : //

leafletjs.com/ (visité le

10/08/2023) (cf. p. 63).

[11] Manuel d’utilisation de XIA. url :

https : //xia.funraiders.org/
docreader.php?doc=0 (visité le

18/09/2023) (cf. p. 71).

[12] Map Wraper. url : https : //

mapwarper.net/ (visité le

22/09/2023) (cf. p. 72).

[13] Not of this earth. url : https://

leafletjs.com/examples/crs -
simple/crs-simple.html (visité

le 17/09/2023) (cf. p. 67).

[17] Stamen Design. url : https://

stamen.com/  (visité  le

07/08/2023) (cf. p. 57).

[18] SVG, la syntaxe Path. url :

https  :  //la  -cascade.io/
articles/svg -la -syntaxe -

path (visité le 09/08/2023) (cf. p. 61).

[19] Xia 3.0. url : https : //

xia.funraiders.org/ (visité le

17/09/2023) (cf. p. 68).