Go to Hackademy website

Une carte de France en SVG

Victor Darras

Posté par dans la catégorie design

  • Tags de l'article
  • svg

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.

Commentaires (14) Flux RSS des commentaires

  • 06/02/2014 à 11:08

    PierreND

    Merci pour cette carte. Je vais tenter de l'utiliser pour faire découvrir la France.

  • 09/02/2014 à 14:00

    Frédéric

    Bonjour,

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

    Je ne saisis pas le problème que vous soulevez. Il est possible de passer des paramètres à un SVG embarqué via object et donc d’influer sur ses éléments.

    Ex. : la carte http://www.rouen.fr/sites/default/files/svg/carteinfochantiers.web.svg est utilisée sur la page http://www.rouen.fr/infochantiers.

  • 11/02/2014 à 09:57

    thomas

    Bonjour,

    Est-ce possible de réaliser des formes en 3D avec SVG ? Et si non, peut être connaissez-vous une technologie aussi pratique (gestion des :hover, etc) qui permettrait d'utiliser des formes vectorielles en 3D ?

  • 11/02/2014 à 10:11

    Victor Darras

    @FREDERIC: L'idée ici c'est d'avoir un effet au survol et au click, je n'ai pas souvenir que ça marchait dans un object.

    @THOMAS: Je ne me suis encore jamais confronté au problème, tu devrais trouver un peu plus d'infos sur http://stackoverflow.com/questions/6095139/3d-shapes-using-svg-or-webgl

  • 28/04/2014 à 14:53

    Fred

    Hello !
    Merci beaucoup pour le partage, je recherchais justement une carte de France interactive, vous m'enlever une épine du pied :)
    Juste une question, est-il possible d'ajouter des picto supplémentaires sur les départements (genre logo, points) pour marquer un emplacement spécifique ?
    Merci d'avance :)

  • 28/04/2014 à 15:01

    Victor Darras

    Bonjour Fred, content que la ressource vous soit utile :)
    Il est bien sûr possible de modifier le fichier SVG pour ajouter n'importe quel élément graphique avec le logiciel vectoriel de votre choix. Vous pouvez aussi ajouter des éléments de façon dynamique avec Javascript directement dans le navigateur.

  • 03/08/2014 à 23:37

    Julien de Prabère

    Il serait interressant de pouvoir raccorder les contours aux latitudes et longitudes des points correspondants. Cela permettrait de placer les différentes villes de france avec leur coordonnées obtenues ar exemple avec Google Maps. D'avance merci.

  • 03/08/2014 à 23:37

    Julien de Prabère

    Il serait interressant de pouvoir raccorder les contours aux latitudes et longitudes des points correspondants. Cela permettrait de placer les différentes villes de france avec leur coordonnées obtenues ar exemple avec Google Maps. D'avance merci.

  • 04/08/2014 à 09:11

    Steven

    Alors, vous tombez à pic. Je vais justement avoir besoin d'une telle ressource dans quelques jours, vous m'avez fait gagné des temps de recherche ;)

    Merci à toute l'équipe de Synbioz

  • 31/08/2014 à 22:16

    Thibault

    Merci pour ce partage. Je recherchais exactement une carte de France interactive. Merci

  • 24/11/2014 à 17:34

    Arnaud YHUEL

    Merci pour cette ressource ! C'est top ! Je me permets juste de rajouter une toute petit chose pour ceux qui chercherait, comme moi, à a jouter un lien sur chaque département :
    Il suffit seulement d'ajouter <a xlink:href="#"> pour que cela fonctionne.

  • 29/03/2015 à 22:53

    FlorianDel

    Bonjour !

    Merci pour cette carte de la France. Je suis à la recherche d'une carte qui représente le pays intégralement: c'est-à-dire avec les départements d'outre mer. Vous auriez ça quelque part? Merci !

  • 14/09/2016 à 11:15

    Loïc

    Merci pour ce partage ça me rend bien service !
    Cependant je n'arrive pas à ajouter un lien externe sur chaque département. La technique de @ARNAUD YHUEL doit certainement marcher mais où doit elle être insérée ? C'est possible d'avoir un exemple concret pour 1 des régions ? Merci d'avance

  • 14/09/2016 à 13:02

    Loïc

    Merci pour ce tuto très pratique !
    Je n'arrive pas à mettre de lien externe quand on clique sur un département. La méthode décrite plus haut (<a xlink:href="#">) est à mettre où exactement. C'est possible d'avoir 1 exemple pour 1 dept ?
    Merci

Ajouter un commentaire