Discussion :

[Zebulon777]

Ha bah alors, si les profs se mettent à faire des erreurs maintenant !

Plus sérieusement, encore une affaire rondement menée et résolue.

Merci beaucoup.

[Zebulon777]

Aie, c'était trop beau, je réouvre le sujet.

En pleine démo, je viens de me rendre compte que lorsqu'on doublecliquait sur "Outils", on se retrouve avec le cartouche "outils" ouvert sans le pavé flèches ou le contraire, le cartouche outils fermé avec le pavé flèches.

[jrenard]

Bien vu !

Petit artefact de codage qui pourra sans peine être contourné en ajoutant un évènement au double-clic sur le label Outils similaire à celui déclenché au clic simple :

Code :

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

1
2
document.getElementsByClassName("gpControlLabelClass")[0].onclick = affichePanPanel; // ligne existante
document.getElementsByClassName("gpControlLabelClass")[0].ondblclick = affichePanPanel; //ligne ajoutée

[Zebulon777]

Et comme d'habitude : impeccable.

Mais comme un problème n'arrivant jamais seul, après avoir montré la minivue, ils ont bien sur demandé à ce qu'elle soit implémentée. Héhé...

Il faut qu'elle apparaisse en bas à droite de la carte en cliquant sur un bouton ajouté dans le cartouche outils.

Voici où j'en suis dans mon 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
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
...
...
...
// Ajout d'un bouton permettant d'afficher ou pas la mini-vue.
var worldMap = getGeoportalLayer('FXX','GEOGRAPHICALGRIDSYSTEMS.MAPS',true);
//var ovmap= new Geoportal.Control.OverviewMap({
//	size: new OpenLayers.Size(150,150),
//	layers:[worldMap],
//	mapOptions:{
//		resolutions:worldMap.options.nativeResolutions.slice(0,10),
//		numZoomLevels:3,
//	}
//});
WIconeMiniVue = "./Images/Minivue.png";
var B_MiniVue = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Affiche la mini-vue",	
	trigger: function() {
//		viewer.getMap().addControl(ovmap);
viewer.getMap().addControl(new Geoportal.Control.OverviewMap({
	size: new OpenLayers.Size(150,150),
	layers:[worldMap],
//	position:absolute,
//	top:250,
	mapOptions:{
		resolutions:worldMap.options.nativeResolutions.slice(0,10),
		numZoomLevels:3,
	}
}));		
		
		
	}
});
var tbx3 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx3.addControls(B_MiniVue);
// Application d'un style au bouton
var B_MiniVueHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[2];
B_MiniVueHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_MiniVueHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_MiniVueHTML.style.backgroundImage = 'url("'+WIconeMiniVue+'")';
B_MiniVueHTML.style.width = "16px";
B_MiniVueHTML.style.height = "16px";
B_MiniVueHTML.style.position = "relative";
B_MiniVueHTML.style.top = "-3px";
B_MiniVueHTML.style.left = "15px";
...
...
...
function getGeoportalLayer (territory, name, base) {

var lyrPrms= viewer.getMap().catalogue.getLayerParameters(territory, name);
	lyrPrms.options.isBaseLayer= base;
	lyrPrms.options.opacity= 1.0;
	lyrPrms.options.afterAdd= function() {

var k= viewer.getMap().catalogue.getLayerGeoRMKey(
	this.territory,
	this.name);
};

var lyr= new lyrPrms.classLayer(
	lyrPrms.options.name,
	lyrPrms.url,
	lyrPrms.params,
	lyrPrms.options);
    return lyr;
}

Et bien sur ça ne fonctionne pas, ou pas entièrement :

- J'ajoute bien le bouton dans le cartouche Outils, mais il ne fait que faire apparaitre ou disparaitre le petit "+" qui permet d'afficher ou non la mini vue, or il faut que ce soit le bouton qui fasse afficher la mini vue directement.
- impossible de faire bouger le cadre, il reste coincé en haut à droite.

[jrenard]

Voilà une solution au problème (attention, je vais encore faire mon prof ).

