Discussion :

[Duriv73]

Bonjour à tous

J'ai développé une petite application d'affichage d'une carte Géoportail en utilisant l'extension pour OpenLayer 3, à partir de la doc trouvée sur le site de l'IGN Pro.

1) En testant sur une page HTML en localhost, tout est OK.

2) En intégrant le HTML et le Javascript sur une page de mon site web (sous WordPress), tout est OK également :
http://garsyves.fr/aaa-essai-carte-geoportail-ext-ol3/

3) En modifiant la page pour obtenir un affichage de la carte en Modal, ça se gâte : J'ai un affichage aléatoire des layers (c'est à dire que les cartes s'affichent ... rârement !).
Et encore, j'ai allégé à mort en ne conservant que 2 des 4 layers Géoportail initiaux du projet !
http://garsyves.fr/aaa-carte-geoportail-ext-ol3-modal/

A noter que les contrôles, quant à eux, s'affichent tout à fait normalement et systématiquement, ce qui signifie que la fonction "go" est bien déclenchée par le code

Code :

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

1
2
3
4
5
6
Gp.Services.getConfig({
	//-- Clé d'accès API Géoportail
    apiKey:"lnj8xymtjj1yxdtp7f5vtr33",
    onSuccess: go
});

Voici l'intégralité du script :

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
69
70
71
72
73
74
75
76
77
78
<script>

function go() {

    var osmLyr = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            osmLyr = new ol.layer.Tile({  // ----- Couche Open Street Map
				source: new ol.source.OSM()
			});			
			
			new ol.layer.Tile({
				source: new ol.source.GeoportalWMTS({
					layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
				}),
			}),		
			new ol.layer.Tile({
					source: new ol.source.GeoportalWMTS({
						layer: "ORTHOIMAGERY.ORTHOPHOTOS",
					}),
				opacity: 0.7
			}),		
        ],

        view: new ol.View({
            center: ol.proj.transform([2.350,48.853],"EPSG:4326","EPSG:3857"), // en proj. EPSG:3857 par défaut
			zoom: 12,
        })
		
    });    
    var lsControl = new ol.control.LayerSwitcher({
        layers : [{
            layer: osmLyr,
            config: {
                title: "OpenStreet Map",
                description: "Couche OpenStreet Map",
            }
        }], 
        options : {
            collapsed: true
        }
    });
    map.addControl(lsControl);
	
	var mpControl = new ol.control.GeoportalMousePosition({
        collapsed: false,
        systems : [
            {
                crs : "EPSG:4326",
                label : "Géographiques",
                type : "Geographical"
            },
	   {
                crs : 'EPSG:4559',
                label : "UTM 20 Nord",
                type : "Metric"
            },
        ],
        units : ["DEC","DMS","M",]
    });
    map.addControl(mpControl);
	
};

Gp.Services.getConfig({
    //-- Clé d'accès API Géoportail
    apiKey:"lnj8xymtjj1yxdtp7f5vtr33",
    onSuccess: go
});

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";

</script>

Le problème serait-il un problème de délai trop long au chargement des couches ? Quelqu'un aurait une solution ?

[lboulanger]

Bonjour,

Dans votre page, je constate en effet que la carte ne s'affiche pas au chargement de la page, mais elle s'affiche (ainsi que les couches) dès que l'on modifie les dimensions de la fenêtre (réduction / agrandissement de la fenêtre du navigateur, ou ouverture de la console de développement par exemple).

En regardant de plus près, on constate que la div <canvas> dans laquelle les couches sont sensées s'afficher est en "display:none" tant que la fenêtre n'est pas redimensionnée : c'est pour ça que rien ne s'affiche.
Les contrôles sont affichés dans une autre div (<div class="ol-overlaycontainer-stopevent">), qui s'affiche bien.

Je pense donc que ce n'est pas un problème de chargement des couches Géoportail, mais plutôt un conflit entre l'utilisation d'une fenêtre modale et l'utilisation d'un canvas pour l'affichage de la carte par OpenLayers (mais simplement à l'ouverture de la fenêtre puisque lorsqu'on redimensionne, ça fonctionne bien).
Je ne connais pas bien modal donc je n'ai vraiment pas de solution à proposer, mais il faudrait regarder si des problèmes similaires ont déjà été rencontrés.

[Duriv73]

Merci M. Boulanger.

En regardant tout ça avec les éléments que vous m'avez indiqués, effectivement c'est beaucoup moins aléatoire, surtout si l'on prends soin de supprimer l'historique du navigateur avant chaque essai.

Donc effectivement, à l'ouverture de la fenêtre modale, les couches carto ne s'affichent pas et on a bien cette (très génante) propriété [display: none] qui affecte la balise <canvas> :

Code :

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

1
2
3
4
5
6
7
8
9
<div class="modal-body">
	<div id="map">
		<div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">
			<canvas style="width: 100%; height: 100%; display: none;" class="ol-unselectable"></canvas>
			<div class="ol-overlaycontainer">
			</div>
			<div class="ol-overlaycontainer-stopevent">
                               ...

... et dès lors que l'on modifie quelque peu les dimensions de la fenêtre du navigateur, les couches carto apparaissent aussitôt, et la même ligne devient :

Code :

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

1
2
3
4
5
6
7
8
9
<div class="modal-body">
	<div id="map">
		<div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">
			<canvas style="width: 100%; height: 100%;" class="ol-unselectable" width="835" height="594"></canvas>
			<div class="ol-overlaycontainer">
			</div>
			<div class="ol-overlaycontainer-stopevent">
                               ...

Cela est évidemment lié à l'utilisation de la fenêtre modale de mon thème WordPress (AVADA), mais je ne sais pas quoi faire de ca ...
Si quelqu'un a une idée de quelque chose que je puisse faire pour empêcher cette balise <canvas> d'être affectée ainsi ... car là cela dépasse mes compétences.

Dernière minute : J'ai trouvé qq chose qui pourrait peut-être être la voie de la solution : appeler map.updateSize()
J'ai trouvé ca içi :
http://thread.gmane.org/gmane.comp.g...devel.ol3/5476

Mais je ne sais pas comment le mettre en oeuvre, càd où le mettre en oeuvre dans le script.

[Duriv73]

Bon, c'est résolu. Pas grâce à ce forum, mais c'est résolu.

Un grand merci toutefois à lboulanger, de l'IGN, qui m'a bien aidé à cerner le problème.

[lboulanger]

Bonjour,

Super si ça fonctionne maintenant
Par curiosité, est-ce bien grâce à la fonction map.updateSize() que vous avez réussi à régler le problème ?

Laurane

[Duriv73]

A la demande de Laurane Boulanger, qui m'a bien aidé, je confirme que c'est bien la fonction map.updateSize qui a solutionné le problème.

Dans mon code, après les lignes pour implémenter les contrôles, il faut ajouter :

Code :

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

1
2
3
4
5
6
7
var modal_btn = document.getElementById('kst_map_btn_2');
modal_btn.addEventListener("click",function(e){
        setTimeout(function(){
            map.updateSize();
       }, 500);
},false);

... soit un script complet :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script>
            window.onload = function () {
 
					// ------------------ Création de la carte - DÉBUT ----------------------			
				var map = new ol.Map({
					target: 'map',
					layers: [
						osmLyr = new ol.layer.Tile({
							source: new ol.source.OSM()
						}),				
					
						new ol.layer.Tile({
							source: new ol.source.GeoportalWMTS({
								layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
							}),
							opacity: 1,
						}),
			
						new ol.layer.Tile({
							source: new ol.source.GeoportalWMTS({
								layer: "ORTHOIMAGERY.ORTHOPHOTOS",
							}),
							opacity: 0.7,
						}),

					view: new ol.View({
						center: ol.proj.transform([6.800,45.523],"EPSG:4326","EPSG:3857"), // en proj. EPSG:3857 par défaut
						zoom: 14,
					})
				}); 
				// ------------------ Création de la carte - FIN ----------------------		

				// ---------- Création de contrôles et ajout à la carte - DÉBUT --------
				
				// ---- Widget de gestion de l’empilement des couches	
				var lsControl = new ol.control.LayerSwitcher({
					// paramétrage de l'affichage des couches non Géoportail (ici la couche OpenStreet Map)
					layers : [
						{
							layer: osmLyr,
							config: {
								title: "OpenStreet Map",
								description: "Couche OpenStreet Map",
							}
						},
				        ], 
					options : {
						collapsed: true
					}
				});
				map.addControl(lsControl);

				// ---- Widget Coordonnées et altitude en un point de la carte
				var mpControl = new ol.control.GeoportalMousePosition({
					collapsed: true,
					systems : [
						{
							crs : "EPSG:4326",
							label : "Géographiques",
							type : "Geographical"
						},
						{
							crs : 'EPSG:4559',
							label : "UTM 20 Nord",
							type : "Metric"
						},
					],
					units : ["DEC","DMS","M",]
				});
				map.addControl(mpControl);
	
				// ------------------ Adaptation pour fenêtre MODALE (début) ----------------------				            
				var modal_btn = document.getElementById('appel_modal_map_btn_1');
				modal_btn.addEventListener(
					"click",function(e){
							setTimeout(
								function(){
									map.updateSize();
								},
								500
							);
						},
					false,
				);	
				// ------------------ Adaptation pour fenêtre MODALE (fin) ----------------------		
		
				var infoDiv = document.getElementById("info");
				infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";				
				
            };
</script>

Voilà ! Si ca peut servir à quelqu'un ...

On peut voir le résultat en œuvre ici, sur une page "exemple" de mon site !