Discussion :

[Pedro88]

Bonjour,
Je ne suis pas programmeur et ne comprends pas grand chose à vos échanges très techniques.
Je veux afficher sur mon site free sur fond de carte IGN les traces des randos pédestres que je fais.
J'ai utilisé le générateur IGN pour ma première page, ça donne ceci :
http://p.salquebre.free.fr/ign/ign-mortevieille.html
Je n'arrive pas à faire apparaître une trace mortevieille.gpx
Je suis noyé dans les tutoriels que j'ai consultés et mélange tout.
Est-ce que quelqu'un peut m'expliquer simplement comment faire s'il vous plaît ?
Merci beaucoup.
(j'ai passé des heures à essayer, je trouve que cette possibilité d'afficher ses traces sur fond IGN est tellement intéressante que j'ai bien envie d'y arriver...)
Cordialement.

[mga_geo]

Bonsoir,

Dans les exemples de l'api, il y en a qui répond à ta demande : http://depot.ign.fr/geoportail/api/r...alMap_gpx.html

Bon courage pour la suite !

[cmail]

Bonjour Pierre,
Une bonne chose que tu déposes tes questions sur le forum. Cela va aider beaucoup de néophytes!
Outre l'exemple donné par Marc, je te renvoie plutot vers http://api.ign.fr/tech-docs-js/examp...simple6.1.html qui me parait plus récent (et plus dépouillé pour un débutant).

J'espère que tu arrives à lire le code source?

Sinon, sur ta page html principale tu ajoutes en fin de fichier

Code :

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

1
2
3
4
5
6
7
8
9

  <script type="text/javascript" src="js/geoportalMap_simple6-1.js"></script>

 <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.1.1/Geoportal.js"><!-- --></script>

Suite à cela dans un sous dossier /js tu créées un fichier geoportalMap_simple6-1.js qui est le copier coller de celui de l'exemple.
Tout en supprimant le javascript de ton fichier html (Il est fortement conseillé de séparer les différents codages en différents fichiers spécialisés pour au moins s'y repérer!)

A la séquence:

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
  window.onload= function() {        iv= Geoportal.load(
            // div's ID:
            'viewerDiv',
            // API's keys:
            [config.keyJs],
            // map's center : see eventListeners.loadend !
            null,
            //map's zoom : see eventListeners.loadend !
            undefined,
            {
                // only use ortho-imagery :
                layers:['ORTHOIMAGERY.ORTHOPHOTOS'],
                // add a gpx (url relative to this page) :
                overlays:{
                    'gpx':[{
                        name:'Campomoro Tizzano Sartene',
                        url:'../data/Campomoro-Tizzano-Sartene_3029.gpx', .....

Tu y ajoutes ta clé, tes coordonnées de centrage, et surtout l'url de ton fichier .gpx

Et cela devra fonctionner sauf oubli de ma part.... Après tu reviendras sur ce fichier .js pour y ajouter différentes couches, les boites d'outils, changer les couleurs... en te référant au code js de ton premier fichier

Ce qui me parait etrange c'est qu'avec le générateur à l'étape 4, tu aurais du introduire ton fichier .gpx.... Pourquoi ne l'as-tu pas fait?

[cmail]

A la dernière ligne du fichier .js ainsi créé:

Code :

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

1
2
 language:'fr',
                geormUrl:config.serverUrl

Il faudra, je crois, supprimer :

Code :

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

1
2
,
                geormUrl:config.serverUrl

pour aller chercher le fichier autoconf.json généré automatiquement sur le site de l'IGN

[gcebelieu]

Bonjour,

normalement le générateur permet d'ajouter une couche GPX (via une URL où le fichier est accessible) lorsqu'on est à l'étape 4 ("Vos données" => "Ajout d'une couche vecteur").

Or, je ne vois pas sur la page citée : http://p.salquebre.free.fr/ign/ign-mortevieille.html de couche GPX dans le code. Est-ce que tu es bien passé par cette étape ?

[Pedro88]

Bonjour,
Merci à tous pour votre aide, notamment à toi, Christian, que j'ai déjà bien embêté.
C'est bien agréable de trouver des personnes comme vous.
Il est vrai que ce n'est pas facile de débuter, mais votre attitude me motive.
J'ai donc réussi, grâce à vous, à afficher une trace sur une carte qui n'est pas limitée à 800 pixels de largeur.
Dans le générateur IGN, je n'avais pas compris que mon fichier gpx était désigné par ce terme "une couche vectorielle", donc je n'avais pas déroulé ce menu.
Pour copier le code créé, je n'avais pas compris tout de suite qu'il fallait double-cliquer dans la page pour pouvoir copier le code propre.
Dans une vieille version de Dreamweaver, ça n'allait pas, le même code avec Notepad++ a fait l'affaire.
Voyez, ce sont des petits obstacles comme ça qui peuvent décourager les débutants.
Maintenant, je vais affiner.
Il me semble avoir mis les coordonnées pour le centrage, mais je n'en vois pas les effets, je vais chercher.
J'ai déjà réussi à mettre l'opacité de la carte à 100 %
Je voudrais par exemple afficher ma trace en rouge et en plus gros pour qu'elle soit lisible.
Est-ce que je devrai faire une copie de ce fichier et changer seulement le fichier gpx pour chacune de mes autres traces ?
Merci encore, vous êtes sympas !

[cmail]

Je voudrais par exemple afficher ma trace en rouge et en plus gros pour qu'elle soit lisible.

Dans le fichier http://api.ign.fr/tech-docs-js/examp...p_simple6-1.js
il faut changer

Code :

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

1
2
3
4
5
styleMap:new OpenLayers.StyleMap({                                    "default": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FFFF00",
                                            fillOpacity: 0.75,
                                            strokeColor: "#FF9900",                                             strokeWidth: 2,

en

Code :

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

1
2
3
4
5
6
styleMap:new OpenLayers.StyleMap({                                    "default": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FFFF00",
                                            fillOpacity: 0.75,
                                            strokeColor: "#FF0000", //pour avoir la trace en rouge                                            strokeWidth: 5,//pour avoir une épaisseur de 5 px

et tu ne changes rien dans tes fichiers .gpx qui ne doivent s'occuper que de relever les coordonnées de tes différents points

[Pedro88]

Voilà, j'ai fait ce que tu m'as proposé, Christian, mais je ne vois pas de différence.
En fait, je ne comprends pas quels fichiers (html et js) je dois avoir sur mon site pour que ça fonctionne.
J'ai créé un dossier /ign à la racine, qui contient ma page de départ ign-mortevieille.html
Dans ce dossier /ign, j'ai créé deux sous-dossiers : /gpx et /js
Dans le dossier /gpx, j'ai mis mon fichier mortevieille.gpx
Dans le dossier /js, j'ai mis geoportalMap_simple6-1.js
Par ailleurs, je vois que j'ai sur mon site un dossier /geoportail_api_quickstart avec notamment un sous-dossier /js et un autre /assets
Je suppose que c'est l'API IGN qui a créé ça tout seul pour fonctionner.
Donc je suis un peu perdu.

[cmail]

Si tu reprends mon premier message, j'écrivais:

Sinon, sur ta page html principale tu ajoutes en fin de fichierCode :

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="js/geoportalMap_simple6-1.js"></script> <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.1.1/Geoportal.js"></script>

Or dans ton fichier ign-mortevieille.html, je vois simplement (sans aucune mention de http://p.salquebre.free.fr/ign/js/geoportalMap_simple6-1.js ) :

<script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/...talExtended.js">
	</script>
	</body>
	</html>

Donc ton fichier ign-mortevieille.html va exécuter le code js qui est au début de ce fichier, sans connaitre l'existence de http://p.salquebre.free.fr/ign/js/geoportalMap_simple6-1.js et ne pourra donc pas l'executer

Donc rajouter la ligne rouge ci-dessus devant <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/...talExtended.js"> est impératif pour aller chercher ton fichier js et l'éxécuter.
Mais si tu gardes ton codage js de début de page ign-mortevieille.html, et que tu rajoutes une exécution de ton code js qui se situe dans http://p.salquebre.free.fr/ign/js/geoportalMap_simple6-1.js, cela n'est pas très bon car cela doublonne. Il faut donc choisir:
1/ Soit TOUTES tes instructions JS sont dans un fichier associé (par exemple http://p.salquebre.free.fr/ign/js/ge...p_simple6-1.js). Ce qui est fortement conseillé.
2/ Soit TOUTES tes instructions JS sont dans ign-mortevieille.html, ce qui est possible, mais à terme ce mélange des genres sera préjudiciable.
3/ Il faut donc [COLOR=#3e3e3e]éviter d'avoir du codage js disséminé dans tes fichiers .htm et dans des fichiers .js ou autre...

Mais plus largement lire l'ensemble de ce cours sur js....

[Pedro88]

J'ai repris tes conseils, Christian, mais je mélange un peu les fichiers et les dossiers.
Voilà ci-dessous mon arborescence.
Je joins aussi des liens vers les deux fichiers en question (js et html) :
http://p.salquebre.free.fr/ign/ign-mortevieille.html
http://p.salquebre.free.fr/ign/js/ge...p_simple6-1.js
Je ne sais pas de quoi d'autres j'ai besoin ou quoi faire pour mieux voir ma grosse trace rouge.
Si quelqu'un pouvait me corriger ces fichiers pour que ça fonctionne et que j'essaie de comprendre mes erreurs, ce serait bien gentil...
Merci encore et pardon d'embêter le monde avec mon problème.
J'ai commencé à regarder les cours javascript et vais essayer d'avancer un peu.

[cmail]

Un peu d'attention

Sur ton fichier html, je lis :

Code :

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

1
2
3
4
5
6
<script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.1.0/GeoportalExtended.js">
 <script type="text/javascript" src="http://p.salquebre.free.fr/ign/js/ge...p_simple6-1.js"></script>
<script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.1.1/Geoportal.js"><!-- --></script>     

0/ Il n'y a pas de balise fermante </script> après "......GeoportalExtended.js">" Ce qui est complètement incorrect!
1/ Est-ce que ton fichier .js s'appelle : "http://p.salquebre.free.fr/ign/js/ge...p_simple6-1.js" ou plutot "http://p.salquebre.free.fr/ign/js/geoportalMap_simple6-1.js" Ce qui n'est pas tout à fait la même chose!
2/ Dans ces trois lignes tu charges d'abord GeoportalExtended.js puis Geoportal.js. Une des lignes est superflue. voir http://api.ign.fr/tech-docs-js/fr/we...ration_js.html Pour cette première carte, on va plutot télécharger l'API standard : Geoportal.js. Tu supprimes donc la première ligne.

Dans ton fichier .js je lis :

Code :

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

1
2
3
4
5
6
 // API's keys:            [fmbaq2maaepd5a36c46olrtc],
            // map's center : see eventListeners.loadend !
            lon:6.694592,
        lat:47.974381,
            //map's zoom : see eventListeners.loadend !
            undefined,             {.....

que tu modifies par :

Code :

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

1
2
3
4
5
 // API's keys:
            ["fmbaq2maaepd5a36c46olrtc"],            // map's center : see eventListeners.loadend !
            lon:6.694592,
        lat:47.974381,
            13, // pour avoir un zoom correct sur ta trace            {

Et tu supprimes tout codage js de ton fichier .htm depuis " iViewer= null;" jusqu'à " window.onload= init;" qui est en fait contenu dans une forme similaire dans ton fichier .js

[Pedro88]

Mon cher Christian (on devient familier à force...), tu es un frère pour moi...
Bon, j'ai fait attention, mais j'ai dû me planter en suivant tes consignes qui étaient pourtant claires !
Du coup, je ne vois plus la carte s'afficher.
Peux-tu re-télécharger les deux fichiers mal corrigés par mes doigts et voir où ça pose problème ?
1000 mercis.
Comment je peux faire pour augmenter ton nombre de points (tu en mérites beaucoup plus...) ?

[cmail]

Dans ton cas, maintenant tu utilises un "loader" .
Alors si je lis bien le chapitre "méthode 1" dans http://api.ign.fr/tech-docs-js/fr/we...ration_js.html, je lis:

Code :

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

1
2
3
4
5
6
7
....
['APIKEY'], //d'ou l'obligation de mettre la clé entre guillemet déjà évoqué ci-dessus
{// Centre de la carte:
lon:2.0731525,
lat:45.833333
},
.....

or dans ton code je lis:

Code :

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

1
2
3
4
, // map's center : see eventListeners.loadend !  
          lon:6.694592,
        lat:47.974381,     
        13,

Il manque donc les accolades encadrant tes coordonnées
Il faut donc écrire

Code :

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

1
2
3
......... ["fmbaq2maaepd5a36c46olrtc"], {lon:6.694592,
        lat:47.974381}, 
            13, .......

Comment je peux faire pour augmenter ton nombre de points (tu en mérites beaucoup plus...) ?

Je ne sais pas à quoi rime ces points. Je m'en fous complètement.

[Pedro88]

Il me semble avoir fait ce que tu me signales et je ne vois toujours pas la carte...

Par ailleurs, quand ça fonctionnera (j'espère bien qu'on finira par y parvenir), pour chaque autre trace, il faudra créer deux fichiers similaires, en modifiant seulement les lieux et le fichier gpx ?

[cmail]

Analyse http://essai.obs43.fr/ign-mortevieille.html et compare ligne à ligne avec ton code.

En sachant que tu dois transposer les url de mon .htm et de mon .js (et la clé de l'API) à ta réalité.

[Pedro88]

Super, Christian, ça a fonctionné du premier coup !
C'est déjà très bien, mais :
1 - Si je dézoome, je garde la trace rouge, si je zoome, je perds la trace (je pense que c'est dû au changement de type de fond de carte).
Comment faire pour avoir la trace rouge si on zoome ?
2 - Comment avoir l'opacité 100% sur le fond de carte ?
3 - Comment faire pour avoir l'une en dessous de l'autre la carte IGN (comme sur mon site) et la photo aérienne (comme sur ton site), les deux avec la trace rouge ?
4 - Comment faire pour afficher les traces gpx d'autres randos ?

Tu vas peut-être penser que je suis exigeant, mais le résultat devient tellement intéressant pour moi.
Grand merci pour le temps que tu passes pour moi (et mes collègues organisateurs de randos et de marche nordique).

[cmail]

J'ai fait quelques changements sur http://essai.obs43.fr/ign-mortevieille.html pour répondre à tes questions.
Mais une chose m'échappe, c'est que les boites layers et toolspanels ne s'affichent pas.... A première vue, je ne vois pas pourquoi????? Les amis de l'IGN sauront nous expliquer pourquoi.

Comment faire pour afficher les traces gpx d'autres randos ?

Il faut être précis. Toutes les traces sur la même carte, ou chacune s'affichant au gré d'un choix (par exemple dans une liste déroulante)?

[gcebelieu]

Bonjour,

merci Christian pour le support du WE

J'ai fait quelques changements sur http://essai.obs43.fr/ign-mortevieille.html pour répondre à tes questions.
Mais une chose m'échappe, c'est que les boites layers et toolspanels ne s'affichent pas.... A première vue, je ne vois pas pourquoi????? Les amis de l'IGN sauront nous expliquer pourquoi.

Les éléments dont tu parles ne s'affichent pas car, par défaut, le viewer créé est de type "Geoportal.Viewer.Simple", à savoir qu'il correspond à un viewer sans outils. Pour activer ces outils, il faut utiliser un autre type de Viewer, par exemple : "Geoportal.Viewer.Default". Pour cela, il faut simplement rajouter l'option suivante dans le 5ième paramètre de l'appel à Geoportal.load (par exemple juste avant le paramètre "layers") :

Code :

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

1
2
3
4
5
6
7
8
  ...
  {
      viewerClass:'Geoportal.Viewer.Default',
      layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS','ORTHOIMAGERY.ORTHOPHOTOS'],
      ...
  }
  ...

[cmail]

Oups, j'avais encore oublié!

Mais est-ce mentionné dans la doc?
Sur ce forum : oui...
A vous de voir.


Mais à Pedro88 de travailler!

[gcebelieu]

C'est dans cette page :

http://api.ign.fr/tech-docs-js/fr/webmaster/loader.html

(paragraphe : "Modification du type de viewer par défaut de l'API 2D Javascript")