SVG et la cartographie

Le format SVG est de plus en plus utilisé en matière de cartographie.

Exemple : la carte des départements français (métropole et Corse uniquement)

J'ai récupéré cette carte sur le site WIKIPEDIA puis j'ai inséré ce fichier SVG dans la page.

Affichez la console JS !

Le code HTML correspondant

Il est d'une simplificité enfantine.

Le script

Il faut bien sûr associer à chaque bouton une fonction JS.

	var image = document.querySelector('img'); 
	var vlargeur;
	var image = document.querySelector('img'); 
	var vlargeur =image.width;
	console.log(vlargeur); 
	document.querySelector('#plus').onclick = function()
	{ vlargeur +=100  ; image.width = vlargeur  ; console.log(vlargeur); }
	document.querySelector('#moins').onclick = function()
	{ vlargeur -=100 ; image.setAttribute('width',vlargeur) ; console.log(vlargeur); }

Le script mérite quelques explications.

Si vous avez affiché la console JS sur votre ordinateur portable vous voyez que la valeur retournée est 450 ...
En effet l'instruction image.width ne retourne pas "50%" mais le résultat (50% de la largeur du conteneur donc 450). En effet l'image est "enfant" de BODY et comme la page fait 900px de large lorsqu'elle est affichée sur un grand écran.
Comme l'instruction retourne un entier on peut donc incrémenter et décrémenter directement dans les fonctions anonymes. Ici on augmente ou on diminue de 100 (pixels)à chaque clic.

Le code du fichier SVG

Examinons maintenant le code du fichier "departements.svg".
Le fichier pèse 300 KO ; ce qui est raisonnable.
Je vous présente des extraits.

On apprend que le fichier a été produit avec le logiciel Inkscape.
Pour chaque département un chemin (balise PATH).
Pour chaque pays limitrophe un texte (balise TEXT).
Retour menu