Discussion :

[Pedro88]

Bonjour,
Je voudrais afficher l'outil "mesure de distance" sur ma carte (l'intégrer donc à la barre d'outils) en haut à droite, sur ma page :
http://p.salquebre.free.fr/ign/pusieux.htm

J'ai utilisé le générateur IGN qui m'a mis ça :

Code :

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

1
2
3
4
5
6
//Ajout de la barre d'outils de mesures
      var measurebar= new Geoportal.Control.MeasureToolbar({ 
        div: OpenLayers.Util.getElement(tbx.id+"_measure"), 
        displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"), 
        targetElement: OpenLayers.Util.getElement(tbx.id+"_meares") 
      });

mais j'essaie de l'intégrer à mon code et ça ne marche pas car je ne sais pas exactement :
- si ce code suffit
- où insérer ce code dans ma page js ou htm.
Merci à l'avance pour votre aide.

[jrenard]

Bonjour,

Ce code ne suffit pas, puisqu'il ne fait que créer une instance de la barre de mesure. Il faut ensuite ajouter la barre de mesure ainsi créée sur votre carte via la ligne suivante fournie également par le générateur :

Code :

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

viewer.getMap().addControl(measurebar);

A noter également que l'utilisation des outils de mesure nécessite d'appeler l'API étendue via la ligne :

Code :

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

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

