Le hack présenté ici reprend et détaille celui-ci.
Exemples
Voici un exemple d’utilisation avancée de la méthode que nous allons voir :
→ http://additionaldocument.org/2/#0/50/58
Ce que nous allons faire
Principe
Pour parvenir à nos fins, nous avons besoin de faire fonctionner ensemble le plug-in zoomify et un service de cartographie en ligne (ici, Leaflet).
Ces 2 principes fonctionnent sur un principe d’affichage commun. Ils permettent tous les deux de zoomer (pour zoomify, dans une image, pour leaflet, dans une représentation cartographique). Voici le principe qui les sous-tend :
Plusieurs calques d’images, découpés en tuiles (Tiles) se superposent. Nous devons donc, avant toute chose, générer ces différentes images, calques et tuiles.
Préparation des images
Plusieurs solutions existent, plus ou moins bricolées. J’ai choisi celle ne nécessitant pas l’usage du code, en ce qui concerne la génération des images et tuiles en tout cas. Il suffit de passer par le plugin Zoomify Express dans Photoshop (à partir de CS3).
Pour que cette méthode fonctionne bien, il faut une image de grande dimension (plus de 2000px x 2000px, en 72 dpi).
Il nous faut plusieurs calques dans Photoshop, un par niveau de zoom.
Nous réalisons l’exportation des 3 niveaux de zooms dans des dossiers différents. Nous devrons par la suite rassembler les images des différents niveaux de zoom dans le dossier
TileGroup0
de notre code d’exemple.
Nous allons placer les fichiers de nos différentes exportations dans le bon dossier.
Avant de quitter Photoshop, nous avons besoin de nous assurer de la taille de l’image. Nous en aurons besoin pour que notre code fonctionne.
Préparation de l’inclusion dans la page HTML
Il est absolument indispensable de conserver l’arborescence des fichiers.
Avant de lancer la page HTML (example.html) dans un navigateur, nous devons nous assurer que les lignes suivantes contiennent les bons réglages :
L.tileLayer.zoomify('', {
//largeur de l'image d'origine dans Photoshop
width: 2832,
//hauteur de l'image d'origine dans Photoshop
height: 3078,
tolerance: 0.8,
attribution: ''
}).addTo(map);