Plusieurs traces gpx sur une seule carte.

**Pedro88** · 15/12/2014, 10h26

Bonjour,
J'ai vu un fil de février 2012 sur ce thème, avec API 1.3 et n'ai pas bien compris, d'autant que je n'arrive pas à charger les pages référencées.
Comment faire pour afficher trois traces gpx (charriere, puscaillou et chevreuil) qui partent du même endroit (chalet de Pusieux) sur une même carte (qui garde son centrage de départ) ?
Ces trois traces seront de même épaisseur, mais de couleurs différentes (vert, bleu, rouge).
J'essaie en vain d'afficher déjà la trace charriere.gpx sur la carte à une certaine échelle et centrée sur un lieu proche de Pusieux, en modifiant le code de cette page qui me convient :
http://p.salquebre.free.fr/ign/ign-mortevieille.html
Pour cela, je modifie ce fichier js :
http://p.salquebre.free.fr/ign/js/mortevieille.js
en changeant le nom pour obtenir :
http://p.salquebre.free.fr/ign/js/pusieux.js
Quand je change dans la ligne 39 mortevieille .gpx en charriere.gpx, j'arrive à un affichage avec échelle du monde, sans centrage sur Pusieux et sans la trace charriere.gpx qui est ici :
http://p.salquebre.free.fr/ign/gpx/charriere.gpx
Merci pour votre aide.

**cmail** · 15/12/2014, 13h19

avec API 1.3 et n'ai pas bien compris, d'autant que je n'arrive pas à charger les pages référencées.

C'est normal si les pages sont avec api 1.3 qui n'est plus maintenu.
Mais si la page est toujours en ligne, on peut remonter au code. A moins que la page n'existe plus comme pour les exemples de zébulon de Dijon.
C'est pour cela que mettre ses exemples sur jsfindle serait un plus dans la continuité... Quel est l'url de ce fil?

trois traces gpx (charriere, puscaillou et chevreuil) qui partent du même endroit (chalet de Pusieux) sur une même carte

Il faut compléter ta question: est-ce trois gpx sur la même couche? ou plutot trois gpx sur trois couches différentes (qui me semble plus simple pour maitriser les couleurs et épaisseurs des tracés)?

De toute manière, ces deux problèmes différents seront traités dans le même et unique fichier .js avec des fonctions adhoc

l'url de charriere.gpx n'est pas bonne.

**Pedro88** · 15/12/2014, 14h43

Toujours aussi présent, Christian, et précis...
Le fil est celui-ci :
http://www.developpez.net/forums/d12...gpx-api-1-3-a/

Je viens de constater, suite à ta remarque, que le fichier charriere.gpx existait bien, mais avec GPX en majuscules, ce qui expliquait mon problème.
Donc, maintenant, ça fonctionne ! (pourtant, j'avais cherché avant de poster)

Je voudrais les trois traces sur 3 couches différentes, de sorte qu'on puisse cocher et voir (à partir du menu IGN des couches) une ou deux ou trois traces sur la carte. Donc l'affichage d'une deuxième trace ne doit pas cacher la première.
Merci encore et toujours.

**cmail** · 15/12/2014, 17h40

Rapidement sur le fil API 1.3 en question. Tu peux analyser le code affichant les gpx en faisant un clic droit dans la page http://www.rando83.fr/carte/tizzano45.htm, puis "afficher le code source et clic sur http://www.rando83.fr/carte/js/geoportalMap2_gpx.js que tu analyses en fonction de ce qui est dit plus bas (jeromm y crée 2 couches avec gpx). Pour la page de mga_geo, ce n'est plus en ligne.

Rapidement, j'énonce le principe décrit dans cette page http://api.ign.fr/documentation/84/a...e-couches-gpx: (D'ailleurs à ce propos, sur ce fichier d'aide, je m'aperçois qu'il manque un paragraphe d'explication de skipAttributes: que IGN saura vite compléter!!!

)
Pour ajouter une couche gpx avec un style propre on écrit :

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
// Ajout d'abord d'un style propre associé à ta future couche gpx....
var myStyleMap0 = new OpenLayers.StyleMap({    
    "default": new OpenLayers.Style({
        'pointRadius': 10,
..........
        'strokeColor': '#FFFFFF',
        'fillColor': '#ff0000'
            }),


    "select": new OpenLayers.Style({
        'pointRadius': 15,
...........
        'strokeColor': '#ff00ff',
        'fillColor': '#ff00ff'
            })
          });

