Discussion :

[Pedro88]

Bonjour,
Est-il possible d'afficher un disque au départ de mon itinéraire sur cette page, et si oui, comment ?
http://p.salquebre.free.fr/ign/pusieux.htm
Il faudrait peut-être donner les coordonnées de départ et faire dessiner à cet endroit un disque de taille et de couleur réglage ?
Merci beaucoup.

[cmail]

Il faut analyser http://api.ign.fr/tech-docs-js/examp...alMap_gpx.html qui affiche 4 triangles nommés 3, 4, 5, Tivell.
1/ Mais auparavant tu installes firebug et tu l'utilises (au début c'est difficile, mais cela offre plein de ressource notamment la console te dira tes erreurs sur les ) } et balise manquante.... )
2/ En chargeant http://api.ign.fr/tech-docs-js/examp...alMap_gpx.html dans firefox avec firebug, la console de firebug t'indique que cet exemple utilise le fichier ..../data/Campomoro-Tizzano-Sartene_3029.gpx. En cliquant dessus tu l'affiches (merci firebug ) tu l'analyses et tu le compares à tes fichiers .gpx
3/ La position des triangles est donnée par ce fichier .gpx via les balises <wpt> . Dans ton cas, sur cet exemple, tu introduis dans tes fichiers .gpx une balise <wpt> au point de départ.
4/ La forme de l'icone (triangle) est donné par graphicName du stylemap (default) dans ton fichier .js . Pour changer le triangle en rond tu analyses http://api.ign.fr/tech-docs-js/examp...aphicName.html en passant sur les icones tu connais le nom à donner à ton graphicName . Je m'aperçois qu'il n'y a pas de rond car je pense que c'est la forme par défaut mais à confirmer... Choisis par exemple "_poi_" ce sera pas mal.

A partir de là tu fais tes nombreux essais. Et SURTOUT tu regardes dans la console de firebug les messages d'erreur qui apparaissent en t'indiquant le numéro de ligne de ton fichier js ou se situe ton erreur....

[Pedro88]

Si c'est plus facile de mettre un triangle, pourquoi pas dans un premier temps.
Je vois dans Firebug le picto .
Je sélectionne cette fonction d'inspection et pointe dans la page http://api.ign.fr/tech-docs-js/examp...alMap_gpx.html le triangle Tivell que je voudrais intégrer à ma page pour marquer le départ de l'itinéraire.
Apparaît alors surligné dans la fenêtre de gauche de Firebug dans l'onglet Html (pas Console)

<polygon points="0 , 10 10 , 10 5 , 0 0 , 10"/>

Ce bout de code appartient à l'ensemble svg suivant :

Code :

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

1
2
3
<svg id="OpenLayers.Geometry.Point_177" cx="229.70566115554539" cy="394.85101902566385" r="1" viewBox="-10 -10 30 30" width="72" height="72" x="193.70566115554539" y="358.85101902566385" fill="#FF9900" fill-opacity="0.75" stroke="#FFFF00" stroke-opacity="1" stroke-width="1.6666666666666667" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none" pointer-events="visiblePainted" cursor="pointer">
<polygon points="0 , 10 10 , 10 5 , 0 0 , 10">
</svg>

