Localiser un lieu sur une carte
Prenons l’exemple de la localisation en automatique d’un lieu sur une carte, en l’occurrence, les 4 départements du Poitou-Charentes. Avec un seul fichier SVG, il est possible de définir nombre d’objets tels que :
- le contour précis de chaque département,
- un carré pointant chaque préfecture,
- l’épingle pointant le lieu en question,
- tout autre élément de décor ou textuel.
Étant donné que le fichier SVG est chargé au sein de la page web (dans le DOM pour les puristes), chaque élément peut être accessible au travers d’une feuille de style (css) traditionnelle afin de régler couleurs, position, dimension, etc. C’est ainsi qu’au moyen des coordonnées gps et d’une interpolation mathématique, il est possible à la volée de positionner un élément précis au bon endroit et ce de manière simple, légère et adaptable à tous les supports. Quant à l’épingle, elle est constituée d’un cercle rouge, d’un demi-cercle de la même couleur et la forme remplie d’un dégradé défini en feuille de style css.
SVG permet aussi des transitions et des animations, ce sera l’occasion d’autres billets !