Utilisation de XSLT pour présenter des données XML en SVG

1-Définir une DTD

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!ELEMENT temps (today)>

<!ELEMENT today (#PCDATA)>

2- Ecrire le fichier XML

<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet href="exemple.xsl" type="text/xsl"?>

<?cocoon-process type="xslt"?>

<!DOCTYPE temps SYSTEM "exemple.dtd">

<temps>

<today>Il fait chaud aujourd'hui</today>

</temps>

3- Construire le fichier XSL

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="xml" indent="yes" standalone="no" doctype-public="-//W3C//DTDSVG 1.0//EN"

doctype-system="http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd/>

<xsl:template match="temps">

<svg>

<rect x="50" y="50" rx="5" ry="5" width="150" height="70" style="fill:#ccccff;stroke:#000099/>

<text x="55 y="90" style="fill:#000099;stroke=#000099;fontsize:24;">

<xsl:value-of select="today"/>

</text>

</svg>

</xsl:template>

</xsl:stylesheet>

4- Etape suivante

Ensuite, utiliser un processeur pour permettre la transformation de XML en SVG

Par exemple Xslate ou saxon

A Tecfa, xslate sur tecfasun5.unige.ch

5- Commande xslate

Syntaxe: xslate - IN fichier.xml - XSL fichier.xsl -OUT fichier.svg

Le processeur xslate écrit un fichier svg en sortie.

 

Pour intégrer du svg dans une page HTML

on peut utiliser <embed>:

<EMBED SRC="exemple.svg" WIDTH="250" HEIGHT="60" TYPE="image/svg+xml"/>

mais fonctionne difficilement avec HTML4 et XHTML

(on peut utiliser toutes les unités de format vu précédemment)

Il est préférable d'utliser la balise <object> d'HTML, le fichier svg est intégré dans une balise HTML

<object width="350" height="350" data="Nomdufichier.svg" type="image/svg+xml"></objet>

 

Cartographie SVG et javascript et PHP pour les cartes

cartogrphie interactive-accueil

Exemple d’outils

1-Outil pour créer des cartes avec représentation de données statistiques :

Remplissage des zones suivant les données:
Choix des données ( absolues ou relatives, numériques ou discrètes ) des couleurs, des dégradés, des quantiles.
NOUVEAU: Utilisation de motifs
Ajout de symboles:
Disques, histogrammes, barres d'évolution, camemberts, symboles particuliers 
Un outil d'analyse statistique des données:
Calcule minima, maxima, quartiles et moyenne des données choisies

illustration cartographie/Javascript et SVG

La bibliothèque carto.js

Ajouter des cartes à l'outil statistique

Travailler sur les données

2-Outil pour créer des fonds de cartes avec choix des objets à représenter :

Outil de création de fonds de cartes paramétrables

 

PHP pour les cartes

Cette version permet de récupérer le fichier de la carte demandée au format SVG sans les routines de coloriage des régions et de dessin des symboles, ces fichiers sont donc moins volumineux.
Nous avons gardé la fonction javascript d'affichage des noms des régions et des valeurs, si vous avez sélectionné des données, au passage de la souris.
Les données statistiques et de dessin des cartes sont pour l'instant au format PHP, mais une prochaine étape pourrait être leur insertion dans une base MySQL qui pourrait être enrichie en ligne ....

.outil de cartographie en version php/explication

Utilitaire de création de cartes

 

Cartographie  PHP MySQL et SVG

Objectif : récupérer le fichier de la carte demandée au format SVG sans les routines de coloriage des régions et de dessin des symboles, ces fichiers sont donc moins volumineux.
Nous avons gardé la fonction javascript d'affichage des noms des régions et des valeurs, si vous avez sélectionné des données, au passage de la souris.
Les données statistiques et de dessin des cartes sont dans une base MySQL qui peut être enrichie en ligne .....

1-fichiers PHP, HTML et SVG

Avoir une distribution PHP-MySQL

Connexion avec un serveur local

Les fichioers sont décompréssés dans un répertoire géré par le serveur local avec droit d’accés étendus (lire, écrire et exécuter).

2- Base de donnée MySQL

base installée dans le répertoire data qui est par défaut dans le répertoire mysql.

Possible de déplacer le répertoire data en le signalant dans la configuration de MySQL

Dans ce répertoire data créer un sous-répertoire nommé « carto » et y décompresser les tables de la base de donnée (data_mysql.zip)

3- Déclarer le type mime

Déclarer le type dans la configuration du serveur

Ex : pour Apache dans mimes.types ajouter la ligne :

Image/svg+xml             svg

4- Lancer l’application

Lancer fichier html, choisir d’utiliser une application

Ex : carto :htm ; application cartographie.php3 ou entrer de nouvelles cartes entrer.php3

 

B-Pour ajouter une nouvelle carte

Chaque carte nécessite 2 tables, 1 pour les données carto et une pour les données statistiques

Possible lancer entrer php3 et se laisser guider

Avec PHPMyAdmin, vous pouvez également créer et remplir les tables.

Avec un fichier texte tiré de vos données, par ex une carte SVG ou d’une table Access c’est plus rapide…

1-     la carte doit être déclrée dans la table pays

Dans la table pays ajoutez un enregistrement avec 5 champs

-Nom de la carte

-racine pour les noms des tables (usa donnera les noms des 2 tables usa_carte et usa_data)

-largeur et hauteur de la carte

-titre des données states séparés par « ; »

Ex : USA-Etats   usa    700    432    Population totale ;Superficie ;Population noire ;        ;Grands électeurs

2-     2 tables de données pour cette carte

usa_carte avec un seul champ text (tracés des régions qqfois volumineux) et les enregistrements dans l’ordre :

abscisse sommet gauche supérieur de viewbox

ordonnée sommet gauche supérieur de viewbox

largeur de viewbox

hauteur de viewbox

nombre de régions ou de pays

le tracé de chaque région sous la forme M10 20l10 50…..

 

usa_data avec un nombre de champs variable suivant le nombre de données :

 

1er enregistrement avec nombre de données   0    0    les noms de chacune des données

Et pour chaque région ou pays, un enregistrement avec :

-         -le nom de la région ou du pays

-         l’abscisse du centre de la région

-         l’ordonnée du centre de la région

-         une valeur par champ pour chaque donnée statistique

 

On peut depuis PHPMyAdmin ou entrer .php3, supprimer ou créer une carte, ajouter des données, modifier les tables…

 

exemples intéressants de cartes chez DBx GEOMATICS

exemples intéressants de cartes

Netagis entreprise /SIG