La mini-vue doit être intégrée en-dehors du bouton, comme un contrôle à part entière. On la définit donc directement au premier niveau dans la fonction initMap(), sans oublier ensuite d'ajouter le contrôle à la carte. Au passage j'ai un peu étoffé les options :

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
var worldMap = getGeoportalLayer('FXX','GEOGRAPHICALGRIDSYSTEMS.MAPS',true);
var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var ovmap= new Geoportal.Control.OverviewMap({
	div:OpenLayers.Util.getElement(tbx.id+'_ovmap'),
	size: new OpenLayers.Size(148,150), // Note : une largeur de 148px pour etre cohérent avec le cartouche au-dessus et avoir un affichage harmonieux avec un liseré blanc homogène tout autour
	layers:[worldMap],
	mapOptions:{
		resolutions:worldMap.options.nativeResolutions.slice(0,10),
		numZoomLevels:3,
		minZoomLevel:worldMap.options.minZoomLevel,
		maxZoomLevel:worldMap.options.maxZoomLevel,
		projection:worldMap.options.projection.clone(),
		maxExtent:worldMap.options.maxExtent,
		theme:null // prevent OL to insert style.css !
	}
});
viewer.getMap().addControl(ovmap);

Suite à quoi, si l'on veut que par défaut la mini-vue ne s'affiche pas, on ajoute une surcharge CSS depuis le Javascript, directement en-dessous :

Code :

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

document.getElementsByClassName('gpControlOverviewMapElement')[0].style.display = 'none';

Enfin, on s'occupe du code de la fonction déclenchée lors du clic sur le bouton (qui est désormais vide puisque l'on a sorti la création de la mini-vue de là). On va ajouter un comportement simple: si la mini-vue n'est pas affichée (propriété CSS display mise à 'none'), alors on l'affiche (propriété CSS display mise à 'block'), et vice-versa :

Code :

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

1
2
3
4
5
6
7
8
trigger: function() {
	var ovMapElt = document.getElementsByClassName('gpControlOverviewMapElement')[0];
	if (ovMapElt.style.display != 'none') {
		ovMapElt.style.display = 'none';
	} else {
		ovMapElt.style.display = 'block';
	}
}

Et le tour est joué !

Deux petites remarques au passage :
1) En raffinant un peu la méthode trigger déclenchée par le bouton, on peut aussi jouer sur l'aspect de ce bouton avec deux pictos on/off en fonction de si la mini-vue est affichée ou non (dans l'esprit des pictos Géoportail qui ont deux positions on/off). Je te laisse jouer avec ça si ça te tente.
2) Sur la sémantique des boutons : il vaut mieux éviter d'attribuer au bouton de déclenchement de la mini-vue un nom de classe "olControlZoomOnDefaut", qui n'est pas vraiment adapté. A toi de te créer un nom plus cohérent, du style "gpControlOvmap", et de l'attribuer à la propriété displayClass du constructeur du bouton. Juste dans ce cas, faire attention que l'appel au CSS va changer puisque le nom de classe effectif du bouton deviendra "gpControlOvmapItemInactive".

Au final, le code complet dans la méthode initMap() deviendrait le suivant (en conservant le getGeoportalLayer() par ailleurs) :

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
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
// Création du controle de mini-vue
var worldMap = getGeoportalLayer('FXX','GEOGRAPHICALGRIDSYSTEMS.MAPS',true);
var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var ovmap= new Geoportal.Control.OverviewMap({
	div:OpenLayers.Util.getElement(tbx.id+'_ovmap'),
	size: new OpenLayers.Size(148,150),
	layers:[worldMap],
	mapOptions:{
		resolutions:worldMap.options.nativeResolutions.slice(0,10),
		numZoomLevels:3,
		minZoomLevel:worldMap.options.minZoomLevel,
		maxZoomLevel:worldMap.options.maxZoomLevel,
		projection:worldMap.options.projection.clone(),
		maxExtent:worldMap.options.maxExtent,
		theme:null // prevent OL to insert style.css !
	}
});

// Ajout du contrôle à la carte
viewer.getMap().addControl(ovmap);

// Par défaut la mini-vue n'est pas visible
document.getElementsByClassName('gpControlOverviewMapElement')[0].style.display = 'none';

// Définition du bouton d'affichage de la mini-vue
WIconeMiniVue = "iconequadrillage.png";
var B_MiniVue = new OpenLayers.Control.Button({
	displayClass: "gpControlOvmap",
	title: "Affiche la mini-vue",	
	trigger: function() { // Fonction gérant le clic bouton
		var ovMapElt = document.getElementsByClassName('gpControlOverviewMapElement')[0];
		if (ovMapElt.style.display != 'none') {
			ovMapElt.style.display = 'none';
		} else {
			ovMapElt.style.display = 'block';
		}
	}
});

