Accueil Écolosites Cartographie Carte dynamique

Carte dynamique

Pascal Barbier nous offre le mode d'emploi pour intégrer une carte dynamique à son site !

Merci à lui.

 

 

Découper une carte, le long des départements ou des cantons, pour en faire des zones sensibles, est assez facile. En bonus à la fin de ce tuto, je vous réserve une surprise : les cantons s’allument au passage de la souris !

Les outils nécessaires :

-          Un logiciel de dessin (j’aime bien gimp mais beaucoup d’autres feront l’affaire)

-          Une carte (format gif, jpeg, png ou autre, peu importe)

-          De la patience (beaucoup) et un peu de temps

-          Une paire de doigts (plus facile pour les nombreux copier/coller)

Si vous êtes très méticuleux, le résultat sera meilleur.

On commence par nettoyer la carte (souvent, des textes trainent, les couleurs ne conviennent pas etc). On peut travailler avec plusieurs couleurs, personnellement j’aime la sobriété d’une carte monochrome (pourquoi pas verte) dans laquelle les contours sont en noir.

On y est ? Le vrai travail commence. Nous allons créer ce que l’on appelle un imagemap (cartographie de l’image). L’idée est de définir des zones polygonales qui suivent les contours.

Si vous utilisez gimp, ouvrez l’image, puis, dans le menu « filtre », choisissez « web » puis « image cliquable web ». L’image s'ouvre une seconde fois, vous pouvez zoomer pour plus de précision.

En haut à gauche de la fenêtre : 3 icones : rectangle, cercle et polygone. Je prends la troisième et maintenant je me lance : je clique, je clique, je clique, je clique. Bref je fais le tour de la question. Plus les points sont rapprochés, plus le contour est précis. Le dernier point est un double clic qui ferme la zone et me demande l’adresse où mènera le clic de cette zone (http://www .... enfin vous connaissez non ?).

Quelques minutes (heures ?) et pas mal de clics plus tard, j’ai défini tous mes contours. J’enregistre dans un fichier (par défaut extension .map) : en fait c’est un fichier texte. Je l’ouvre dans un éditeur (pourquoi pas nedit, à moins que je ne sois obligé d’utiliser le bloc-notes de Windows L) => select all et copy.

Maintenant on passe dans WordPress > Nouvelle page (ou modifier l’article ou …). Je passe en mode HTML (c’est en haut à droite de la zone éditeur, à côté de Visuel). ATTENTION : c’est très important de ne pas rebasculer en mode visuel : sinon l’éditeur nous mange une partie du balisage et il faut recommencer.

CollerPublierAfficher la page : magnifique !!

Le petit plus de monsieur plus : j’ajoute à chaque balise area un attribut title pour avoir une petite bulle de survol jaune.

 

Pour ceux qui ont eu le courage de me lire jusqu’ici, voici le petit cadeau promis : les zones s’allument toutes seules.
Au début du code copié précédemment, je repère la balise <img. J’ajoute un attribut class=' ' map ' '.
Juste avant cette balise, j’ajoute le tronçon de code ci-dessous. C’est fini !

//

$(function() {
$(‘.map’).maphilight();
});

Magique !

En cas de doute, vous pouvez toujours fouiller dans le code source de la page :
http://midipyrenees.eelv.fr/les-groupes-locaux/
(chercher tinyurl : vous serez dans le coin)

Pascal Barbier
Webmaster Midi Pyrénées, Formateur

 

3 commentaire(s)

  1. pol1

    Bonjour, j’ai tenté sur une page non popularisée… http://senart.eelv.fr/senart/
    Il manque le code pour que les zones s’allument…
    Merci !

  2. pol1

    a mettre avant:

    $(function() {
    $(‘.map’).maphilight();
    });

  3. pol1

    //
    $(function() {
    $(‘.map’).maphilight();
    });

Laisser un commentaire