INF 356 : TP 8

TP 8, 25/11/2009

Dessin sur Google Map

Par Benoît Valiron <benoit.valiron [at] monoidal.net>

Ce TP reprend en grande partie le TD 8. On va utiliser le fichier .zip du projet pour interprèter les documents KML obtenus.

On va aussi utiliser l'outil XSLT déjà vu la semaine dernière.

Récupérez le document trains.zip. Comme dit dans le texte du projet, vous trouverez dedans un document trains.html et un document trains.kml. Il y a d'autres fichiers qui ne nous intéresseront pas ici.

Ouvrez le document trains.html à l'aide du logiciel firefox (ce n'est pas testé pour autre chose). Vous devriez voir apparaitre une carte de la région avec des choses dessus.

Remplacez le contenu du document trains.kml par
```
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>
    <Placemark>
      <name>Une ligne brisée</name>
      <LineString>
        <coordinates>
10.2,40.1
-0.9,50
10,48.33
        </coordinates>
      </LineString>
    </Placemark>
  </Document>
</kml>
```
Changez la valeur utf-8 par iso-8859-1 si vous êtes sous Windows.

Réactualisez la page de firefox : une ligne brisée à travers l'Europe doit apparaitre.

Remplacez les trois points par ceux vus en TD hier. Réactualisez la page : la ligne brisée change de place pour passer par Grenoble, Paris et Bordeaux.

Dans la question 2.3 du TD 8, on a vu une feuille de style XSLT qui transforme un fichier sous la forme

<liste xmlns:g="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <titre>liste de villes</titre>
  <ville>
    <nom>Grenoble</nom>
    <g:lat>45.2</g:lat>
    <g:long>5.7</g:long>
  </ville>
  <ville>
    <nom>Paris</nom>
    <g:lat>49</g:lat>
    <g:long>2.35</g:long>
  </ville>
  <ville>
    <nom>Bordeaux</nom>
    <g:lat>44.8</g:lat>
    <g:long>-0.5</g:long>
  </ville>
</liste>

en un document KML. Cette feuille de style était la suivante :

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'>
  <xsl:output method="xml" />

  <xsl:template match="/">
   <kml xmlns="http://earth.google.com/kml/2.1">
    <Document>
     <Placemark>
      <name>Une ligne brisée</name>
      <LineString>
       <coordinates>
        <xsl:for-each select="//ville">
         <xsl:value-of select="g:long"/>,<xsl:value-of select="g:lat"/>
         <xsl:text>
</xsl:text>
        </xsl:for-each>
       </coordinates>
      </LineString>
     </Placemark>
    </Document>
   </kml>
  </xsl:template>
</xsl:stylesheet>

Tout d'abord, vérifiez que cette feuille de style produit bien le même fichier KML, et mettez-le dans trains.kml et réactualisez la page.

On souhaite ajouter des balises Placemark, fils de Document, qui placent des punaises sur chaques villes. Les éléments Placemark désirés ont la forme suivante

<Placemark>
  <name>NOM DE LA VILLE</name>
  <description>
    longitude : LONGITUDE,&lt;br/&gt;
    latitude : LATITUDE
  </description>
  <Point>
     <coordinates>LONGITUDE,LATITUDE</coordinates>
  </Point>
</Placemark>

Le <br/> écrit la balise HTML <br />.

Modifiez la feuille de style XSLT pour ajouter ces balises, placez le résultat dans trains.kml et réactualisez la page pour vous assurez du résultat.

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'>
  <xsl:output method="xml" />

  <xsl:template match="/">
    <kml xmlns="http://earth.google.com/kml/2.1">
      <Document>
        
        <xsl:for-each select="//ville">
          <Placemark>
            <name><xsl:value-of select="nom"/></name>
            <description>
              longitude : <xsl:value-of select="g:long" />,<br/>
              latitude : <xsl:value-of select="g:lat" />
            </description>
            <Point>
              <coordinates>
                <xsl:value-of select="g:long" />,
                <xsl:value-of select="g:lat" />
              </coordinates>
            </Point>
          </Placemark>
        </xsl:for-each>

        <Placemark>
          <name>Une ligne brisée</name>
          <LineString>
            <coordinates>
              <xsl:for-each select="//ville">
                <xsl:value-of select="g:long"/>,<xsl:value-of select="g:lat"/>
                <xsl:text>
                </xsl:text>
              </xsl:for-each>
            </coordinates>
          </LineString>
        </Placemark>
      </Document>
    </kml>
  </xsl:template>
