Sherbrooke 1881 VI (Leaflet-iiif)

Nous avons vu comment combiner ScrollTrigger et Leaflet pour créer des storymaps. Dans notre exemple, nous nous servions d’un fond de carte Stamen. Mais notre projet implique une carte non-géographique. J’ai déjà montré comment faire des tuiles avec tiles XYZ dans QGIS. Mais comme je le précisais, ce n’est pas le dernier cri en matière de technologie. Ce serait plutôt iiif. Wikipedia définit ainsi ce format:

L’International Image Interoperability Framework (IIIF) désigne à la fois une communauté et un ensemble de spécifications techniques dont l’objectif est de définir un cadre d’interopérabilité pour la diffusion et l’échange d’images haute résolution sur le Web.

Le cadre normatif de IIIF définit des interfaces de programmation applicative (API) communes qui fournissent une méthode standardisée de description et d’accès aux images sur le Web, ainsi que l’exposition de métadonnées descriptives et structurelles nécessaires à la présentation d’un document numérique dans une interface.

Wikipedia

De nombreuses bibliothèques utilisent ce format, dont la Library of Congress qui héberge la carte panoramique de Sherbrooke en 1881. On y trouve le manifeste iiif de la carte, qui est en fait l’URL du JSON.

Il est possible de se servir de ce manifeste pour ajouter l’image à notre projet. Pour ce faire, il faut cependant ajouter le CDN du plugin Leaflet-iiif de Jack Reed dans Codepen.

Dans le JS, on remplace notre ancienne carte Stamen par ce code:

var map;
var iiifLayers = {};

map = L.map('map', {
  center: [0, 0],
  crs: L.CRS.Simple,
//comme il n'y a pas de crs (ex. wgs84), on le précise avec cette ligne
  zoom: 10,
  zoomControl: false,
  zoomAnimation: false,
  fadeAnimation: false,
  attributionControl: false,
});



var manifestUrl = 'https://www.loc.gov/item/95684855/manifest.json';
//c'est le manifeste trouvé sur le site de la LOC

$.getJSON(manifestUrl, function(data) {
  // Pour chaque image, créez un objet L.TileLayer.iiif et ajoutez-le à un littéral d'objet pour le contrôle de calque
  $.each(data.sequences[0].canvases, function(_, val) {
    iiifLayers[val.label] = L.tileLayer.iiif(val.images[0].resource.service['@id'] + '/info.json');
  });


  // Accédez au premier objet iiif et ajoutez-le à la carte
  iiifLayers[Object.keys(iiifLayers)[0]].addTo(map);
});

Il faut ensuite pouvoir se positionner sur la carte. Avec OSM, on utilisait les x et les y récupérés dans GoogleMaps, par exemple. Mais comme ce n’est pas une carte géographique, il faut utiliser les x et les y du graphique en prenant pour acquis que le coin supérieur gauche est x=0, y=0.

On se souvient que dans Leaflet, on écrit d’abord les Y, puis les X. Donc, pour situer, disons le bureau de poste sur la rue Dufferin, alors la rue Commerciale, on utiliserait ces coordonnées:

map.setView([-170, 300], 18)

Au début, c’est vraiment du essai-erreur. Mais quand on commence à avoir plusieurs marqueurs, c’est plus facile. Voici donc ce que ça donne dans Codepen:

See the Pen JjWePvP by Tristan Landry (@cybergastronom) on CodePen.

Vous noterez que la transition d’un lieu à l’autre se fait de façon plus souple, ce qui est réalisé en utilisant dans le JS map.flyTo plutôt que map. setView, en précisant la durée:

onEnter: () => map.flyTo([-170, 300], 4),/*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: 1.5,