Une carte départementale de la France en SVG

Dans cet article, nous allons mettre à votre disposition une petite ressource assez intéressante et pratique pour ceux désirant une carte pour leurs sites internet.

A l’heure actuelle, le format SVG s’utilise de nombreuses façons que ce soit pour la création de logos, la réalisation de masques et même pour les animations, mais en général ce sont des contenus interactifs et dynamiques.

Created by integrateurinformatique freelance

Comment ça se passe ?

Eh bien ! Nous avons placé sur une même page un fichier SVG qui contient une carte de France avec ses départements. Cependant, il faut savoir qu’il existe un petit souci au niveau d’un fichier SVG.

En effet, si celui-ci est intégré à l’aide d’embed ou d’object et du coup nous n’aurons pas accès aux différents éléments.
Pour le moment donc, nous l’avons intégré directement à l’HTML. Il faut dire aussi qu’avec la compatibilité dans les pluparts des navigateurs, il serait dommage de ne pas en profiter.

Voici quelques lignes de CSS dans le but de démontrer que la mise en place du hover est très simple :

Ici, nous avons un #map contenant les différents éléments du fichier SVG ainsi que le sélecteur path comprenant chaque département.
Sur chacun des path, il existe une ID à récupérer grâce au code JavaScript suivant :

Il existe des librairies JavaScript permettant d’aller plus loin comme SVG.js, Raphaeljs ou jQuery Vector Maps qui est particulièrement pratique pour une carte.

Répondre