// Ajout du bouton aux outils
var tbx3 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx3.addControls(B_MiniVue);

// Application d'un style au bouton
var B_MiniVueHTML = document.getElementsByClassName("gpControlOvmapItemInactive")[0];
B_MiniVueHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_MiniVueHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_MiniVueHTML.style.backgroundImage = 'url("'+WIconeMiniVue+'")';
B_MiniVueHTML.style.width = "16px";
B_MiniVueHTML.style.height = "16px";
B_MiniVueHTML.style.position = "relative";
B_MiniVueHTML.style.top = "-3px";
B_MiniVueHTML.style.left = "15px";

Est-ce que tout est clair ? Et surtout : est-ce que le résultat fonctionne de ton coté ?

[Zebulon777]

Non seulement ça fonctionne mais en plus, c'est clair, ce qui ne gâche rien. Ho que je t'aime...

Mais par contre :

Il faudrait arriver à positionner la mini-vue tout en bas de la carte ?
Est-ce qu'il est possible de changer le curseur lorsqu'on survol les boutons ? J'ai trouvé le style CURSOR, mais par contre, je n'arrive pas à trouver la propriété qui correspond à la petite main. : YES, j'ai trouvé : .style.cursor = "Pointer"
L'idée d'avoir 2 positions ON / OFF sur boutons, est excellente, mais comment avoir le même effet qu'avec les boutons de l'IGN ?
Le zoom ne semble pas fonctionner ?

[jrenard]

Je vais y aller point par point histoire de ne pas faire de messages à rallonge et de bien éclater les explications

Il faudrait arriver à positionner la mini-vue tout en bas de la carte ?

Ce n'est pas très compliqué. Dans le code que je t'ai proposé, j'ai fait le choix d'intégrer la mini-vue dans la barre d'outils. Cette intégration se fait via deux lignes de code qu'il faut supprimer si on veut sortir de la mini-vue de cette barre d'outils, au moment de la création du contrôle OverviewMap :

Code :

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

