map-thumb

Personnaliser un service de cartographie

Le hack pré­senté ici reprend et détaille celui-ci.

Exemples

Voici un exemple d’utilisation avan­cée de la méthode que nous allons voir :

http://additionaldocument.org/2/#0/50/58

Ce que nous allons faire

Prin­cipe

Pour par­ve­nir à nos fins, nous avons besoin de faire fonc­tion­ner ensemble le plug-in zoo­mify et un ser­vice de car­to­gra­phie en ligne (ici, Leaflet).

Ces 2 prin­cipes fonc­tionnent sur un prin­cipe d’affichage com­mun. Ils per­mettent tous les deux de zoo­mer (pour zoo­mify, dans une image, pour lea­flet, dans une repré­sen­ta­tion car­to­gra­phique). Voici le prin­cipe qui les sous-tend :

deepzoom

Plu­sieurs calques d’images, décou­pés en tuiles (Tiles) se super­posent. Nous devons donc, avant toute chose, géné­rer ces dif­fé­rentes images, calques et tuiles.

Pré­pa­ra­tion des images

Plu­sieurs solu­tions existent, plus ou moins bri­co­lées. J’ai choisi celle ne néces­si­tant pas l’usage du code, en ce qui concerne la géné­ra­tion des images et tuiles en tout cas. Il suf­fit de pas­ser par le plu­gin Zoo­mify Express dans Pho­to­shop (à par­tir de CS3).

Pour que cette méthode fonc­tionne bien, il faut une image de grande dimen­sion (plus de 2000px x 2000px, en 72 dpi).

Il nous faut plu­sieurs calques dans Pho­to­shop, un par niveau de zoom.

Nous réa­li­sons l’exportation des 3 niveaux de zooms dans des dos­siers dif­fé­rents. Nous devrons par la suite ras­sem­bler les images des dif­fé­rents niveaux de zoom dans le dossier

TileGroup0

de notre code d’exemple.

Nous allons pla­cer les fichiers de nos dif­fé­rentes expor­ta­tions dans le bon dossier.

Avant de quit­ter Pho­to­shop, nous avons besoin de nous assu­rer de la taille de l’image. Nous en aurons besoin pour que notre code fonctionne.

Capture-PS-image-taille0

Pré­pa­ra­tion de l’inclusion dans la page HTML

Il est abso­lu­ment indis­pen­sable de conser­ver l’arborescence des fichiers.

Avant de lan­cer la page HTML (example.html) dans un navi­ga­teur, nous devons nous assu­rer que les lignes sui­vantes 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);

Télé­char­ge­ment

Télé­char­ger le code

0