Problème de migration v1.3

**Julien Arcin** · 23/10/2012, 18h06

Bonjour. Il n'est pas dans mes habitudes d'appeler à l'aide sur un forum, mais je dois admettre que là je suis bloqué. J'avais créé une application pour le CNES il y a quelques mois, qui ne fonctionne plus aujourd'hui. J'ai essayé de suivre le tutorial à cette adresse (http://depot.ign.fr/geoportail/api/d...ration_js.html) mais je ne charge pas la carte de la même manière donc je ne comprends pas d'où vient le problème.

J'ai cette erreur :
TypeError: Geoportal.Catalogue.TERRITORIES[territory] is undefined (in http://api.ign.fr/geoportail/api/js/...talExtended.js)

Savez-vous d'où peut venir le problème ? J'ai quelques autres fichiers sources, faut-il envisager une réécriture complète de l'application ? Si vous avez juste quelques petites indications, ça m'aiderait beaucoup, merci

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<meta charset="UTF-8" />
<div id="carte-centre">
	<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.3/GeoportalExtended.js"></script>
	<script type="text/javascript" src="_js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript">
    <!--

		var	dimensions_carte = {
				longitude: 10,
				latitude: 0,
				zoom: 6
			}

		// -----------------------------------------------------------------------------
		// Construit une popup en HTML en fonction des différentes informations fournies
		// -----------------------------------------------------------------------------

		// -------------------
		// Initialise la carte
		// -------------------
		// the viewer variable is declared by the API through the instance parameter
		viewer= null;
		if (window.__Geoportal$timer===undefined) {
			var __Geoportal$timer= null;
		}


		function initGeoportalMap() {
			if (__Geoportal$timer!=null) {
				window.clearTimeout(__Geoportal$timer);
				__Geoportal$timer= null;
			}
			if (typeof(OpenLayers)=='undefined'              ||
				typeof(Geoportal)=='undefined'               ||
				typeof(Geoportal.Viewer)=='undefined'        ||
				typeof(Geoportal.Viewer.Default)=='undefined') {
				__Geoportal$timer= window.setTimeout('initGeoportalMap();', 300);
				return;
			}
			maCarte = new Geoportal.Viewer.Default(
				"carte-carte",
				OpenLayers.Util.extend({
					mode:'normal',
					territory:'FXX',
					// substitution of current default geoportal theme :
					loadTheme: function() {
						Geoportal.Util.setTheme('black');
						Geoportal.Util.loadCSS(Geoportal._getScriptLocation()+'theme/black/style.css','__GeoportalBlackCss__','');
						if (OpenLayers.Util.alphaHack()) {
							Geoportal.Util.loadCSS(OpenLayers._getScriptLocation()+'theme/black/ie6-style.css','__IE6GeoportalBlackCss__','');
						}
					}
				}, window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {apiKey:['xxx']}:gGEOPORTALRIGHTSMANAGEMENT)
			);

			if (!maCarte) {
				OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
			} else {
				// Proxy
				maCarte.getMap().setProxyUrl('ajax/proxy.php?url=');
				// Couches
				if (maCarte.getMap().allowedGeoportalLayers) {
					for (var i= 0; i<maCarte.getMap().allowedGeoportalLayers.length; i++) {
						var overloaded_options= null;
						var couche= maCarte.getMap().allowedGeoportalLayers[i];
						if (couche.match(/^GEOGRAPHICALGRIDSYSTEMS.MAPS/)) {// maps
							overloaded_options= {
													opacity: 1.0
							};
						} else if (couche.match(/^ORTHOIMAGERY.ORTHOPHOTOS/)) {// orthophotos
							overloaded_options= {
													visibility: false
							};
						}
						maCarte.addGeoportalLayer(couche,overloaded_options);
					}
				}
				// Destruction des différents contrôles
				for(i = 1; i < maCarte.getMap().controls.length; i++){
					var control= maCarte.getMap().controls[i];
					if(control.CLASS_NAME == "Geoportal.Control.LayerSwitcher") {
						control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.TermsOfService") {
						control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.Logo") {
						control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.Information") {
						control.destroy();
					}
				}
				var markers = new OpenLayers.Layer.Markers("Markers");

				// add print control:
				var nv= maCarte.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
				nv.addControls([new Geoportal.Control.PrintMap()]);

		   }

			// On centre la carte sur un point défini en GSW84 (lon , lat, zoom)
			// maCarte.getMap().setCenterAtLonLat(dimensions_carte.longitude, dimensions_carte['latitude'], dimensions_carte['zoom']);
        }

		// -------------------
		// Lancement
		// -------------------
		window.onload = initGeoportalMap;
      -->
   </script>
	<div id="carte-carte"></div>
</div>

**gcebelieu** · 23/10/2012, 18h44

Bonjour,

le probleme semble venir du fait que la fonction initGeoportalMap est appelée alors que le chargement de la configuration de l'API n'est pas terminé. Il faut mettre une étape intermédiare comme ceci :

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

   function initGeoportalMap() {
     // votre code de chargement de la carte...
   }

    function loadAPI() {
        // on attend que les classes soient chargées
        if (checkApiLoading(loadAPI,['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
            return;
        }

        // on charge la configuration de la clef API, puis on charge l'application
        Geoportal.GeoRMHandler.getConfig(['CLEF_API'], null, null, {
            onContractsComplete: initGeoportalMap
        });
    }

    window.onload = loadAPI ;

en gros, initGeoportalMap ne sera appelée que lorsque l'événement contractsComplete sera déclenché à savoir lorsque la configuration de la carte en fonction de votre clef sera terminée.

**Julien Arcin** · 23/10/2012, 18h52

Merci de votre réponse.
En fouillant la doc, j'avais effectivement trouvé cette solution. Mais j'ai un souci, il me dit que la fonction "checkApiLoading" n'est pas définie.

J'ai mis une version test en ligne ici : http://sadhu.fr/ign/carte2.php

**Mides** · 23/10/2012, 20h21

Bonsoir,

dans ton source tu appelles cette fonction, "checkApiLoading", mais elle n'est pas définie dans ton code.

Rajouter ceci :

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
if (window.__Geoportal$timer===undefined)
{
	var __Geoportal$timer= null;
}

function checkApiLoading(retryClbk,clss)
{
	if (__Geoportal$timer!=null)
	{
		window.clearTimeout(__Geoportal$timer);
		__Geoportal$timer= null;
	}
	var f;
	for (var i=0, l= clss.length; i<l; i++)
	{
		try {
			f= eval(clss[i]);
		}
		catch (e)
		{
			f= undefined;
		}
		if (typeof(f)==='undefined')
		{
			__Geoportal$timer= window.setTimeout(retryClbk, 300);
			return false;
		}
	}
	return true;
}

**Julien Arcin** · 24/10/2012, 00h17

Ok ça remarche presque, c'est super merci à vous

Il y a juste un souci, c'est que le fond de carte ne se charge pas, il reste gris (cf screenshot en pièce jointe).

Firebug ne me renvoie aucune erreur Javascript.

Voici le code, à priori l'erreur doit se trouver dans la fonctions initGeoportalMap. La clé API est bonne, j'ai simplement mis un x à la place ici.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<div id="carte-centre">
	<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"></script>
	<script type="text/javascript" src="_js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript">
    <!--
		var	dimensions_carte = {
				longitude: 10,
				latitude: 0,
				zoom: 6
			}

		// -----------------------------------------------------------------------------
		// Construit une popup en HTML en fonction des différentes informations fournies
		// -----------------------------------------------------------------------------
		
		function constructPopupHTML(id, titre, lieu, urlVignette, urlImage, larg, haut) {
			inf1 = urlImage.split("_");
			AlbumId=inf1[1];
				popupHTML =
					"<table id=\"petitcadre\" padding=2>" +
						"<tr >" +
							"<td align=center valign=center style=\"background-color:#5c5c5c;\" >" +
								"<img src=\"" + urlVignette + "\" alt=\"" + titre + "\" width=\"" + larg + "\" height=\"" + haut + "\" />" +
							"</td>" +
							"<td style=\"font-size: x-small\" valign=top>" +
								"<strong>Titre :</strong><br />" + titre + "<br />" +
								"<strong>Lieu :</strong><br />" + lieu + "<br />" +
								"<a href=\"index.php?opt=visualbum&id=" + AlbumId + "\">Voir l'album</a>" +
								
							"</td>" +
						"</tr>" +
					"</table>";
			return(popupHTML);
		}


		// -------------------------------------------------------------------------
		// Récupère les marqueurs et les place sur le OpenLayers.Layer.Markers layer
		// -------------------------------------------------------------------------
		function getMarkers(layer) {
			// Propriétés pour chaque marqueur
			var size = new OpenLayers.Size(25,25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var redIcon = new OpenLayers.Icon('_images/red-dot.png', size, offset);
			var blueIcon = new OpenLayers.Icon('_images/blue-dot.png', size, offset);

			// Récupération et placement avec Ajax et JSon
			// -------------------------------------------
			$.getJSON('ajax/photos.php', function(data) {

				// On récupère les dimensions de la cart : latitude, longitude et zoom
				dimensions_carte = data.dimensions;
				maCarte.getMap().setCenterAtLonLat(dimensions_carte['longitude'], dimensions_carte['latitude'], dimensions_carte['zoom']);

				$.each(data.tabMarkers, function(i, tabMarkers) {
					var longitude = tabMarkers["longitude"];
					var latitude = tabMarkers["latitude"];
					var coupCoeur = tabMarkers["coup-de-coeur"];
					var contenuPopup = constructPopupHTML(tabMarkers["id"],tabMarkers["titre"],tabMarkers["lieu"],tabMarkers["url-vignette"],tabMarkers["url-image"],tabMarkers["larg"],tabMarkers["haut"]);

					lonLat = new OpenLayers.LonLat(longitude,latitude)
						.transform(
						new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
						maCarte.getMap().getProjectionObject() // to Spherical Mercator Projection
					);
					if(coupCoeur == "true") {
						icon_clone = redIcon.clone();
					} else {
						icon_clone = blueIcon.clone();
					}
					marker = new OpenLayers.Marker(lonLat,icon_clone);

					popup = new OpenLayers.Popup.Anchored(null,lonLat,new OpenLayers.Size(200,110),contenuPopup,icon_clone,true);
					maCarte.getMap().addPopup(popup);
					popup.hide();

					marker.events.register("mousedown", popup,
						function () {
							this.toggle();
						}
					);

					layer.addMarker(marker);
				});

			});

		}


		// -------------------
		// Initialise la carte
		// -------------------
		// the viewer variable is declared by the API through the instance parameter
		function initGeoportalMap() {
			maCarte = new Geoportal.Viewer.Default(
				"carte-carte",
				OpenLayers.Util.extend({
					mode:'normal',
					territory:'FXX',
					// substitution of current default geoportal theme :
					loadTheme: function() {
						Geoportal.Util.setTheme('black');
						Geoportal.Util.loadCSS(Geoportal._getScriptLocation()+'theme/black/style.css','__GeoportalBlackCss__','');
						if (OpenLayers.Util.alphaHack()) {
							Geoportal.Util.loadCSS(OpenLayers._getScriptLocation()+'theme/black/ie6-style.css','__IE6GeoportalBlackCss__','');
						}
					}
				})
			);
			if (!maCarte) {
				OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
			} else {
				// Proxy
				maCarte.getMap().setProxyUrl('ajax/proxy.php?url=');
				// Suppression des couches inutiles
				if (maCarte.getMap().allowedGeoportalLayers) {
					for (var i= 0; i<maCarte.getMap().allowedGeoportalLayers.length; i++) {
						var overloaded_options= null;
						var couche= maCarte.getMap().allowedGeoportalLayers[i];
						if (couche.match(/^GEOGRAPHICALGRIDSYSTEMS.MAPS/)) {// maps
							overloaded_options= {
								opacity: 1.0
							};
						} else if (couche.match(/^ORTHOIMAGERY.ORTHOPHOTOS/)) {// orthophotos
							overloaded_options= {
								visibility: false
							};
						}
						maCarte.addGeoportalLayer(couche,overloaded_options);
					}
				}
				// Destruction des différents contrôles
				for(i = 1; i < maCarte.getMap().controls.length; i++){
					var control= maCarte.getMap().controls[i];
					if(control.CLASS_NAME == "Geoportal.Control.LayerSwitcher") {
						control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.TermsOfService") {
						//control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.Logo") {
						control.destroy();
					} else if(control.CLASS_NAME == "Geoportal.Control.Information") {
						control.destroy();
					}
				}
				var markers = new OpenLayers.Layer.Markers("Markers");

				// Impression
				var nv= maCarte.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
				nv.addControls([new Geoportal.Control.PrintMap()]);
		   }

			// Récupération des marqueurs
			getMarkers(markers);

			// On centre la carte sur un point défini en GSW84 (lon , lat, zoom)
			// maCarte.getMap().setCenterAtLonLat(dimensions_carte.longitude, dimensions_carte['latitude'], dimensions_carte['zoom']);

			// Ajout de la couche Markers à la carte
			maCarte.getMap().addLayer(markers);
        }
		
		if (window.__Geoportal$timer===undefined)
		{
			var __Geoportal$timer= null;
		}

		function checkApiLoading(retryClbk,clss)
		{
			if (__Geoportal$timer!=null)
			{
				window.clearTimeout(__Geoportal$timer);
				__Geoportal$timer= null;
			}
			var f;
			for (var i=0, l= clss.length; i<l; i++)
			{
				try {
					f= eval(clss[i]);
				}
				catch (e)
				{
					f= undefined;
				}
				if (typeof(f)==='undefined')
				{
					__Geoportal$timer= window.setTimeout(retryClbk, 300);
					return false;
				}
			}
			return true;
		}

	    function loadAPI() {
	        // on attend que les classes soient chargées
	        if (checkApiLoading(loadAPI,['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
	            return;
	        }

	        // on charge la configuration de la clef API, puis on charge l'application
	        Geoportal.GeoRMHandler.getConfig(['x'], null, null, {
	            onContractsComplete: initGeoportalMap
	        });
	    }

    window.onload = loadAPI ;

		// -------------------
		// Lancement
		// -------------------
		window.onload = loadAPI;
      -->
   </script>
	<div id="carte-carte"></div>
</div>

**mga_geo** · 24/10/2012, 07h44

Est-il possible d'avoir l'url de cet essai ?

**Julien Arcin** · 24/10/2012, 10h14

Oui bien sûr, vous pouvez le voir ici : http://sadhu.fr/ign/carte2.php

J'ai exactement le même comportement qu'en local. Par contre, pas sûr que la clé API soit fonctionnelle sur ce domaine :-/

**mga_geo** · 24/10/2012, 12h25

Il doit manquer dans les options lors de l'appel à Geoportal.Viewer.Default la gestion des droits:

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
      var options = {
					// substitution of current default geoportal theme :
					loadTheme: function() {
						Geoportal.Util.setTheme('black');
						Geoportal.Util.loadCSS(Geoportal._getScriptLocation()+'theme/black/style.css','__GeoportalBlackCss__','');
						if (OpenLayers.Util.alphaHack()) {
							Geoportal.Util.loadCSS(OpenLayers._getScriptLocation()+'theme/black/ie6-style.css','__IE6GeoportalBlackCss__','');
						}
					}
      };
      options.mode = 'normal';
      options.territory = 'FXX';
      options.nameInstance = 'viewer';
      OpenLayers.Util.extend(options, gGEOPORTALRIGHTSMANAGEMENT || {});
			maCarte = new Geoportal.Viewer.Default(
				"carte-carte",
				options
			);

**gcebelieu** · 24/10/2012, 12h37

visiblement, il n'y a aucune couche dans la propriété allowedGeoportalLayers. Cela est du au fait que vous ne passez pas la clef lors de la création du viewer.
Je vous invite à écrire (en prenant exemple sur cet exemple):

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
maCarte = new Geoportal.Viewer.Default(
				"carte-carte",
				OpenLayers.Util.extend({
					mode:'normal',
					territory:'FXX',
					// substitution of current default geoportal theme :
					loadTheme: function() {
						Geoportal.Util.setTheme('black');
						Geoportal.Util.loadCSS(Geoportal._getScriptLocation()+'theme/black/style.css','__GeoportalBlackCss__','');
						if (OpenLayers.Util.alphaHack()) {
							Geoportal.Util.loadCSS(OpenLayers._getScriptLocation()+'theme/black/ie6-style.css','__IE6GeoportalBlackCss__','');
						}
					}
				},
window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':'xxx'} : gGEOPORTALRIGHTSMANAGEMENT
)
			);

**Julien Arcin** · 24/10/2012, 14h10

Génial, ça marche à nouveau, merci à tous !

Il me reste deux petites questions. La première, c'est que la carte ne se centre pas malgré un setCenterLonLat ( ici : http://cnesobservatoire-cosmothropos....php?opt=carte et ligne 170). Enfin, elle est centrée au début, puis après avoir récupéré tous les marqueurs en JSon elle se met en vue "monde". Ce comportement est-il normal ?

Ma dernière question, c'est de savoir s'il est possible de cacher les contrôles du bas de la carte (Google Mercator & compagnie).

Voilà et merci encore

**Mides** · 24/10/2012, 14h13

Bonjour,

on a ce message :

"NetworkError: 403 Forbidden - http://gpp3-wxs.ign.fr/u4pvn3mqowplgdqa6cbxg9t0/geoportail/r/wms?LAYERS=GEOGRAPHICALGRIDSYSTEMS.MAPS&EXCEPTIONS=text%2Fxml&FORMAT=image%2Fpng&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG%3A3857&BBOX=-1206516.191319523,5273498.030973456,1728665.6948312456,7229062.962621405&WIDTH=1200&HEIGHT=799"

<ExceptionReport><Exception exceptionCode="MissingRights">Wrong referer</Exception></ExceptionReport>

Cette clé est elle valide pour le développement ou la production ?

[edit]Oups, les messages on dû se croiser.

**Mides** · 24/10/2012, 14h22

A la ligne 255 :

Code :

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

maCarte.getMap().setCenterAtLonLat(dimensions_carte.longitude, dimensions_carte.latitude, dimensions_carte.zoom);

tu as une valeur de dimensions_carte.zoom qui est à 1

Peut être là ?

**Julien Arcin** · 24/10/2012, 14h40

Effectivement, c'était pas à la ligne 255 mais il y avait un setCenterAtLonLat qui trainait ailleurs.

J'ai arrangé ça, il me reste à enlever les contrôles du bas et on est bons

Vous avez une idée pour ça ?

**mga_geo** · 24/10/2012, 14h42

Quelque chose comme cela:

Code :

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

1
2
3
       maCarte.setInformationPanelVisibility(false);
       maCarte.setLayersPanelVisibility(false);

http://mga.alwaysdata.net/geoportail...les/sadhu.html

**Julien Arcin** · 24/10/2012, 16h31

Parfait, l'affichage des cartes remarche sur la partie front-office. Il reste néanmoins un petit problème. Sur la partie administration, on peut positionner des marqueurs et faire une recherche de localisation.

J'ai épuré pour sortir une version d'exemple ici : http://cnesobservatoire-cosmothropos...oints-test.php

Quand on fait une recherche en cliquant sur les jumelles à droite dans la barre d'outils, ça marche bien. Mais quand on essaye de faire une recherche à partir du champ texte, il y a un mauvais retour :

Code :

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

OpenLayers.Protocol.Script.registry.regId2({"http":{"status":403,"error":"<ExceptionReport><Exception exceptionCode="MissingRights">No rights for this ressource or ressource does not exist</Exception></ExceptionReport>"}, "xml":null})

Vous avez une idée ?