Discussion :

[Zebulon777]

Bonjour tout le monde,

On me demande de faire afficher l'échelle dans le cartouche Outils
Pour se faire, j'utilise la fonction suivante :

Code :

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

1
2
3
var EchelleX = document.getElementById("DivCarte").clientWidth - 125;
viewer.getMap().addControl(new Geoportal.Control.GraphicScale(), new OpenLayers.Pixel(EchelleX,210))

Tout fonctionne correctement, sauf que, en fonction du zoom, la longueur de la barre de l'échelle se modifie, ce qui fait que de temps en temps, elle ne tient plus dans la cartouche ou n'est plus centrée.

Est-ce qu'il y a un moyen de rendre cette longueur fixe, sans empêcher la modification des zones blanches et noires ?

[Zebulon777]

J'ai trouvé la propriété "currentWidth" mais impossible de trouver comment l'utiliser ?

Mes investigations m'ont permis de trouver des informations et de "pondre" ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var EchelleX = document.getElementById("DivCarte").clientWidth - 140;
//viewer.getMap().addControl(new Geoportal.Control.GraphicScale(), new OpenLayers.Pixel(EchelleX,210));
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)})
viewer.getMap().addControl(WScale);
document.getElementsByClassName("gpControlGraphicScale")[1].style.width = "100px";

alert(document.getElementsByClassName("gpControlGraphicScale")[1].style.width);

WScale.redraw();

alert("ici");

Mais, ça ne fonctionne pas, l'échelle, s'adapte toujours, je ne comprends ce qui ne va pas ???

[jrenard]

Bonjour,

Effectivement, la barre d'échelle voit sa largeur changer en fonction du niveau de zoom, de façon assez logique. Le but est de proposer une échelle qui présente des valeurs "rondes" (pour la facilité de lecture) tout en restant cohérente par rapport à la carte (ce qui est quand même le minimum). En fonction de cela, la mise en forme de l'échelle à chaque niveau de zoom est calculée à la volée pour permettre d'afficher l'échelle la plus large dans l'espace qui lui est dédié tout en gardant cette contrainte sur les valeurs rondes. Il s'ensuit des dimensions qui peuvent changer, et on n'y peut pas grand chose. Ce que l'on peut adapter, c'est le positionnement de l'échelle, mais pas sa dimension.

Pour s'assurer que l'échelle ne sorte pas du cartouche dans lequel on la place, il faut prendre en compte la largeur maximale de cette échelle. Par défaut, elle est fixée à 150 pixels, mais on peut y accéder et la modifier via la propriété barAreaWidth. De là deux possibilités : soit on met une largeur maximale qui assure que l'on ne sortira pas du cartouche, soit on adapte la largeur du cartouche pour permettre à l'échelle d'exister à l'intérieur en toutes circonstances. Si par exemple tu fais le premier choix et tu veux rentrer ton échelle dans un espace maximal de 100px, après création de l'échelle et ajout à la carte tu appelles l'instruction suivante :

Code :

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

viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 100;

Pour le centrage, pas de solution miracle comme ça de but en blanc. Néanmoins, d'un point de vue utilisateur, je ne suis pas sûr que recentrer l'échelle dans un élément soit une bonne idée car cela conduirait à bouger à chaque fois la limite gauche de l'échelle pointée par le nombre 0, et l'effet visuel produit serait à mon avis assez perturbant. Avec l'échelle comme elle est configurée dans l'API, certes la largeur s'adapte mais le 0 est toujours positionné au même endroit, et c'est beaucoup plus confortable pour l'utilisateur quand il change de niveau de zoom.

Un petit mot sur la propriété currentWidth :

Code :

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

viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].currentWidth

Elle renvoie une valeur qui indique la largeur courante de la barre d'échelle, en fonction de son adaptation au zoom actuel. C'est donc un valeur qui va changer à chaque fois que l'on va zoomer/dézoomer et que la barre d'échelle sera recalculée. Ca permet d'avoir une indication à la volée.

Pour terminer, un dernier mot sur le code que tu proposes :

Code :

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

1
2
viewer.getMap().addControl(WScale);
document.getElementsByClassName("gpControlGraphicScale")[1].style.width = "100px";

En faisant cela, tu modifies la dimension de l'élément HTML englobant la barre d'échelle, mais tu ne touches pas au contrôle de barre d'échelle en soi. Que ce code ne produise aucun changement visuel est donc tout à fait logique (contrairement à la ligne de code sur barAreaWidth mis un peu plus haut dans ce message).

[Zebulon777]

Je choisi la première solution avec

Code :

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

1
2
3
4
5
6
// Afficher l'échelle
var EchelleX = document.getElementById("DivCarte").clientWidth - 130;
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)})
viewer.getMap().addControl(WScale);
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 119;

