Du beurre ou des canons II (TilesXYZ)

Mon livre sur l’histoire culturelle de l’alimentation dans l’Allemagne nazie sort (enfin) au printemps. Dans le livre, il y a une carte de l’Europe en 1942 réalisée avec QGIS. Sur la carte, on trouve une adresse menant à un site web qui servira de complément au livre. Ce site me permettra de diffuser des images que j’ai trouvées au cours de mes recherches et elles sont nombreuses…

J’aimerais que ce site héberge une carte narrative (storymap). Le scrollytelling est très à la mode en ce moment: ça semble être un medium qui rejoint beaucoup de gens. C’est souvent utilisé par les journalistes. Cette carte est un bon exemple des possibilités offertes par la carte narrative en journalisme. C’est d’ailleurs pour soutenir le journalisme indépendant que Mapbox rend disponible son code pour réaliser une carte narrative: il suffit de remplacer dans le code le texte par son propre contenu et ajuster le CSS selon ses propres critères esthétiques. Il y a aussi StorymapsJS, sur lequel David a fait un tutoriel.

La technique du scrollytelling n’est d’ailleurs pas limitée à la carte: on peut l’appliquer à des objets sans coordonnées géographiques, comme dans cet exemple en histoire de l’art. Preuve que le scrollytelling rejoint beaucoup de gens: j’ai envoyé le lien précédent à mes parents qui ont adoré! De même que tel autre.

On peut programmer soi-même sa carte narrative. Il existe, pour ce faire, plusieurs bibliothèque JavaScript, dont Scrollama.js. L’avantage de programmer soi-même sa carte narrative, c’est premièrement que l’on peut maîtriser tous les aspects de son projet, tout en comprenant ce que fait chaque ligne de code. On évite aussi la question des droits d’auteurs (les nôtres), qui est assurément problématique avec Mapbox, je ne sais pas pour StorymapsJS.

On peut aussi choisir, voire créer son propre fond de carte et ensuite l’intégrer dans son projet JavaScript (ce qui semble moins évident avec Mapbox; je ne sais pas non plus pour StorymapsJS). C’est ce que l’on va faire dans ce projet, en utilisant une carte non géoréférencée, comme on le ferait finalement pour une toile. J’ai choisi cette carte touristique de l’Allemagne nazie.

Lorsque téléchargée dans le plus grand format disponible sur le site de David Rumsey, la carte fait 138mo. Cette taille volumineuse fait en sorte que tous les détails soient bien visibles, mais c’est trop volumineux pour assurer une expérience de consultation en ligne fluide. Nous allons donc créer des tuiles qui vont nous permettre de zoomer, sur le même principe que GoogleMaps.

La première chose à faire est d’ouvrir QGIS et d’ajouter une couche matricielle (raster). Choisir son image, puis dans la boîte à outils, sélectionner l’outil Generate XYZ Tiles (Directory).

Même si en principe c’est une carte sans coordonnées, il faut quand même lui attribuer une projection dans les propriétés du projet, soit WGS84 (#Leaflet).

Créons maintenant les tuiles. Dans QGIS2, il fallait utiliser une extension (QTiles), mais la fonction est maintenant intégrée dans QGIS3: Generate (Directory).

Il faut ensuite remplir les paramètres, en choisissant l’étendue de la carte (la couche matricielle), le zoom minimum et le zoom maximum (ça dépend de la nature de votre projet, mais attention ça peut être exigeant pour votre ordinateur si vous choisissez tous les niveaux) et (en bas) où enregistrer le dossier généré et où enregistrer le fichier html qui l’accompagnera. On peut laisser tout le reste aux valeurs par défaut.

Si on ouvre le dossier, on y trouve de petites images de quelques octets chacune.

Et si on ouvre le fichier html, la carte s’ouvre dans le navigateur. Le zoom se fait de façon très fluide. Si on inspecte dans Atom ce fichier, on y retrouve la variable associée à la carte de fond que l’on vient de créer.

<script>
      var map = L.map('map').setView([-0.026477839229684677, 0.036745586696909034], 14);
      L.tileLayer('file:///D%3A/Dropbox/Coding/Projets/gastropolitica/Tiles/{z}/{x}/{y}.png', {
        minZoom: 12,
        maxZoom: 18,
        tms: false,
        attribution: 'Generated by TilesXYZ'
      }).addTo(map);
  </script>

Pour que le fichier soit transférable vers un serveur, il faut changer le lien absolu par un lien relatif (ex: ‘tuiles/{z}/{x}/{y}.png’). On peut régler le niveau de zoom sur lequel s’ouvre la carte, ici 14. On pourrait ajouter cette variable dans le code de notre projet Leaflet.

Si on déplace le dossier contenant nos tuiles dans le dossier de notre projet Leaflet, on pourrait utiliser un chemin relatif plutôt que le chemin absolu. Si on inclut ce dossier dans notre projet Cordova, cela veut dire que notre application pour le projet «présence autochtone» pourrait fonctionner sans accès à Internet, ce qui rend l’appli encore plus facilement acceptable pour l’AppStore (du moins, je l’espère!?). On pourrait aussi mettre le tout en ligne et y accèder en l’ajoutant au code, de la même façon que l’on ajoute un fond de carte OSM ou Stamen.

Il importe de préciser que la technique présentée dans ce billet n’est pas le dernier cri en la matière. La technologie de l’heure pour zoomer sur des images est le format iiif. C’est celle utilisée par le site de David Rumsey. Vous pouvez y accèder au manifeste iiif d’une carte dans les options de partage (share):

Je me promets d’explorer cette technologie plus tard, mais pour l’instant, j’aimerais me concentrer sur Scrollama.js. La prochaine entrée pour le projet «Du beurre ou des canons» portera donc sur cette bibliothèque. Joyeux temps des fêtes.