Une carte de France en SVG

Écrit par Victor D.

Bonjour à vous, aujourd’hui, nous allons mettre à disposition une ressource bien pratique pour celles et ceux qui auraient besoin d’une carte pour leur application / site.

Nous voyons de plus en plus l’utilisation du format SVG pour des logos, des masques ou parfois des animations, mais ce sont aussi des contenus dynamiques et interactifs.

Sur une même page j’ai mis en place un fichier SVG contenant une carte de France et ses départements.

Vous pouvez le télécharger sur Github

La problématique d’un fichier SVG et que si je l’intègre à l’aide de object ou embed je n’aurais pas accès à ses différents éléments.

Pour l’instant, je l’ai donc intégré directement à mon HTML. Après tout, les formats sont compatibles, autant en profiter.

J’ai aussi écrit quelques lignes de CSS afin de vous montrer qu’un effet au hover ou au click est facile à mettre en place :

#map {
    max-width: 100%;
    max-height: 100%;
  }
  #map path {
    transition: fill 0.2s, stroke 0.3s;
  }
  #map path:hover {
    fill: red;
    stroke: red;
  }
  #map path:active {
    fill: #bada55;
    stroke: #bada55;
  }

Nous avons ici une #map qui contient tous les éléments de notre fichier SVG, et le selecteur path qui comprend chaque département. Sur chaque path nous avons un ID que nous récupérons à l’aide du javascript suivant :

document.addEventListener('DOMContentLoaded', function(){
    map = this.getElementById('map'); // je selectionne mon élément global
    paths = map.getElementsByTagName('path'); // je mets dans un tableau chacunes des formes

    for (var i = 0; i < paths.length; i++) {
      paths[i].addEventListener("click", function(e){
        // pour chaque forme, je fais en sorte qu'un click retourne l'id
        console.log(e.target.id);
      })
    }
  });

Pour aller plus loin, nous pourrions aussi mettre en place des données plus avancées au sein même du SVG grâce à des data- , par exemple:

  <path data-departement="59" data-name="Nord" data-inhabitants="2576770"></path>

Mais il ne faut pas s’arrêter en si bon chemin, vous pouvez gérer des modifications plus poussées sur le SVG, et profiter au maximum d’un objet vectoriel.

Pour cela, je vous invite à découvrir des librairies telles que raphaeljs, SVG.js ou — tout particulièrement pour une carte — jQuery vector maps.