Mais, j'ai soit une toute petite échelle avec la valeur 100, soit une (trop) grande échelle avec la valeur 120.
Entre les 2 il n'y a pas de changements.
Est-ce normal, docteur ?

[jrenard]

j'ai soit une toute petite échelle avec la valeur 100

Sûrement parce que l'API n'a pas réussi à calculer une barre d'échelle plus grande dans la limite des 120px tout en gardant des bornes rondes.

soit une (trop) grande échelle avec la valeur 120.

Si l'échelle sort de ton cadre, il y a peut-être une histoire de marges. Dans ce cas, soit tu cherches ces marges et tu les minimises, soit tu baisses encore la valeur de barAreaWidth sur le barre d'échelle.

Entre les 2 il n'y a pas de changements.

Là, je ne comprends pas trop ce que tu veux dire

[Zebulon777]

Comme un dessin vaut mieux qu'un long discours, voici ce que ça donne, avec différentes valeurs :



Rappel du code :

Code :

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

1
2
3
4
5
6
// Afficher l'échelle
var EchelleX = document.getElementById("DivCarte").clientWidth - 130;
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)})
viewer.getMap().addControl(WScale);
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120 // ou 100 ou 118, etc...

Ps : les tests sont compliqués en ce moment, apparemment, l'IGN travaille sur son API et j'ai plein de trucs que ne fonctionnent plus du tout !!!

[jrenard]

Pour la barre d'échelle trop petite dans certains cas, tu ne pourras ps faire grand chose. Pour celle qui est trop grande, c'est juste qu'elle a pris toute la place disponible (120px) dans un élément qui fait déjà 120px, donc ça colle aux bords avec un rendu visuel peu esthétique. Pour contrer cela, il faut que tu acceptes d'afficher une barre d'échelle plus petite, par exemple de 100px, en la déplaçant de 10px vers la droite (de manière à ce qu'il y ait 10px de marge de chaque coté dans le cas où la barre d'échelle prend toute la place qui lui est dévolue).

Pour le reste, on va en parler dans l'autre sujet de discussion pour ne pas s'y perdre. Il s'agit de répercussions dues à la montée en production de la version 2.1.0 de l'API.

[Zebulon777]

Après modification du code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	var WCartoucheOutils = document.getElementsByClassName("gpToolBoxClass")[0];
	WCartoucheOutils.style.width = "130px";

	var outils = document.getElementsByClassName("gpToolBoxContent")[0];
	outils.style.width = "128px";
	outils.style.height = "220px";

// Afficher l'échelle
var EchelleX = document.getElementById("DivCarte").clientWidth - 135;
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)})
viewer.getMap().addControl(WScale);
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120;
WScale.redraw();

Ca fonctionne relativement bien, mais je n'arrive pas à ce que l'échelle soit toujours centrée à l'intérieur du cartouche, quand on zoom ou dézoom.
J'arrive à récupérer la largeur de l'échelle avec

Code :

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

WLargeurEchelle = document.getElementsByClassName("gpControlGraphicScale")[1].style.width;

mais impossible de capturer les évènements pour faire un redraw ???

[jrenard]

Je fais quelques tests concernant le centrage de cette barre d'échelle, pour l'instant ça ne donne rien. Mais je persiste à penser que le rendu ne serait pas forcément très bon.

Juste une remarque sur le positionnement de cette barre d'échelle : tu as fait le choix de la positionner en absolu via les deux lignes suivantes :

Code :

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

1
2
var EchelleX = document.getElementById("DivCarte").clientWidth - 135;
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)})

Je pense qu'il serait plus cohérent de la transformer comme un nouvel enfant de la barre d'outils, comme ça tu serais sûr qu'elle sera toujours solidaire de cette barre d'outils :

Code :

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

1
2
var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale);

En jouant ensuite sur les propriétés CSS pour éventuellement ajouter une petite marge en haut et décoller de la barre de zoom.

[Zebulon777]

Je me suis appuyé sur ce que tu m'avais fait faire avec le pavé 4 flèches, c'est pour cela que j'ai fait comme ça.

Je viens d'essayer la nouvelle méthode et ça ne fonctionne pas.

Par contre, j'y suis peut-être aller fort, j'ai remplacé tout ce code par le tiens, est-ce bon ???

Code :

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

1
2
3
4
5
6
7
8
// Afficher l'échelle
var EchelleX = document.getElementById("DivCarte").clientWidth - 135;
WScale = new Geoportal.Control.GraphicScale({position: new OpenLayers.Pixel(EchelleX,210)});
viewer.getMap().addControl(WScale);
WLargeurEchelle = document.getElementsByClassName("gpControlGraphicScale")[1].style.width;
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120;
WScale.redraw();

[jrenard]

Effectivement, on avait fait comme ça pour le pavé 4 flèches, mais finalement cette façon de faire est peut-être plus propre et s'adaptera mieux en ce qui concerne cette barre d'échelle (on va laisser le pavé 4 flèches comme il est, il fonctionne bien comme ça )

