Sherbrooke 1881 VII (TilesXYZ)

Nous verrons ici d’abord comment améliorer votre storymap avec une propriété dans ScrollTrigger; ensuite, quoi faire si vous ne disposez pas déjà d’un manifeste iiif pour votre carte; enfin, comment faire transiter votre projet de Codepen vers un serveur.

ScrollTrigger

En général, les storymaps peuvent être défilées dans les deux sens, soit quand on va vers le bas, puis vers le haut. Ceci peut facilement être réalisé avec Scrolltrigger, en utilisant la propriété onEnterBack, puis en la faisant suivre des coordonnées précédentes.

ScrollTrigger.create({
    trigger: ".intro",  /*c'est l'élément déclencheur*/
    start: "top center", /*on définit où l'on veut que l'animation soit déclenchée, soit ici au milieu de la page*/
    onEnter: () => map.flyTo([-150, 150], 3),/*on utilise la Arrow Function, qui est juste une façon plus courte en JS de définir une fonction; voir https://www.w3schools.com/Js/js_arrow_function.asp*/
    animate: "true",
    duration: 2,
    markers: "true", /*permet de visualiser dans Codepen le début et la fin de l'animation; ne pas inclure dans votre projet final*/
  onEnterBack: () => map.flyTo([-100, 200], 3),/*ce qui va nous ramener où nous étions sur la carte auparavant*/
    })  

Donc, maintenant notre storymap fonctionne dans les deux sens. Essayez-le:

See the Pen Sherbrooke 1881 D2 by Tristan Landry (@cybergastronom) on CodePen.

iiif

Nous savons comment ajouter à notre storymap un fond de carte OSM, comment ajouter un manifeste iiif, mais quoi faire si notre carte n’est pas en ligne? Supposons que nous avons une superbe carte de Montréal réalisée par le renseignement militaire soviétique, mais nous n’avons qu’une version papier achetée en Lettonie dans eBay (ce qui est le cas!)?

La première chose à faire serait de la numériser. On peut le faire avec un scanneur ordinaire, puis importer chaque image dans Inkscape comme un calque, et ensuite les assembler, en commençant par le coins, comme on le ferait avec un puzzle, en les superposant (ce qui est possible, puisque ce sont des calques).

C’est cependant un travail laborieux et personnellement je ne trouve pas le résultat entièrement satisfaisant. C’est pourquoi il est préférable, à mon avis, de faire appel à un  service de numérisation de cartes géographiques grand format. Nous n’avons pas (encore) de scanneur grand format à la biblio de l’UdeS, mais l’Université Laval offre le service pour 16$. Il faut arriver sur place avec sa carte et une clé USB. C’est ce que je vais faire avec la carte soviétique. Une fois la carte numérisée, nous allons la transformer en tuiles. Dans un monde idéal, nous disposerions d’un serveur avec les droits d’administrateur qui nous permettraient d’y installer Cantaloupe ou Omeka (Josh?). Ces API nous permettraient ensuite de générer des tuiles au format iiif.

En informatique, une interface de programmation d’applications ou interface de programmation applicative (souvent désignée par le terme API pour Application Programming Interface) est un ensemble normalisé de classes, de méthodes, de fonctions et de constantes qui sert de façade par laquelle un logiciel offre des services à d’autres logiciels. Elle est offerte par une bibliothèque logicielle ou un service web, le plus souvent accompagnée d’une description qui spécifie comment des programmes consommateurs peuvent se servir des fonctionnalités du programme fournisseur.

Wikipedia

Je fondais beaucoup d’espoir sur un lambda d’AWS.

AWS Lambda is an event-driven, serverless computing platform provided by Amazon as a part of Amazon Web Services. It is a computing service that runs code in response to events and automatically manages the computing resources required by that code. It was introduced in November 2014.

Wikiepdia

Comme son nom l’indique, serverless-iiif laissait entrevoir la possibilité de créer un manifeste iiif sans serveur. Mais plusieurs essais de ma part n’ont donné aucun résultat. Il est également possible d’utiliser AWS Elastic Compute, comme expliqué ici, mais c’est un service qui comporte des frais et assez complexe au final. Aussi, je pense que le mieux est de se tourner vers une technologie moins avancée que iiif, mais presque aussi efficace. Nous l’avons déjà vu ici, il s’agit de l’outil TilesXYZ dans QGIS, qui permet de créer des tuiles à partir d’un tiff. J’ai utilisé la même carte de Sherbrooke en 1881, ce qui va nous permettre de comparer iiif et XYZ. Il ne faut pas oublier de définir un CRS et celui-ci doit obligatoirement être EPSG: 3857!!!

Je choisis un emplacement où enregister les tuiles et dans le même dossier, j’enregistre un fichier index.html. Après avoir exécuté l’algorithme, si j’ouvre ce dernier fichier, j’y trouve la variable de mon fond de carte.

