plugin svg viewer

Jean-Michel FOLLIN ([email protected])
LUP-SIG, 2004-2005
Programmation SIG et Internet Cartographique
Séance 3 :
Documents XML
(Visualisation des cartes en format SVG)
Cette séance à pour objectif de montre les technique suivant lesquelles on peut créer et inclure dans
les documents HTML des cartes en format SVG.
Vous allez créer une page HTML permettant de visualisez et de manipuler une carte en format SVG.
Cette page utilisera le plugin Adobe SVGViewer.
Environnement de travail
Tous les programmes et données dont vous aurez besoin sont disponibles à l’adresse :
http://perso.univ-lr.fr/jmfollin/LupSIG/s3/
Vous y trouverez, pour l’exercice 1 :
• Une carte SVG que vous allez visualiser puis modifier,
• Une image référencée dans le document SVG,
• Une maquette du fichier HTML à partir de lequel vous pouvez construire votre présentation.
Vous allez pouvoir créer vos propres cartes SVG à partir de cartes MapInfo (exercice 2) grâce à un
convertisseur (map2svg) des cartes du format TAB (.WOR) vers SVG.
Les concepts suivants seront utilisés :
• les objets gérés par les plugins (la balise <EMBED>) ;
• les éléments de formulaires HTML (balises <FORM> et <INPUT>) ;
• les documents en format SVG et les identifiants des couches (balise <g>) ;
• les appels des scripts Javascript (l’attribut ONCLICK de la balise <INPUT>) ;
Mise en œuvre
Les pages HTML avec les documents SVG peuvent être visualisées à l’aide de Internet Explorer
ayant le plugin Adobe SVG Viewer installé sur le poste de travail.
Exercice 1
Vous allez modifier une maquette du document HTML pour y inclure une carte en format SVG.
Téléchargez les trois fichiers states.svg (Carte SVG), usshade.jpg (Image) et maquette_SVG.html
(Maquette HTML) dans un même répertoire.
1. Modifiez la maquette afin d’y inclure la visualisation de la carte states.svg. Testez la page avec
Internet Explorer ;
2. Modifiez la page pour y ajouter la gestion des couches. Ouvrez le fichier states.svg avec un
éditeur de texte (HTML Editor par exemple) et identifiez les couches qui correspondent aux
couches visibles dans la carte (balises <g...>). Pour chaque couche, ajoutez une case à cocher
dans le document HTML ;
3. Ajouter deux cases à cocher dans le document HTML permettant de cocher/décocher toutes les
cases et d’afficher/cacher toutes les couches.
Une fois finie, votre présentation pourrait ressembler à celle de l’image ci-dessous :
Jean-Michel FOLLIN ([email protected])
LUP-SIG, 2004-2005
Exercice 2
Créez une présentation de vos propres cartes en SVG.
1. Installez le convertisseur map2svg pour MapInfo (une entrée supplémentaire apparaîtra dans la
barre de son menu).
2. Créez ou ouvrez une carte de votre choix et exportez la en format SVG.
3. La carte générée nécessite des ressources supplémentaires disponibles dans le répertoire
<rep_installation_map2svg>/output/. Copiez les fichiers map2svgintern.js, text.css
et ViewBox.js dans le même répertoire que la carte générée.
4. En se basant sur le code de l’exercice 1, créez une présentation contenant votre nouvelle carte.