Le blogounet

Du blabla à propos de plein de choses et de beaucoup de rien…

Tutoriel jQuery : Créer ses propres cartes pour jVectorMap et JQVMap

jVectorMap et JQVMap sont des plugins jQuery permettant d’afficher des cartes vectorielles (format SVG) sur tous les navigateurs web. Les paramètres, callbacks et events permettent de proposer des cartes très facilement configurables et d’une grande interactivité pour les visiteurs.Petit bémol, les cartes proposées dans les 2 packs sont assez peu nombreuses, il devient donc très rapidement nécessaire d’en créer soi-même.

jVectorMap propose un convertisseur en langage Python utilisant des données SIG (Systèmes d’Informations Géographiques) comme les shapefiles mais étant plutôt d’obédience « photoshopesque » que « linuxienne », les instructions en lignes de commande ont toujours tendance à m’exaspérer, de plus j’avais déjà sous la main une jolie carte de France avec les départements en couleur sous Illustrator, pourquoi donc aurais-je été taper ce genre de choses :

python \
 path/to/converter.py \
 path/to/geo-data.shp \
 path/to/resulting-map.js \
 --width 900 \
 --country_name_index 4 \
 --where "ISO = 'FR'" \
 --codes_file path/to/codes-fr.tsv \
...

Après quelques heures de tirage de cheveux (« ahhhhh !!! C’est donc ça qui explique ta calvitie ! » dirons certains zigomars de ma connaissance…) et de recherches infructueuses, je découvrais enfin le Saint Graal ! Et il ne s’agissait pas là d’un vulgaire calice ayant servi à recueillir je ne sais quoi de sanguinolent mais d’un blog dans la langue de Goethe expliquant pas à pas comment procéder pour créer ces satanées cartes pour jVectorMap depuis un logiciel vectoriel !

Le tutoriel qui va suivre s’inspire donc fortement de l’article de mon confrère allemand Matthias Schütz : SVG-Daten mit jVectorMap darstellen. Vielen Dank, liebe Freund!

Pour vous mettre l’eau à la bouche, voici le résultat :

Et voici aussi un exemple d’utilisation professionnelle de la carte sur le site du réseau de contrôle technique automobile Autovision.

Je ne vous ferais pas l’affront de vous expliquer ici comment mettre en place les plugins jQuery et suppose que si vous êtes tombé sur cet article c’est que votre page est prête et qu’elle n’attend plus qu’une jolie carte de votre cru ! (Si tel n’est pas le cas, je vous invite à consulter Le site du zéro qui propose un tutoriel très complet sur le sujet)

Passons donc aux choses sérieuses !

1 / Préparation du fichier vectoriel

(N.d.A. :  Le tutoriel est basé sur la version CS5 de Adobe Illustrator mais est facilement transposable à d’autres versions ou d’autres logiciels de dessin vectoriel)

La première étape consiste donc à dessiner votre carte dans Illustrator à la plume ou tout autre outil du moment que vous obteniez un tracé unique pour chaque (future) zone cliquable (dans notre exemple pour chaque département).

Dessinez votre carte avec un tracé unique pour chaque zone cliquable

Dans le cas d’une zone comportant plusieurs surfaces, par exemple pour le département du Morbihan, une île (Belle-Ile-en-Mer), n’oubliez pas de réunir les deux tracés avec le Pathfinder :

Pathfinder : Réunion des tracés composants une seule zone

Il est important pour la suite des opération que les tracés obtenus soient convertis en tracés transparents : sélectionnez chaque zone et faites Ctrl+8 (ou bien Objet > Tracé transparent > Créer) :

Création des tracés transparents pour chaque zone

Une fois votre carte terminée, faites Maj-Ctrl+S (Fichier > Enregister sous…) et choisissez le type SVG, le paramétrage doit être le suivant : Profil SVG 1.1 et Position décimales réglée à 2 :

Enregistrement de la carte au format SVG 1.1

2 / Création du fichier de données SVG exploitable par les plugins

Si vous pensez que le plus dur est fait et bien détrompez-vous ! Malheureusement le fichier SVG que vous venez de créer n’est pas directement exploitable par nos plugins jQuery. Ouvrez le fichier dans un éditeur de texte avancé (votre premier réflexe sera d’utiliser Notepad++, n’est-ce pas ?), voici un extrait du code généré par Illustrator :

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->

...

Chaque élément « path » représente une des zones que vous avez créé, les paramètres qui nous intéressent pour la suite sont « fill » (la couleur de remplissage) et « d » (les coordonnées des points de vos tracés). Conservez aussi dans un coin les « width » et « height » de la ligne 5, ils vous seront utiles pour la suite.

La première opération à effectuer est de nettoyer le code en éliminant tous les sauts de ligne. L’affaire sera réglée en quelques instants dans Notepad++ à l’aide d’un judicieux Ctrl+H (Recherche > Remplacer…), recherchez « \r\n » et remplacez par rien (n’oubliez pas de sélectionner l’option « Mode étendu ») :

Suppression des sauts de ligne du fichier SVG dans Notepad++

Vous allez pouvoir créer maintenant le fichier .js qui sera exploité par le plugin, il se présentera sous cette forme :

jQuery.fn.vectorMap('addMap', 'france_fr', {
   "width":702,
   "height":610,
   "pathes":{
      "80":{
         "path":"m424.3,82.9l3.3,2.6l-0.4,3.8l-3.9,8.1l2.3,7 l-10.3,1.5l-8.6,6.8l-12.8-6.7l-14.4-2.2l-3.1,1.2l-4.1-3.7l-3.4-8.4l-11.79-9.99L359.5,81l3.4-6.6l1.9-1.1l0.1-0.1l1.4,1.8l3.5,0.3 l-5.6-6l1.2-5.1l2.9,0.7l-0.03-0.02l10.53,1.02l1,3l7.1,5.8l12-2.5l-2.6,5.7L398,81l2.5-3.1l8.4,3.5l0.8-2.8l2.8,4.6l2.4-1.7 l0.8,3.2L424.3,82.9z",
         "name":"Somme"
      },
      "02":{
         "path":"m450.3,82.6l16.7,4.6l2.91,0.94L470.6,94l-1.3,3.5l1.3,3.1l-5,7.2 l-2.7,0.3l0.3,14.3l-1,2.8l-5.3-1.8l-8,4l-1.2,2.6l3.2,8l-5.5,2.3l1.6,2.4l-0.8,2.7l2.5,1.3l-7.7,10.2l-9.3-6l-3.9-4.2l0.7-2.8 l-1.8-2.5l-2.6-0.7l2.1-1.7l-0.5-2.8l-2.9-1.1l-2.4,1.5l-0.7-2.9l3,0.2l-2.9-4.5l2.6-1.7l2.4-5.7l2.6-1.1l-2.2-1.8l0.8-4.5 l-0.4-10.2l-2.3-7l3.9-8.1l0.4-3.8l12.6-0.6l2.6-2.2l2.3,1.7L450.3,82.6z",
         "name":"Aisne"
      },
   }
});

On retrouve ligne 2 et ligne 3 les paramètres « width » et « height » précieusement conservés, ensuite préparez-vous à faire du copier-coller pendant quelques heures (évidemment ça dépendra du nombre de zones), récupérez les données du fichier SVG (paramètre « d ») et copiez-les dans l’objet « path », le deuxième objet (« name ») est le nom que vous souhaitez donner à la zone (ici le nom du département).

Pour intégrer les couleurs de chaque zone (paramètre « fill » du fichier SVG), créez un second fichier .js ou intégrez le tableau de valeurs directement dans votre page :

var couleurs = {"80":"#5BC6ED","02":"#5BC4ED"};

Et voilà ! Vous avez créez votre propre carte pour jVectorMap ou JQVMap ! Et puisque vous avez été sages comme des images, voici les sources : Départements de France JQVMAP et pour répondre à la demande des lecteurs du Blogounet, voici la carte de départ au format .ai.

