La cartographie dynamique sur le Net avec SVG

SVG (Scalable Vector Graphic) est une application du XML (eXtented Markup Language) dont l'objet est la description d'objets graphiques en 2 dimensions. Au moyen d'un langage de script il est possible d'avoir accès au DOM (Document Object Model) et de réaliser des cartes dynamiques offrant de nombreuses fonctionnalités. Cet article contient un exemple commenté, ainsi que des liens vers des sites consacrés au SVG.

Gaëtan GABORIT (septembre 2000 - octobre 2001)

Ce site n'est plus maintenu depuis Novembre 2001, date où j'ai rejoint la société NETAGIS, spécialisée dans le développement d'applications cartographiques fondées sur le SVG. Vous pourrez retrouver sur son site, de nouveaux exemples SVG.

Le SVG permet de gérer trois types d'objets graphiques : les formes vectorielles (courbes, lignes, polygones, etc.), les textes et les images raster. Ces objets graphiques peuvent être groupés, transformés, et être dotés de styles. Le SVG permet d'écrire des applications interactives et dynamiques. Il est en effet possible d'accéder au SVG DOM (Document Object Model) par un langage de script (en l'occurrence javascript), et donc de modifier les objets graphiques, leurs attributs et leurs propriétés, et même d'en créer de nouveaux. Le SVG gère également les évènements de type onclick (clic de la souris), onmouseover (survol de la souris), etc. , et ce pour chaque objet graphique.

Les personnes familières avec la géomatique comprendront aisément l'intérêt du SVG pour proposer des cartes sur le Web. En effet, jusqu'alors la diffusion de cartes dynamiques sur le web s'appuyait sur une gestion complexe d'images raster tuilées côté serveur, et parfois sur des applets longues à télécharger.

Concrètement, un fichier SVG se présente de la manière suivante :

<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="96px" height="76px" viewBox="0 0 9600 7600">
<rect id="guide" x="3200" y="3200" width="3200" height="3200" style="fill:red;fill-opacity:0.3"/>
</svg>

Ce document contient un carré rouge transparent. Le fichier SVG est enchâssé (embed) dans un fichier HTML. Un plug-in est nécessaire pour que votre navigateur puisse afficher ce fichier SVG. Celui développé par Adobe est téléchargeable gratuitement (2Mo) à l'adresse suivante (choisir la version 3) :
http://www.adobe.com/svg/main.html

A noter qu'Adobe a intégré SvgWiever à la dernière version d'Acrobat Reader (5).

L'exemple proposé vous permettra de tester les fonctionnalités suivantes :

  1. Gestion de plusieurs couches d'objets graphiques, avec contrôle interactif de la visibilité des couches.
  2. Association de données externes aux objets graphiques (dénomination, données statistiques, etc.), affichage de ces données au moyen d'un clic sur l'objet graphique
  3. Fonctions de zoom et de pan (panoramique) par drag & drop sur une vue miniature de la carte.
  4. Affichage d'un repère sur un objet graphique sélectionnée dans une liste.
  5. Présentation d'analyses statistiques soit par modification des caractéristiques des objets (ex. couleur), soit par création de nouveaux objets (cercles proportionnels, etc.).

Les deux premières fonctionnalités s'inspirent fortement du travail réalisé par Andreas Neumann et André M. Winter (cf. liens).

Le SVG propose des fonctions de zoom et de pan intégrées, mais dans l'exemple nous les avons désactivées pour les remplacer par une interface spécifique qui associe à la vue carte, une vue miniature, afin de permettre de localiser la partie de la carte visible, quel que soit le niveau de zoom.

La vue miniature représente la région cartographiée dans son intégralité, le rectangle rouge délimite la partie visible dans la vue carte. Lors du chargement, le zoom est à 100%, le rectangle rouge couvre donc l'ensemble de la vue miniature, et la région est entièrement visible dans la vue carte. Lorsque le zoom augmente, la taille du carré rouge diminue en proportion, et la vue dans la fenêtre carte se modifie.

Pour la fonction pan, on applique la technique du drag & drop au rectangle rouge : on positionne le pointeur sur le rectangle, on enfonce le bouton gauche de la souris, puis on déplace la souris en maintenant le bouton enfoncé : le rectangle suit alors le déplacement. Lorsqu'on relâche la souris, la vue carte est rafraîchie et couvre la zone symbolisée par le rectangle rouge. Cette technique est plus agréable car la translation d'un seul objet est fluide à l'écran, tandis que la translation de plusieurs centaines d'objets est beaucoup plus saccadée et désagréable à l'oeil.

La fonction de repérage consiste à faire apparaître durant 3 secondes un cercle rouge sur une zone sélectionnée dans une liste. Lorsque le zoom est supérieur à 100%, il se peut que la zone en question ne soit pas visible dans la carte. La carte est alors automatiquement centrée sur la zone sélectionnée, ainsi que le rectangle rouge dans la vue miniature.

Le plug-in d'Adobe fonctionne avec Internet Explorer et Netscape Navigator, aussi bien sur Windows que sur Mac (sauf les cartes dynamiques avec Internet Explorer pour Macintosh. Par contre l'exemple proposé ici ne fonctionne correctement qu'avec Internet Explorer 5.0, pour des raisons qui sont liées au DOM.

L'exemple s'ouvre dans une nouvelle fenêtre et pèse environ 109ko, dont 40ko pour le fichier SVG de la carte (environ 9000 noeuds), qui est ici compressé avec gzip. La carte représente un département fictif pour lequel on dispose de données également fictive sur le RP99.

Attention, il est impératif d'attendre le chargement complet de la carte avant de tester les fonctions (en particulier en promenant le pointeur sur la carte), sinon les scripts tentent de manipuler des objets qui n'existent pas encore, ce qui provoque un plantage.

Voir la carte dans une nouvelle fenêtre ( IE5 + SVGWiever requis )

Merci d'adresser vos remarques (en particulier en cas de plantage), vos questions et suggestions à Gaëtan GABORIT.

 

Quelques liens utiles sur le SVG

W3C Scalable Vector Graphics (SVG)
Spécification et actualité du SVG, la page officielle.
http://www.w3.org/Graphics/SVG/Overview.htm8

Adobe SVG
Téléchargement de plug-in SVGWiever, exemples et tutoriel, liens.
http://www.adobe.com/svg/

Cartonet - cartographers on the net
Ce site allemand (également en anglais et français) est consacré à la cartographie sur le Net. On y trouve quelques très beaux exemples de cartes SVG, en particulier un carte de Vienne réalisée par Andreas NEUMANN, et une carte d'Europe réalisée par Andreas WINTER. Possibilité de s'inscrire à une liste de discussion.
http://www.carto.net/papers/svg/index.html

Euroclid
Un cours en français sur le SVG par Didier COURTAUD.
http://www.euroclid.fr/Cours_SVG/plan.htm

DBx Geomatics
Cette société canadienne commercialise un utilitaire permettant d'exporter des cartes MapInfo en SVG.
http://www.dbxgeomatics.com/svg.asp

gis-news.de
Vous trouverez sur ce site un utilitaire gratuit permettant d'exporter des cartes MapInfo en SVG.
http://www.gis-news.de/svg/map2svg.htm

PinkJuice
Site dont une partie consacré aux différentes applications du SVG. Liste de liens très fournie.
http://www.pinkjuice.com

Pilat
Très beau site en français réalisé par Michel Hirtzler avec un générateur de cartes SVG et plein d'autres choses. A visiter absolument.
http://pilat.free.fr