Je ne sais pas où coller ce code pour l'adapter ensuite à mon cas (je suppose qu'il faut donner les coordonnées d'au moins un sommet du triangle).
Les coordonnées de mon point de départ sont 6.538339 et 48.027882
J'ai vu le chemin d'accès de la trace Campomoro-Tizzano-Sartene_3029.gpx, mais pas dans Firebug (je n'ai pas trouvé la méthode).
Donc, je n'ai pas pu comparer à mon fichier gpx.
Je n'ai pas trouvé non plus de wpt (waypoints je suppose).
Donc, ce n'est pas gagné !
Ma page concernée http://p.salquebre.free.fr/ign/depart.htm
Merci de me faire avancer un peu, mais la tâche paraît rude.

[jrenard]

Bonjour,

La tâche ne paraît rude que parce que vous la pensez beaucoup plus complexe qu'elle ne l'est en réalité ! En fait, c'est assez simple.

Sur la page http://api.ign.fr/tech-docs-js/examp...alMap_gpx.html, l'onglet Firebug qui nous intéresse est celui marqué "Réseau". Il renseigne toutes les requêtes réseau envoyées par la page. En ouvrant cet onglet, puis en rafraîchissant la page après un vidage de cache, on voit passer dans les requêtes celle qui charge la trace GPX (si besoin, filtrer les résultats par les lettres "gpx" pour s'y retrouver dans toutes les requêtes. On constate alors que le fichier *.gpx se trouve à l'URL suivante : http://api.ign.fr/tech-docs-js/data/...rtene_3029.gpx

En ouvrant ce fichier par Notepad (ou dans un navigateur), on voit apparaître des séquences suivantes :

Code :

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

1
2
3
4
5
6
7
<wpt lat="41.622507000" lon="8.797880000">
 <ele>15.000000</ele>
 <name>003</name>
 <cmt>21/08/2005</cmt>
 <desc>21/08/2005</desc>
 <sym>Waypoint</sym>
</wpt>

Ce sont les Waypoints évoqués par Christian, qui sont mis en forme par des triangles dans l'exemple.

Il suffit donc de reprendre cette syntaxe dans votre propre fichier GPX. Toutes les balises internes au wpt ne devraient pas être nécessaires, il suffira de rajouter dans votre GPX les deux lignes suivantes :

Code :

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

1
2
<wpt lat="48.027882" lon="6.538339">
</wpt>

Le waypoint sera ainsi matérialisé dans votre trace GPX. Reste à le mettre en forme sur votre carte, pour cela le script de la page http://api.ign.fr/tech-docs-js/examp...alMap_gpx.html est à regarder au niveau du styleMap appliqué au fichier GPX, particulièrement la ligne suivante :

Code :

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

graphicName: "triangle",

qui définit un triangle comme symbole attaché aux waypoints. Mais comme je vois que la définition de ce styleMap existe déjà dans le fichier JS attaché à votre propre page, rien à rajouter ici. Après, vous pourrez jouer sur les différentes options du styleMap pour changer le symbole, ses couleurs, ses dimensions, etc...

[Pedro88]

Merci Jérémy pour cette réponse claire (même le dimanche !)
J'ai donc suivi l'explication et je vois un triangle avec une légende (j'ai changé quelques paramètres).
Je voudrais maintenant :
1- mettre un liseré noir d'un pixel d'épaisseur autour du triangle, sans changer la couleur rouge de la trace.
2- enlever l'ombre projetée de l'étiquette Départ.
3- avoir la possibilité d'afficher ou non cette étiquette Départ.

Ensuite :
4- ajouter éventuellement d'autres waypoints avec d'autres légendes.
5- choisir des formes autres que le triangle.

[mga_geo]

Pour le triangle, il est défini par :

OpenLayers.Util.applyDefaults({
fillColor: "#FFFF00",
fillOpacity: 0.75,
strokeColor: "#FF9900",
strokeWidth: 2,
graphicZIndex: "${zIndex}",
graphicName: "triangle",

il est rempli de jaune (#FFFF00) avec une bordure orange (#FF9900).
Sur mon écran, cela fait plutôt fond jaune avec du rouge autour.

Pour avoir des icônes plus personnalisées, il faut passer par des imagettes (format gig, png, jpg ...). On en trouve un peu partout, par exemple : http://grasswiki.osgeo.org/wiki/IconSymbols

J'ai pas d'ombre avec "Départ".

[Pedro88]

Voilà chez moi ce que ça affiche :

C'est une duplication décalée du rectangle probablement.
En fait, il y a deux éléments identiques affichés au lieu d'un.
Dans Firebug (que je ne maîtrise pas beaucoup), je vois comme code pour l'un :

Code :

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

<rect id="OpenLayers.Feature.Vector_330_outline_bg" fill="#FFFF00" stroke="black" stroke-width="1px" x="1056.3411865234375" y="700.9173583984375" height="21px" width="55px"/>

Pour l'autre le 330 devient 256, d'où le décalage, mais comment supprimer l'un des deux ?
Par ailleurs, le problème de la couleur et de l'épaisseur du liseré du triangle qui affecte de la même manière la trace persiste...
Comment séparer les paramètres de ces deux éléments ?
J'ai l'impression que ça a à voir avec OpenLayers.Feature.Vector.style["default"] et OpenLayers.Feature.Vector.style["select"], mais je n'y comprends pas grand chose.
Par contre, pas de souci pour changer le triangle avec un objet IGN (j'ai l'impression que c'est la fonction polygone pour tous, avec plus ou moins de points pour arriver à un beau dessin : merci Christian)
Merci encore pour votre aide.

[gcebelieu]

Bonjour,

j'ai du mal à voir d'où vient cette duplication. Pour y voir plus clair, je suggérerais de simplifier le code des styles (copié -à juste titre- des exemples API) en ne conservant que ce dont on a besoin (en enlevant les références aux propriété par défaut des style OpenLayers) :

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
                                styleMap:new OpenLayers.StyleMap({
                                    "default": new OpenLayers.Style({
                                            fillColor: "#FFFF00",
                                            fillOpacity: 1,
                                            strokeColor: "#000000",
                                            strokeWidth: 5,
                                            graphicZIndex: "${zIndex}",
                                            graphicName: "triangle",
                                            pointRadius: 8,
                                            label:"${getName}",
                                            labelAlign: "rb",
                                            labelXOffset: -20,
                                            labelYOffset: -20,
                                            labelBackgroundColor: "#FFFF00",
                                            labelBorderColor: "black",
                                            labelBorderSize: "1px",
                                            fontColor: "black",
                                            fontWeight: "bold",
                                            fontSize: "14px",
                                            fontFamily: "Courier New, monospace"
                                        },
                                       {
                                            context:{
                                                getName: function(f) {
                                                    if (f.attributes['typeName']=='wpt') {
                                                        return f.attributes['name'];
                                                    }
                                                    return '';
                                                }
                                            }
                                        })
                                       // suppression temporaire du style pour l'état "select"
                                }),

NB : les propriétés "default" et "select" permettent de définir un style à appliquer à l'objet lorsqu'il est affiché par défaut et lorsqu'il est sélectionné (si on veut appliquer un style différent).

Pour l'affichage du label "Départ", je déconseille de le spécifier dans le style car il s'affichera sur tous les points de type wpt du fichier GPX, mais plutôt de le préciser dans le fichier GPX lui même via la balise <name> que l'on va insérer à l'intérieur de la balise <wpt> qui correspond au départ :

Code :

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

1
2
3
4
<wpt lat="48.027882" lon="6.538339">
    <name>Départ</name>
</wpt>

C'est la fonction getName précisée dans les instructions de style qui va récupérer la valeur de cette balise et l'utiliser comme label.

[Pedro88]

Merci Gilles de m'aider.
J'ai essayé de modifier le fichier charriere2.gpx en copiant ton code.
De même pour le fichier js.
Effectivement, je n'ai plus de duplication de l'étiquette Départ.
Mais :
- Le mot Départ ne s'affiche pas, c'est indefined qui reste, alors qu'il est dans le fichier gpx.
- Il y a une deuxième étiquette en 6.531172/48.041556 affichée alors que j'ai enlevé ce wpt du fichier gpx.
Par ailleurs, reste le fait que le liseré du triangle prend la couleur et l'épaisseur de la trace gpx, alors que j'aimerais pouvoir agir sur ces deux paramètres du triangle sans toucher à la trace elle-même.

[gcebelieu]

Effectivement, je n'ai plus de duplication de l'étiquette Départ.
Mais :
- Le mot Départ ne s'affiche pas, c'est indefined qui reste, alors qu'il est dans le fichier gpx.
- Il y a une deuxième étiquette en 6.531172/48.041556 affichée alors que j'ai enlevé ce wpt du fichier gpx.

je ne constate pas ces PBs sur ta page. Tu as du les régler entre-temps ?

Par ailleurs, reste le fait que le liseré du triangle prend la couleur et l'épaisseur de la trace gpx, alors que j'aimerais pouvoir agir sur ces deux paramètres du triangle sans toucher à la trace elle-même.

ça c'est du au fait que tu dessines ton triangle : il prend les attributs de couleur et d'épaisseur définis pour les autres éléments de dessin (ta trace notamment). Il vaut mieux que tu utilises un picto séparé pour matérialiser ton triangle (cf. rmarque de mga_geo précédente). la propriété de style à utiliser pour cela est "externalGraphic" qui doit pointer vers l'URL de ton picto.

[Pedro88]

Je viens de vider le cache de Firefox et ça affiche comme chez toi, c'est tout bon !
Voilà, j'ai créé mon picto en png et j'ai suivi ta démarche, ça a l'air d'aller.
Je voudrais pouvoir positionner où je veux le disque jaune (le décaler de la trace).
Je ne sais pas où donner les coordonnées (ou peut-être Xoffset et Yoffset ?)
Encore merci.

[gcebelieu]

regarde ici :

http://dev.openlayers.org/releases/O.../Point-js.html

Tu as les propriétés de style pour les points et notamment pour les pictos. Ce sont les propriétés de type graphicXXXXX (dont graphixXOffset notamment)

[Pedro88]

Eh bien voilà, c'est super !
Grand merci.

[mga_geo]

Il est possible de jouer dynamiquement sur le rendu des "wpt" et "trk" en jouant sur le typeName dans le style.
Je le fais un peu sur cette page : http://mga.alwaysdata.net/geoportail...charriere.html

[Pedro88]

Merci Marc.
C'est trop fort pour moi...
De plus, ça fonctionne comme Gilles me l'a expliqué pour une trace, donc je suis content.
Par contre, pour plusieurs traces avec le même départ, je patauge un peu, mais je vais peut-être ouvrir un autre fil.