1
2
3
4
5
6
7
// Création du contrôle de mini-vue
var worldMap = getGeoportalLayer('FXX','GEOGRAPHICALGRIDSYSTEMS.MAPS',true);
var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0]; // Ligne à supprimer
var ovmap= new Geoportal.Control.OverviewMap({
	div:OpenLayers.Util.getElement(tbx.id+'_ovmap'), // Ligne à supprimer
	size: new OpenLayers.Size(150,150),
	...

Une fois ceci fait, la mini-vue va redevenir indépendante de la barre d'outils et prendre une position par défaut, en théorie en haut à droite de la carte (au-dessus de la barre d'outils donc).

On va ensuite travailler le positionnement de la mini-vue en jouant sur le code CSS de la div englobant la mini-vue, qui a pour nom de classe "gpControlOverviewMapContainer" :
- on lui attribue les mêmes largeur et hauteur que celles définies dans le contrôle
- on la place en position relative => attention cela va avoir pour effet de replacer la mini-vue en position par défaut en haut à gauche
- et on gère le décalage relatif avec les propriétés top et left pour obtenir le positionnement souhaité (par rapport au coin supérieur gauche donc).

Dernier raffinement visuel : on supprimme le petit picto +/- attaché à la carte qui devient redondant avec le bouton de la barre d'outils. Element HTML ayant pour id "gpControlOverviewMapMaximizeButton_innerImage" dont on met la propriété CSS display à none.

Soit le code suivant (avec un décalage à adapter en fonction du besoin) :

Code :

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

1
2
3
4
5
6
7
8
9
// Positionnement de la mini-vue
var ovMapContainerHTML = document.getElementsByClassName('gpControlOverviewMapContainer')[0];
var ovMapHTML = document.getElementsByClassName('gpControlOverviewMapElement')[0];
ovMapContainerHTML.style.width = ovMapHTML.style.width;
ovMapContainerHTML.style.height = ovMapHTML.style.height;
ovMapContainerHTML.style.position = "relative";
ovMapContainerHTML.style.top = "300px";
ovMapContainerHTML.style.left = "20px";
document.getElementById("gpControlOverviewMapMaximizeButton_innerImage").style.display = "none";

La suite ... à suivre

[jrenard]

L'idée d'avoir 2 positions ON / OFF sur boutons, est excellente, mais comment avoir le même effet qu'avec les boutons de l'IGN ?

Deux aspects dans cette question: au niveau technique et au niveau design.

AU NIVEAU TECHNIQUE

Je pense que tu as saisi l'idée : créer deux pictos on/off et étoffer la fonction trigger du bouton pour gérer l'affichage du bouton, en se basant sur la propriété CSS background-image. Quelque chose qui ressemble à ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
trigger: function() {
	var ovMapElt = document.getElementsByClassName('gpControlOverviewMapElement')[0];
	if (ovMapElt.style.display != 'none') {
		ovMapElt.style.display = 'none';
		document.getElementsByClassName("gpControlOvmapItemInactive")[0].style.backgroundImage = 'url("picto_minivue_off.png")';
	} else {
		ovMapElt.style.display = 'block';
		document.getElementsByClassName("gpControlOvmapItemInactive")[0].style.backgroundImage = 'url("picto_minivue_on.png")';
	}
}

Ca, c'est la façon la plus simple et immédiate de faire, qui donne un résultat satisfaisant. Il existe une autre méthode, plus subtile et qui offre plus d'avantages, c'est d'utiliser ce que l'on appelle des sprites CSS. En gros, l'idée est de gérer l'image du fond du bouton non pas avec deux images séparées, mais avec un seule image contenant côte à côté les deux pictos on/off, et de gérer ensuite le décalage de cette image de fond pour déterminer lequel des deux pictos est visible à quel moment.

Démo en pratique dans notre cas: si j'ai un bouton auquel j'ai affecté une dimension 23x23 pixels, je me construis deux pictos de base qui font chacun 23x23 pixels, et je les accole dans une seule image de dimension 46x23, le picto "off" à gauche et le picto "on" à droite. Par défaut, la mini-vue n'est pas affichée, donc le picto visible doit être le "off". Autrement dit, je me contente d'afficher l'image de fond telle qu'elle est, sans décalage => on verra alors le picto "off" puisque situé sur la gauche, et le picto "on" sortira du cadre du bouton. Et lorsque la mini-vue est affichée, pour que l'on voit le picto "on", on décale le fond de 23 pixels vers la gauche via la propriété CSS background-position. Pigé le principe ? En gros, le code de la fonction trigger deviendra :

Code :

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

1
2
3
4
5
6
7
8
9
10
trigger: function() {
	var ovMapElt = document.getElementsByClassName('gpControlOverviewMapElement')[0];
	if (ovMapElt.style.display != 'none') {
		ovMapElt.style.display = 'none';
		document.getElementsByClassName("gpControlOvmapItemInactive")[0].style.backgroundPosition ="0px 0px"; // Pas de décalage du fond, on affiche le picto "off" situé sur la gauche du sprite
	} else {
		ovMapElt.style.display = 'block';
		document.getElementsByClassName("gpControlOvmapItemInactive")[0].style.backgroundPosition = "-23px 0px"; // Décalage du fond vers la gauche (valeur négative de x), on affiche le picto "on" situé sur la droite du sprite
	}
}

Et puisqu'une image parle plus qu'un long discours, voilà une explication de ce qu'il se passe en pratique (exemple pris sur le bouton de zoom de l'API en thème "geoportal3") :



C'est plus subtil, et on sort du cadre strict de l'API, mais en bon Webdesigner je me devais d'évoquer cette façon de faire qui est extrêmement répandue et très pratique.


AU NIVEAU DESIGN

La question est: peut-on refaire un effet similaire à celui des boutons IGN ? La réponse est oui, mais il te reviendra de faire ce qu'il faut pour parvenir à ce résultat. Tu peux récupérer les pictos IGN existant (clic-droit "afficher l'image de fond" puis "enregistrer l'image sous") pour reproduire le fond (ici le petit cadre bleu et blanc) et y coller ton picto, un peu de travail de design et de graphisme (par exemple via Gimp) te permettra d'arriver à un résultat satisfaisant. L'idée est de refaire un deisgn visuel cohérent avec les boutons par défaut.

Attention tout de même : à l'heure actuelle, la version en prod de l'API, la 2.0.3, utilise comme thème par défaut le thème dit "legacy", que l'on peut voir sur tes impressions d'écran. Quand la version 2.1.0 sera livrée, on l'espère dans peu de temps, le thème par défaut va changer : ce sera le thème dit "geoportal3", plus élégant et plus en cohérence avec la charte graphique du Géoportail. On peut en voir un aperçu ici : http://api.ign.fr/tech-docs-js/examp...eoportal3.html

