Go to Hackademy website

Une carte de France en SVG

Victor Darras

Posté par Victor Darras dans les catégories design

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.

Slice 1 Created with Sketch (http://www.bohemiancoding.com/sketch)

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 example:

  <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.

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Création d'un menu en accordéon avec CSS

04/06/2015

Bonjour à tous, l’article d’aujourd’hui , dans la lignée de celui concernant la barre de chargement en CSS portera sur la création d’un élément bien connu des intégrateurs, en particulier sur les...

Exporter des assets pour Android avec Sketch

17/04/2015

Bien le bonjour intrépides lecteurs, aujourd’hui je vais vous faire part d’un plugin pour Sketch (que je présente depuis quelques temps sur ce blog). Baptisé Sketch Android Assets, ce plugin vous...

Création d'une barre de chargement avec CSS

28/01/2015

Bonjour à tous, aujourd’hui je vais vous présenter une petite astuce pour mettre en place une barre de chargement avec un tooltip qui affichera de façon élégante où elle en est, le tout avec quelques...

Client, designer, développeur: un workflow qui fonctionne

12/03/2014

Arrivé depuis maintenant plus d’un an chez Synbioz, j’ai eu l’occasion de travailler sur plusieurs projets avec plusieurs développeurs. En tant que webdesigner et intégrateur j’ai la possibilité de...