Couleur et épaisseur d'une trace GPX

**Randobos** · 17/08/2019, 16h24

Bonjour,
Voilà pas mal de temps que j'essaie de passer de la V2 à la V3 en m'aidant de ce forum et des tutoriels de migration fournis par l'IGN.
Je suis donc arrivé à obtenir un fond de carte avec une trace GPX. Cependant cette trace est tellement fine qu'elle est à peine visible.
Serait-il possible de pouvoir me fournir le code html afin que je puisse régler à la fois la couleur (si possible bleue) et l'épaisseur du trait de ma trace ?
Vous pouvez visionner la carte et le code source avec utilisation du SDK de Géoportail, à l'adresse : http://capfrandos.free.fr/carte_ign(modele_v3).htm

Merci par avance.

**arverne63** · 19/08/2019, 18h27

Bonjour,
Tu peux régler ton problème en rajoutant un styleOptions dans ton code avec les propriétés strokeColor et strokeWidth.

Exemple ci dessous.
Jean Marc.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
     "GPX1" :                          
     {
        format : "gpx", // format, obligatoire
        title : "GPX", // nom de votre gpx à afficher dans le gestionnaire de couches
        url : "corboeuf.gpx", // Url vers votre fichier GPX
        minZoom : 8,
        maxZoom : 17,
        styleOptions : {
               strokeColor : "#0000ff",
               strokeWidth : 8
        }
     },

**Randobos** · 20/08/2019, 09h56

Bonjour,
Merci Jean-Marc de t'intéresser à mon problème.
J'ai ajouté le styleOptions et ça ne semble pas s'appliquer. Peut-être parce que je suis en SDK. Voir le résultat : http://capfrandos.free.fr/carte_ign(modele_v3).htm

**arverne63** · 20/08/2019, 16h49

Bonjour,
Il faut que le code que tu rajoutes (en bleu) soit entre les accolades. (en rouge)

Bonne fin de journée.
Jean Marc.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
"GPX1" :
         {
             format : "gpx", // format, obligatoire
             title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
             url : "http://capfrandos.free.fr/senanquedefinitif.gpx", // Url vers votre fichier GPX
            minZoom : 8,
            maxZoom : 17,
            styleOptions : {
                strokeColor : "#0000ff",
                strokeWidth : 8
                            }
        },

**Randobos** · 20/08/2019, 19h00

Bonsoir Jean-Marc,
Je pense avoir suivi tes instructions, mais la carte ne s'ouvre pas. Ci_après, ma copie ainsi que le lien vers la carte : http://capfrandos.free.fr/carte_ign(modele_v3).htm

Code JavaScript :

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
// Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 1
					},
 					"GPX1" :					              
 					    {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
                                               url : "http://capfrandos.free.fr/senanquedefinitif.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,
                                               styleOptions : {
                                                            strokeColor : "#0000ff",
                                                            strokeWidth : 8
                                                                   }
                                            },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
</body>
 
</html>

**arverne63** · 21/08/2019, 08h57

Bonjour,
La console indique l'erreur "Uncaught SyntaxError: Unexpected token )". Il manque l'accolade fermante + la virgule du layersOptions (ligne 22 code ci dessous).

Bonne journée.
Jean Marc.

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
 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 1
					},
 					"GPX1" :					              
 					    {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
                                               url : "http://capfrandos.free.fr/senanquedefinitif.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,
                                               styleOptions : {
                                                            strokeColor : "#0000ff",
                                                            strokeWidth : 8
                                                             }
                                            },
				 },

**Randobos** · 21/08/2019, 11h09

Bonjour Jean-Marc,
Je te fais à nouveau appel car en suivant tes instructions la carte s'ouvre bien mais le "styleOptions" ne semble pas être pris en compte. Personnellement je n'ai pas assez de connaissances pour résoudre ce problème.
Ci- joint ma page :

Code HTML :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
<head>
 <title>Carte IGN avec ajout couche GPX</title>
        <!-- Extension Géoportail pour OpenLayers 3 -->
        <link rel="stylesheet" href="sdk-ol3/GpOl3.css" />
        <script src="sdk-ol3/GpOl3.js"></script>  
<!-- Surcharge de styles : -->
<style type="text/css">
<!--
/* Affichage de l'API Géoportail + image "loading" pendant le téléchargement */
div#map {
        float:left;
        background-image:url(http://capfrandos.free.fr/marcheura1.gif);
        background-position:center 200px;
        background-color:#ECFF9F;
        background-repeat: no-repeat;
}
-->
</style>	
 
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<div align="center">
         <table  cellpadding="0" cellspacing="0" width="795"> 
 
              <tr>        
                 <td width="795">
<div id="map" style="width:800px;height:700px;"></div>
              </td>  
              </tr>
 
              <tr>
                 <td width="795">
 
                <p align="center"><b><font face="Arial" color="blue" size="4">Trac&eacute; en bleu de notre randonn&eacute;e &quot; Du 
                village des Bories &agrave; S&eacute;nanque (84)&quot;</font></b>                <p align="center"><font face="Arial" color="blue" size="3">En 
                modifiant l' &eacute;chelle, obtenez la carte IGN au 1/25000&egrave;me</font></p>
</b>                    
 
		 </td>
              </tr>
         </table>
         </div>
 
        <script>
                var map = Gp.Map.load(
                        "map", // div html <div id="map">
                        {
                                 // Votre clé de contrat
                                 apiKey: "3folo8cdddf14usbl2th51ul",
                                 // centre (ici en longitude / latitude, en EPSG:4326. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)
                                 center : {
                                         x : 5.1735,
                                         y : 43.92648,
                                         projection : "EPSG:4326"
                                 },
                                 // map zoom level
                                 zoom : 14,
                                 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
                                 layersOptions : {
                                         // Photographies aériennes
                                        "ORTHOIMAGERY.ORTHOPHOTOS" : {
                                                opacity : 0.5
                                        },
                                         // Cartes IGN
                                        "GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
                                                opacity : 1
                                        },
                                        "GPX1" :                                                      
                                            {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
                                               url : "http://capfrandos.free.fr/senanquedefinitif.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,                                          
                                 styleOptions : {
                                                strokeColor : "#0000ff",
                                                strokeWidth : 8
                                                }            
                                         },
                                },
                                 // Contrôles additionnels (ici le gestionnaire de couches)
                                 controlsOptions : {
                                         "layerswitcher" : {
                                                 maximised : true
                                         }
                                 }
                        }
                ) ;
        </script>
</body>
 
</html>

**arverne63** · 21/08/2019, 12h35

Bonjour,

Cela semble provenir de l'url du fichier gpx (http://capfrandos.free.fr/senanquedefinitif.gpx), en téléchargent le fichier sur mon PC ça marche.
En espérant que cela fonctionne chez toi.

Jean Marc.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
"GPX1" :					              
 					    {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
                                               url : "senanquedefinitif.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,					      
                                 styleOptions : {
                                                strokeColor : "#0000ff",
                                                strokeWidth : 8
                                                }            
                                         },
				},

**Randobos** · 21/08/2019, 15h02

Bonjour,
L'url ne me semblait pas faux, cependant j'ai utilisé un autre fichier gpx nommé "senanquedefinitif2.gpx" que j'ai publié dans le serveur de Free et j'obtiens toujours une ouverture de carte avec une trace bleue à peine visible, mais qui existe. Cela prouve bien que mon url fonctionne, mais sans qu'il y ait modification de la couleur et de l'épaisseur de la trace.
Voir :

Code JavaScript :

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
	"GPX1" :					              
 					    {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx à afficher dans le gestionnaire de couches
                                               url : "http://capfrandos.free.fr/senanquedefinitif2.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,					      
                                 styleOptions : {
                                                strokeColor : "#0000ff",
                                                strokeWidth : 8
                                                }            
                                         },
				},
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
</body>
 
</html>

**arverne63** · 21/08/2019, 18h57

Bonsoir,
Je ne sais plus quoi te dire si ce n'est que j'ai testé ton code sur mon site de tests et ça marche en modifiant l'url du gpx. je te joint le lien.
Jean Marc.

http://testrandos.free.fr/ExtensionG...capfrandos.php

Je vois que tu n'utilises pas la dernière version du kit de développement SDK Geoportail, tu peux la télécharger ici Cela réglera peut etre ton problème.

**Randobos** · 21/08/2019, 21h55

Bonsoir Jean-Marc,
Je trouve que tu as beaucoup de patience et regrette de devoir te faire perdre ton temps.
Moi également je ne sais plus quoi te dire car je vois bien que sur ton site de tests ça marche, mais si je copie l’intégrité du code source obtenu dans ton exemple et si je le colle sur une page nommée "carte_ign(modele_v3gpx)", le résultat en cliquant sur http://capfrandos.free.fr/carte_ign(modele_v3gpx).htm, est négatif.
Je ne comprend pas pourquoi sur la ligne qui doit indiquer l'url du fichier gpx, tu aies supprimé le http://......mais comme tu dois t'en apercevoir, j'ai d'énormes lacunes en informatique.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	"GPX1" :					              
 					    {
                                               format : "gpx", // format, obligatoire
                                               title : "SENANQUE", // nom de votre gpx Ã  afficher dans le gestionnaire de couches
                                               url : "senanquedefinitif.gpx", // Url vers votre fichier GPX
                                               minZoom : 8,
                                               maxZoom : 17,					      
                                 styleOptions : {
                                                strokeColor : "#0000ff",
                                                strokeWidth : 8
                                                }            
                                         },
				},

**arverne63** · 21/08/2019, 22h09

Bonsoir,
Les chemins de tes fichiers css et js lignes 6 et 7 sont ils corrects ?
De plus essaye de télécharger et d'installer la dernière version du kit SDK.

http://ignf.github.io/geoportal-sdk/.../2d/GpSDK2D.js

http://ignf.github.io/geoportal-sdk/...2d/GpSDK2D.css

Bon courage.

Jean Marc.

**Randobos** · 21/08/2019, 22h40

Re-bonsoir,
Je pense que les lignes 6 et 7 sont correctes car si je travaille avec des fichiers kml, ça marche sans problèmes. Voir http://capfrandos.free.fr/carte_ign(saignon).htm
Si je n'utilise pas du gpx, ce ne sera pas catastrophique mais en principe, je n'aime pas laisser tomber lorsque je n'y arrive pas. Heureusement, j'ai une solution de rechange.
Merci beaucoup d'avoir eu la gentillesse de me supporter.
Malheureusement le problème n'est pas résolu, en ce qui me concerne.

**Randobos** · 22/08/2019, 21h42

Bonsoir,
Je ne pensais pas devoir revenir sur cette discussion, mais après avoir suivi les conseils de Jean_Marc, j'ai fait une mise à jour du kit SDK en utilisant les deux fichiers GpSDK2D.js et GpSDK2D.css qu'il m'a fournis. et j'ai eu une belle surprise en constatant que la couleur de la trace ainsi que l'épaisseur étaient bien celles qui avaient été demandées dans le "styleOptions".
Donc encore merci à Jean-Marc car je peux considérer que le problème est résolu.

**arverne63** · 22/08/2019, 21h48

Bonsoir,

Envoyé par Randobos

Je pense que les lignes 6 et 7 sont correctes

Excuse moi d'insister mais les chemins des fichiers js et css sont différents pour les exemples gpx et kml.
Pour ton exemple kml qui fonctionne "capfrandos.free.fr/carte_ign(saignon).htm", le chemin du fichier js est : <script src="sdk-ol3/GpOl3.js"></script>
Pour ton exemple gpx qui ne fonctionne pas capfrandos.free.fr/carte_ign(modele_v3gpx).htm", le chemin du fichier js est différent : <script src="GpOl3.js"></script>

Je ne comprend pas pourquoi sur la ligne qui doit indiquer l'url du fichier gpx, tu aies supprimé le http://......mais comme tu dois t'en apercevoir, j'ai d'énormes lacunes en informatique

J'ai ce message d'erreur dans la console : "Access to XMLHttpRequest at 'http://capfrandos.free.fr/senanquedefinitif2.gpx' from origin 'http://testrandos' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.". C'est pourquoi j'ai téléchargé ton fichier gpx sur mon PC et l'ai renommé "senanquedefinitif.gpx", mais evidement pour toi il faut que tu garde l'url http://capfrandos.free.fr/senanquedefinitif2.gpx

Je constate que tu utilise le Kit de Développement (SDK) Géoportail version 1.0.0.beta1, j'ai testé cette version et chez moi aussi le styleOptions n'est pas pris en compte. Comme je te l'avais conseillé dans un précédent poste il faudrait que face la mise à jour avec la dernière version GpSDK2D (voir liens ci dessous).

http://ignf.github.io/geoportal-sdk/.../2d/GpSDK2D.js
http://ignf.github.io/geoportal-sdk/...2d/GpSDK2D.css

Bonne soirée.

Jean Marc.

**Randobos** · 23/08/2019, 08h50

Bonjour Jean-Marc,
Hier soir nos courriers se sont peut-être croisés. Effectivement au début de mes investigations j'ai bien utilisé une version du SDK datant de 2017. Dorénavant j'essaierai de suivre un peu mieux les mises à jour.
Cependant, il y a un point qui m'intrigue : Lorsque je vais sur la dernière version du kit de développement SDK Geoportail ICI et si je télécharge l'archive (GpSDK.zip), j'obtiens un dossier (geoportal-sdk.2.0.2) dans lequel je n'ai pas trouvé les deux fichiers (GpSDK2D.js et GpSDK2D) comme il est indiqué dans les explications que je n'ai certainement pas comprises.
J'ai donc récupéré ces deux fichiers que tu m'avais envoyés dans un précédent message et je les ai glissés dans le dossier (geoportal-sdk.2.0.2) que j'avais incorporé dans l'arborescence où je déploie tous mes fichiers et dossiers de mon site.
Le fait d'ajouter ces deux dossiers a résolu mon problème même si ce n'est peut-être pas la procédure exacte.
Voila tout de même le résultat ICI.

**mga_geo** · 24/08/2019, 18h15

Bonsoir à tous,
Je vois en utilisant la console de Firefox ( https://developer.mozilla.org/fr/doc...he_Web_Console ) des messages.
L'un concerne la page utilisatrice carte_ign(modele_v3_gpx2).htm ( L’encodage de caractères du document HTML n’a pas été déclaré. Le document sera affiché avec des caractères incorrects pour certaines configurations de navigateur si le document contient des caractères en dehors de la plage US-ASCII. L’encodage de caractères de la page doit être déclaré dans le document ou dans le protocole de transfert.) et un qui est de responsabilité sdk ( [AutoConfResponseReader] autoconf response xmlns:gpp namespace is not the expected one GpSDK2D.js:99:75285 ).
Est-il prévu de corriger cette erreur ? ainsi que le fichier absent https://wxs.ign.fr/static/logos/OCCITANIE/OCCITANIE.gif ?
Marc

Couleur et épaisseur d'une trace GPX

IGN API Géoportail

Discussions similaires

Partager

Partager