A ce moment-là, il te faudra adapter le design de tes boutons pour qu'il colle avec ce nouveau thème, dans lequel le cadre bleu et blanc des pictos disparaît pour une opposition on/off basée sur des couleurs grises ou orangées.

[Zebulon777]

Et bien comme d'habitude : mention très bien, un vrai prof.
Non seulement, j'ai tout compris, mais en plus ça fonctionne

Bon, il y a (encore) un (que un ?) truc que je ne comprend pas :
Dans ce code, j'essaye d'avoir une bascule sur le controle Graticule, mais ça ne fonctionne pas ?

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
23
24
25
26
27
28
29
30
31
32
33
// Ajout d'un bouton affichant un quadrillage cartographique
WIconeGrille = "./Images/Grille.png";
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Affiche du quadrillage cartographique avec latitude et longitude. ('F5' pour annuler)",	
	trigger: function() {
//		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
		var WGraticule = new Geoportal.Control.Graticule();	
		if (WGraticule.style.display != 'none') {
			WGraticule.style.display = 'none';
		} else {
			WGraticule.style.display = 'block';
		}
	}
});

viewer.getMap().addControl(WGraticule);

var tbx2 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(B_Grille);
// Application d'un style au bouton
var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[1];
B_GrilleHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.backgroundImage = 'url("'+WIconeGrille+'")';
B_GrilleHTML.style.width = "16px";
B_GrilleHTML.style.height = "16px";
B_GrilleHTML.style.position = "relative";
B_GrilleHTML.style.top = "-3px";
B_GrilleHTML.style.left = "9px";
B_GrilleHTML.style.cursor = "Pointer";
TML.style.cursor = "Pointer";

[jrenard]

Au départ, c'est le même problème que la semaine dernière avec la mini-vue : le contrôle de graticule doit être créé et ajouté à la carte en dehors du bouton qui gérera son affichage. La fonction trigger du bouton gérera ensuite l'activation/désactivation du contrôle de graticule.

On commence donc par la création du contrôle et son ajout à la carte :

Code :

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

1
2
var WQuadrillage = new Geoportal.Control.Graticule();
viewer.getMap().addControl(WQuadrillage);

Ensuite, par défaut, on va désactiver ce contrôle pour ne pas que le graticule s'affiche :

Code :

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

WQuadrillage.deactivate();

Enfin, on va s'occuper de la fonction trigger du bouton. On ne va pas travailler comme on l'avait fait sur la propriété CSS display, car le graticule n'est pas vraiment un bloc HTML bien déterminé. On va donc jouer sur l'activation/désactivation du contrôle : si le contrôle est actif on le désactive, et vice versa.

Code :

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

1
2
3
4
5
6
7
8
trigger: function() {
	var gratCtrl = viewer.getMap().getControlsByClass('Geoportal.Control.Graticule');
	if (WQuadrillage.active) {
		WQuadrillage.deactivate();
	} else {
		WQuadrillage.activate();
	}
}

Et le tour est joué.

[Zebulon777]

Impec, impec, impec.
J'ai compris mon erreur.
Que dire sinon et tout simplement : MERCI.

Bon, la suite maintenant :

Est-il possible d'ouvrir la carte en cours de consultation en plein écran par l'appui sur un bouton et en sortir par la touche 'ESC' ou par un bouton (au plus simple) ?

[jrenard]

Je pense que la meilleure solution pour cela (pour la simplicité technique ainsi que pour la maîtrise de ce qu'il se passe) est de déclencher l'ouverture de la carte plein écran en tant que nouvelle page, pour préserver ce qu'il peut y avoir au départ autour de la carte (contenu de la page autre que la carte elle-même) ainsi que se garder le format par défaut sous le coude. Il suffit pour cela de créer une deuxième page html avec visu cartographique, en copier-coller de la page courante, et de créer un bouton dont la fonction "onclick" est d'ouvrir cette nouvelle page. L'utilisateur a ainsi la possibilité d'ouvrir la vue plein écran tout en revenant à la vue de base.

La différence de cette nouvelle page par rapport à la page en cours sera de se mettre en plein écran. Pour cela, on modifie les styles par défaut déclarés dans la balise head de la page, de la façon suivante :

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
<style type="text/css">
<!--
html,body {
	width:100%;
	height:100%;
}
body {
	margin:0;
}
div#viewerDiv {
	width:100%;
	height:100%;
}
-->
</style>

