Modifications d'un fichier kml

**Randobos** · 06/09/2012, 09h58

Bonjour à toutes et à tous,
Dernièrement Zebulon-21 m'a appris à alléger un fichier kml et à lui ajouter un texte concernant les détails de la rando : voir ici
Grace au texte ci-après incorporé dans la version 2.0.0 de l'API :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function ouvrePopup(feature) {
	if (feature) {

			var popup = new OpenLayers.Popup.Anchored(		
			"chicken",
			feature.geometry.getBounds().getCenterLonLat(), // Position
			null, // Taille
//____________Ajout des attributs dans l'info-bulle :
	"<div style='font-size:1em'>" + "<font color='#0D0DFF'><b>" + feature.attributes.name + 
		"</font></b></div>" + "<br />" +
	"<div style='font-size:.85em'>" + "<font color='#CC3366'><b>" + "Détails" + 
		"</font></b></div>" +
	"<div style='font-size:.75em'>" + "<font color='#0000CD'>" + feature.attributes.description +
		"</font></div>" + "<br />" +
	"<div style='font-size:.75em'>" + "<font color='#0000FF'><b>" + "Coordonnées WGS84 (longitude-latitude)" + 
		"</font></b></div>" +
	"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.position +
		"</font>",
			null, // Anchor
			true); // Croix de fermeture (true=oui  false=non)
		popup.setBorder("3px solid #668000");
		popup.setBackgroundColor("#ffffcc");
		popup.setOpacity(0.75);
		feature.popup= popup;
		feature.popup.panMapIfOutOfView= true; // Affichage de l'info-bulle : "true" déplace la carte, "false" déplace l'info-bulle.
		feature.popup.autoSize= true; // Taille automatique selon le contenu
		feature.popup.maxSize= new OpenLayers.Size(400,600); // Taille maxi
		feature.popup.minSize= new OpenLayers.Size(100,100); // Taille mini
		feature.popup.contentDiv.style.overflow= 'auto'; // Affichage des barre de défilement si nécessaire
		viewer.getMap().addPopup(popup, true);
	}
}
function fermePopup(feature)
{ 
    if (feature && feature.popup) {
        feature.popup.destroy();
        feature.popup= null;
}

il est possible de cliquer sur la trace et de voir apparaître une "info-bulle dans laquelle on retrouve son petit texte, ce qui est très sympa.
Cependant j'aimerais savoir à quoi sert le titre "Coordonnées WGS84 (longitude-latitude) qui se trouve en bas de la fenêtre et qui est "undefined" alors que l'on peut avoir ce renseignement en bas de carte.

**Randobos** · 06/09/2012, 19h17

Pour compléter ma question, même si les coordonnées sont renseignées en bas de la carte, existe t-il un moyen simple pour obtenir ces dernières dans l'info-bulle,en cliquant sur un point du tracé ?

**Zébulon-21** · 08/09/2012, 17h21

Envoyé par Randobos

Cependant j'aimerais savoir à quoi sert le titre "Coordonnées WGS84 (longitude-latitude) qui se trouve en bas de la fenêtre et qui est "undefined" alors que l'on peut avoir ce renseignement en bas de carte.

Je vois que tu grattes bien le sujet.

En fait, "Coordonnées WGS84 (longitude-latitude)" peut répondre à un besoin spécifique mais pas nécessairement car ce n'est qu'un exemple d'affichage.

Tu obtiendrais l'affichage de ces coordonnées à condition de renseigner le KML comme ceci (ajout en rouge) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 <Placemark>
		<name>Refuge de Tête Rousse</name>
	<Type>2</Type>
		<description><![CDATA[
			- Altitude : 3167 m <br />
			- C.A.F. gestionnaire <br />
		]]></description>
<position>6.81871 - 45.85549</position>
    <Point>
		<coordinates>6.81871,45.85549,0</coordinates>
    </Point>
  </Placemark>

Tu pourrais tout aussi bien mettre l'âge du capitaine à la place ; dans ce cas il ne te resterait plus qu'à adapter comme suit :

- Remplacer <position> par <age> dans le KML
- et adapter en conséquence le code repris dans ton 1er message.

**Randobos** · 08/09/2012, 17h37

Merci encore, Zébulon-21 d'avoir répondu à un point de détail qui n'intéresse peut-être pas grand monde. Mais si je comprends bien, ce que tu m'indiques semble beaucoup plus adapté à un point d'intérêt, qu'au tracé lui même.

**trukker** · 08/09/2012, 18h36

Bonjour

Citation Zebulon21

Tu obtiendrais l'affichage de ces coordonnées à condition de renseigner le KML comme ceci (ajout en rouge) :

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>Refuge de Tête Rousse</name>
     <Type>2</Type>
		<description><![CDATA[
			- Altitude : 3167 m <br />
			- C.A.F. gestionnaire <br />
		]]></description>
    <position>6.81871 - 45.85549</position>
    <Point>
		<coordinates>6.81871,45.85549,0</coordinates>
    </Point>
</Placemark>

Il me semble inutile d'ajouter :

Code :

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

<position>6.81871 - 45.85549</position>

Il suffirait de modifier cette ligne :

Code :

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

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.position +

en :

Code :

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

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.coordinates +

Pour répondre plus généralement, cette portion de code (ci-dessous) est une façon d'ajouter du code html dans l'infobulle :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
"<div style='font-size:1em'>" + "<font color='#0D0DFF'><b>" + feature.attributes.name + 
	"</font></b></div>" + "<br />" +
"<div style='font-size:.85em'>" + "<font color='#CC3366'><b>" + "Détails" + 
	"</font></b></div>" +
"<div style='font-size:.75em'>" + "<font color='#0000CD'>" + feature.attributes.description +
	"</font></div>" + "<br />" +
"<div style='font-size:.75em'>" + "<font color='#0000FF'><b>" + "Coordonnées WGS84 (longitude-latitude)" + 
	"</font></b></div>" +
"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.position +
	"</font>",

les : feature.attributes.name, description, position ...etc... ajoutent les données des balises du kml dans l'infobulle.

En utilisant l'html il est possible de mettre des images et des liens vers des pages html dans l'infobulle (une petite page html en fait).

**Zébulon-21** · 08/09/2012, 18h45

Envoyé par Randobos

ce que tu m'indiques semble beaucoup plus adapté à un point d'intérêt, qu'au tracé lui même.

Oui et non, en te rappelant que ce n'est qu'un exemple de mise en page (peu importe le contenu).

En fait l'exemple indique comment ajouter une rubrique avec sous-titre dans ton info-bulle.

Le contenu n'est pas nécessairement un point (avec coordonnées), sauf que dans ton cas tu pourrais indiquer le point de départ de cette façon.

L'exemple de Trukker est à exploiter dans ce cas.

Tu peux aussi préciser le niveau de difficulté, etc...

Pour supprimer ou modifier Coordonnées WGS84 (longitude-latitude) c'est au niveau des lignes 15, 16, 17, 18 dans le code de ton 1er message.

**Zébulon-21** · 08/09/2012, 19h00

Envoyé par trukker

Il suffirait de modifier cette ligne :

Code :

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

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.position +

en :

Code :

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

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.coordinates +

J'ajoute une petite précision car nos réponses à Rondobos se sont "télescopées".

Coté pratique : On peut utiliser "coordinates" pour un waypoint mais pas avec un tracé, sauf si l'on veut afficher 200 lignes de chiffres...

**Randobos** · 08/09/2012, 19h20

J'ai modifié ma ligne comme indiqué :

Code :

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

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.coordinates +

et je n'obtiens pas une multitudes de chiffres qui s'allignent, mais le fatidique "undefined". Voir ici

**Zébulon-21** · 08/09/2012, 19h34

Hé oui, j'avais dû tester tout ça avant de mettre l'exemple en ligne.

C'est parceque <LineString> précède <coordinates>.

Donc, faut prendre l'exemple tel quel si l'ajout d'une rubrique te convient (en modifiant le contenu à ta convenance évidemment).

Sinon supprimer les lignes précitées.

**Randobos** · 08/09/2012, 22h12

OK, je vais me lancer dans des exemples concrets avec toutes ces explications.
Un grand merci à Zebulon-2 et Trukker

**mga_geo** · 09/09/2012, 10h48

Avec un fichier kml comme ceci:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<Folder>
<Placemark>
<name>De Villars aux Ocres de La Bruyère (84)</name>
<description><![CDATA[
Randonnée toute en couleur puisque <br/>
nous marchons dans les montagnes d'ocres rouges. <br/>
Les ancienne galeries d'extraction de l'ocre <br/>
sont encore visitables (avec prudence).
]]></description>
<position>toto</position>
<ExtendedData>
<Data name="maValeur">
<value>titi</value>
</Data>
</ExtendedData>
<LineString>
<coordinates>
5.410804,43.919539,282.77
...
</coordinates>
</LineString>
</Placemark>
</Folder>
</Document>
</kml>

l'affichage du popup est obtenu ainsi:

"<div style='font-size:.7em'>" + "<font color='#000000'>" + feature.attributes.position +
"</font></b></div>" +
"<div style='font-size:.7em'>" + "<font color='#ff0000'>" + feature.attributes.maValeur.value +
"</font></b></div>",

cf http://mga.alwaysdata.net/geoportail...caprandos.html

**Randobos** · 09/09/2012, 11h42

Effectivement mga_geo tes renseignements concordent avec ceux de Zebulon-21 et me donnent le rendu suivant : voir ici
Je vous remercie tous les deux sans oublier trukker et je classe ce sujet comme résolu (tout au moins, en ce qui me concerne).

**Zébulon-21** · 09/09/2012, 19h33

Tu peux aussi donner dans la fantaisie, comme ici :
http://www.valroc.net/archives/ligne23.html

**Randobos** · 09/09/2012, 20h07

Super !

ça commence à me plaire. Mais comment fais tu pour obenir les coordonnées WGS 84 en prioirité ainsi que le choix ciblé des types de coordonnées, ainsi que le texte "Longitude" et "Latitude" en bas de la carte ?

**Zébulon-21** · 09/09/2012, 20h13

Envoyé par Randobos

Mais comment fais tu pour obenir les coordonnées WGS 84 en prioirité ainsi que le choix ciblé des types de coordonnées, ainsi que le texte "Longitude" et "Latitude" en bas de la carte ?

Il y a un lien en haut de la page qui précise les sources (cf "Panneau d'info")

Ensuite, pour la mise en pratique, suffit de voir le code source de la page.

J'arrête là, on est hors sujet

**Randobos** · 09/09/2012, 20h33

OK, je reconnais avoir débordé sur le sujet, mais c'était trop tentant en voyant ta carte. Je te suis reconnaissant de m'avoir offert un petit supplément

et considère que la discussion est close.

Modifications d'un fichier kml

IGN API Géoportail

Discussions similaires

Partager

Partager