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 via l'élément IMG.

Faites varier la taille de l'image
image SVG

Affichez la console JavaScript pour cette page !

Le code HTML correspondant

Il est d'une simplificité enfantine.

<table> <caption>Faites varier la taille de l'image</caption> <tr><th><button id = 'plus'>+</button></th><th> <button id = 'moins'>-</button></th></tr> </table> <img src ="departements.svg" alt ="image SVG" width ="50%"/>

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 JavaScript sur votre ordinateur portable, vous voyez que la valeur retournée par l'insruction "console.log(vlargeur)" est 500.
En effet la valeur de vlargeur est 500 (50% de 1000) car sur un écran la largeur de la page (BODY) est 1 000px.
Comme l'instruction retourne un entier (et non pas une chaine), on peut donc incrémenter et décrémenter directement dans les fonctions anonymes. Ici on augmente OU on diminue de 100 à 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 ci-dessous.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" ... <path style="opacity:1;color:#000000;fill:#fff3e3;fill-opacity:1;... inkscape:label="#path4233" /> ... <text xml:space="preserve" style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold; ... id="text17910" sodipodi:linespacing="100%"><tspan sodipodi:role="line" id="tspan17912" x="181.10989" y="514.93665">ANDORRE</tspan></text> ...

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