On obtient alors une carte dont les bords collent parfaitement aux bords de la fenêtre de navigation.

Attention, dommages collatéraux potentiels sur les éléments dont la position a été forcée ! Par exemple, le contrôle de PanPanel dont la position a été défini par rapport au coin supérieur gauche risque de sortir du cartouche outils qui lui reste collé à droite. Dans ce cas, la valeur de position devra être calculée de façon dynamique par rapport au bord droit de la fenêtre. On calculera donc dans un premier temps la position en X du panel en fonction de taille de la fenêtre et du décalage par rapport au bord droit (puisque le cartouche outils reste lui invariant par rapport au bord droit). Par exemple, si la position d'origine du PanPanel correspond à 60px par rapport au bord droit, on va désormais le définir comme suit :

Code :

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

1
2
3
// Ajout d'un contrôle OpenLayers de déplacement par flèches avec positionnement absolu dans le cartouche d'outils
var panPanelX = document.body.clientWidth - 60;
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(panPanelX,155));

De cette manière, quelle que soit la taille de la fenêtre, le panPanel sera toujours bien placé dans le cartouche! Et ainsi de suite pour tous les éléments dont la position nécessite d'être adaptée (la mini-vue par exemple), l'essentiel étant d'avoir la bonne maîtrise des dimensions et des rapports entre ces dimensions pour en déduire la bonne façon de calculer dynamiquement le positionnement des éléments.

Dernière astuce, pour éviter la duplication de code entre les deux pages : externaliser tout le code Javascript dans un fichier *.js, lequel sera appelé par les deux pages HTML. Ainsi toutes les modifs de mise en page faites dans le fichier *.js seront automatiquement répercutées dans les deux pages HTML.

[cmail]

Bravo Jérémy! Je suis admiratif de ta patience et de tes explications très pédagogiques....
Et pour revenir un peu en arrière sur des pages tuto de mise en forme de l'api, cette page est un très bon début!

[Zebulon777]

Oula, j'étais parti sur quelque chose de beaucoup, beaucoup, beaucoup, plus simple

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
23
24
25
// Bouton Plein écran 
WIconePEcran = "./Images/PleinEcran.png";
var B_PEcran = new OpenLayers.Control.Button({
	displayClass: "olControlPEcran",
	title: "Ouverture de la carte en plein écran",	
	trigger: function() {
alert("ici");		
	WUrl="";
	window.open(WUrl,"Carte en cours", "fullscreen=yes");
	}
});
var tbx4 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx4.addControls(B_PEcran);
// Application d'un style au bouton
var B_PEcranHTML = document.getElementsByClassName("olControlPEcranItemInactive")[0];
B_PEcranHTML .style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_PEcranHTML .style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_PEcranHTML .style.backgroundImage = 'url("'+WIconePEcran+'")';
B_PEcranHTML .style.width = "16px";
B_PEcranHTML .style.height = "16px";
B_PEcranHTML .style.position = "relative";
B_PEcranHTML .style.top = "-3px";
B_PEcranHTML .style.left = "27px";
B_PEcranHTML .style.cursor = "Pointer";

Mais pour le moment, je n'arrive pas à récupérer l'url de la carte en cours de visualisation.

[jrenard]

Bonjour,