</xsl:stylesheet>

Dans la question 2.4 du TD 8, on a construit la feuille de style XSLT suivante.

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'>
  <xsl:output method="xml" />

  <xsl:template match="/liste">
    <kml xmlns="http://earth.google.com/kml/2.1">
      <Document>
        <Placemark>
          <name><xsl:value-of select="titre" /></name>
          <LineString>
            <coordinates>
              <xsl:apply-templates select="ville" />
            </coordinates>
          </LineString>
        </Placemark>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="ville">
    <xsl:value-of select="g:long"/>,<xsl:value-of select="g:lat"/>
    <xsl:text>
    </xsl:text>
  </xsl:template>
  
</xsl:stylesheet>

La question est la même que la question (b) d'au dessus, avec la contrainte de ne pas utiliser de balise for-each. Indice : Vous pouvez utilisez un mode !

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'
                xmlns="http://earth.google.com/kml/2.1">
  <xsl:output method="xml" />

  <xsl:template match="/liste">
    <kml>
      <Document>
        <xsl:apply-templates select="ville" mode="punaise" />
        <Placemark>
          <name><xsl:value-of select="titre" /></name>
          <LineString>
            <coordinates>
              <xsl:apply-templates select="ville" />
            </coordinates>
          </LineString>
        </Placemark>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="ville">
    <xsl:value-of select="g:long"/>,<xsl:value-of select="g:lat"/>
    <xsl:text>
    </xsl:text>
  </xsl:template>

  <xsl:template match="ville" mode="punaise" >
    <Placemark>
      <name><xsl:value-of select="nom"/></name>
      <description>
        longitude : <xsl:value-of select="g:long" />,<br/>
        latitude : <xsl:value-of select="g:lat" />
      </description>
      <Point>
        <coordinates>
          <xsl:value-of select="g:long" />,
          <xsl:value-of select="g:lat" />
        </coordinates>
      </Point>
    </Placemark>
  </xsl:template>
  
</xsl:stylesheet>

Dans cet exercice, on fait l'exercice 3 proposé dans le TD 8.

Écrivez une transformation XSLT qui prend un document SVG sous la forme suivante en entrée :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
 <line x1="..." x2="..." y1="..." y2="..." />
 <line x1="..." x2="..." y1="..." y2="..." />
 ...
</svg>

et qui produit un document KML en sortie qui dessine les lignes correspondantes. On placera une balise Placemark par balise ligne.

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:s='http://www.w3.org/2000/svg'>
  <xsl:output method="xml" />

  <xsl:template match="/">
   <kml xmlns="http://earth.google.com/kml/2.1">
    <Document>
     <xsl:for-each select="//s:line">
     <Placemark>
      <name>Un element line de SVG</name>
      <LineString>
       <coordinates>
         <xsl:value-of select="@x1"/>,<xsl:value-of select="@y1"/>
         <xsl:text>
</xsl:text>
         <xsl:value-of select="@x2"/>,<xsl:value-of select="@y2"/>
       </coordinates>
      </LineString>
     </Placemark>
     </xsl:for-each>
    </Document>
   </kml>
  </xsl:template>
</xsl:stylesheet>

Testez votre feuille de style XSLT sur le document SVG suivant (vous pouvez constater que vous obtenez bien un dessin en le plaçant dans un fichier .svg et en l'ouvrant avec firefox).

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
 <line x1="10" x2="20" y1="0" y2="10" stroke="blue" />
 <line x1="20" x2="10" y1="10" y2="20" stroke="blue" />
 <line x1="10" x2="0" y1="20" y2="10" stroke="blue" />
 <line x1="0" x2="10" y1="10" y2="0" stroke="blue" />
</svg>

En plaçant le résultat dans trains.kml et en réactualisant trains.html dans firefox, vous êtes sensés obtenir un losange entourant le Nigeria.

Attention aux espaces de noms de SVG !

On veut maintenant dessiner un losange à côté des villes données dans le document de la question 2. Donc, si par la latitude et la longitude de la ville sont respectivement LAT et LONG, le dessin sera obtenu en ajoutant LONG à tous les x1 et x2 et LAT à tous les y1 et y2.

Pour ce faire, on considère le document suivant :

<liste xmlns:g="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <svg xmlns="http://www.w3.org/2000/svg">
   <line x1="1" x2="2" y1="0" y2="1" stroke="blue" />
   <line x1="2" x2="1" y1="1" y2="2" stroke="blue" />
   <line x1="1" x2="0" y1="2" y2="1" stroke="blue" />
   <line x1="0" x2="1" y1="1" y2="0" stroke="blue" />
  </svg>
  <titre>liste de villes</titre>
  <ville>
    <nom>Grenoble</nom>
    <g:lat>45.2</g:lat>
    <g:long>5.7</g:long>
  </ville>
  <ville>
    <nom>Paris</nom>
    <g:lat>49</g:lat>
    <g:long>2.35</g:long>
  </ville>
  <ville>
    <nom>Bordeaux</nom>
    <g:lat>44.8</g:lat>
    <g:long>-0.5</g:long>
  </ville>
</liste>

On a placé le document SVG à l'intérieur de la liste des villes, et on a réduit la taille du losange.

On propose le template suivant.

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:s='http://www.w3.org/2000/svg'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'
                xmlns='http://earth.google.com/kml/2.1'>
  <xsl:output method="xml" />
  
  <xsl:template match="/">
    <kml>
      <Document>
        <xsl:for-each select="//ville">
          <xsl:apply-templates select="//s:line">
            ..... Valeur des paramètres ...
          </xsl:apply-templates>
        </xsl:for-each>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="s:line">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">0</xsl:param>  

    ..... Ici un Placemark qui dessine 
          un trait translaté du vecteur (x,y) ...

  </xsl:template>
  
</xsl:stylesheet>

Complètez-le et vérifiez que cela fait ce que c'est sensé faire.

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:s='http://www.w3.org/2000/svg'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'
                xmlns="http://earth.google.com/kml/2.1">
  <xsl:output method="xml" />
  
  <xsl:template match="/">
    <kml>
      <Document>
        <xsl:for-each select="//ville">
          <xsl:apply-templates select="//s:line">
            <xsl:with-param name="x">
              <xsl:value-of select="g:long" />
            </xsl:with-param>
            <xsl:with-param name="y">
              <xsl:value-of select="g:lat" />
            </xsl:with-param>
          </xsl:apply-templates>
        </xsl:for-each>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="s:line">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
      <LineString>
        <coordinates>
<xsl:value-of select="@x1+$x" />,<xsl:value-of select="@y1+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x2+$x" />,<xsl:value-of select="@y2+$y" />
        </coordinates>
      </LineString>
    </Placemark>
  </xsl:template>
  
</xsl:stylesheet>

Modifiez le template pour autoriser l'élément SVG rect. On rappelle qu'en plus de la couleur, il prends quatre arguments x, y, width et height.

Utilisez le dessin SVG suivant (il dessine une petite maison)

<svg xmlns="http://www.w3.org/2000/svg" width="10cm" viewBox="0 0 3 3">
  <rect x="0" y="0" width="1.5" height="1" stroke="blue" fill="white" stroke-width="0.1"/>
  <line x1="0" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
  <line x1="1.5" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
</svg>

pour vérifier que cela fonctionne.

On peut ecrire la feuille de style suivante :

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:s='http://www.w3.org/2000/svg'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'
                xmlns="http://earth.google.com/kml/2.1">
  <xsl:output method="xml" />

  <xsl:template match="/">
    <kml>
      <Document>
        <xsl:for-each select="//ville">
        <xsl:apply-templates select="//s:line">
          <xsl:with-param name="x">
             <xsl:value-of select="g:long" />
          </xsl:with-param>
          <xsl:with-param name="y">
             <xsl:value-of select="g:lat" />
          </xsl:with-param>
        </xsl:apply-templates>
        <xsl:apply-templates select="//s:rect">
          <xsl:with-param name="x">
             <xsl:value-of select="g:long" />
          </xsl:with-param>
          <xsl:with-param name="y">
             <xsl:value-of select="g:lat" />
          </xsl:with-param>
        </xsl:apply-templates>
        </xsl:for-each>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="s:line">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
            <LineString>
              <coordinates>
<xsl:value-of select="@x1+$x" />,<xsl:value-of select="@y1+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x2+$x" />,<xsl:value-of select="@y2+$y" />
              </coordinates>
            </LineString>
          </Placemark>
  </xsl:template>

  <xsl:template match="s:rect">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
            <LineString>
              <coordinates>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+@width+$x" />,<xsl:value-of select="@y+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+@width+$x" />,<xsl:value-of select="@y+@height+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+@height+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+$y" />
              </coordinates>
            </LineString>
          </Placemark>
  </xsl:template>

</xsl:stylesheet>

Si on l'applique à

<liste xmlns:g="http://www.w3.org/2003/01/geo/wgs84_pos#">
<svg xmlns="http://www.w3.org/2000/svg" width="10cm" viewBox="0 0 3 3">
  <rect x="0" y="0" width="1.5" height="1" stroke="blue" fill="white" stroke-width="0.1"/>
  <line x1="0" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
  <line x1="1.5" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
</svg>

  <titre>liste de villes</titre>
  <ville>
    <nom>Grenoble</nom>
    <g:lat>45.2</g:lat>
    <g:long>5.7</g:long>
  </ville>
  <ville>
    <nom>Paris</nom>
    <g:lat>49</g:lat>
    <g:long>2.35</g:long>
  </ville>
  <ville>
    <nom>Bordeaux</nom>
    <g:lat>44.8</g:lat>
    <g:long>-0.5</g:long>
  </ville>
</liste>

Elle dessine 3 petites maisons placées sur Grenoble, Paris et Bordeaux.

L'ajout de l'élément polyline est simple : il admet un argument points sous la forme x1,y1 x2,y2 x3,y3, .... En principe il faudrait remplacer les espaces par des sauts de ligne (ce que vous devriez savoir faire avec un apply-templates !) mais les espaces peuvent remplacer les sauts de lignes. Il suffit donc de copier la valeur de l'attribut dans l'élément coordinates du Placemark correspondant.

C'est vrai si on veut juste dessiner directement au point de latitude 0 et de longitude 0. Si on veut déplacer le dessin, il n'y a pas à tricoter, il faut aller chercher les coordonnées une par une... Par exemple, on peut faire la chose suivante :

<xsl:stylesheet version='1.0'
                xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
                xmlns:s='http://www.w3.org/2000/svg'
                xmlns:g='http://www.w3.org/2003/01/geo/wgs84_pos#'
                xmlns="http://earth.google.com/kml/2.1">
  <xsl:output method="xml" />

  <xsl:template match="/">
    <kml>
      <Document>
        <xsl:for-each select="//ville">
        <xsl:apply-templates select="//s:line|//s:rect|//s:polyline">
          <xsl:with-param name="x">
             <xsl:value-of select="g:long" />
          </xsl:with-param>
          <xsl:with-param name="y">
             <xsl:value-of select="g:lat" />
          </xsl:with-param>
        </xsl:apply-templates>
        </xsl:for-each>
      </Document>
    </kml>
  </xsl:template>
  
  <xsl:template match="s:line">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
            <LineString>
              <coordinates>
<xsl:value-of select="@x1+$x" />,<xsl:value-of select="@y1+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x2+$x" />,<xsl:value-of select="@y2+$y" />
              </coordinates>
            </LineString>
          </Placemark>
  </xsl:template>

  <xsl:template match="s:rect">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
            <LineString>
              <coordinates>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+@width+$x" />,<xsl:value-of select="@y+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+@width+$x" />,<xsl:value-of select="@y+@height+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+@height+$y" />
<xsl:text>
</xsl:text>
<xsl:value-of select="@x+$x" />,<xsl:value-of select="@y+$y" />
              </coordinates>
            </LineString>
          </Placemark>
  </xsl:template>


  <!-- Premier template pour polyline. Comme pour line et rect, il
       dessine un Placemark. Mais il fait appel à un deuxième template -->

  <xsl:template match="s:polyline">
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  
    <Placemark>
            <name>polyline !</name>
            <LineString>
              <coordinates>
                <xsl:apply-templates select="." mode="points">
                  <xsl:with-param name="ps">
                    <xsl:value-of select="normalize-space(@points)" />
                  </xsl:with-param>
                  <xsl:with-param name="x">
                    <xsl:value-of select="$x" />
                  </xsl:with-param>
                  <xsl:with-param name="y">
                    <xsl:value-of select="$y" />
                  </xsl:with-param>
                </xsl:apply-templates>
              </coordinates>
            </LineString>
          </Placemark>
  </xsl:template>

  <!-- Deuxième template pour polyline. Il prend en argument une
       variable ps, qui contient une liste de coordonnées séparées par des espaces -->

  <xsl:template match="s:polyline" mode="points">
    <xsl:param name="ps"></xsl:param>
    <xsl:param name="x">0</xsl:param>
    <xsl:param name="y">o</xsl:param>  

    <xsl:choose>
      <xsl:when test='contains($ps," ")'>
      <!-- Si on a plusieurs points (un espace, donc au moins deux points) -->
      <xsl:apply-templates select='.' mode="points">
                  <xsl:with-param name="ps">
                    <xsl:value-of select='substring-before($ps," ")' />
                    <!-- Premier point -->
                  </xsl:with-param>
                  <xsl:with-param name="x">
                    <xsl:value-of select="$x" />
                  </xsl:with-param>
                  <xsl:with-param name="y">
                    <xsl:value-of select="$y" />
                  </xsl:with-param>
      </xsl:apply-templates>
      <xsl:apply-templates select='.' mode='points'>
                  <xsl:with-param name="ps">
                    <xsl:value-of select='substring-after($ps," ")' />
                    <!-- Reste de la liste -->
                  </xsl:with-param>
                  <xsl:with-param name="x">
                    <xsl:value-of select="$x" />
                  </xsl:with-param>
                  <xsl:with-param name="y">
                    <xsl:value-of select="$y" />
                  </xsl:with-param>
      </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="$ps">
    <!-- Si la liste est non-vide. Donc si elle a juste un element
         (sinon on serait dans le cas du dessus) -->
<xsl:value-of select='substring-before($ps,",")+$x' />,<xsl:value-of select='substring-after($ps,",")+$y' />
<xsl:text>
</xsl:text>
    </xsl:when>
    </xsl:choose>    
  </xsl:template>

</xsl:stylesheet>

Vous pouvez tester en utilisant le dessin SVG suivant qui dessine une étoile dans chaque maison

<liste xmlns:g="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <svg xmlns="http://www.w3.org/2000/svg" width="10cm" viewBox="0 0 3 3">
    <rect x="0" y="0" width="1.5" height="1" stroke="blue" fill="white" stroke-width="0.1"/>
    <line x1="0" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
    <line x1="1.5" x2="0.75" y1="1" y2="1.5" stroke="blue"  stroke-width="0.1"/>
    <polyline points="0.4,0 1.2,0.6 0.2,0.6 1,0 0.7,1 0.4,0" />
  </svg>
  <titre>liste de villes</titre>
  <ville>
    <nom>Grenoble</nom>
    <g:lat>45.2</g:lat>
    <g:long>5.7</g:long>
  </ville>
  <ville>
    <nom>Paris</nom>
    <g:lat>49</g:lat>
    <g:long>2.35</g:long>
  </ville>
  <ville>
    <nom>Bordeaux</nom>
    <g:lat>44.8</g:lat>
    <g:long>-0.5</g:long>
  </ville>
</liste>

INF356 -- TP 8

TP 8, 25/11/2009

Dessin sur Google Map