<script>
      var map = L.map('map').setView([-0.031097798421112505, 0.01584251901830082], 14.0);
      L.tileLayer('file:///D%3A/1881/New%20folder%20%282%29/{z}/{x}/{y}.png', {
        minZoom: 10,
        maxZoom: 18,
/*Pour Sherbrooke 1881, j'ai opté pour des valeurs minimum et maximum de zoom un peu plus grandes que pour la carte Germany, beautiful travel country, soit min10 et max18.*/
        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’). À noter que si dans iiif nos coordonnées avaient comme unité de mesure des pixels, dans XYZ — comme nous utilisons une projection EPSG: 3857, qui a pour unité de mesure des mètres — nous devons utiliser des fractions de mètre, donc des centimètres. Ex.:

onEnter: () => map.setView([-0.03, 0.04], 16)

Puisque l’URL est celui du fichier sur mon ordinateur, il me faut le remplacer par un lien relatif:

L.tileLayer('/1881/{z}/{x}/{y}.png', {

Je peux donc ajouter cette variable au code JS de mon projet. Voyons maintenant comment finaliser ce dernier.

Arborescence

Pour que notre projet puisse être mis en ligne sur un serveur, il est important de s’assurer d’une bonne arborescence de fichiers.

l’arborescence de fichiers, […] est l’organisation hiérarchique des fichiers sur une partition, et dans certains cas de partitions entre elles – par exemple : partitions virtuelles (« lecteurs logiques ») dans des partitions réelles ;

Wikipedia

On commence par copier le html de notre pen, on ouvre Atom, et on le colle dans un nouveau document que l’on enregistre dans un dossier en le nommant index et en s’assurant que ce nouveau fichier se termine par l’extension .html. J’ai donc maintenant un fichier intitulé index.html. Ce qui dans Codepen est logé dans la roue d’engrenage (CSS, JS), doit être invoqué dans le <head> de notre fichier html. On ajoute donc dans l’en-tête ces lignes:

  /le CSS de leaflet
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
/*c'est une bonne pratique d'ajouter ce qui suit integrity (voir plus bas Subresource integrity)*/

/notre CSS (nous allons créer le fichier plus loin)
<link href="CSS/styles.css" rel="stylesheet">

/nos polices google (j'en ai ajouté par rapport à Codepen)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&family=Della+Respira&display=swap" rel="stylesheet">
<link href=https://fonts.googleapis.com/css2?family=Pattaya&amp;display=swap" rel="stylesheet">

 /le JS de leaflet
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
/nous ne renvoyons pas ici à notre propre JS mais plus loin, juste avant de fermer le <body>.

/nos plugins GreenSock
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

/jQuery (si on utilise waypoints au lieu de Scrolltrigger)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js</script>
/leaflet-iiif (si on utilise iiif)
<script src="https://cdn.rawgit.com/mejackreed/Leaflet-IIIF/v2.0.1/leaflet-iiif.js"</script>

Subresource Integrity or SRI is a W3C recommendation to provide a method to protect website delivery. Specifically, it validates assets served by a third party, such as a content delivery network (CDN). This ensures these assets have not been compromised for hostile purposes. SRI was created in response to a number of attacks where CDN-served content was injected with malicious code, compromising thousands of websites using it.

Wikipedia

Je complète le <head> avec ce qui était dans le html de Codepen, suivi du <body>. Juste avant de fermer ce dernier, je renvoie à mon JS. Je ferme la structure <html>

<head>
<title>Sherbrooke 1881</title>
<meta charset="UTF-8">

</head>

<body>
<div class="titre"><p>Sherbrooke 1881</p></div>
  <div style="height: 1000px;"></div>
  <div class = "intro">Au tournant du 20e siècle, Sherbrooke est déjà une ville industrielle prospère. Depuis l'arrivée du chemin de fer en 1852, les industries se sont multipliées et ont attiré la main-d'œuvre. D'environ 3000 habitants en 1851, la population passe à 7446 habitants en 1881 pour atteindre 23 522 habitants en 1921. Dès 1897, le tramway est mis en service pour faciliter les déplacements de la population croissante. BANQ</div> -->
 
    <div style="height: 1000px;"></div>

  <div class = "museeBA">Le bureau de poste a été construit en 1885 sur la rue Dufferin. Cette artère portait autrefois le nom de rue Commerciale jusqu'à ce que les boutiques et les banques se déplacent sur la rue Wellington. BANQ</div> -->
 <div style="height: 600px;"></div>
 <img class="square" src="https://www.banq.qc.ca/histoire_quebec/rallye/VisiteLibre/Photo/Gde/P547S1SS1SSS1D675P249R.jpg" alt="" height="300">
  <div style="height: 1000px;"></div>
    <div style="height: 1000px;"></div>

<div id="map"></div>

/notre propre JS (on va créer le fichier plus loin)
 <script src="JS/script.js"></script>

</body>
</html>

Voilà pour le html. Je crée maintenant un nouveau document dans Atom, j’y colle le CSS de mon codepen, je le nomme styles.css et je l’enregistre dans un dossier intitulé CSS, à côté de mon index.html. Je fais la même chose pour mon JS. Donc, en principe, j’ai maintenant une arborescence semblable:

Je peux donc maintenant verser le tout sur mon serveur (si j’en ai un) avec un logiciel FTP comme Filezilla ou alors dans AWS comme expliqué ici. Comme je le mentionnais, AWS est très abordable. Mes deux sites (gastropoliti.ca et uiesh.ca) me coûte en tout moins de 2$ par mois (ce qui n’inclut pas le nom de domaine, soit 13$ chacun par année). Mais ce n’est pas obligatoire d’avoir un nom de domaine.

Si vous visitez le site, vous pourrez comparer iiif et xyz. Le premier est plus précis quand on zoom dans l’image.

En résumé, xyz est une solution de rechange intéressante si on n’a pas de manifeste iiif, mais les deux ne se comparent pas en termes de qualité.

J’espère vous avoir donné le goût de programmer votre propre storymap. Certes, dans cet exemple basique, le CSS est minimaliste, mais on peut atteindre un résultat hautement professionnel, à condition de mettre le temps nécessaire. Ce que résume assez bien ce tweet humoristique:

HTML: 3 hours
CSS: 5 hours
JavaScript: 6 hours
Choosing a font: 28 hours

— Jack Forge (@TheJackForge) May 6, 2021

Dans cette série de tutoriels, nous avons choisi une carte comme projet. Mais on pourrait aussi utiliser un tableau et se servir de cette technologie pour enseigner l’histoire de l’art, comme dans cet exemple. On pourrait aussi utiliser Leaflet pour une présentation de type Prezi.