La solution n'est pas vraiment adaptée. Il n'y a pas vraiment d'URL juste pour la carte, mais une URL pour l'ensemble de la page contenant ta carte. Et récupérer cette URL pour l'inclure dans un window.open n'aurait aucun intérêt, cela ne ferait que dupliquer la page en cours dans une nouvelle fenêtre. Pour peu que tu aies une taille définie pour ta carte au départ (la taille du viewerDiv définie en 800x600 dans l'en-tête par exemple), tu te retrouveras avec une fenêtre plein écran contenant une petite carte et plein de vide autour. Pas vraiment le résultat escompté...

Tu as l'air de penser que ce que je t'ai proposé est beaucoup plus compliqué, mais il n'en est rien. Tu as déjà toute la base de travail, il n'y a que quelques petites manipulations mineures à effectuer. On va y aller pas à pas.


Première étape : externaliser le code JS pour éviter les duplications de code

Pour cela tu copies l'ensemble des instructions Javascript de ta page HTML en cours située entre les balises <script>...</script>, ie. toutes les instructions sur lesquelles tu as travaillé depuis le début pour ajouter tes boutons, faire ta mise en forme, etc... Tu colles ça dans un nouveau document que tu enregistres en format Javascript (par exemple carte.js) à coté de ton document HTML. Enfin, pour appeler ce Javascript depuis le document HTML, tu supprimes dans le HTML l'intégralité de ce que tu viens de copier et tu remplaces les balises <script>...</script> au contenu désormais vide par l'instruction suivante qui va appeler le document Javascript en chemin relatif :

Code :

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

<script type="text/javascript" src="carte.js"></script>

Normalement, si tu lances ta page après ça, tu ne devrais constater aucune modification apparente. Si c'est le cas on peut continuer.


Deuxième étape : préparer ta page en vue plein écran

Pour cela tu copies l'intégralité du contenu de ton document HTML en cours (qui doit désormais être très réduit) dans un nouveau document HTML (par exemple carte_plein_ecran.html) juste à coté. Dans ce nouveau document, tu modifies les styles dans l'en-tête comme je l'ai indiqué dans mon message précédent, de manière à forcer l'affichage plein écran. Si tu as du contenu autour de ta carte, ie. des éléments HTML en-dehors du viewerDiv (un titre, du texte, etc...), il est temps de les supprimer dans cette nouvelle page HTML pour enlever ces éléments parasites dans l'affichage plein écran de la carte. En gros, le body de ta page en plein écran ne doit pas être plus fourni que ça :

Code :

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

1
2
3
4
5
<body>
	<div id="viewerDiv"></div>	
	<script type="text/javascript" src="carte.js"></script>
	<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/Geoportal.js"></script>
</body>

Troisième étape : configurer ton bouton

Très simple. Sur la base du code Javascript de ton bouton que tu as déjà créé, tu ne vas modifier que ta variable WUrl. Celle-ci devra pointer sur ta page plein écran en chemin relatif :

Code :

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

WUrl = "carte_plein_ecran.html";

Déjà, à ce stade, tu devrais avoir une nouvelle fenêtre qui s'ouvre avec une visu cartographique en plein écran.


Dernière étape : gérer les éventuels problèmes d'affichage sur le plein écran pour les éléments positionnés en relatif ou en absolu

On en revient à ce que j'expliquais dans mon message précédent. C'est la partie la plus subtile, mais en faisant attention aux dimensions et aux positionnement, on s'en sort bien.

[Zebulon777]

Je vois que c'est moi qui me suis mal fait comprendre.
Ton explication est on ne peut plus claire et c'est ce que j'avais déjà fait, mais le problème est que en fonction des pages, la cartes n'est pas forcément la même.
L'utilisateur peut l'avoir zoomée, y afficher certaines couches (en provenance de fichiers KML), etc...

En fait, ce qu'il faudrait, ce serait pouvoir prendre une espèce d'instantané au moment du clic sur le bouton et le mettre sur une page pleine écran avec peut-être un niveau de zoom plus important.

(Quand je pense qu'ils me demandent ensuite de leur mettre en place une loupe, j'en frémi d'avance, , mais bon, c'est une autre histoire, je n'ai même pas encore osé faire une recherche !!! )

[jrenard]

OK, je comprends, dans ce cas la solution que j'ai proposée ne convient pas car elle implique que la carte plein écran est en quelque sorte réinitialisée par rapport à la carte de départ.
J'ai peut-être une idée derrière la tête, je vais y regarder.
Question : la page HTML ne contient-elle que la carte, ou bien y a-t-il d'autres informations autour de cette carte ?

[Zebulon777]

Que veux-tu dire par d'autres informations ?

Il y a la carte et différentes couches en provenance soit de l'IGN, soit de fichiers KLM, qui peuvent être affichée ou non.

[jrenard]

Je parle du contenu de la page en dehors de la carte, en dehors du div viewerDiv.
Par exemple sur la page http://api.ign.fr/tech-docs-js/examp...Map_basic.html, il y a des éléments autour de la carte : un titre et un menu déroulant en haut, du texte et des mentions légales en bas.

[Zebulon777]

Haaa, alors oui, il y a pas mal de choses et ça devrait encore s'étoffer.