1 - Exemple basique de carte interactive et responsive

Pour cette première étape, nous avons choisi un format de carte (SVG) ainsi qu'une méthode d'intégration de la carte sur notre page Web (HTML).

Nous découvrirons dans l'étape suivante comment ajouter une info-bulle avec texte, une légende dynamique, des points de localisation cliquables et tout ce qu'il est possible de construire à partir de ce fond de carte interactif.

---

Testez la carte

Réduisez la largeur de la fenêtre de votre navigateur pour tester l'effet responsive

Survolez la carte et cliquez sur la région de votre choix

Par défaut, les dimensions de cette carte sont définies par une balise DIV. Vous pouvez donc controler la dimensions par défaut, par exemple : max-width: 650 px;

Code source de la carte

---

Effet de survol de la carte

L'effet de survol de la carte est assuré par le style CSS qui indique aux différentes 'path' (les tracés de la carte SVG) comment se comporter au survol de la souris [ path:hover ... ]

<style> path { transition: .6s fill; } path:hover { fill: #FF00CC; } </style>

---

Mise en page de la carte

L'intégration de la carte sur la page est directement en SVG sans passer par une librairie de type Raphael-Js

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox = "0 0 440 380" version = "1.1"> [...ici les zones réactives (path) ] </svg>

---

Zones interactives et cliquables (path)

Les zones réactives de la carte sont des paths SVG classiques encadrés par des liens a href pour diriger vers une autre page lors du clic.

<a xlink:href="https://duckduckgo.com/?q=Anvers" title="Anvers" target="_blank"> <path id="van" d="M285.9,28.8l-0.5-4.9l-4.5-3l-3.2,1.4l-0.3,3.2l-9.2,9.5l-2.3-2.2L253,31.7l-1.2-3.2l6.4,1.2 l-0.9-4l1.6-5.2l-3.1-2.4l-4.2-0.7l-7.4,12.2h-8.9l-1.7-1.2l-4.2,0.5l-1-1.8l0.1-6.3l-5.4-0.5l-2.6,2l-8.2,3.6l0.8,6.2l3.4,7.9 l-5.2,0.7l-4.2-3.2l-9.8,0.3l-1.3,1.6l5.2,10.1l3.6,2.3l-3.3,8.5l4.1,7.3l0.3,6.8l-1.4,4.3l-4.9,1.9l-5.9-1l-4.6,4.5l1.9,3l-0.3,3 l1.2,1l-0.9,3l6.2,0.9l6.3-0.9l3.4,4.3l3.4-2.4l3.1,5.3l1.9,0.4l3.2-1.3l4.4,2.7l-0.4-3.2l4.5-3.1l0.9,4.9l4.5,1.7l1.6-3.2l8.1-2.3 l1.2,1.8l5.9-3.1l1.4,0.2l3.2-2.1l3.3,4l5.5-0.4l4.2-2.8l5.6-0.3l4.7-5.9l3.6-0.7l3.5-1.8l3.4-3.9l6.4-2.3l10-4.7l-0.3-6l-4.7-3.7 l-0.1-5.2l1.7-4l-1-1.1l1.1-5.6l-2.8-2.7l-7.6,0.9l-1.5-7l-4.2-5.4L285.9,28.8z " fill="#cccccc" stroke="#ffffff" stroke-width="0.5" /> </a>

Explications :

A la première ligne ci-dessus, nous trouvons la balise 'a href' qui va 'encadrer' le path afin que celui-ci soit considérer comme un lien hypertexte standard. Notez que pour le SVG, il faut ajouter 'xlink:href' pour une interprétation correcte.
A l'intérieur de ce lien, vous pouvez appeler une nouvelle page, un script Javascript ou Ajax, ou une adresse e-mail, le téléchargement d'un document... bref comme un lien normal.

Ensuite, ligne 2, nous plaçons le PATH. C'est le PATH qui dessine chaque région de la carte. En SVG, pour dessiner une forme libre, chaque path commence toujours par 'M', (Moveto), et ce finit par 'Z', (closepath). :)

Inutile de chercher à dessiner vous-même les PATH, notre site cmap.comersis.com propose des cartes SVG gratuites où les path sont prêts à être copier/coller.

---

Retrouvez nos cartes interactives sur cmap.comersis.com