//Puis Ajout d'une couche GPX ...
   var gpx0= viewer.getMap().addLayer("GPX",       "http://www.xxxxxx.fr/gpx/chevreuil.gpx",
        {   visibility:true,
            opacity:1.0,
            minZoomLevel:10,
            maxZoomLevel:14,
......
            styleMap:myStyleMap0
}

A répéter donc 3 fois pour avoir 3 couches mais en changeant le nom de tes variables, tes paramètres (url .gpx, etc.) suivant tes besoins.
Tu fais une page d'essai en conséquence et tu nous la montres

**Pedro88** · 15/12/2014, 18h27

Je viens de regarder tout ça, Christian, mais c'est trop fort pour moi, je n'ai pas compris grand chose.
Je ne sais pas quoi mettre où.
Si tu veux bien essayer de modifier mon fichier pusieux.js (puisque le pusieux.html, je comprends qu'on n'y touche pas) en mettant 2 traces, je serai peut-être capable d'en mettre une troisième.
http://p.salquebre.free.fr/ign/js/pusieux.js
Les deux traces gpx sont ici :
http://p.salquebre.free.fr/ign/gpx/charriere.gpx
http://p.salquebre.free.fr/ign/gpx/puscaillou.gpx
Mais je ne t'oblige pas à faire mon boulot, tu es déjà très gentil de m'avoir beaucoup aidé, je comprendrai que tu t'arrêtes là.
Si je n'y arrive pas, les gens auront une seule trace par carte, c'est moins bien mais tant pis...
@+

**cmail** · 15/12/2014, 21h06

Mais puisque tu maîtrises maintenant le générateur (sinon relire http://api.ign.fr/documentation/347/...-en-javascript) , pourquoi tu ne l'utilises pas (en refaisant ce que tu as fait jadis) et à l'étape 4 tu ajoutes 2 (ou n) autres couches vecteurs avec tes fichiers .gpx (sans t'occuper du proxy inutile dans ton cas).
Essaye http://api.ign.fr/generateur/.

Restera ensuite à reprendre un peu ce code pour y modifier les styles.

**Pedro88** · 15/12/2014, 21h39

C'est une bonne idée, mais il me génère de l'html, pas du js.
Cette ligne est intéressante, peut-être peut-on la recaser quelque part dans mon fichier js ?

Code :

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

overlays:{"GPX":[{"name":"puscaillou","url":"http://p.salquebre.free.fr/ign/gpx/puscaillou.gpx","options":{"params":{"opacity":1,"visibility":true},"options":{}}},{"name":"Charrière","url":"http://p.salquebre.free.fr/ign/gpx/charriere.gpx.gpx","options":{"params":{"opacity":1,"visibility":true},"options":{}}},{"name":"Chevreuils","url":"http://p.salquebre.free.fr/ign/gpx/chevreuil.gpx.gpx","options":{"params":{"opacity":1,"visibility":true},"options":{}}}]},

Je ne sais pas exactement où mettre ces couches dans mon fichier js, sans parler des couleurs et des épaisseurs de traces.
J'ai du mal à faire le rapprochement avec tes propositions précédentes.
Quand je regarde les exemples, je trouve plein d'autres balises, variables et autres que je ne connais pas.
Je réfléchirai demain, à tête reposée.
Merci en tout cas.

**cmail** · 16/12/2014, 08h33

C'est une bonne idée, mais il me génère de l'html, pas du js.

Oui, mais tout ce qui est entre les balises <script> et </script> c'est du js et cela va dans ton fichier js.

Il faut absolument que tu nous donnes tes différents fichiers que tu réalises et dont tu nous parles. Pour nous c'est plus facile de faire un copier coller (de tes fichiers) que de réécrire un code spécifique de A à Z.

Donc quand tu as une question, en même temps que ta question tu fais un fichier de test dont tu nous donnes l'url. Autrement on ne te suis pas du tout! Et on se lasse de remonter la piste...

Donc une nouvelle intervention sur ce forum implique une url de test. (ou au moins un code très détaillé et lisible)

Sinon, il faut hiérarchiser les problèmes:
1/ D'abord les différentes traces sur différentes couches.
2/ Ensuite les couleurs et des épaisseurs de traces. Dans un nouveau fil

**Pedro88** · 17/12/2014, 15h52

J'ai essayé un bon moment de mettre en application tes conseils, Christian, mais je m'y perds.
Le contenu des fichiers que tu me proposes est trop différent et je n'ai pas les compétences pour adapter tout ça.
Je joins tout de même mes deux fichiers, bourrés d'erreurs,sur lesquels je bricole en vain :
http://p.salquebre.free.fr/ign/pusieux3.htm
http://p.salquebre.free.fr/ign/js/pusieux3.js
A mon avis, il y a du boulot pour les experts, j'en suis gêné à l'avance...

**cmail** · 18/12/2014, 09h33

J'ai fait au plus vite pour te montrer un truc simple http://essai.obs43.fr/pedro.htm
Mais après, il faut compléter avec ce que tu grappilleras sur les tuto et exemples de l'ign....
Il y a encore du travail

**Pedro88** · 18/12/2014, 11h17

Merci Christian, tu me motives à avancer.
J'ai donc adapté mon code à partir de tes pages htm et js.
J'arrive donc à peu près à mes fins grâce à toi.
J'essaie d'avoir un code compréhensible et léger dans mon fichier js car je ferai du copier/ coller pour d'autres traces dans d'autres lieux.
Voilà ce que je trouve pour le style de la troisième couche et qui me semble surabondant :

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
39
40
41
42
// Ajout d'abord d'un style propre associé à ta troisième couche gpx....
var myStyleMap2 = new OpenLayers.StyleMap({
                                    "default": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FFFF00",
                                            fillOpacity: 1,
                                            strokeColor: "#FF0000",
                                            strokeWidth: 5,
                                            graphicZIndex: "${zIndex}",
                                            graphicName: "triangle",
                                            pointRadius: 8,
                                            //see context object below
                                            label:"${getName}",
                                            labelAlign: "rb",
                                            labelXOffset: -20,
                                            labelYOffset: -20,
                                            labelBackgroundColor: "#FFFF00",
                                            labelBorderColor: "black",
                                            labelBorderSize: "1px",
                                            fontColor: "black",
                                            fontWeight: "bold",
                                            fontSize: "12px",
                                            fontFamily: "Courier New, monospace"
                                        },OpenLayers.Feature.Vector.style["default"]),{
                                            context:{
                                                getName: function(f) {
                                                    if (f.attributes['typeName']=='wpt') {
                                                        return f.attributes['name'];
                                                    }
                                                    return '';
                                                }
                                            }
                                        }),
									
                                    "select": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FF9900",
                                            fillOpacity: 0.75,
                                            strokeColor: "#FFFF00",
                                            strokeWidth: 4,
                                            pointRadius: 12
                                        },OpenLayers.Feature.Vector.style["select"]))