dans laquelle il faut bien veiller à pointer sur GeoportalExtended.js et pas simplement Geoportal.js (comme c'est par exemple le cas actuellement sur http://p.salquebre.free.fr/ign/pusieux.htm)

Avec ça, ça devrait fonctionner

[Pedro88]

Merci jrenard pour cette réponse rapide.
J'ai essayé mais plus rien ne s'affiche.
Je fais de la salade avec les {([, c'est peut-être là que ça cloche ou bien je n'ai pas placé le code au bon endroit.
J'ai laissé en ligne le fichier qui ne va pas à la même adresse pour que vous puissiez éventuellement me corriger.
Merci.

[jrenard]

Je fais de la salade avec les {([, c'est peut-être là que ça cloche ou bien je n'ai pas placé le code au bon endroit.

Un peu des deux

En fait le morceau de code n'est pas au bon endroit parce qu'il y a confustion au niveau des imbrications multiples.

Si je reprends le morceau suivant :

//Ajout de la barre d'outils de mesures
var measurebar= new Geoportal.Control.MeasureToolbar({
div: OpenLayers.Util.getElement(tbx.id+"_measure"),
displaySystemviewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")

viewer.getMap().addControl(measurebar);
});

Il faut le couper de là où il est, ce n'est pas sa place. Qui plus est, le viewer.getMap().addControl n'est pas au bon endroit, il doit être en dehors de la définition de la measurebar.

Ensuite, il faut créer appeler une fonction onView dans les options de la fonction Geoportal.load, au même niveau que les options layersOptions, overlays, language, etc... Par exemple en fin de code :

Code :

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

1
2
3
4
5
6
7
8
                      ...
                      },// Fermeture de l'accolade de overlays
                      language:'fr',
	              onView: initMap
            }
        );
    };

Enfin, cette fonction initMap doit être définie ailleurs dans le code, en dehors du window.onload, c'est elle qui ajoutera les outils de mesure :

Code :

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

1
2
3
4
5
6
7
8
9
function initMap() {
	//Ajout de la barre d'outils de mesures
	var measurebar= new Geoportal.Control.MeasureToolbar({ 
		div: OpenLayers.Util.getElement(tbx.id+"_measure"), 
		displaySystem:(viewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"), 
		targetElement: OpenLayers.Util.getElement(tbx.id+"_meares") 
	});
	viewer.getMap().addControl(measurebar);
}

[Pedro88]

J'ai essayé de suivre votre démarche, et de mettre la fonction initMap à différents endroits, mais ça ne va toujours pas.
On n'est pas très loin d'aboutir, je pense...

[jrenard]

Le code est a priori bon. En revanche, si on ouvre une console de développement, on constate que dès le début du script la variable "Geoportal" n'est pas reconnue, et on voit dans Firebug que le script GeoportalExtended.js semble ne pas être chargé. Et pour cause, la balise de script appelant le code l'API Géoportail n'est pas fermée ! En ajoutant un </script> à la fin de la ligne en question, ça devrait mieux se passer

[Pedro88]

Merci jrenard.
Si j'avais été plus malin, j'aurais pu le voir...
Par contre, je vois la carte, mais pas l'outil mesure dans la barre d'outils en haut à droite.

[cmail]

Et que te dit firebug ?
A partir du message d'erreur de firebug>>> tu fais une recherche sur ce forum autour par exemple "tbx">>> tu devrais trouver une solution....

Ou lire http://api.ign.fr/documentation/91/b...ils-de-mesures

[Pedro88]

Je vois que la doc IGN sur les outils de mesure parle de quickstart.js qui s'est créé tout seul.
Il faut que je modifie le code dans ce fichier ou seulement dans pusieux.js ?

J'essaie de comprendre un peu Firebug, mais ça n'est pas évident pour moi, étranger à tout ça...
Je ne vois pas les messages d'erreur, ni la localisation des errreurs.
Quand je lis les tutoriels, je comprends que ce bon outil s'adresse aux développeurs, pas à moi.

[jrenard]

On peut oublier le quickstart.js, il n'a rien à faire là-dedans, et de toute façon la page html ne pointe pas dessus.

Ce que Christian a voulu dire, c'est que l'un des éléments les plus importants de Firebug est la console. Et que renvoie la console ici ? "tbx is not defined". Autrement dit, l'élément désigné par tbx n'est pas défini. Il doit l'être quelque part dans le code de la fonction initMap, et il doit pointer sur l'élément HTML qui construit la boîte d'outils de contrôles (celle qui s'affiche en haut à gauche).

Cette boîte d'outils est un contrôle de l'API qui s'appelle Geoportal.Control.ToolBox, on peut l'appeler depuis la map via la fonction viewer.getMap().getControlsByClass

Il faut donc avant la création de la barre de mesure dans la fonction initMap déclarer la ligne suivante :

Code :

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

var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];

A noter que cette ligne de code est bien présente dans le code généré par le générateur, ainsi que dans le code d'exemple expliqué sur la page http://api.ign.fr/documentation/91/b...ils-de-mesures

[cmail]

ce bon outil s'adresse aux développeurs

La notion de développeurs est très vague! Tu développes bien un site avec l'api que tu bidouilles pour y ajouter des .gpx, non? Et tous les développeurs du monde entier sont passés par ton niveau, et avec un peu de travail maitrisent maintenant firebug.


Dans ce qui suit qui est tiré de http://api.ign.fr/documentation/91/b...ils-de-mesures, tu ne vois aucune analogie avec les conseils de Jeremy?

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
// Récupération de la toolbox
var toolBox= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];

// Création de la barre de mesure
var measurebar = new Geoportal.Control.MeasureToolbar(
    {
        // Div où la barre doit être ajoutée
        div: OpenLayers.Util.getElement(toolBox.id+'_measure'),
        // Div où le resultat des mesures est affiché
        targetElement: OpenLayers.Util.getElement(toolBox.id+'_meares')
    }
);

// Ajout de la barre de mesure
viewer.getMap().addControl(measurebar);

NB: pendant que je rédigeais cette réponse Jérémy à posté sa réponse!!!

[Pedro88]

Merci à vous deux, c'est bien gentil d'essayer de me faire travailler un peu et progresser. Je ne refuse pas l'effort, je vous trouve d'ailleurs assez pédagogues (parfois sévère, Christian, mais je l'accepte bien).
J'ai intégré le code et ça ne s'affiche toujours pas...
Je lance Firebug (F12), j'ai bien la page web en haut et Firebug en bas.
Je vois le code de la page html, mais pas celle du js (Firebug s'efface devant la page js).
Je lis dans les tutos qu'il suffit de pointer à la souris l'élément sur la page pour voir son code analysé par Firebug, mai si je clique sur la boîte d'outils (en haut à droite), je ne vois rien de spécial signalé par Firebug.
Dans Firebug, il y a des onglets dans la fenêtre gauche et dans la droite. Lesquels dois-je afficher ?
Je me dis que cet outil est sûrement intéressant, bien structuré, mais il me manque la base : il faudrait que je fasse un stage à l'IGN...

[jrenard]

Nul besoin de venir à l'IGN pour apprendre à utiliser Firebug, il existe de nombreux tutos en ligne extrêmement bien faits. Par exemple :
- http://eric-pommereau.developpez.com...l-web/firebug/

Encore une fois, l'un des éléments le plus important est la console, qui renvoie tous les messages d'erreur. Et que dit la console ici ? Que l'objet "viewer" n'est pas défini. Il faut donc le définir au début de la fonction initMap, de la façon suivante :

Code :

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

var viewer  = iv.getViewer();

où la variable iv est l'interfaceViewer de l'API qui a été créé par la fonction Geoportal.load

[Pedro88]

Voilà, ça fonctionne.
Merci beaucoup, Jérémy et Christian.
C'est déjà un bonus par rapport à ce que j'avais imaginé au départ.
L'objectif de départ est dépassé, c'est super et ça n'est pas grâce à moi !