Discussion :

[cmail]

Très juste.
Bon, maintenant que la doc devient abondante, ne serait-il pas possible d'y ajouter un moteur de recherche ?
Cela pourrait nous faciliter la tache?

[gcebelieu]

Une refonte de la doc API est en cours de réflexion. Le moteur de recherche est bien sur un élément fondamental.

[Pedro88]

Merci gcebelieu pour ta contribution.
J'ai essayé de rajouter le code que tu proposes, mais je ne voyais plus de carte : je n'ai pas dû le mettre au bon endroit.
Où exactement dois-je le mettre dans cet extrait ?
__________________________________________________________________________________
iv= Geoportal.load(
// div's ID:
'viewerDiv',
// 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 {
{
// only use ortho-imagery :
layers:['ORTHOIMAGERY.ORTHOPHOTOS'],
// add a gpx (url relative to this page) :
overlays:{
'gpx':[{
name:'Meules',
url:'http://p.salquebre.free.fr/ign/gpx/mortevieille.gpx',
____________________________________________________________________________________

Christian,
J'ai modifié mon code en ajoutant comme toi ceci :
<!--<link rel="stylesheet" type="text/css"
href="http://api.ign.fr/geoportail/api/js/2.0.0/theme/default/style.css"/>
<link rel="stylesheet" type="text/css"
href="http://api.ign.fr/geoportail/api/js/2.0.0/theme/geoportal/style.css"/>
-->
et ça ne change rien.
Ai-je oublié quelque chose ?

Par ailleurs, j'ai vu sur ton site que tu a fais une présentation de la carte, à 97 % de largeur, centrée et entourée d'un liseré noir.
J'aimerais bien faire tout ça.
J'arrive à mettre la largeur à 97 %, mais pas à centrer la carte.
Pour répondre à la question de vouloir mettre sur mon site plusieurs traces :
A partir d'une page web, les gens ont un menu proposant plusieurs itinéraires, dans des secteurs différents, par exemple :
- Mortevieille
- Pusieux
- Fossard
En cliquant sur Pusieux, ils arrivent sur une page qui concerne uniquement la randonnée de Pusieux, contenant essentiellement le titre, la trace gpx en téléchargement, les infos sur cette rando et deux cartes affichant la trace de la rando en rouge (carte IGN et photo aérienne).
Je continue à rêver que c'est possible...

[jrenard]

Par ailleurs, j'ai vu sur ton site que tu a fais une présentation de la carte, à 97 % de largeur, centrée et entourée d'un liseré noir.
J'aimerais bien faire tout ça.
J'arrive à mettre la largeur à 97 %, mais pas à centrer la carte.

Bonjour,

Petit point de CSS sur ce sujet précis : pour centrer un bloc dont on a préalablement défini la largeur (soit en pixels soit comme ici en pourcentage), il faut ensuite lui attribuer la propriété CSS margin: auto. Cela signifie que les marges à gauche et à droite se calculent de façon automatique pour être égales l'une à l'autre, avec pour conséquence immédiate de centrer le bloc en question.

Code :

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

1
2
3
4
div#viewerContainer {
    width: 97%;
    margin: auto;
}

[Pedro88]

Merci jrenard pour ce tuyau, que j'ai essayé en vain d'appliquer.
J'ai essayé de mettre le margin en auto, à divers endroits, et pour l'instant je n'y arrive pas.
J'ai du div#viewerDiv, mais pas du iv#viewerContainer , qu'est_ce que ça change ?

Merci gcebelieu, j'ai inséré 'GEOGRAPHICALGRIDSYSTEMS.MAPS', dans la ligne layers:['GEOGRAPHICALGRIDSYSTEMS.MAPS','ORTHOIMAGERY.ORTHOPHOTOS'] et du coup, j'ai vu la carte en opacité 100 %, ce que je voulais aussi.
De même, la bordure noire y est (ça ferme mieux l'image, je préfère).

Je regarde aussi les cours javascript : c'est intéressant, mais je pars de loin pour être efficace tout de suite.
J'essaie aussi de lire et comprendre un peu les codes sources des pages que vous me signalez.
Donc, tu vois, Christian, je bosse...
Reste encore à voir la trace rouge en zoomant et faire apparaître aussi la couche "Photos aériennes".
Je remets les liens vers mes deux fichiers :
http://p.salquebre.free.fr/ign/ign-mortevieille.html
http://p.salquebre.free.fr/ign/js/ge...p_simple6-1.js
J'ai recopié le code de ta page html, peut-être faut-il changer quelquechose dans la page js ?
Je continue de temps en temps, entre courses, ménage, repassage (ce qui est plat seulement, attention, je ne suis pas un pro pour ça non plus), préparation de repas (ma femme bosse encore) et activités diverses de retraité bien occupé.
Au fait, des amis me demandent si l'affichage de cette carte IGN sur mon site est légal.
Vu que ça n'est pas commercial, il ne doit pas y avoir de problème, non ?

[cmail]

Vite fait pour que tu puisses travailler aujourd'hui :
1/ Tu bosses le js, c'est bien! Mais gratte aussi un peu autour du html/css: Des lignes <--..........--> sont considérées comme des "commentaires" html donc sans aucune influence sur le rendu d'une page. Tu peux les effacer ou les garder, cela n'agit en rien.
2/ Pour être efficace, il faut UN seul sujet par fil de discussion dans ce forum. Ouvre autant de fils que de questions à résoudre. Cela sera bénéfique pour les suivants qui feront des recherches... Quand on multiplie les questions dans un fil, on ne sait plus quoi répondre, à qui et comment....
3/ Pour l'affichage des circuits:

• D'abord tu créées une liste déroulante (en html) avec tes différents noms.
• Tu associes à chaque ligne de cette ligne déroulante une même fonction js qui contient le nom de ton fichier .gpx.
• Cette fonction .js devra en gros: a/ créer une couche avec le fichier .gpx ad-hoc affiché, b/ centrer l'api par exemple sur le point de départ de ce circuit, c/ supprimer la couche précédente .gpx.

Tout cela en t'aidant des tutos de l'IGn sur l'API (ou des questions déjà posées dans ce forum), et des cours et tutoriels cela est faisable. Mais il faut un peu de méthode, d'abord tu crées autant de petit fichier html pour aborder UNE seule question à résoudre.>>> D'abord tu créées un premier fichier avec une liste déroulante. Puis quand ce point est bien compris, tu créées un second fichier avec une fonction js (genre alert("ok") ou mieux console.log("ok") pour te servir de firebug) ) associées à cette liste déroulante. Puis un troisième fichier avec cette liste déroulante et tu y places l'API (petit travail de css).....
4/ Pour la gratuité en dessous de 100000 hit/mois voir http://www.geoportail.gouv.fr/depot/..._API_libre.pdf

[jrenard]

Merci jrenard pour ce tuyau, que j'ai essayé en vain d'appliquer.
J'ai essayé de mettre le margin en auto, à divers endroits, et pour l'instant je n'y arrive pas.
J'ai du div#viewerDiv, mais pas du iv#viewerContainer , qu'est_ce que ça change ?

Ca change que si la div de ta visu carto s'appelle viewerDiv, c'est évidemment sur div#viewerDiv que tu dois appliquer tes propriétés CSS ! Mon exemple avec div#viewerContainer n'était qu'un exemple, à adapter à ton propre code.

[Pedro88]

jrenard,
Je viens de mettre au début de la section body
width: 97%;
height: 100%;
margin: auto;

C'est comme je le souhaitais, la carte s'affiche sur 97 % de l'écran et elle est centrée.
Quand je faisais ça dans div#viewerDiv, ça n'allait pas.
Merci encore.

[Pedro88]

Christian,
Je n'arrive pas à avoir la trace rouge en zoomant, et pourtant j'ai repris ton fichier http://essai.obs43.fr/ign-mortevieille.html dans lequel j'ai simplement changé la src de geoportalMap_simple6-1.js
Je n'ai pas vu ce que tu as modifié.
J'ai enlevé les commentaires html et j'ai centré la carte en demandant 97 %.
Je n'ai rien changé à mon fichier geoportalMap_simple6-1.js.
Je ne vois pas comment faire...

[cmail]

Les niveaux de zoom ou apparaissent ta trace:

Code :

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

1
2
3
 url:'./gpx/mortevieille.gpx',                        options:{
                            params:{// layer's options ...
                                minZoomLevel:9,                                 maxZoomLevel:15,

[cmail]

Une SEULE question (claire et précise avec page de test) par fil!

[Pedro88]

Voilà, merci Christian, c'est fait ; c'était effectivement dans le fichier js qu'il fallait le changer.
Mais il y a des comportements que je ne comprends pas : quand je change une instruction (par exemple rendre la trace visible à plusieurs niveaux de zooms), l'affichage de la carte se modifie (le centrage et les 97 % ne sont plus pris en compte, l'affichage de départ de la carte n'est plus à la même échelle qu'avant)

[jrenard]

Si je prends l'URL que vous avez donné précédemment, c'est la hauteur du body qui est définie à 97%, pas sa largeur. Donc par défaut la page va prendre toute la largeur disponible (100%)

[Pedro88]

Oui, je suis bête.
Merci jrenard

[cmail]

Petit rappel:
Lorsque tu considères que ta question a reçu une réponse, il faut cliquer sur le bouton "Résolu" en bas à gauche. Cela évite d'y revenir, fait gagner du temps aux experts de l'IGN qui suivent nos déambulations et servira à d'autres néophytes qui, dans un premier temps, recherche dans le forum des questions similaires...

[Pedro88]

Oui, Christian, j'y pensais à propos d'un autre fil (couches).
Je vais le faire pour celui-ci aussi.
Je suis vraiment content d'avoir bénéficié de votre aide.
J'arrive à peu près à ce que je souhaitais au départ.
Je vais travailler sur d'autres thèmes et pour suivre ton excellent conseil d'homme bien structuré et rigoureux.
J'ouvrirai éventuellement d'autres fils ciblés.
Merci beaucoup aux pros de la programmation qui ont accepté de se mettre à mon niveau, c'est vraiment sympa.
Ce forum est un bel exemple de solidarité.
Un merci particulier à Christian, infatigable et inébranlable.