Dans cet article, je vais vous fournir une alternative pour en finir avec les « maparea » (balises <map> et <area>) et les prises de tête pour définir des zones sur une image et réalisés de belles cartes de France cliquables. Cette alternative nous provient de l’utilisation de 2 plugins jQuery : jVectorMap et jQVMap. Ces 2 plugins vont nous permettre d’afficher des cartes vectorielles (aux formats SVG) et cela sera compatible sur tous les navigateurs (Firefox, Safari, Chrome, Opéra et IE 6 et supérieurs).

Pour cela, il faut d’abord que je remercie Gaelounet pour son très bon tutoriel sur la manière de créer ses propres cartes avec zones cliquables pour le Web avec jVectorMap et JQVMap.

Grâce aux sources (Carte cliquable par département) et au tutoriel, je me suis dit « pourquoi ne pas se faire une petite carte cliquable par région? ». Me voilà alors parti pour une petite heure de traçage de zones cliquables et de copié/coller de chaque élément « path » représente une des zones (si vous ne comprenez pas bien, c’est logique, mais n’oubliez pas de lire le tutoriel précédemment cité pour vous éclairer).

Une fois le tutoriel suivi à la lettre, j’ai donc obtenu une magnifique carte cliquable par région.

Vous allez me dire que tout cela et bien beau mais que les « maparea » vous suffisent. Détrompé vous !

Vous avez désormais à disposition 2 cartes de France (Régions et Départements) pour vos sites. Vous n’avez plus qu’à définir les dimensions de votre div qui va contenir l’image. Que vous souhaitiez une carte plus ou moins grande, vous aurez toujours un visuel de qualité.

Je vous laisse donc le plaisir de télécharger les sources ci-dessous contenant 2 dossiers de fichier HTML, JavaScript et CSS pour mettre sur vos sites de belles cartes de France cliquables par région ou département.

Télécharger “Carte de France avec jQuery Vector Maps” Carte-France-Jqvmap.zip – Téléchargé 7220 fois – 36 kB

