MapTiler Desktop est un logiciel qui va vous permettre de transformer une grande image en tuiles, pour l’utiliser dans Leaflet.

Tout est permis : dessin scanné, carte de jeu vidéo pixel, « où est Charlie ? », etc
La seule contrainte c’est qu’il faut une image suffisamment grande pour afficher une bonne qualité lors du zoom.

Une image de 6000 à 10000 pixels est recommandée.

Téléchargez l’application sur le site officiel.

Mode d’emploi

Ce tuto s’appuie sur la version 11.3 de MapTiler Desktop (03/2022)

!!! Il faut une connexion internet, car le rendu des tuiles se fait sur les serveur de MapTiler !!!

• ouvrir MapTiler Desktop
• glisser votre image dans l’interface
• une fenêtre s’ouvre : « Geographical location ? » On n’est pas intéressé, CLOSE
• une autre fenêtre : « Input coordinate system ? » Toujours pas, CLOSE
• cliquer sur EXPORT
• là il faut changer :
  Output coordinate system > onglet Pixels > mettre 256 x 256 > cliquer sur SET
  –> ça doit afficher Output coordinate system : Pixels (raster without geolocation)
• choisir Folder with tiles
• cliquer sur CONTINUE

On arrive aux options des tuiles :

• Output tile format : la plupart du temps Hybrid (jpeg+png) c’est optimal
  Les tuiles avec transparence seront en PNG
  Les tuiles opaques seront en Jpeg (moins lourd)
  et du coup l’ensemble est moins lourd.
  Pour une super qualité et si on se fiche du poids, PNG est un format sans perte, donc qualité parfaite.
• Zoom levels : pas modifiable sur la version gratuite
  Mais une fois exporté c’est facile de limiter les niveaux de zoom, juste en modifiant minZoom et maxZoom dans le code JS de la carte.
  Vous ne pourrez pas ajouter plus de niveaux de zoom, par contre.

–> cliquer sur RENDER + choisir un dossier vide de votre disque-dur.
Attendre que les tuiles soient fabriquées sur le serveur.

Et ensuite…

Vous obtenez un dossier de site web, avec les images rangées dans des dossiers (1 dossier par niveau de zoom), et un fichier « leaflet.html » avec le code approprié.

Vous obtenez aussi un fichier openlayers.html et metadata.json, dont on n’aura pas besoin – vous pouvez les supprimer.

Le code n’est pas très propre, ça vaut le coup de déplacer le code js dans un fichier séparé, et de partir d’un fichier html créé par vos soins, pour retrouver une configuration habituelle.
MapTiler aura aussi ajouté un slider permettant de changer l’opacité de la carte; ce n’est pas dans le code js que ça se passe, mais dans un <input> html.
L’idée c’est de garder seulement le morceau de code JS, et de jeter le reste.

Watermarks

Avec la version gratuite de MapTiler vous aurez de légers watermarks sur vos tuiles.
Vous pouvez faire des essais comme ça, et une fois bien décidé sur l’image de fond, je pourrai vous générer des tuiles sans watermarks avec ma licence – vous savez comment me contacter 🙂