Blog SIG & Territoires

Dans cet article nous irons au-delà des bases du KML, afin que vous puissiez créer un fichier KML qui ajoute des icônes spéciales, des ballons de description plus élaborés et des effets personnalisés sur vos repères et vos tours.

Ce que l’on affiche du KML dans Google Earth c’est en fait un élément <Placemark> avec un élément enfant <Point>. Un Placemark de point est le seul moyen de dessiner une icône et une étiquette dans la vue 3D de Google Earth. Par défaut, l’icône est la punaise bleue poussoir familière. Dans KML, un <Placemark> peut contenir un ou plusieurs éléments géométriques, tels que <LineString>, <Polygon> ou <Modèle>. Mais seul un <Placemark> avec un <Point> possède une icône et une étiquette. L’icône indique la position du point.
L’élément Geometry dans <Placemark> est facultatif, mais si vous l’omettez, le ballon "flotte" dans le coin de la vue 3D. Dans la vue Google Earth 3D, un repère de point est le seul objet sur lequel vous pouvez cliquer. Les autres éléments de géométrie n’ont pas d’icône dans la vue 3D. Vous pouvez, cependant, donner à n’importe quelle géométrie une icône en utilisant un élément <MultiGeometry> qui contient à la fois un <Point> et l’autre élément Geometry.

Les ballons (Balloons)

Dans l’exemple "Bonjour la Terre" de l’article précédent, nous avons décrit les éléments simples qui composent un ballon par défaut. Vous bénéficiez de ce ballon par défaut, c’est-à-dire, que vous ne créez pas explicitement un élément "ballon". Toutefois, si vous souhaitez personnaliser une bulle, vous devez créer un élément <BalloonStyle>, qui comprend des éléments pour personnaliser la couleur du texte, la couleur de fond et les éléments de texte.

Par défaut, un ballon dans Google Earth comprend les éléments suivants:
• Le <nom>, en caractères gras
• Le marqueur <description>
• Liens pour les itinéraires: vers ce lieu- A partir de ce lieu

La bulle par défaut a un fond blanc et une queue qui est attachée aux coordonnées ponctuelles du marqueur, si elle inclut un élément <Point>.
Les itinéraires sont utiles pour l’affichage de marqueurs situés dans des zones disposant de routes d’accès. Par contre si vos données ne concernent pas des éléments accessibles par la route, les indications d’itinéraire ne sont, généralement, pas pertinentes. On verra comment omettre les instructions d’itinéraire plus loin. Mais sachez déjà que si un <Placemark> ne contient pas de <Point>, les instructions d’itinéraire sont automatiquement omises.

L’élément <description> dans <Placemark> prend en charge un sous-ensemble de balises HTML. Si vous utilisez le HTML, il est plus facile d’inclure le code HTML dans les supports CDATA, comme indiqué dans l’exemple suivant.
Cette technique masque le HTML à l’analyseur KML. Si vous omettez les étiquettes CDATA, vous devrez substituer des séquences de caractères spéciaux aux symboles HTML. Sans les étiquettes CDATA, par exemple, vous devez taper & lt; Au lieu de < et & gt; Au lieu de >. Au lieu de <p>, vous devriez donc taper & lt; p & gt ;, ce qui est beaucoup plus difficile à taper et à lire.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Visite du 16 juin 2017</name>
<description>
<![CDATA[
<p>Après vérification des capteurs mis en place, nous avons procédé à l’échantillonnage</p>
<p>Les échantillons ont été marqués et emballés sur place</p>
]]>
</description>
<Point>
<coordinates>-4.964,48.392,0</coordinates>
</Point>
</Placemark>
</kml>

La mise en forme du texte suit les règles HTML:

• les paragraphes sont délimités par les balises <p> et </p> et déterminent un saut d’une ligne
• si vous voulez passer à la ligne sans une ligne blanche, vous utilisez la balise </br>
• pour mettre les caractères en gras vous utilisez les balises <b> et </b> et pour les italiques les balises <em> et </em>

Les deux autres éléments à prendre en charge ce sont les hyperliens et les images.

Inclusion d’un hyperlien

Les hyperliens sont des références à d’autres ressources sur le World Wide Web. Utilisez un code HTML standard pour ajouter un lien hypertexte au ballon.Lorsque l’utilisateur clique sur ce lien, l’adresse cible (URL) s’ouvre dans une nouvelle fenêtre du navigateur.
L’hyperlien complet est inclus dans les balises <a> et </a>.L’attribut href de la balise <a> contient l’URL du lien, entre guillemets.La valeur de la balise <a> (c’est-à-dire la chaîne entre les variables de début et de fin pour cet élément) contient le texte affiché dans la description.

