Créer une carte de France ou une zone d’image cliquable
Je n’avais pas forcément prévu de faire une section wordpress (encore moins « développement ») sur ce blog mais finalement c’est chose faite. Pour les besoins d’un site, il me fallait une carte de France, cliquable sous WordPress, idéalement un plugin, mais je n’ai pas trouvé mon bonheur. Finalement, en fouinant un peu sur la toile, j’ai trouvé quelques cartes gratuites avec le codage associé, que vous trouverez ci-dessous. Pour les modifier, c’est plutôt simple, il faut simplement une image et utiliser les balises MAP, AREA et COORDS pour créer des zones cliquables sur une image, ici, une carte de France.
Comment faire une carte de France cliquable?
Si vous ne connaissez pas le site C-Map, qui fournit des cartes cliquables et que vous avez besoins de cartes interactives, vous devriez y faire un tour. Vous pourrez trouver des cartes gratuites ou payantes, de France ou d’autres régions du monde qui sont interactives et qui fournissent une bonne base si vous avez des besoins plus spécifiques. Comme évoqué en introduction, rien de révolutionnaire dans mon choix de carte : une image et un peu de code. L’avantage c’est de ne pas partir de zéro et de se taper toutes les coordonnées à remplir à la main, car il faut l’avouer, cela devient vite ennuyant, surtout pour les départements.
Bref, j’ai opté pour une carte gratuite des régions de France. Pour installer le tout, il suffit de respecter les étapes suivantes:
- Télécharger la carte de France avec les régions ou départements en petit format ou en moyen format
- Après avoir dézipper le fichier, il faut uploader carte en .png dans la galerie médias de wordpress
- Créer une page sur laquelle vous souhaitez mettre la carte
- Intégrer le code fournit dans le zip directement dans votre page
- Modifier le chemin d’accès de la carte en .png
- Créer des landing pages régions ou départements
- Modifier les liens intégrés dans le code en respectant la structure des URL
Ensuite, vous aurez ce type de résultat:
Simple non? Pour l’exemple, j’ai juste mis un lien sur la région Bretagne. Mais comme j’ai modifié la taille de la carte, les coordonnées n’étaient plus bonnes…
Modifier les coordonnées pour rendre cliquable une image
Pour modifier les coordonnées, c’est assez simple, il vous faut juste Gimp ou Photoshop et un peu de patience. Voici les trois différentes étapes à respecter:
- Ouvrir l’image en question, ici la carte de France, avec Gimp
- Rechercher les coordonnées à l’aide du curseur de la souris et récupérer les coordonnées en pixel (abscisses et ordonnées)
Par exemple, pour rendre cliquable la Bretagne, j’ai récupérer les coordonnées des points mentionnés en rouge dans le screenshot ci-dessous. Les coordonnées sont visibles en bas à gauche de la fenêtre, ici en orange.
Récupérer les coordonnées d’une image avec Gimp
- Intégrer les nouvelles coordonnées dans la balise coords. Il faut mettre les deux valeurs et répéter l’action pour les différents points. Donc dans cet exemple, cela fait 12 coordonnées à insérer dans la balise. Plus vous en mettrez, plus cela sera précis, d’ailleurs j’ai mis plus de 12 coordonnées mais c’est pour expliquer la démarche.
Il y a certainement d’autres manières d’avoir ce type de fonction, en passant par un plugin (que je n’ai pas trouvé) ou bien en utilisant d’autres logiciels pour faire ceci, mais si vous ne modifiez pas les dimensions des cartes en téléchargement dans cet article, vous gagnerez un temps fou. Sinon, il faudra passer par Gimp pour les coordonnées, mais cela va prendre plus de temps. Bien sûr, ça ne fonctionne pas uniquement sous WordPress, mais cela aura au moins de le mérite de lancer une partie de ce blog dédiée à ce CMS, et de blogguer un peu plus là dessus.
.
38 
168 
32
Page mise en signet !
Merci
Merci Killian pour cet excellent tutoriel ! En plus quand je regarde ton choix « Carte de France » et zone cliquable, je ne peux m’empêcher de voir la carte du Bon Coin.
Pour ma part, je ne connaissais pas le site C-Map donc comme Christian, c’est direct dans mes BookMarks.
Merci encore et bon WE à tous !
Si j’avais eu ce mini-tuto il y a quelques semaines cela m’aurait bien aidé. Personnellement j’ai tout fait à la main et ça m’a pris des heures. Qu’en est t-il de la compatibilité entre navigateurs ?
@Eric : De rien! Après c’est une carte de france, donc cela reste basique, mais tu peux prendre une autre carte et rajouter des styles comme sur le bon coin.
@Simon : Navigateurs et tablettes OK. C’est de l’HTML donc pas de soucis.
Superbe, je suis tombé sur le tweet de veille seo il y avait bien un script qui faisait ça mais très complexe à mettre en place pour les novices souhaitant créer un site d’annonce ^^.
Il y a toutes les cartes du monde. Malheureusement il n’y a pas tous les les pays.
Il m’aurait bien fallu une carte de ce genre pour un projet en cours pour l’Australie mais avec les 5 etats.
Dommage. Peut être à venir.
En tout cas c’est pratique.
Sinon il y a dreamweaver. Assez facile pour faire ce genre de chose.
@Rodrigue: Content si cela t’aide
@Le referenceur: Tu peux toujours chopper un .png de l’Australie mais tu repars de zéro
Pas mal comme histoire. Effectivement, je l’avais déjà testé il y a longtemps avec Dreamweaver.
Pour WordPress, tu peux aussi utiliser MapPress http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/ plutôt bien fichu
J’avais l’habitude de réaliser ce type de carte sous dream, ça fonctionne bien aussi mais je garde en favori, ça peu toujours servir…
Merci !
Un grand merci ! J’avais il y a fort longtemps eu l’idée de mettre une carte de ce genre pour un annuaire mais j’avais jamais réussi à cause de mes lacunes dans le codage. Ce petit tuto me permettra peut être un jour de me lancer à nouveau dans ce vieux projet !
Pour un de mes sites, j’ai du demander à un ami qui touche vraiment de me faire ce genre de carte croyant que j’en était pas capable, je vois que j’aurais pu le faire moi même vu que c’est très bien expliqué ici. La prochaine fois, je pourrais m’en sortir seul alors
Merci pour le tuto, le rendu est nickel.
Après, c’est aussi possible de le faire en SVG sinon.
Les coordonnées en pixel utilisé avec gimp, ne posent pas de problèmes selon résolution de l’écran PC, tablette et mobile ?
Non vu qu’elles sont issues du logiciel, ce ne sont pas des coordonnées GPS.
J’ai testé sur tablette et ça fonctionne bien.
Bonsoir,
Merci pour ce tutoriel. Je me suis souvent demandé comment les sites faisaient pour déterminer les régions de France en fonction du survol de la souris. La solution énoncée dans l’article est plus que satisfaisante.
Cet article me servira sûrement dans un futur projet.
Bonne soirée.
P.S. : Merci Photoshop.
Cool ça, je m’étais jamais penché sur le sujet, mais ça va pouvoir me servir pour plusieurs de mes sites, et ça, c’est cool. D’ailleurs, cela me donne une super idée d’annuaire. Merci pour la recherche killian
Après les cartes peuvent être plus customisées.
Donc on attend l’annuaire
Merci beaucoup. Super tutoriel et très bien expliqué – vous m’avez beaucoup aider.