Discussion :

[Ivan84_]

Bonjour à tous,
Je viens de mettre un volet cartographique dans notre site internet à l'aide de l'API IGN.
J'y affiche des fonds de cartes IGN et y inclue une couche métier sous forme de fichier kml. En cliquant sur l'icone des points référencés dans le fichier kml, un cadre (pardon pour le vocabulaire peut-être incorrect) s'ouvre.

Je souhaiterai pouvoir paramétrer l'aspect de ce cadre : taille, font...

Si j'arrive à paramétrer la taille de l'image rattachée au point à l'aide d'un style dans le fichier kml, la taille du cadre, du tableau, la couleur des cellules, je fais appel à une class pour la police et la taille, je ne sais pas ou ni comment déclarer cette class.

un extrait du code du fichier kml
----------------------------------
<Style id="center_style">
<IconStyle>
<scale>0.50</scale>
<Icon>
<href>img/favicon.gif</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>VAUGINES</name>
<Snippet maxline="0"></Snippet>
<description><![CDATA[<table width="200" border="1" cellspacing="1" cellpadding="1"><tr><td colspan="2" bgcolor="#CCFFFF"><span class="KML_TABLEAU">RESEAU AGROCLIMATIQUE CIRAME</span></td></tr><tr><td width="60" bgcolor="#FFFFCC"><span class="KML_TABLEAU">Poste</span></td><td width="127" bgcolor="#FFCC66">VAUGINE</td></tr><tr><td bgcolor="#FFFFCC" class="KML_TABLEAU">Organisme</td><td bgcolor="#FFCC66">METEOFRANCE</td></tr><tr><td bgcolor="#FFFFCC"><span class="KML_TABLEAU">Active</span></td><td bgcolor="#FFCC66">OUI</td></tr><tr><td bgcolor="#FFFFCC"><span class="KML_TABLEAU">Du</span></td><td bgcolor="#FFCC66">01/01/1980</td></tr><tr><td bgcolor="#FFFFCC"><span class="KML_TABLEAU">Au</span></td><td bgcolor="#FFCC66">&nbsp;</td></tr><tr><td bgcolor="#FFFFCC"><span class="KML_TABLEAU">Profil</span></td><td bgcolor="#FFCC66">T - RR - HR% - </td></tr></table>]]></description>
<styleUrl>#center_style</styleUrl><Point>
<coordinates> 5.40512492, 43.77948950</coordinates>
</Point>
</Placemark>
--------------------------------------------

Merci pour vos conseils et avis
Ivan84

[dgrichard]

Il est possible d'inclure le référence au CSS externe, mais dans chaque balise <description> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<description><![CDATA[ 
 <link type="text/css" href="http://www.votresite.org/css/votrestyle.css" 
 rel="stylesheet" /> 
 ... 
 ]]></description>

mais, cela implique de le faire pour chaque placemark

Habituellement, il est préférable de mettre les CSS dans l'en-tête de la page web directement

[Ivan84_]

Merci dgrichard pour ta réponse rapide.

Je viens d'intégrer le css (dans le cas de mon exemple "kml_tableau") avec les autres styles déjà définis, dans la page qui appelle l'API.
Je n'ai pas changé l'appel de ces styles dans le fichier kml (<span class="KML_TABLEAU">...).
Mais toujours sans résultat. le lien entre kml_tableau et sa sigification ne se fait pas...

Y a t-il quelque chose que je ne fais pas ?

[dgrichard]

Y a t-il quelque chose que je ne fais pas ?

Difficile sans un site web ... Mais, dans tes messages, tu écris les noms des classes CSS dès fois en majuscules, dès fois en minuscules, ce qui n'est pas fonctionnel si dans ton développement tu utilises du XHTML dans le DOCTYPE

Question: Is CSS case sensitive?
Answer: Cascading Style Sheets (CSS) is not case sensitve. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.
It is a good idea to avoid naming classes where the only difference is the case, for example:
div.myclass { ...} div.myClass { ... } If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

[le_jey]

hello tous,

voilà je remets une couche sur le sujet car j'ai un souci lors de la récupération des mes styles CSS contenus dans le KML.

en effet qd je trace le KML chargé, tous les attributs "class" ou "id" de mes balises <span>, <img>, etc. n'existent plus.

je pensais que mon fichier KML n'était pas bon donc j'ai testé avec le code HTML fourni par Ivan84 mais le pb reste inchangé...
par exemple :

<span class="KML_TABLEAU">RESEAU AGROCLIMATIQUE CIRAME</span>

devient

<span>RESEAU AGROCLIMATIQUE CIRAME</span>

y-a-til un paramètre à préciser lors du chargement du KML genre "preserveStyle" ??? je n'ai rien trouvé là dessus...

je le charge de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
paLayer = new google.maps.KmlLayer('http://.../proto_fiche.kml',
    {suppressInfoWindows: true
    ,preserveViewport: true});
  	paLayer.setMap(theMap);

et je récupère le contenu tout simplement en faisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var contenu = kmlEvent.featureData.description;

so WTF ???
merci pour vos lumières...

jey

[dgrichard]

Je n'ai aucun problème ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<Placemark>
<name>CN19X169_86k_1778</name>
<description><![CDATA[<span class<Placemark>
<name>CN19X169_86k_1778</name>
<description><![CDATA[<span class="TOTO">CN19X169_86k_1778</span>]]></description>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>6.6923432,43.71196550 7.3706671,43.68404120 7.3344524,43.24714740 6.6609638,43.27464670 6.6923432,43.71196550</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>

et la pop-ip générée est correcte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="chicken" style="position: absolute; overflow: hidden; border: 2px solid rgb(0, 0, 0); left: 145px; top: 255px; background-color: rgb(255, 255, 255); opacity: 0.75; width: 201px; height: 50px; z-index: 751;" class="gpPopup">
<div id="chicken_GroupDiv" style="position: relative; overflow: hidden;">
<div id="chicken_contentDiv" style="width: 181px; height: 48px; position: relative; overflow: hidden;" class="gpPopupContent">
<div class="gpPopupHead gpKML">CE14X102_86k_1766</div>
<div class="gpPopupBody gpKML">
<span class="TOTO">CE14X102_86k_1766</span>
<br>
<table cellspacing="0" cellpadding="0" border="1"></table>
</div>
</div>
<div id="chicken_close" style="width: 17px; height: 17px; position: absolute; right: 1px; top: 1px;" class="gpPopupCloseBox"></div>
</div>
</div>

(les deux noms de feuilles sont différents car j'ai cliqué au hasard)

La méthode de chargement est l'habituelle ...