57 Commentaires

  1. Commentaires fermés.

  2. Bonjour,
    Je viens de tomber sur ton tuto, (très bon) mais j’ai un problème avec IE7/8 (contrainte à laquelle je ne peux pas me soustraire) .
    Cependant, si je visite le site Autovision avec des normes IE7 ta carte fonctionne normalement, alors que sur ce site-ci si je visite la page en normes IE7 on a un joli tableau cubiste…
    As-tu trouvé une solution pour que ça fonctionne nickel sur Autovision, et surtout laquelle ?
    Merci

  3. Je ne tarierai pas d’éloges pour ce travail qui rend service à de nombreuses personnes.

    Ma question concerne les responsive designs. Sur ce site en particulier la carte d’exemple se resize correctement. Par contre, dans l’exemple fourni rien ne se resize.

    Aurais-tu une piste ?

    Merci

    • Bonjour Remi, il suffit tout simplement d’ajouter un « max-width: 100% » dans le css au niveau de la div qui contient la carte et pouf, miracle, ça se resize !

  4. Hello,
    Merci pour ce tutoriel grâce auquel j’ai pu réaliser une carte du Brésil.
    Il semble juste que ce ne soit pas compatible avec la dernière version. De Jvectormap…

    ++

    Emmanuel

  5. Ping : Création de cartes vectorielles avec JVectorMap - Ludovic Frin

  6. Ping : Vos cartes de France cliquables avec jQuery Vector Maps et jVector Map | Daveweb - Le blog de Davy DUCROCQ

  7. Bonjour,

    tout d’abord, merci pour ce tutoriel. J’ai réalisé grâce à celui-ci la carte pour les régions de France.

    j’allez donc sur mon site/blog, mettre un article sur la carte de France en citant votre source et votre article. Cela vous dérange-t-il? De plus, puis-je proposé, en plus de la source pour les régions en téléchargement, la source pour départements qui est la votre?

  8. Un grand merci à toi !! Beau boulot , qui nous facilite grandement la tâche.

  9. Bonjour,

    Quelqu’un pourrait m’expliquer comment faire pour integrer cette map dans une page wordpress s’il vous plait ? c’est exactement ce que je cherche mais je ne sais pas comment faire ?

    Merci d’avance 🙂

  10. Bonjour,

    J’aimerai pouvoir modifier le contenu du message javascript (alert) quand on clic sur un département en récupérant les infos d’une bdd.

    Y a t il un moyen simple et efficace de le faire ?

    ps : je sais ou je dois modifier le code

    $(document).ready(function() {
    $(‘#francemap’).vectorMap({
    map: ‘france_fr’,
    hoverOpacity: 0.5,
    hoverColor: false,
    backgroundColor: « transparent »,
    colors: couleurs,
    borderColor: « #000000 »,
    selectedColor: « #EC0000 »,
    enableZoom: true,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {

    var message = ‘Dans le département : ‘
    + region
    + ‘ il y a ‘
    +
    + ‘ membres’;

    alert(message);
    }
    });
    });

    Merci

  11. BOnjour, félicitation pour cet excellent travail, j’aimerais créer une liste des départements , donc des liens sur lesquels réagirait le mouseover.

    Exemple : je passe ma souris sur la liste au dessus du lien  » Essone  » et la map Essone se met en surbrillance.

    est-ce possible , quelques pistes svp ?

  12. rien à voir ( quoique ) avec la question que j’ai deja posé sur les apostrophe mais , j’ai testé ta carte en local sur explorer 9 et ça ne fonctionne pas. j’ai du oublier de copier l’appel vers certain fichier js.
    je précise que ta carte fonctionne parfaitement sur ton site en ligne sous explorer 9 mais sous wampserver , nada , ç’est explosé.

    cordialement

    • pour mon erreur sur explorer 9 ça vient de quant j’essaye d’ouvrir un window.open au lieu de faire un « alert »..

      bon.. j’ai vu qu’on pouvait ouvrir un lien avec onRegionClick..je vais essayer

  13. très bon tuto , bravo et merci.

    j’ai un petit soucis pour adapter ceci à un affichage de liste de département via php mysql. ça fonctionne très bien pour les département qui n’ont pas une apostrophe , mais pour par exemple Val d’Oise , ça n’affiche rien , il y’a erreur de requête .
    je précise que toutes mes pages sont utf8 ainsi que la base et les tables. et j’ai ajouté un header utf 8 au debut de la page ainsi qu’un

    $bd->exec(« SET CHARACTER SET utf8 »);

    dans la connexion à la base.

    est ce que je dois ajouter un json_encode quelque-part ?

    une petite aide serait la bienvenue

    merci !

  14. Salut Gaël,

    Merci pour ce super tuto ! Comme ribrok je me posais la question si il était possible que tu me transmettes ta carte vectorielle, si ce n’est pas trop te demander ? 🙂

  15. Bonjour,

    J’essaye en vain depuis plusieurs jours de faire fonctionner ta map sur une page dans laquelle se trouve déjà une carte de France (celle-ci très exactement : http://jvectormap.com/maps/countries/france/).
    Je ne comprend pas d’où vient l’erreur…

    As-tu une idée d’où cela peux venir ?

    Merci,

    Nicolas

  16. Hello Gaelounet,

    Je me demande également comment intégrer la carte dans un site dynamique (sur WP), tu aurais une idée ?

    Merci ! 🙂

    • Euh oui j’ai en effet une idée puisque tu es actuellement sur un site WordPress 😀
      Voici ma méthode, après il y a plein de possibilités (avec le fichier de fonctions…).

      J’ai tout simplement modifié le fichier header.php de mon thème :

      Code pour WP

      La deuxième ligne indique que je souhaite ajouter ce code uniquement sur l’article possédant l’id 394
      A la cinquième ligne, je charge une autre version de jquery car celle incluse avec WP fait bugger la carte…

      Et voilà !

  17. Salut Gaelounet,

    Merci beaucoup pour ce tuto, il est super !

    Je me demandais si tu savais comment faire pour que les liens des régions redirigent non pas sur une pop over qui indique les infos du département, mais plutôt vers une toute autre page ?

  18. Bonjour et merci pour ce tuto!
    Ca marche parfaitement, seulement j’aimerais ajouter le nom des principales villes sur les département (en plus du rollover) et je bloque pour intégrer du texte svg dans le le fichier .js

    Je pensais utiliser « textpath » mais je ne sais pas l’intégrer…

    Quelqu’un à une idée?

    Merci!

  19. Bonsoir et merci pour ce beau travail!J’étais exactement en train de me faire une carte de France avec jvectormap car marre de ma carte flash et je viens de tomber sur ton tuto.Top!
    Pour ma carte, je cherche à pouvoir, lors d’un click sur une région, faire apparaitre seulement cette même région en plus gros avec le contour des départements à l’emplacement de la carte de france bien sûr (comme si il y avait eu un zoom).

    Seulement je ne sais pas comment faire pour pouvoir appeler une région lors du click sur la carte. Quelqu’un à une idée sur le code à utiliser. Je ne suis pas expert!

    Merci d’avance!

  20. Bonjour,
    Très bien cette carte, par contre je voudrais rajouter des liens sur chaque département, comment faire?
    MERCI…

    • Bonjour Sarah, il suffit d’utiliser cette fonction :
      onRegionClick: function(element, code, region)
      {
      $(location).attr('href',"la_page_que_tu_veux_ici.php?departement="+code);
      }

      • Bonsoir,

        J’ai crée une carte avec 6 régions différentes qui doivent renvoyer vers une page web différente selon région.
        Je n’arrive pas à faire fonctionner la méthode proposé à Sarah :

        onRegionClick: function(element, code, region)
        {
        $(location).attr(‘href’, »la_page_que_tu_veux_ici.php?departement= »+code);
        }

        pourriez-vous m’aider ?

        Bien cordialement
        Nicolas

  21. Bonjour Gael,

    Tout d’abord, excellent tuto ! Merci ! Cela servira à plus d’un =)

    J’ai une petite question cependant, disons que je désire avoir une carte de France mais avec une image de fond pour les départements et non une couleur (à vrai dire, j’aimerais que le rendu fasse comme si la carte était faite de plusieurs petits carrés).

    Sais-tu si via ta méthode il est possible d’exploiter le rendu fait via Illustrator ou bien si il faudra obligatoirement préserver des couleurs ?

    Je te remercie de ton retour !

    Michel

  22. Bonjour,

    Super le module ! 🙂
    * Question néanmoins : le bug d’affichage sur IE8 et surtout IE7 ont-ils été résolus ?

    Merci

    • Malheureusement non, mais bon puisque IE jusqu’à sa version 9 est un mauvais navigateur (pas de CSS3…) j’ai carrément décidé d’afficher un message aux internautes possédant cette catastrophe ambulante qu’est IE (à l’exception de la v.10) leur proposant de changer de navigateur !

  23. Bonjour,

    peut on rajouter du texte avec ce tuto ?

    du style :
    I n d i a n O c e a n

    Merci pour le tuto il marche plutôt bien 🙂

  24. Ping : jVectorMap, cartes vectorielles dans vos pages web | Outils pour webmaster

  25. Salut Gaelounet

    Je suis en train de tester converter.py. Mais je trouve pas le fichier de codes, codes-fr.tsv, ou meme codes-en.tsv.

    Ou est-ce que je peux generer ou trouver le fichier pour converter.py?

    Paul

  26. Salut,

    Ce tuto est vraiment tres bien fait… 🙂
    Merci à toi pour ton travail !

    J’aimerai faire la même chose pour avoir les regions de France et pour cela j’aimerai bien partir de ton fichier vectoriel pour garder les mêmes proportions. Penses-tu que c’est envisageable.

    Merci d’avance.

    PS : Au faite si on charge la map que tu forunis sous IE, elle est bugguée mais ce n’est pas la mort, il suffit juste de supprimer les espaces dans les pathes. SI tu veux je peux te fournir le fichier corrigé !

    • Salut Sylvère,

      Dès que je rentre de vacances je te fais parvenir la carte vectorielle, et pour la carte qui fonctionne en VML je suis preneur ! Merci !

      • Bonjour,
        Merci pour ton travail il m’est bien utile ! Pourrais tu m’envoyer aussi la carte vectorielle ? Car la Mayotte fait partie des départements français depuis 2011, et j’aimerais la rajoutée sans partir de zéro.
        Merci d’avance.
        Romaric

  27. Hello,

    J’ai un soucis sur IE7-8, les coordonnées sont erronées et n’affichent pas les départements de manière correcte. Les formes nes ont pas liés ce qui me donne une superposition de calques difformes…

    As-tu une idée d’ou cela peut-il bien venir ?

    Merci

    Sylvère

  28. Salut. Ta carte ne s’affiche pas en VML. C’est bizarre car je n’ai pas eu de souci avec la carte du site de jvectormap.

    • Bonjour Lagrange, oui en effet la carte ressemble à un tableau de Picasso (lequel aurait bu 3 ou 4 litres d’Aquavit cul-sec avant de peindre cette carte) en VML, j’y travaille…