<description>
<![CDATA[
<a href="http://www.sigterritoires">
Le Blog SIG & Territoires</a>
]]>
</description>

Inclusion d’une image

Pour ajouter une image au ballon, utilisez la balise HTML <img>. Par exemple:

<Description>
<! [CDATA [
<Img src = "monimage.jpg" />
]]>
</ Description>

Cet exemple utilise un fichier image situé dans le même répertoire que le fichier KML.
La référence de l’image peut également être l’URL d’une image stockée sur le Web (par exemple:
Http: //serveur/repertoire/photo.jpg). Les autres formats d’image supportés sont .png, .tif et gif.

Modèle de code ballon

Voici un petit fichier KML que vous pouvez sauvegarder et utiliser comme modèle pour vos futurs ballons.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<name>Nom de votre endroit</name>
<description>
<![CDATA[
Premier paragraphe.
<br/>
Code pour ajouter un hyperlien:
<p><a href="http://www.nasca.ovh">
Mettez ici le texte de votre lien.</a></p>
<p>Code pour ajouter une image:
<img src="http://www.nasca.ovh/downloads/logonascanew200b.jpg"></p>
<p><b>Exemple de texte en gras.</b></p>
<p><em>Exemple de texte en italique.</em></p>
]]>
</description>
<Point>
<coordinates>-4.964,48.392,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>

Et voici ce que donne son affichage

Gérer les couleurs

Vous pouvez modifier les couleurs par défaut du texte et du fond.
Pour modifier la couleur de fond du ballon, utilisez l’élément <BalloonStyle>, qui est toujours contenu dans un élément <Style>.
Pour modifier la couleur du texte, utilisez l’élément <BalloonStyle>, qui est aussi toujours contenu dans l’élément <Style>.

<Style>
<BalloonStyle>
<bgColor>ff856478</bgColor>
<textColor>ff00aa00</textColor>
</BalloonStyle>
</Style>

Comment spécifier des valeurs de couleur?

Les valeurs de couleur dans KML contiennent deux parties: une valeur de transparence et une valeur de couleur avec les composants bleus, verts et rouges. Pour l’instant, Google Earth ignore la valeur de transparence pour les arrière-plans de ballon. Ce n’est pas le cas pour les images en overlay. Nous verrons donc l’utilisation de la transparence dans l’article consacré aux overlays.

En KML, les couleurs sont exprimées en notation hexadécimale (de 00 à FF). Chacune des quatre composantes (transparence, bleu, vert, rouge) est exprimée avec deux chiffres: aabbggrr où :

• aa sont les deux chiffres spécifiant la valeur de la transparence (ceci correspond au canal alpha, qui est souvent utilisé dans l’infographie pour stocker la composante de transparence d’une couleur). Une valeur de 00 indique une couleur complètement transparente. Une valeur de ff indique une opacité complète (pas de transparence).
• bb sont les deux chiffres spécifiant la valeur de couleur bleue.
• gg sont les deux chiffres spécifiant la valeur de couleur verte.
• rr sont les deux chiffres spécifiant la valeur de couleur rouge.

La gamme de valeurs pour chaque couleur est de 0 à 255, avec 0 signifiant "pas de cette couleur", et 255 signifiant "saturation complète de cette couleur".

Pour les couleurs de base, les valeurs sont donc les suivantes (toutes avec une opacité complète): Rouge= ff0000ff, Vert= ff00ff00, Bleu= ffff0000,Blanc= ffffffff, Noir= ff000000.

Par contre, c’est un peu compliqué de trouver les autres couleurs sans aucune aide. Heureusement, l’interface utilisateur Google Earth comprend un sélecteur de couleurs qui vous permet de choisir des couleurs pour les lignes et les contours et les remplissages de polygones. Bien que l’interface utilisateur ne vous permet pas de spécifier la couleur pour un fond de ballon, vous pouvez utiliser le Sélecteur de couleur pour identifier la couleur souhaitée. Ensuite, vous pouvez ajouter un élément <bgColor> au fichier KML avec cette couleur comme valeur.
Pour ce faire:
1. Créez un polygone dans Google Earth. Cliquez avec le bouton droit de la souris pour sélectionner Propriétés; Puis accédez à l’onglet Style / Couleur et cliquez sur le carré "ZONE -> Couleur" pour afficher le sélecteur de couleur.
2. Utilisez l’outil Sélecteur de couleur pour choisir une couleur. Supposons que vous choisissiez un bleu-mauve avec des valeurs de Rouge: 115, Vert: 80 et Bleu: 255.
3. Utilisez le copier-coller pour copier le polygone coloré dans un éditeur de texte.
4. Vous pouvez maintenant voir dans le fichier la valeur hexadécimale pour la couleur que vous avez créée. Dans cet exemple, vous verrez ces lignes de code KML:

<PolyStyle>
<color>ffff5073</color>
</PolyStyle>

<Style>
<BalloonStyle>
<BgColor> ffff5073 </ bgColor>
</ BalloonStyle>
</ Style>

N’oubliez pas que dans KML, l’ordre des éléments enfants dans l’élément parent doit être maintenu. Dans l’élément <Placemark>, par exemple, l’élément <Style> est toujours placé après la <description>.

Eviter la proposition d’itinéraire dans votre ballon

Par défaut, la proposition d’itinéraire est présente dans les ballons. Pour que celle-ci n’apparaisse pas, il faut courtcircuiter l’affichage par défaut.

Pour cela, il suffit de placer un paragraphe <text> dans votre <BalloonStyle> contenant des entités. Une entité est une étiquette faisant référence à un élément présent dans le Placeholder. Ces étiquettes se distinguent parceque ellle commencent par le caractère $.

Par exemple $[name] sera remplacé lors de l’affichage du ballon par le texte contenu entre les deux balises <name> et </name>.

Par exemple:

<Style>
<BalloonStyle>
<text>
<![CDATA[
$[name] <p>
$[description] ]]>
</text>
</BalloonStyle>
</Style>

Le fait d’avoir des entités dans les balises <texte> du style, fait que l’affichage par défauit est ignoré et seules les entités présentes dans la définition seront affichées, en suivant la mise en forme définie dans le style.

Si vous voulez garder la recherche d’itinéraire dans l’affichage, incluez l’entité $[geDirections] dans votre style.

Changer l’icône par défaut

Pour ajouter une icône personnalisée, utilisez l’élément <IconStyle> pour spécifier l’image personnalisée à utiliser comme icône. Vous pouvez spécifier l’une des icônes Google Earth standard situées sur le Web, ou vous pouvez spécifier votre propre image. Si vous fournissez votre propre image, assurez-vous d’inclure l’image dans l’archive KMZ ou publiez-la sur un serveur Web afin que les autres utilisateurs puissent charger l’icône avec votre fichier KML.
Pour utiliser une icône standard de Google Earth, accédez à la boîte de dialogue Modifier repère dans Google Earth et cliquez sur l’icône jaune.

Cette action affiche la palette d’icônes standard dans Google Earth. Lorsque vous cliquez sur une icône dans cette palette, son URL s’affiche en haut de la boîte de dialogue. Vous pouvez spécifier cette URL comme la valeur de <href> dans l’élément <IconStyle>.
Voici un exemple d’utilisation de l’élément <IconStyle> pour ajouter une icône tout à fait personnelle. Le fichier image est stocké au même endroit que le fichier KML qui le réfère, donc il n’a pas besoin de la spécification du chemin complet.

<IconStyle>
<Icon>
<href>monicone.png</href>
</Icon>
</IconStyle>

Si le fichier image d’icône est stocké sur un serveur distant, vous devez spécifier l’URL complète dans l’élément <href>. Voici l’exemple:

<IconStyle>
<Icon>
<href>http://www.nasca.ovh/downloads/monicone.png</href>
</Icon>
</IconStyle>

Pour finir avec cette partie, voici un modèle de fichier kml contenant ce que nous venons de voir dans cet article et que vous pourrez modifier à votre guise:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<name>Nom de votre endroit</name>
<description>
<![CDATA[
Le premier paragraphe.
</br>
Code pour ajouter un hyperlien:
<a href="http://code.google.com/apis/kml">
Mettez ici le texte de votre lien.</a>
<p>
Code pour inserer une image image:
<img src="http://code.google.com/images/code_sm.png">
</p>
<p>
<b>Exemple de texte en gras.</b>
</p>
<p>
<em>Exemple de texte en italique.</em>
</p>
]]>
</description>
<Style>
<IconStyle>
<Icon>
<href>monicone.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<bgColor>ff669999</bgColor> <!– par defaut=ffffffff –>
<textColor>ff660000</textColor> <!– par defaut=ff000000 –>
<text> <!– enlève la proposition d’itinéraire–>
<![CDATA[
$[name] <p>
$[description] ]]>
</text>
</BalloonStyle>
</Style>
<Point>
<coordinates>…</coordinates)
</Point>
</Placemark>
</Document>
</kml>

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois