Discussion :

[Zebulon777]

Bonjour tout le monde,
J'en avais déjà parlé mais je ne retrouve pas le sujet alors je me permets de refaire ma demande.

On me demande la possibilité d'afficher la carte en cours de visualisation en plein écran.
Est-ce que c'est possible ?

Merci d'avance, les gars.

[jrenard]

Passer la carte en plein écran, ça doit être possible avec peu de code.
Le problème sera plus ardu lorsqu'il faudra revenir en arrière dans la configuration de départ. Ce retour en arrière fait-il partie de ta demande ?

[Zebulon777]

Oui, effectivement, mais j'avais pensé à le faire dans une nouvelle fenêtre, avec un Window.open ?

[jrenard]

Je vais voir ce que je peux te proposer.

[jrenard]

J'ai une solution à te proposer, je l'ai testée et elle semble bien marcher. L'idée n'est pas d'ouvrir une nouvelle fenêtre, mais bien faire un passage en plein écran dans le fenêtre courante, et autoriser le retour à la normale (un peu comme on peut le faire sur http://www.geoportail.gouv.fr/accueil).

On commence par créer le bouton, de type Toggle car disposant de deux états (je ne mets que le code de création pure du bouton, je te laisse gérer sa mise en forme) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
WIconePEcran = "./Images/PleinEcran.png";
var B_PEcran = new OpenLayers.Control.Button({
	displayClass: "olControlPEcran",
	title: "Ouverture de la carte en plein écran",
	type: OpenLayers.Control.TYPE_TOGGLE,
	eventListeners: {
			"activate": function() { enlargeWindow(); },
			"deactivate": function() { enlargeWindowBack(); }
	}
});
var tbx4 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx4.addControls(B_PEcran);

L'état activé/désactivé de ce bouton va déclencher deux fonctions, l'une passant en plein écran, l'autre revenant en arrière. Le passage en plein écran va se faire en modifiant quelques propriétés CSS bien ciblées, principalement des dimensions que l'on va passer à 100%, mais aussi un positionnement de la DivCarte en haut à gauche de la fenêtre en forçant la disparition des ascenseurs de scroll pour masquer artificiellement les autres éléments de la page (ils seront toujours là, mais plus visibles car en dehors de l'emprise de la fenêtre). Mais avant cela, pour permettre un retour en arrière après passage en plein écran, il faudra affecter les valeurs courantes des propriétés CSS que l'on va modifier à des variables globales que l'on pourra rappeler par la suite. Tu suis ? En pratique, ça donne ce qui suit.

D'abord on définit les variables globales qui enregistreront les valeurs courantes des propriétés CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var bodyWidth;
var bodyHeight;
var bodyMargin;
var bodyOverflow;
var divCarteWidth;
var divCarteHeight;
var divCartePosition;
var divCarteTop;
var divCarteLeft;
var mainMapWidth;
var mainMapHeight;

Ensuite on définit la fonction de passage en plein écran : elle enregistre les valeurs courantes des propriétés CSS, puis les modifie pour forcer le passage en plein écran. Le centrage et le zoom de la carte sont également enregistrés pour être réaffectés en fin de traitement :

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
/**
 * Fonction passant la fenêtre cartographique en plein écran
 */
function enlargeWindow() {
	// Récupération du centrage et du zoom de la carte
	mapCenterLon = viewer.getMap().getCenter();
	mapZoom = viewer.getMap().getControlsByClass('Geoportal.Control.ZoomSlider')[0].getLevel()
	// Enregistrement des valeurs courantes des proriétés CSS (pour permettre un retour en arrière)
	bodyWidth = document.body.clientWidth;
	bodyHeight = document.body.clientHeight;
	bodyMargin = window.getComputedStyle(document.body).margin;
	bodyOverflow = "auto";
	divCarteWidth = window.getComputedStyle(document.getElementById('DivCarte')).width;
	divCarteHeight = window.getComputedStyle(document.getElementById('DivCarte')).height;
	divCartePosition = window.getComputedStyle(document.getElementById('DivCarte')).position;
	divCarteTop = window.getComputedStyle(document.getElementById('DivCarte')).top;
	divCarteLeft = window.getComputedStyle(document.getElementById('DivCarte')).left;
	mainMapWidth = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).width;
	mainMapHeight = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).height;
	// Affectation des valeurs des propriétés CSS forçant un passage en plein écran
	document.body.style.width = "100%";
	document.body.style.height = "100%";
	document.body.style.margin = "0";
	document.body.style.overflow = "hidden";
	document.getElementById("DivCarte").style.width = "100%";
	document.getElementById("DivCarte").style.height = "100%";
	document.getElementById("DivCarte").style.position = "fixed";
	document.getElementById("DivCarte").style.top = "0px";
	document.getElementById("DivCarte").style.left = "0px";
	document.getElementsByClassName("gpMainMap")[0].style.width = "100%";
	document.getElementsByClassName("gpMainMap")[0].style.height = "100%";
	// Recentrage de la carte
	viewer.getMap().setLonLatCenter(mapCenterLon.lon, mapCenterLon.lat, mapZoom+1, false, false);
}

Enfin, on définit la fonction de retour à la normale : elle se contente de faire revenir les propriétés CSS aux valeurs par défaut pré-enregistrées avant le passage en plein écran, avec toujours recentrage de la carte à la fin :

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
/**
 * Fonction annulant la mise en plein écran de la carte
 */
function enlargeWindowBack() {
	// Récupération du centrage et du zoom de la carte
	mapCenterLon = viewer.getMap().getCenter();
	mapZoom = viewer.getMap().getControlsByClass('Geoportal.Control.ZoomSlider')[0].getLevel()
	// Retour aux valeurs par défaut des propriétés CSS
	document.body.style.width = bodyWidth;
	document.body.style.height = bodyHeight;
	document.body.style.margin = bodyMargin;
	document.body.style.overflow = bodyOverflow;
	document.getElementById("DivCarte").style.width = divCarteWidth;
	document.getElementById("DivCarte").style.height = divCarteHeight;
	document.getElementById("DivCarte").style.position = divCartePosition;
	document.getElementById("DivCarte").style.top = divCarteTop;
	document.getElementById("DivCarte").style.left = divCarteLeft;
	document.getElementsByClassName("gpMainMap")[0].style.width = mainMapWidth;
	document.getElementsByClassName("gpMainMap")[0].style.height = mainMapHeight;
	// Recentrage de la carte
	viewer.getMap().setLonLatCenter(mapCenterLon.lon, mapCenterLon.lat, mapZoom-1, false, false);
}

Et avec ça, le tour est joué

A mettre en pratique de ton coté, dis-moi si ça fonctionne bien.

[Zebulon777]

Oula !
Bon, ben y a du boulot !


Je mets ça en pratique dés que possible et je reviens.

[Zebulon777]

Bon, ben encore une fois, c'est impeccable.

Le seul truc qui se passe, c'est le petit module "4 flèches" placé dans le cartouche "Outils" qui ne suit pas le cartouche et reste donc à sa position initiale.

Le code utilisé pour le module :

Code :

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

1
2
3
var panPanelX = document.getElementById("DivCarte").clientWidth - 60;
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(panPanelX,80));

[jrenard]

J'ai oublié un petit détail pour un rendu plein écran parfait : supprimer les bordures autour de la DivCarte et du gpMainMap (sinon des bordures trop larges vont faire couper un peu la carte à droite et en bas).

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
var divCarteBorder;
var mainMapBorder;

...

function enlargeWindow() {
	...
	divCarteBorder = window.getComputedStyle(document.getElementById('DivCarte')).border;
	mainMapBorder = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).border;
	...
	document.getElementById("DivCarte").style.border = "none";
	document.getElementsByClassName("gpMainMap")[0].style.border = "none";
	...
}


function enlargeWindowBack() {
	...
	document.getElementById("DivCarte").style.border = divCarteBorder;
	document.getElementsByClassName("gpMainMap")[0].style.border = mainMapBorder;
	...
}

Pour le positionnement du pavé 4 flèches, cela pourra être géré sans difficulté, je reviens très vite à ce sujet.

[jrenard]

Pour le pavé 4 flèches, on va modifier sa mise en forme : son positionnement ne sera pas forcé à la création, mais défini après coup avec un positionnement en X défini de façon relative pour rester toujours à la même distance du bord droit :

Code :

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

1
2
3
viewer.getMap().addControl(new Geoportal.Control.PanPanel());
document.getElementsByClassName('gpControlPanPanel')[0].style.top = '80px';
document.getElementsByClassName('gpControlPanPanel')[0].style.left = 'calc(100% - 54px)';

A noter que pour retomber sur le même positionnement qu'avant les 60px sont devenus 54px, simplement parce que la référence n'est pas prise exactement au même point selon qu'on définisse le positionnement à la création du contrôle ou via le CSS de l'élément HTML

[Zebulon777]

Impec !
Et bah voila, encore un problème de résolu.
Merci beaucoup Jérémy.

[Viglino]

Bonjour,

Une autre solution : plutôt que de modifier le style de la carte, passer pas une classe et stocker le style directement dans le css.
Il suffit alors de reprendre la classe par défaut pour que tout rentre dans l'ordre (avec un petit rendermap pour rafraichir l'affichage).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function toggleFullMap(viewer)
{   var map = viewer.getMap();
    // Supprimer la classe plein ecran pour revenir à la normale
    if (OpenLayers.Element.hasClass(map.div, 'olFullPageMap'))
    {   OpenLayers.Element.removeClass(map.div, "olFullPageMap");
    }
    // Ajouter la classe plein ecran pour passer en plein écran
    else 
    {   OpenLayers.Element.addClass(map.div, "olFullPageMap");
    }
    map.render(map.div);
}

Dans le css, il faut déclarer une classe olFullPageMap qui affichera en plein ecran (position fixed)

Code :

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

1
2
3
4
5
6
7
8
9
div.olFullPageMap
{  position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: auto !important;
    width: auto !important;
}

@+