133 thoughts on “Vos cartes de France cliquables avec jQuery Vector Maps et jVector Map

  1. Bonjour,

    Je voudrais savoir comment procéder pour que quand on clique sur un département, ce soit un lien à la place de la boite de dialogue qui affiche le nom de département.

    Merci d’avance de votre aide.

    Cordialement

    1. Hello Antony,

      tout d’abord, excuses moi pour le temps de réponse.

      Afin de mettre un lien à la place de la popup, il te suffit de remplacer le code qui récupère le CODE et NOM DE DEPARTEMENT par la fonction de redirection javascript window.location.href

      Ainsi, si, par exemple, tu souhaite rediriger vers la même page, avec en paramètre GET le nom du département, il te faut remplacer les lignes 28 à 34 par window.location.href = '/france_map.html?dep=' + region;

      J’espère t’avoir était utile et reste à ta dispo si tu as d’autres questions.

      1. Bonjour,
        Comment doit on faire si l’on souhaite que chaque région renvoie vers une url différente.
        Merci de votre votre aide. Super tuto !

  2. Bonjour,

    Tout d’abord un grand merci pour ce boulot pour un résultat idéal dans mon cas !!

    J’aimerai simplement savoir s’il existait une possibilité de rendre les dimensions « responsive » pour un thème graphique « responsive » lui aussi…

    Merci d’avance,

    1. Bonjour,

      merci à toi pour les compliments, cela fait toujours plaisir !

      Concernant ta question, je ne me suis jamais réellement posé la question mais sachant que c’est la fonction vectorMap qui rends la carte cliquable, je pense qu’il faudrait voir pour redimensionner la div contenant la carte en jQuery et ensuite rappeler à nouveau la fronction mais il n’est pas dit que cela fonctionne…

      En revanche, si tu tests cela, je suis preneur de la solution que tu auras trouvé.

      Bonne chance à toi !

    1. Bonjour,

      oui cela est possible. Il suffirait de suivre le tutoriel de Gaelounet sur son site jaffredo.com pour découper les cartes et générer le code.

      C’est exactement le travail que j’ai réalisé pour les régions car Gaelounet nous avez fait la carte des départements.

      Mais un conseil, recherches des cartes en vectorielles déjà détourées sur le net et ensuite tu n’auras plus qu’à faire la création du fichier de données SVG.

      Bon courage à toi !

  3. Ça buggue avec les versions supérieures de jQuery, il faut mettre 1 dollar au pot en plus :
    jQuery(function($) { });
    Ce n’est pas très customisable, j’ai vraiment galéré à envoyer mes URL.
    J’ai l’impression que ça ne fonctionne pas très bien sur les téléphones mobiles, je n’arrive à en afficher aucune sur le mien, un Nokia (qui tourne avec windaube), pas plus ici qu’ailleurs…

    1. Salut à toi affreux,

      que veux-tu dire par « j’ai vraiment galéré à envoyer mes URL »? car j’ai déjà utilisé ce plugin jQuery pour des sites et cela à toujours était simple à mettre en place.

      Si tu as des soucis, n’hésites pas à me laisser un autre commentaire et je serais ravi de pouvoir t’aiguiller.

      Pour le mobile, je n’ai testé que sous iOS et Androïde. Je n’ai pas pu le tester sur un Windows Phone mais il n’y a aucune raison que cela en fonctionne pas. Dès que j’ai un Windows phone sous le main je testerai cela et je te dirais si tout fonctionne bien.

      en espérant t’avoir bien répondu.

      1. Quand j’écris que j’ai galéré, cela ne signifie pas que je n’ai pas réussi. J’aurais peut-être dû passer plus de temps sur la documentation de l’API, mais je n’ai vu ça que par la suite, quand j’y suis retourné pour mes histoires de mobile.
        À ce sujet, d’après ce que j’ai compris, c’est une question de format d’image. Différentes qualités de SVG existeraient, et certains dumbphones comme le mien, ne les afficheraient pas toutes.
        Pour le référencement naturel en plus, c’est pas top. Ça va quand il s’agit juste d’une image à afficher, mais ça se corse quand on veut utiliser ça comme image map. Ce qui est mon cas.

  4. Bonjour,

    Je voudrais savoir comment faire pour que quand on clique sur un des départements, ce soit un lien qui s’ouvre à la place de la boite de dialogue. Je doit pouvoir orienter chaque département vers une URL différente.

    Merci d’avance

    1. Bonjour magik,

      Si tu souhaite rediriger vers une page différente, il te faut remplacer les lignes 28 à 34 par window.location.href = ‘/ta_page.html?dep=’ + region; mais cela te dirigera vers une même page dans laquelle, avec le paramètre $_GET[‘dep’], tu pourras faire plusieurs affichage.

      Pour avoir des pages réellement différentes, il te faudrait créer une règle de redirection dans ton .htaccess. Ainsi par exemple, tu pourrais avoir dans le code :
      – dans le code aux lignes 28 à 34 : window.location.href = ‘/ta_page-r’+region+’.html’;
      – dans ton htaccess : RewriteRule ^ta_page-r([a-zA-Z0-9-_]+).html$ /ta_page.php?region=$1&%{QUERY_STRING} [L]
      cela fait que ta_page.php servira à afficher plusieurs pages qui seront donc bien différentes.

      à ta dispo si tu as besoin d’autres conseils.

      1. bonsoir
        dsl je suis trop nul en javascript
        j’ai remplacé du ligne 28 à 34 par window.location.href = ‘/ta_page.html?dep=’ + region;
        mais ça marche pas je sais pas pq
        help plzzzzzzzzzzz

        1. Salut à toi,

          as-tu une règle de redirection qui redirige ta_page.html vers ta_page.php avec un traitement du $_GET[‘dep’] dans lequel se trouve ta région.

          effectivement dans un html, tu ne pourra rien faire de ta variable dep.

          Bon courage à toi.

  5. bonjour à tous ,
    j’ai utilisé et c’est super , merci pour le partage !!

    Est ce que quelqu’un peut me dire comment je dois faire pour changer la couleur de la carte et , la couleur du hover sur les régions?? merci

  6. Salut et merci pour ce tuto et les codes.
    j’ai une question un peu bizarre..dans l’hypothèse ou je voudrais une carte ile de france, à partir de ton code c’est possible techniquement?je suis un bidouilleur plus que developpeur(pour l’instant)
    j’ai essayé, enlevé dans les fichiers js tout ce qui concernait pas les departements d’ile de france
    Je me retrouve bien avec juste l’image cliquable de la région ile de france (avec les boutons + – et la replique de la carte en moins précis à coté) mais la taille du svg ne change pas : je voudrai ne garder que ce qui concerne l’ile de france et remettre cette nouvelle carte au premier plan..est ce possible?(en gros c’est comme si javais simplement détouré l’image autour de l’ile de france, alors que je veux vraiment faire agrandir l’ile de france) je sais pas si je suis clair, mais ca m’aiderait grandement si tu pouvais me dire quoi enlever exactement (ou plutot quoi garder), pour que j’ai , à partir de ton exemple, une carte cliquable d’ile de france..)Je partagerai évidemment le code source en question…

    1. Hello à toi,

      pour avoir directement le bon format, il te suffit de mettre le bon format dans le fichier france_map.html.

      Tu le modifieras directement à la ligne 41 :

      Bon courage

      1. Salut Davy, salut Mat !

        J’ai le même problème sauf que je voudrais que la région Rhone Alpes auvergne… J’ai modifié pour avoir que les départements de cette région mais j’aimerais que ça centre sur cette région. voici un exemple : http://oceanofnoise.fr/testmap/france_map.html
        Si je modifie la ligne 41 comme tu le dis, ça modifie juste la hauteur ou la largeur, mais ca centre sur toute la France encore.

        Mat, tu as trouvé ?
        Une idée Davy ?

        Merci d’avance !

    1. Bonjour à toi,

      à mon avis regarde plus du côté de la configuration du serveur (chemin où son placer tes fichiers).

      En effet, il s’agit d’un simple appel à un fichier JavaScript donc rien à voir avec un serveur. Si tu le met sur ton bureau cela devrait marcher. à mon avis c’est dans l’appel des fichier dans le fichier principal qu’il y à un souci à mon avis je regarderai par là si j’étais toi.

      Bonne continuation

  7. Bonjour !

    Wow, super boulot et super aussi de tout filer en téléchargement !

    J’ai juste une petite question concernant les droits des fichiers : est-ce complètement libre de droit ? (en indiquant le site dans les sources par exemple)

    Quoi qu’il en soit, merci beaucoup !

    (pour les sites « responsive », je confirme ce qui a été dit dans un autre commentaire : mettre le width à 100% et laisser le height à 600px (par ex.) et ça marche du tonnerre !)

    1. Bonjour,

      merci pour le compliment, ça fait toujours plaisir. Je me suis dis que tout donner en téléchargement été mieux. Je me suis trop souvent retrouver sur des sites où il était impossible de télécharger les sources et c’est… comment dire… rageant :)

      Oui cela est complètement libre de droit, il s’agit d’un plugin jQuery et pour la carte c’est cadeau :) Après, un petit lien vers l’article est toujours le bienvenu.

      Bonne continuation

  8. Bonjour, je ne parviens pas à afficher la carte avec les régions sur mon site wordpress.
    Je ne suis pas vraiment familier avec le javascript… Voici quelques questions :

    – Il n’y à pas de fichier « jquery.vmap.colorsFrance » pour cette version de la carte, est-ce normal ?

    – Doit-on installer un plugins sous wordpress pour que la carte fonctionne ?

    J’ai importé tous les fichiers sur le serveur puis dans ma page d’accueil j’ai copier le code de »france_map.html » en indiquant les nouvelles sources des fichiers js et css. Rien ne s’affiche.

    Toute aide sera la bienvenue !
    Merci beaucoup

    1. Hello à toi,

      Voici les réponse à tes 2 questions :
      – Pour la carte des régions pas de fichier colors car j’ai pris la décision de laisser toutes les régions de la même couleur.
      – Pas de plugin, il suffit bien sur de mettre les JS et CSS sur le même serveur que ton site et de bien les linker.

      Peux-tu nous mettre les 2 bouts de code (appel des fichiers CSS et JS + affichage de la carte) afin que je puisses t’aider.

      A bientôt

      1. Bonjour et merci de votre rapide réponse.
        J’ai donc importé les 2 fichiers .js et le fichier unique .css sur le même serveur que mon site, dans un dossier nommé « plugins ».

        Voici le code que j’ai inséré sur la page ou je souhaiterai voir la carte apparaitre. Ce code n’est autre que celui de la page « france_map.html » sur lequel j’ai modifier les adresses sources :

        France Map for JQVMap / Gaël Jaffredo

        $(document).ready(function() {
        $(‘#francemap’).vectorMap({
        map: ‘france_fr’,
        hoverOpacity: 0.5,
        hoverColor: « #EC0000 »,
        backgroundColor: « #ffffff »,
        color: « #FACC2E »,
        borderColor: « #000000 »,
        selectedColor: « #EC0000 »,
        enableZoom: true,
        showTooltip: true,
        onRegionClick: function(element, code, region)
        {
        var message = ‘Région : « ‘
        + region
        + ‘ » || Id : « ‘
        + code
        + ‘ »‘;

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

        Est-ce bien ce code la qui est sensé faire l’appel des fichiers .css et .js ? Ou bien fais-je complètement fausse route ?

        Bonne soirée et merci beaucoup de votre aide !

        1. En fait le souci c’est que tu appel bienle JS mais tu n’a pas créé la div qui doit recevoir le JS qui est la div « idfrancemap ».

          Pour corriger ton souci, il te suffit, sur ta page, de mettre le code suivant :

          1. Bonjour,
            merci de ta réponse, j’ai ajouté le code : et cela ne fonctionne toujours pas. Je ne vois pas d’ou peux venir le problème. Il y à t’il un autre code à mettre quelque part ? Ou des modification à faire sur les fichiers JS et css ?

            Merci

  9. C’est bon j’ai trouvé la solution. Il s’agissait d’un problème lié aux adresses des sources scripte qui n’étaient tout à fait au bon endroit.

    La carte s’affiche bien, toutefois je n’arrive pas du tout à créer les liens vers différentes pages. J’ai essayé plusieurs techniques. Quelqu’un pourrait-il m’expliquer les différentes étapes à suivre pour créer des liens vers des pages web différentes lorsque l’on clique sur une région ?

    Merci beaucoup !

  10. Personne pour M’aider ? Ça fait bientôt une semaine que je planche sur cette carte! J’arrive bien à l’intégrer au site mais rien n’y fait pour les liens URL des différentes régions… Et ce n’est pas faute d’essayer!

    Toute aide sera la bienvenue!

    Merci

  11. C’est bon j’ai fini par y arriver. Très simple en réalité, après avoir comprit ça se fait en 15 min pour toutes les région! Voici le code inssérer à la place des lignes 28 à 34 :

    case «  »
    window.location.replace(« http://ta-page.com »);
    break;

    Entre les guillemets qui suivent « case » il faut placer les deux lettres correspondants à la région concernée par le lien url que vous souhaitez créer.

    Ces deux lettres se trouvent dans le fichier « jquery.vmap.france.js » que vous pouvez éditer comme bon vous semble tant que les lettres de ce fichier correspondent à celles que vous placerez dans « case »…

    Il suffit donc de placer 22 fois ce petit code pour créer des liens différents pour les 22 régions !

    1. Merci à toi d’avoir posté ta solution et désolé pour mon temps de réponse.

      Ta solution ira si tu as des URLs en dure mais pour un site dynamique, je te proposes de te référer aux commentaires un peu plus hauts qui indique comment rendre cliquable les zones de la carte.

      N’hésites pas surtout si tu as d’autres questions.

    2. Une alternative pour renvoyer vers des emplacements spécifiques sur la même page ou ailleurs, sans utiliser la fonction case:
      {
      window.location.replace (« # » + region);
      }
      Ceci permet de renvoyer à des emplacements spécifiques dans le même texte, identifiés par la balise
      Alsace
      Aquitaine
      Auvergne
      Basse-Normandie
      Bourgogne
      etc.
      On peut éditer (« # »+region) pour renvoyer vers des pages uniques

  12. jmap est un bon plugin. Mais passer a Raphael est peut etre plus judicieux a condition d’etre a l’aise avec Jquery. C’est assez puissant pour gerer des SVG. J’ai fait une carte de france pour un site que je developpe carte des departements de france. En une journée c’etait fini.
    L’avantage c’est qu’avec raphael on peut bouger les path, faire du texte etc. Et ca permet aussi de mettre les mains dans le SVG. Finalement c’est assez simple.

  13. Super sources. Un grand merci pour le partage.

    Pensez-vous qu’il soit possible d’avoir certaines régions non cliquables, et éventuellement d’une couleur plus claire afin de les différencier sur la map ?

    Peut-être créer un tableau dans les paramètres avec les zones non cliquables et effectuer une boucle dans le js pour les désactiver. je vais essayer de creuser cette piste. Si vous avez des idées…

    1. Hello,

      pour rendre certaines zones non cliquables, il te suffit d’enlever les zones du fichier jquery.vmap.france.js

      Bon courage

  14. Bonjour,
    Merci beaucoup pour ce tutoriel et pour le résultat! Je vais enfin pouvoir remplacer mes images par des cartes interactives…
    Je me permets juste une question, car peut-être avez-vous une réponse simple: est-il possible de donner un emplacement fixe (par exemple sous la carte) à .jqvmap-label du CSS?
    Car chez moi (pour l’instant carte des départements), les « labels » sortent du cadre de ma carte:
    http://www.france-politique.fr/elections-cantonales-2011.htm
    Bien cordialement!

    1. Hello,

      à mon avis il faut que tu cherches dans le JS directement et voir pour l’emplacement du label selon la déplacement de ta souris s’il doit être à droite ou à gauche.

      Je ne pourrais t’en dire plus.

  15. Bonjour Davy
    j’aimerai savoir comment dans jquery.vmap.france.js dans « name »: …. (nom de département) peut-on ajouter des information dynamiques a partir de bd MySQL, genre Paris – 43 boulangerie

    1. Hello,

      pour cela, il te suffit de générer le javascript dans code HTML/PHP avec un foreach pour chaque département.

      Bonne chance

      1. Bonjour, Merci pour cette superbe carte qui m’est bien utile!

        J’ai le même problème qu’ AsrahZarh, fonctionne sur tous les navigateurs sauf ie8 et inférieur.
        (on voit pourtant les boutons zoom + et zomm -).

        Merci d’avance.

  16. Bonjour,
    J’ai installé ce plugin sur un site, qui fonctionne très bien sous Chrome …
    Et bien sur, ne fonctionne pas sous IE (je le teste sur IE8).
    Or, le site devra fonctionner pour tous les navigateurs.
    Besoin d’aide :'(
    Merci !

  17. Bonjour à tous,
    j’ai beau lire et relire vos commentaires je n’arrive pas à faire une redirection avec un lien.

    Dans quel fichier faut il aller et quel est le code source exact ?

    Lorsque je mets (en exemple)
    case «37»
    window.location(« http://google.com »)

    Window.location est en rouge et après rafraichissement de mon navigateur la carte disparait.

    Merci de votre aide.

  18. Salut,

    Est ce que il est possible de tracé les traits des départements (juste visuellement) mais c’est les régions qui sont cliquable ?

    1. Bonjour,

      je pense que cela est tout a fait possible en changeant le SVG par un autre avec vos contours mais il faudrait tester avant :)

  19. Bonjour et bravo à toi Davy Ducroq, ton script est superbe.

    Je me permet de laisser un petit commentaire car je rencontre un petit probleme et je ne vois pas d’ou il viens.
    En effet, en utilisant le script des carte de france des départements, je souhaite, non pas qu’un pop up s’affiche mais plutot que le clic sur un département redirige sur une nouvelle page, j’utilise donc la modification de Guillaume, je remplace donc les lignes 28 a 34 par

    case « »
    window.location.replace(« http://ta-page.com »);
    break;

    je chance donc les 2 espaces entre les guillemets et y met le premier code departement, a savoir le 80.

    Mais en fait a chaque fois que je met ce code, meme vierge, la carte de france disparait,je ne comprend pas d’ou cela proviens. j’ai bidoullé le code, voir si ce il y avait les parentheses a changer ou autre, mais rien, des que je sort le code d’origine
    var message = ‘Département : « ‘
    + region
    + ‘ » || Code : « ‘
    + code
    + ‘ »‘;

    alert(message);

    Ca fonctionne, mais si je le remplace, je n’ai plus rien.

    Une idée?

    Cordialement.

    1. Salut,

      désolé du retard de réponse. As-tu solutionné ton problème? Il doit certainement y avoir une erreur dans ton code. Peux-tu nous le publier ici?

    2. Il manquait une partie du code. La bonne syntaxe est la suivante :
      switch(code)
      {
      case »1″:
      window.location.href = ‘http://www.’;
      break;
      case »2″:
      window.location.href = ‘http://www.’;
      break;
      }

      Gerger

  20. Bonjour,

    Merci pour cette carte vraiment utile.

    Ceci dit, je cherche à désactiver les fonction mouseover et mouseon afin de garder simplement la carte. Par ailleurs, je recherche également comment je peux colorier les régions différement (le rhône en rouge, l’Ile de france en rouge, etc…)

    Avez-vous des conseils sur ces points ?

    Merci d’avance
    antoine

    1. Bonjour,

      il vous suffit de définir les couleurs différents dans ce fichier : jquery.vmap.colorsFrance.js

      et vous aurez ainsi des couleurs différentes pour chaque département. le plus long sera de les identifier par rapport aux numéros qui ne correspondent pas avec les vrai numéro de départements.

      Bon courage

  21. Merci beaucoup pour ce tuto!!

    – Concernant les lignes de 28 à 34 à remplacer par l’URL, peux tu me dire quelles sont elles, je n’arrive pas à les trouver …

    – Et secondo, j’ai beau changer le background color mais je n’arrive pas à le modifier (fond blanc), l’idéal serait une transparence, mais si j’accède à la modification du fond je pourrais faire avec …

    Merci d’avance, A.W

      1. Bonjour,

        désolé de ne pas vous avoir répondu à tant.

        j’espère que vous avez trouvé les réponses à toutes vos questions.

        Bonne continuation

  22. Merci Davy, pour ton retour !!! Tout est réglé, j’ai simplement une dernière requête : au survol d’un des département il ya une infobulle que l’on gère avec la feuille CSS !! Je souhaiterai récupérer la variable .JS correspondant au nom du département pour l’afficher ailleurs sur ma page mais je ne trouve pas!!!

      1. La carte te renvoie déjà le nom et n° du département. Moi j’avais également besoin de récupérer le nom du département pour l’afficher. J’ai donc, dans la fonction loadMap() fais une redirection .JS et je récupère ensuite l’info avec PHP et la méthode GET.

        function loadMap(numDpt){
        $(‘#francemap’).vectorMap({
        map: ‘france_fr’,
        hoverOpacity: false,
        hoverColor: ‘#50E7B9’,
        backgroundColor: « #FFFFFF »,
        colors: couleurs,
        borderColor: « #50E7B9 »,
        selectedColor: « #00000 »,
        enableZoom: false,
        showTooltip: true,
        onRegionClick: function(element, code, region){
        //REDIRECTION AVEC RECUPERATION DU CODE DE LA REGION, MAIS TU PEUX RECUPERER LE NOM
        document.location.href = ‘accueil-‘+code+’-00.html’;
        }
        });

        Voilà, j’espère t’avoir aidé

        Bonne journée

        1. Merci Guillaume & Davy ! avant même la redirection au clic, je souhaiterai au survol d’un département (sur la page de la carte) pouvoir utiliser l’info (cette variable ‘nom du département’. Mais vraiment au survol !!! merci pour vos retour

    1. Bonjour,

      pas de quoi pour les cartes. Concernant ton souci, je ne vois pas vraiment d’où cela peut venir. As-tu une URL où l’on pourrait regarder cela et voir ce qui ne fonctionne pas?

  23. Bonjour à tous,

    Je voudrais te remercier pour cette carte et ses explications, cela m’a grandement aidé. J’aurais juste une petite question, ma carte est terminée et mise en place sur mon sites test. Celle-ci fonctionne bien, mais elle ne s’affiche pas sous IE 8. Ai-je supprimé quelque chose que je n’aurais pas du (je ne pense pas, mais bon, j’ai fait plusieurs modifications), et je n’ai pas testé sous IE 9. Auriez-vous une astuce ou une idée?

    Par avance merci

    Cordialement

  24. Bonsoir !!! j’aimerai de la même façon qu’Alain pouvoir remplacer l’info bulle par une ‘div’ rappelant le nom du département au survol. Merci pour cette carte !!!

    1. Hello,

      mise à part les mettre directement dans les images, je ne vois pas comment tu pourrais faire, notamment au niveau du placement.

      bonne journée

  25. Cela fait 2 jours que j’essaie d’intégrer cette carte cliquable que je trouve formidable dans un module Prestashop 1.6.11 mais rien ne fonctionne; Quelqu’un dans le même cas que moi ?

  26. Bonjour à tous,

    Tout d’abord un très grand merci pour le travail réalisé.
    J’ai un soucis que je ne parviens pas à résoudre, j’aimerai la carte des départements mais sans les DOM.
    J’ai commenté dans le js jquery.vmap.france.js les path 971,972,973, 974
    Mais la carte est décallé du coup de 80 px vers la droite :
    http://ns354881.ovh.net/v61/carte.html

    Comment faire ?

    Merci.

    1. Bonjour,

      je ne peux malheureusement pas accéder à votre URL et ne peut donc voir ce qui ne vas pas.

      Il faudrait, si possible, que je puisses y avoir accès pour vous aider.

  27. Bonjour.
    j’ai fait une carte avec JQVMAP. tout marche.
    seulement je veux pouvoir titre chaque région. mais ca ne marche pas.

    comment titrer chaque région? les titres doivent rester afficher

  28. Bonjour, je découvre cette carto seulement aujourd’hui et il est possible qu’elle ait évolué.

    Avant d’y consacrer du temps, j’aurais aimé savoir ce qu’il en est de son fonctionnement sur les navigateurs de mobiles et tablettes et ce qu’il faut ajouter pour en faire une carte Responsive.

    Merci de votre aide.
    JPaul Henry

    1. Bonjour,

      malheureusement, je ne pourrais vous dire cela mais étant du SVG, la carte s’adaptera logiquement bien si elle vous l’utilisez avec des pourcentages.

      A tester bien sûr :)

  29. Bonjour,
    je suis vraiment admiratif de votre travail (je le serai davantage si je pouvais obtenir une réponse à mon problème :) ):

    Je travail sur la version département. Je souhaiterai que lorsque l’on clique sur un département, cela ouvre une page html en dure situé sur mon serveur / ou un autre site (en fait le but est lorsque l’on clique, cela ouvre un lien).

    J’ai fait la modification des lignes 28 à 34 sauf que à chaque fois que une fois, lorsque je rafraichi la map, celle-ci disparait.

    J’ai inséré ce code, comme je l’ai vu dans un commentaire de Gerger.

    switch(code)
    {
    case »1″:
    window.location.href = ‘http://www.mapageexemple1.fr’;
    break;
    case »2″:
    window.location.href = ‘http://www.mapageexemple3.fr’;
    break;
    }

    ce qui fait de mon script :

    $(document).ready(function() {
    $(‘#francemap’).vectorMap({
    map: ‘france_fr’,
    hoverOpacity: 0.5,
    hoverColor: false,
    backgroundColor: « #ffffff »,
    colors: couleurs,
    borderColor: « #000000 »,
    selectedColor: « #63cbff »,
    enableZoom: false,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    switch(code)
    {
    case »1″:
    window.location.href = ‘http://www.mapageexemple1.fr’;
    break;
    case »2″:
    window.location.href = ‘http://www.mapageexemple3.fr’;
    break;
    } });
    });

    Quelqu’un a une solution? J’écume le web mais je ne trouve rien.
    je vous remercie par avance !

    1. Hello,

      il y a juste un souci d’accolade après ta ligne onRegionClick: function(element, code, region). voici le code à mettre afin que tout fonctionne :

      $(document).ready(function() {
      $('#francemap').vectorMap({
      map: 'france_fr',
      hoverOpacity: 0.5,
      hoverColor: "#EC0000",
      backgroundColor: "#ffffff",
      color: "#FACC2E",
      borderColor: "#000000",
      selectedColor: "#EC0000",
      enableZoom: true,
      showTooltip: true,
      onRegionClick: function(element, code, region)
      {
      switch(code)
      {
      case "1":
      window.location.href = 'http://www.mapageexemple1.fr';
      break;
      case "2":
      window.location.href = 'http://www.mapageexemple3.fr';
      break;
      default :
      window.location.href = 'http://www.mapageexemple3.fr';
      break;
      }
      }
      });
      });

      A ta dispo si tu as encore besoin d’aide

      Davy

  30. Bonjour,

    Tout d’abord merci, oui merci pour les scripts et le boulot fait c’est génial.

    J’ai cependant une petite question, je voudrais rajouter sur la carte des régions la Guadeloupe, la Martinique, La Réunion et la Guyane. j’ai donc récupérer dans le jquery.vmpa.france.js de la carte des départements les lignes qui vont bien et les ai ajouté au même fichier mais dans la partie région.

    Jusqu’ici tout va bien tout apparait, par contre ils apparaissent un peu trop pret des côtes française, je voudrais pouvoir mettre un peu plus d’espace entre la france et les départements ajouté (comme sur la carte des département en somme).

    Mais je ne vois pas ou cela doit ce faire, y a t’il un moyen simple de le faire ?

    Merci d’avance pour votre réponse.

    Tarlak

  31. bonjour j’aimerai intégrer cette map sur une page dans Muse et je colle donc le html et je met les liens js et css au meme niveau que mon index.html

    Mais rien ne se passe, j’ai les liens certainement car je vois la sourie changer en petite main clicable mais je ne vois pas la carte

    Est cen ormal ?

  32. Bonjour,

    Merci pour ce beau travail, maintenant je souhaiterai savoir comment je peux afficher un text dans les path sans onmouseover, par exemple je veux afficher un résultat de vote par chaque région?

    Merci d’avance

  33. Bonjour,

    Je souhaite dans mon cas rassembler plusieurs régions entre elles. Suis je obligé de refaire les tracés sur Illustrator ? Si Oui quelqu’un aurait-il les tracés des régions à me fournir que j’ai juste à les rassembler entre eux ?

    Merci pour votre aide.

  34. Bonjour et merci pour cet magnifique petit programme.

    En plus avec des réponses aux questions depuis le début, c’est magnifique.

    J’aimerais juste rajouter une fonctionnalité supplémentaire : pouvoir afficher sur la carte (par région) la dernière région validée et sauvegardée. Malheureusement je n’arrive pas à voir où se trouve la fonction a appeler pour le faire ?

    Merci d’avance si vous pouvez m’aider !

  35. Bonjour et merci pour cette carte !

    je patauge complétement !!! A l’instar de ALAIN et AUDREY et malgré l’explication de GREGORY

    http://www.daveweb.fr/blog/vos-cartes-de-france-cliquables-avec-jquery-vector-maps-et-jvector-map.html#comment-69

    Je ne vois vraiment pas comment procéder :

    Je voudrais simplement connaitre le nom de la variable « département » afin de remplacer l’info bulle au survol (!important) donc en instantané par une indication sur le coté

    comme dans l’exemple suivant :
    http://cmap.comersis.com/carte–de-france-interactive-html5-gratuite-cm6z59f89o4.html#

    le nom en rouge en haut à droite !

    Merci de me donner une explication simple et détaillée (je ne maitrise pas JS énormément

    Je compte sur vous

    1. Bonjour Rachid,

      Pour ne pas avoir l’infobulle qui suit votre souris mais le placer à un endroit spécifique autour de la carte, il vous suffit de modifier les variable Top et Left du tooltip.

      Cela se passe dans le fichier jQuery.vmap.js aux lignes 543 et 544. Pour le placer tout en haut à gauche par exemple, il suffit de remplacer :
      if(params.showTooltip)
      {
      params.container.mousemove(function (e){
      if (map.label.is(‘:visible’))
      {
      map.label.css({
      left: e.pageX – 15 – map.labelWidth,
      top: e.pageY – 15 – map.labelHeight
      });
      }
      });
      }
      par :

      if(params.showTooltip)
      {
      params.container.mousemove(function (e){
      if (map.label.is(‘:visible’))
      {
      map.label.css({
      left: 0,
      top: 0
      });
      }
      });
      }

      en espérant avoir répondu à ta question

  36. Bonjour Davy,

    Merci beaucoup de mettre à disposition ce genre de ressource, c’est vraiment top !
    Je l’avais installé sur un de mes sites, elle fonctionne très bien, j’avais modifié les lignes onrgeionClick par :
    window.location.href = ‘URLdemonsite/ma-region/’ + region;

    A présent, je voudrais rattacher des pages dynamiques (avec un ID) aux régions.
    J’ai parcouru les réponses précédentes, ça m’a l’air possible.
    Mais pourrais-tu me confirmer que c’est faisable techniquement ?
    Est-ce que je me sers des « case » pour lister mes 22 régions ?

    Dans le commentaire 34, Guillaume parle des lettres à remplacer.. saurais-tu m’en dire plus ?
    http://www.daveweb.fr/blog/vos-cartes-de-france-cliquables-avec-jquery-vector-maps-et-jvector-map.html#comment-34

    Merci d’avance !

  37. Bonjour,

    Je tente d’ajouter la carte dans une page wordpress , mais la carte ne s’affiche pas. Voici les éléments que j’ai controlé :
    – Tous les fichiers js sont correctement liés.
    – J’ai corrigé les erreurs $ d’appels indéfinis en enfermant l’appel JQuery appelle différemment
    – Div id =francemap ajouté dans le DOM

    J’ai les erreurs suivantes dans la console du navigateur
    – TypeError : jQuery.fn.vectorMap est pas une fonction
    – TypeError : MapData est indéfini

    Un coup d’oeil serait très apprécié !

    A bientôt
    GD

  38. Bonjour et merci pour cet article, c’est exactement ce que je recherchais.

    Parcontre j’ai juste une question, comment faire pour changer la couleur d’un pays pour le mettre en surbrillance sur la carte (par exemple toute la carte est en noir et on mets la france et la chine en vert) ?

    Merci, julien

  39. Bonjour,
    Merci pour cette carte, elle m’est très utile !
    Je cherche mais je ne trouve pas la réponse à ma question :
    Comment insérer une image dans la description des régions ?
    Merci beaucoup,
    Franck

  40. Bonjour à tous,
    Merci pour cet excellent script, que souhaite utilisé, à la place d’un ancien script avec flash.
    La page est ici : http://www.fptcgc.org/structure_geo_bis.php , malheureusement la carte de France ne s’affiche pas.
    J’ai donc pris simplement la page : http://www.fptcgc.org/france_map.html , là ça marche, pour voir si tous les liens des scripts sont bien au bon endroit .
    Ma question , y at-il des incompatibilités entres différents javascript, car dans cette page j’en utilise quelques uns.
    Je n’ai que ceci à résoudre, autrement le reste marche nickel.
    Merci de votre aide
    Cordialement
    Jean-Pierre

  41. J’ai l’impression que mon premier post est passé à la trappe.
    Je disais donc, que ma carte ne s’affichait pas , si je laisse les deux scripts cités au post précédent.
    jquery.min.js, et foundation.min.js.
    Pouvez vous éclairer ma lanterne ?
    Merci pour ce script, qui me convient parfaitement bien.

    1. Salut,

      je viens d’aller sur ta page et je vois bien la carte et elle semble bien fonctionner.

      peux-tu me dire ce qui ne fonctionne pas que je puisse t’aider?

  42. Bonjour,
    Oui cette page fonctionne :http://www.fptcgc.org/structure_geo_bis.php, mais si tu regardes le menu il ne fonctionne pas, car j’ai supprimé de mon code : jquery.min.js, et foundation.min.js., si je les ajoute à mon code, la carte de s’affiche pas si tu veux je peux te passer le code complet de cette page par mail..
    Car si cela marche je souhaite l’intégrer dans le site, et j’ajouterai la carte des régions, à ce propos aurais-tu la même avec les 13 nouvelles régions, car le principe me plaît il s’intègre bien avec ma base de données que j’interroge à partir du lien fait sur la carte avec la méthode GET.
    Merci de ton aide.
    Cordialement
    Jean-Pierre

    1. Bonjour,

      en regardant les erreurs JS, il semblerait que ce soit un fichier orbit.jp qu’il manque car on appel une fonction qui viendrait de ce fichier.

      Ensuite, pourquoi as-tu enlever jquery.min.js et foundation.min.js? est-ce qu’il y avait un problème avec jqvmap?

      1. Essai d’enlever le jquery de la carte et de remettre le tien. tu étais sur une version 1.9 et la carte une version 1.7.

        certaines fonctionnalité dont tu as besoin dans ton menu ne doivent pas être disponible dans la 1.7.

          1. Bonjour,

            il devient difficile de pouvoir t’aider plus malheureusement.

            la seule chose que je vois c’est que tu appels 2 fois jQuery (lmigne 33 et 244 du code source).

            essaie de laisser seulement le premier mais je ne pense pas que cela vienne de la.

  43. Bonjour, je tenais a féliciter d’abord l’auteur de ce post super utile ! Je voulais ensuite savoir si on ne risquait pas de problème de droit en l’insérant dans un site web publique.
    Cordialement

    1. Bonjour,

      merci pour votre massage qui est un message de plus qui me pousse à continuer :)

      Pour les droits, aucun souci, j’ai réalisé moi même la carte et la met à votre disposition en téléchargement libre.

      Bonne journée

  44. Bonjour,
    super script trés simple à utiliser et efficace.
    Je m’en sers pour les régions et ai repris le fichier jquery.vmap.colorsFrance.js pour les coloriser.
    Avec les nouveautés sur la définition des régions, j aimerais faire les bordures plus fines entre les régions qui fusionnent. Par contre , je ne vois pas du tout comment démarrer (je suppose qu’il faut travailler sur les coordonnées du svg).
    Auriez vous une idée / piste ?
    Merci.

    1. Comment as-tu réalisé ce miracle mattheoh ?
      Le principe semble pourtant effectivement très simple avec par exemple un contenu de la forme:
      var couleurs_regions = {« 21″: »#5BC5ED », »1″: »#5BC6ED », »2″: »#5BC4ED », »3″: »#97C00D », »4″: »#94F900″, »5″: »#FCED0D », »6″: »#94FE00″, »7″: »#F19DAC », »8″: »#A8CEEF », »9″: »#A3A9B3″, »10″: »#3878FF », »11″: »#F19CAC », »12″: »#F1A2AC », »13″: »#F1A3AC », »14″: »#A8CCEF », »15″: »#A8CBEF », »16″: »#3873FF », »17″: »#3874FF », »18″: »#94FB00″, »19″: »#FCEA0D », »20″: »#E09E63″, »22″: »#E09F63″};
      pour le 2ème fichier colorsFrance.js des régions, mais rien n’y fait, chez moi la carte reste noir…

  45. Hello,
    Bravo déjà pour le boulot, ca a du prendre un peu de temps quand meme :)

    Par contre, j’ai beau chercher mais je ne trouve vraiment pas comment rajouter les numéros de départements et je dois avouer que c’est la seule chose qu’il me manque :(

  46. Hello,
    Merci pour les cartes.
    Tu penses qu’il est possible de centrer la carte que sur une partie de la France et pas sur toute la France, dans l’idée où je ne voudrais que certaines régions.

    Par exemple : http://oceanofnoise.fr/testmap/france_map.html
    Je voudrais garder que cette partie visible, et que ça centre directement vers ses départements là.

    Ce serait possible à partir de tes fichiers ?

    Merci. :)

    1. Hello,

      je pense que malheureusement il faut refaire une carte avec seulement cette partie il n’y a pas d’autre choix car le fichier JS de création de la carte est prévue pur toute la France

      A ta dispo

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

three × 3 =