Tu y es effectivement allé un peu fort, puisque tu as supprimé la création du contrôle et l'affectation de sa largeur.
Le code complet serait le suivant :

Code :

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

1
2
3
4
5
6
iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 130; // largeur du composant
var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
scale.style.position = 'relative'; // positionnement relatif par rapport aux autres éléments de la barre d'outils
scale.style.marginTop = '10px';

L'avantage de cette façon de faire, c'est que la barre est positionnée en relatif dans la barre d'outils, ce qui facilite sa manipulation, par exemple en vue d'un centrage (ce que je suis en train d'étudier).

[Zebulon777]

Bon, c'est mieux, mais avec le positionnement relatif, on retombe dans les même problème de coordonnées qu'avec le pavé : ca change en fonction de navigateur ou des différentes fenêtres.

Pour que l'échelle soit dans le cartouche, ça donne ça :

Code :

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

1
2
3
4
5
6
7
iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 130; // largeur du composant
var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
scale.style.position = 'relative'; // positionnement relatif par rapport aux autres éléments de la barre d'outils
scale.style.marginTop = '-5px';

[jrenard]

Si ça te pose trop de problèmes de passer en positionnement relatif, reviens au positionnement absolu comme tu l'avais fait au début. Mais cela sera alors beaucoup plus compliqué d'essayer de centrer ta barre d'échelle.

[Zebulon777]

Ok, on m'a toujours dis qu'il fallait suivre les conseils du docteur

[Zebulon777]

Bon, voici donc où j'en suis :

Code :

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

1
2
3
4
5
6
7
8
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 130; // largeur du composant
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
	scale.style.position = 'relative'; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginTop = '-5px';
	scale.style.marginLeft = '-5px'; // On décalle l'échelle vers la gauche

L'échelle est placée en bas du cartouche "Outils".
Les coordonnées sont bonnes pour 200km, mais dés qu'on modifie le zoom, elle n'est plus centrée dans le cartouche.
A partir d'un zoom de 400m, elle sort du cartouche, on dirait que la limite des 130 n'est pas respecté ?
J'ai remarqué que lorsque l'échelle que j'affiche dans le cartouche indique 20km, celle affichée automatiquement par l'IGN est à 30km.

[Zebulon777]

Je relance car je n'arrive toujours pas à centrer cette foutue échelle dans le cartouche, de plus lorsque je dézoome en utilisant la molette de la souris, l'échelle "officielle" située en bas afficher à un moment 500 km alors que celle du cartouche affiche 400 km.

[jrenard]

lorsque je dézoome en utilisant la molette de la souris, l'échelle "officielle" située en bas afficher à un moment 500 km alors que celle du cartouche affiche 400 km.

Ceci s'explique aisément : les deux échelles n'ont pas été définies avec la même largeur maximale, celle dans le cartouche est moins large (pour rentrer dans le cartouche justement). Donc là où celle du bas peut parfois s'étendre pour afficher 500km, celle du cartouche est restreinte à 400km. Cela n'empêche pas que les deux sont justes, celle du bas est alors plus large que celle du cartouche.

Si l'effet visuel te gêne, je ne saurais que trop te conseiller de supprimer celle du bas, il n'y a que peu d'intérêt de garder deux échelles simultanées :

Code :

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

iv.removeComponent(viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].id);

[Zebulon777]

Hop, bon, ça c'est fait, l'échelle du bas ne s'affiche donc plus.

Par contre, hormis le fait que je n'arrive pas à la center dans le cartouche, je remarque que la limitation de sa taille n'est pas toujours appliquée ?

Par exemple, cette échelle est affichée à l'ouverture d'une nouvelle page, avec ZOOM à 9 dans le load



On dirait que le code ne repasse pas par la gestion de l'échelle à l'ouverture d'une nouvelle page, me trompe-je ?

[Zebulon777]

Il semblerait que l'échelle affichée ne respecte pas la limitation de la grandeur que je lui donne :

Code :

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

1
2
3
4
5
6
7
8
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 90; // largeur du composant
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginTop = "-5px";
	scale.style.marginLeft = "-5px"; // On décalle l'échelle vers la gauche

J'ai beau la définir, mais rien n'y fait.

Je me trompe ?

[jrenard]

En fait, la limitation n'est pas prise en compte à l’initialisation de la barre d'échelle, donc à l'ouverture de ta page d'accueil ou de toute autre nouvelle page par la suite.
Mais dès que tu zoomes ou dézoomes un coup, la limitation de de taille s'applique bien.

Pour régler ce problème d'initialisation, il te faut forcer la mise à jour de la barre d'échelle après définition de sa taille limite, et alors plus de problème :

Code :

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

viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw();