Carte interactive SVG

De EduTech Wiki
Aller à : navigation, rechercher


Si vous souhaitez créer une carte ou un dessin interactif pour intégrer à votre site internet, le format SVG (Scalable Vector Graphics ou Graphiques Vectoriels Adaptables en français) peut être une bonne alternative.


1 Création du dessin vectoriel


Pour la création du dessin vous pouvez utilisez un outil simple et gratuit en ligne comme SVG-edit ou des logiciels comme Inkscape, Illustrator, etc. Vous avez également la possibilité de télécharger des fichiers SVG déjà fait et libres de droits que vous allez pouvoir modifier pour les adapter à vos besoins.
Pour se faire, vous pouvez ainsi allé voir sur des sites tel que Wikipédia.
Dans notre exemple nous prendrons un SVG représentant une carte vierge de l'Europe.

Countries of Europe.svg



2 Identification des pays


Chaque pays dessiné sur la carte est déterminé par une balise avec une série de coordonnées. Si on prend par exemple la Suisse, la balise associée est la suivante :

SuisseSvg.jpg

On peux repérer de façon univoque que c'est la Suisse car chaque pays à un identifiant propre (ID), pour la Suisse cet identifiant est CH. La norme utilisée dans l'exemple pour associer les ID est l'utilisation de la norme ISO-3116-1-ALPHA2

3 Changement de paramètres

3.1 Paramètres statiques

3.1.1 Changement de la couleur


Une fois que nous avons déterminé quel pays est associé à quel balise grâce à son identifiant on peux maintenant changer certains paramètres relatifs au dessin d'un pays.
On peux par exemple décider de changer la couleur la Suisse !

Countries of Europe1.svg



Pour ce faire on change la balise style qui se trouve à la fin de la balise ID de chaque pays. Dans l'exemple on a changé la couleur de base de remplissage (fill) de rgb(192, 192, 192) en rgb (246, 94, 31). Pour trouver la couleur que vous souhaitez en rgb vous pouvez allé voir ici.

style="fill: rgb(192, 192, 192); stroke: rgb(255, 255, 255); stroke-width: 8; fill-opacity: 1;"

3.1.2 Ajout d'un lien hypertexte


Nous allons voir maintenant comment ajouter un lien hypertexte sur la Suisse que nous venons de coloriser.

Nous allons utiliser la balise :

<a xlink:href="http://fr.wikipedia.org/wiki/Suisse" target="_blank" > <path id ="ch" .../></a>

Pour que notre lien marche nous devons également rajouter une ligne de code dans la déclaration du document  :
xmlns:xlink="http://www.w3.org/1999/xlink"

Voilà le résultat :

Countries of Europe2.svg

3.2 Paramètres dynamiques

On peux également ajouter des changements qui sont déclenchés par l'utilisateur, par exemple lorsqu'il passe son curseur sur un pays.

3.2.1 Changement de la couleur lors du passage de la souris

Dans l'exemple ci dessous on rajoute une effet de transparence lorsque le curseur survole une zone. On rajoute ce morceau de code dans la balise <path>

<path ... onmouseover="evt.target.setAttribute('opacity', '0.5');" onmouseout="evt.target.setAttribute('opacity','1)'); "/>

Voilà le résultat
Une exemple de carte final que l'on peut obtenir est disponible ici

3.2.2 Afficher du texte lors du passage de la souris


Il est également possible d'ajouter du texte lors du défilement de la souris. Dans cet exemple, le texte s'affiche lorsque la souris passe au dessus du pays et s'enlève lorsque la souris ne s'y trouve plus. La première étape consiste à indiquer à l'ordinateur que l'on souhaite ajouter du texte:

Inclure du texte:
<text font-size="100" x="600" y="100" display="none" style="font-size:30px;font-weight:bold;fill:#000000;font-family:Verdana">Suisse</text>

Le texte("Suisse") va s'afficher à la position x,y égale à 600,100 avec une taille de 100 avec les caractéristiques mentionnée ci-dessous. Cependant avoir du permanent n'est pas pratique et n'est pas l'intérêt dans une carte interactive. Il faut encore indiquer quand est-ce que vous voulez que le texte s'affiche pour cela vous ajouter :

Animer le texte:
<animate fill="freeze" dur="0.1s" begin="ch.mouseover" from="none" to="block" attributeName="display"></animate>
<animate fill="freeze" dur="0.1s" begin="ch.mouseout" from="block" to="none" attributeName="display"></animate>

La première balise indique que le texte s'affiche pour l'identifiant "ch" lorsque vous passer votre souris au dessus de l'identifiant. Le deuxième attribut indique que le texte disparait lorsque vous enlever la souris de l'identifiant. Il nous reste encoure une dernière étape. Voici donc le code complet pour l'animation du texte avec l'affichage Suisse, dans mon exemple j'ai encore ajouté deux autres lignes pour que le texte ne viennent pas sur une seule et même ligne.

Exemple complet:
<text font-size="100" x="300" y="200" display="none" style="font-size:30px;font-weight:bold;fill:#000000;font-family:Verdana">
Suisse
<tspan x="300" y="230">CH</tspan>
<tspan x="300" y="260">Berne</tspan>
<animate fill="freeze" dur="0.1s" begin="ch.mouseover" from="none" to="block" attributeName="display"></animate>
<animate fill="freeze" dur="0.1s" begin="ch.mouseout" from="block" to="none" attributeName="display"></animate>
</text>

Voici un exemple de ce que cela donne: Carte interactive

4 Références

http://www.petercollingridge.co.uk/data-visualisation/interactive-svg-map