Une carte cliquable responsive

Introduction

Comment créer assez facilement une carte cliquable mais surtout qu'elle soir reponsive. Pour le tuto, j'ai utilisé une carte de 602 x 736 px, mais d'autres tailles fonctionnent évidemment. Bien sûr, ce tuto peut s'appliquer pour tout type d'images, cartes géographiques, plans de maisons ... et tout et tout, et même pour des sites créés avec autre chose que TOWeb.


Matériel requis

Vous aurez besoin d'un logiciel permettant de créer la liste des points pour dessiner le contour des zones. Pour ma part, j'utilise le logiciel MccHTML Mapper pour Windows. Il est disponible ici . Ce logiciel n'a pas d'installateur, pour l'utiliser il suffit de lancer le fichier MccHTMLMapper.exe contenu dans le répertoire après l'avoir dézippé. Il semble qu'il ne soit plus mis à jour depuis quelque temps, mais de toute façon, il est largement performant pour ce qu'on va l'utiliser.

Il existe d'autres logiciels pour tracer des contours, mais celui-là est mon préféré car très simple à utiliser.

Script nécessaire

Avant d'utiliser le logiciel précédent, il vous faudra créer un champ HTML contenant ce petit scrip mais qui risque vite de devenir grand suivant votre utilisation. Il y a des indications entre <!--  et  -->  pour vous aider à ajouter ou modifier vos données en fonction de votre image.

Dans les 'Fichiers additionnels' vous y placez votre image et vous indiquerez son nom dans le script à ce niveau
    xlink:href="_fields/monimage.png".  Personnelement, j'utilise le plus souvent les images.png, ça permet de les inclure dans TOWeb comme des icônes (il y en a d'ailleurs quelques-unes sur cette page).

Avant de passer à la création des zones, créer la quantité de blocs nécessaires comme indiqué dans les indications.




Vous voyez des lignes  <!-- Indiquez à quoi servent ces lignes -->  , vous remplacez le texte, cela donne par exemple
<!-- département du Pas-de-Calais --> , c'est très utile pour s'y retrouver. 

Un exemple d'utilisation sur cette page. 2 tracés en polygones et 3 avec un cercle. Dans cette démo, vous verrez en plus des images au survol, l'explication est en fin de rubrique "Supplément pour ajouter une image au survol" , mais installez d'abord le premier script.

Création des zones

Vous allez maintenant ouvrir le logiciel qui ressemble à ceci.

MccHTML Mapper

Chargement de l'image

Vous avez ouvert votre image

Ouverture de l'image
sélection du bouton

Comme un département a des formes "biscornues", vous allez créer un polygone. Vous sélectionnez donc le bouton


Début de tracé

Vous cliquez ensuite sur un premier point pour démarrer le tracé. Vous faites ensuite des simples clics sur chaque point, le tracé se crée au fur et à mesure. En fin de tracé, faites un clic droit puis un clic gauche à coté de l'image. Votre polygone est terminé.

Récupération des points

          

Pour récupérer les points, cliquez dans le département, vos points apparaissent et en même temps la ligne correspondante dans la fenêtre en bas, "Code html" s'est grisée. Double-cliquez sur le premier nombre après coords=", rendez vous en fin de la ligne, placez le pointeur après le dernier nombre, puis faites 'shift + clic gauche' pour sélectionner entièrement la ligne des points. Un clic droit sur cette ligne et sélectionnez "copier". Vous allez ensuite sur le script et vous remplacez    -----liste des points-----   en collant les points dans le bloc correspondant au département. Vous changez ensuite les infos du lien dans href et <title>. Vous devez avoir quelque chose qui ressemble à cela.

               

Une astuce pour bien fermer votre polygone, s'ils sont différents, remplacez les deux derniers nombres par les valeurs des deux premiers, vous aurez ainsi bouclé la boucle (hihi).

Vous répétez ces opérations pour chaque département.


Autres formes

Vous pouvez tracer des rectangles ou des cercles. En ce qui concerne les rectangles, tracez les comme des polygones, c'est plus simple, autrement il faut faire des transformations de coordonnées pour être utilisables dans le script.

Pour les cercles, vous récupérez les 3 valeurs de coords dans  'coords="452,481,50" ' ,
soit 452 = position en X, 481 = position en Y et 50 = rayon du cercle.

              

Ces valeurs sont à placer dans un bloc de ce type

     


  Lorsque vous avez terminé vos tracés, et même entre deux, pensez à enregistrer votre travail dans un fichier .map pour le récupérer si vous devez apporter des modifications.

Supplément pour ajouter une image au survol

Si vous voulez ajouter des images lors du survol des zones, il vous faut ajouter ce script à la fin du précédent. Attention, si vous rajoutez des zones, ce bout de script doit rester à la fin.



Puis vous ajoutez toutes vos images dans les Fichiers additionnels.

Ensuite vous devez compléter 

   <a href=" monlien " target="_blank" rel="noopener"> 

pour chaque zone où il va y avoir une image avec bout de code

    onmouseover="afficherImg('_fields/ monimage.png');" onmouseout="cacherImg();"

en fait, ça doit faire quelque chose qui ressemble à cette ligne

 <a href=" monlien " target="_blank" rel="noopener" onmouseover="afficherImg('_fields/ monimage.png');" onmouseout="cacherImg();">

N'oubliez pas de renseigner  monimage.png  (ou .jpg) 


Ce rajout résulte du fait que j'ai combiné le premier script avec l'un de mes anciens qui ne prenait pas en compte les polygones, donc moins pratique.