Est-ce que tout cela est nécessaire, les paramètres des autres couches gpx étant plus légers ?
Voilà où j'en suis :
http://p.salquebre.free.fr/ign/pusieux3.htm
http://p.salquebre.free.fr/ign/js/pusieux3.js

**cmail** · 18/12/2014, 11h40

Non, tout cela n'est pas nécessaire, mais j'ai laissé cela pour te donner un exemple d'autres possibilités d'afficher par exemple les points remarquables en triangles, de déplacer en x et y les intitulés, de les écrire en courrier bold 12x....

Là, il faut faire des essais et voir ce qui t'intéresse.... Et regarder les exemples d'ign....

**Pedro88** · 18/12/2014, 16h36

Ok, je mets ça de côté.
Il est vrai qu'on devient gourmand tellement il y a de possibilités intéressantes (j'ouvrirai problement quelques fils pour des points particuliers).
Une petite demande : j'aimerais avoir à l'arrivée sur la carte de ces 3 traces de cette page :
http://p.salquebre.free.fr/ign/pusieux3.htm
la même échelle (donc la même carte exactement) que sur cette page :
http://p.salquebre.free.fr/ign/pusieux.htm
Je sais maintenant régler le niveau de zoom pour lequel on voit la trace, mais n'ai pas trouvé pour celui de la carte au départ.
Je remets les js correspondants :
http://p.salquebre.free.fr/ign/js/pusieux3.js
http://p.salquebre.free.fr/ign/js/pusieux.js

**cmail** · 18/12/2014, 17h40

1/ si tu nous donnes les fichiers htm, pas la peine de rajouter l'url des js. Avec les htm on se débrouille très bien pour les retrouver soit directement dans ton htm soit via firebug...
2/ Dans puiseux.js tu as

Code :

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

1
2
3
4
5
6
7
 eventListeners:{                                    "loadend"              : function() {
                                        if (this.maxExtent) {
                                            //Zoom and refocusing on the max extent
                                            //Zoom et recentrage sur l'emprise maxi
                                            this.setVisibility(true);
                                            this.map.zoomToExtent(this.maxExtent);
                                        }                                     },

ce qui veut dire : "Ecoutons les évenements qui arrivent (eventListeners) : 1/ quand la couche gpx chareire est fini de charger ("loadend"), j'exécute la fonction zoomer sur l'étendu maximum de la trace.( this.map.zoomToExtent(this.maxExtent)) " Soit tu supprimes ces lignes, soit tu les commentes (c'est-à-dire en mettant devant /* et en fin */; ou en mettant // devant chaque ligne.>> si problème avec ça voir les premiers cours de js) , tu devrais retrouver ton zoom 13 initial.

**Pedro88** · 18/12/2014, 18h37

Ok pour le js.
Excuse-moi, Christian, mais je ne vois pas le code que tu cites.
Je ne vois dans mon js que : // map's center : see eventListeners.loadend !

**Pedro88** · 22/12/2014, 09h18

Précision : je vois le code que tu cites dans pusieux.js (qui affiche bien la bonne carte avec le bon zoom 13), mais pas dans pusieux3.js (que je voudrais afficher au même zoom 13 que l'autre).
Donc c'est apparemment l'inverse.
J'y perds mes 2g de js...

**cmail** · 22/12/2014, 09h55

Excuse, je me suis trompé dans ma dernière réponse. J'ai inversé ta demande.

Pour avoir la même échelle que dans puiseux (on va faire simple en arrondissant...) tu dois fixer l'échelle de iv à 15.
Mais tu dois aussi élevé maxZoomLevel de tes couches .gpx à une valeur supérieure à 15..
voir http://essai.obs43.fr/pedro.htm

**Pedro88** · 22/12/2014, 11h05

Merci Christian, ça fonctionne.
Je te dois une éternelle reconnaissance, mes ami(e)s initiateurs Marche Nordique aussi...

Plusieurs traces gpx sur une seule carte.

IGN API Géoportail

Discussions similaires

Partager

Partager