[Extension Geoportail pour leaflet] problème de connexion à Geoportail.

**apprentieSIGWEB11** · 15/03/2018, 08h41

Bonjour,
Je suis apprentie dans une cellule SIG d'un Conseil Dep, et j’aimerais me servir de l’outil « Barre de recherche » de l’extension Geoportail pour leaflet. Apres avoir fait la demande du géoservice « N°2 - Utilisation des Ressources Géoportail - Utilisateur final Grand Public - Service public ou recherche/enseignement »et avoir obtenue la clé d’accès j’ai suivie le tutoriel avec attention. Pour autant une erreur subsiste(WARNING : The 'apiKey' parameter is missing, and the contract key configuration has not been loaded, so impossible to check yours rights !) qui semble provenir de la clé . Pouvais vous m’aider merci.

Le code html :

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
 
<html >
       <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
             <title>test leaflet ign</title>
             
              <!-- mon css -->
             <link rel="stylesheet" href="dist/leaflet/leaflet.css"/>
             <link rel="stylesheet" href="dist/plugin/leaflet_ign/GpPluginLeaflet.css" />
             <link rel="stylesheet" href="dist/css/main.css"/>
             
             
             
       </head>
       <body>
             
             
             <div id="viewerDiv"></div>
             
             
             <!--scripts here--> 
             
             <script src="dist/leaflet/leaflet.js"></script>
            <script src="dist/plugin/leaflet_ign/GpPluginLeaflet.js"></script>
            <script src="dist/js/mainv1.js"></script>             
       </body>
</html>

Code JS :

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
//javascript here

var map = L.map("viewerDiv").setView([43.1306 , 2.4242], 9) ;


var ign = L.tileLayer(
            'https://wxs.ign.fr/95lyjqk2htkhpun5cr3z6lx/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal',
            {
                minZoom : 0,
                maxZoom : 18,
                tileSize : 256,
                attribution : "IGN-F/Géoportail"
            }).addTo(map);
   

var osm = L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    id: 'OSM', attribution: ""
});



window.onload = function () {
                Gp.Services.getConfig({
                    apiKey:'3khfvdmyo297hwxvm6o2c53',
                    onSuccess: function (response) {
                        
                    }
                });
            }






  // Création et ajout du LayerSwitcher à la carte

var baseMaps = {
    "ign": ign,
    "osm": osm
    
};


//ligne pour ajouter mon objet baseMaps dans ma carte map
L.control.layers(baseMaps).addTo(map);      

// barre de recherche
    
var searchCtrl = L.geoportalControl.SearchEngine({});
map.addControl(searchCtrl);

le message d'erreur.
Nom : Capture.PNG
Affichages : 726
Taille : 107,9 Ko

Merci pour votre aide.

**lboulanger** · 15/03/2018, 17h01

Bonjour,

En effet, le chargement de la configuration de la clé s'effectue dans la fonction Gp.Services.getConfig que vous appelez bien...mais au milieu de votre code, sans la lier au reste.
L'appel aux fonctionnalités de l'extension doit être conditionné par le succès de cette fonction : votre code (création de la map, ajout de couches) doit donc être appelé dans la fonction "onSuccess", de la manière suivante par exemple (j'ai repris l'ensemble de votre code JavaScript) :

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
window.onload = function () {
   Gp.Services.getConfig({
	   apiKey:'3khfvdmyo297hwxvm6o2c53',
	   onSuccess: function (response) {
		   
		   var map = L.map("viewerDiv").setView([43.1306 , 2.4242], 9) ;

				var ign = L.tileLayer(
				   'https://wxs.ign.fr/95lyjqk2htkhpun5cr3z6lx/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal',
				   {
					   minZoom : 0,
					   maxZoom : 18,
					   tileSize : 256,
					   attribution : "IGN-F/Géoportail"
				   }).addTo(map);

				var osm = L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				   id: 'OSM', attribution: ""
				});

			// Création et ajout du LayerSwitcher à la carte
				var baseMaps = {
				   "ign": ign,
				   "osm": osm

				};

				//ligne pour ajouter mon objet baseMaps dans ma carte map
				L.control.layers(baseMaps).addTo(map);

				// barre de recherche
				var searchCtrl = L.geoportalControl.SearchEngine({});
				map.addControl(searchCtrl);
	   }
   });
}

Remarques :

vous utilisez deux clés différentes : une pour l'url de la couche WMTS, et une pour le chargement de la configuration (Gp.Services.getConfig)
il semblerait de plus que ces clés soient invalides

**apprentieSIGWEB11** · 16/03/2018, 09h18

Merci cela marche sur une carte simple comme sur le code ci-dessus. Mais quand je l'integre sur un code plus long et complexe cela me met une erreur "GpPluginLeaflet.js:138 GET http://wxs.ign.fr/3khfvdmyo297hwxvm6...k1521192705950 net::ERR_ABORTED". J'avoue que je ne comprend pas cette erreur... Merci pour votre aide.

Nom : Capture 2.PNG
Affichages : 598
Taille : 5,4 Ko

Nom : Capture 2.PNG
Affichages : 598
Taille : 5,4 Ko

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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
window.onload = function () {

   Gp.Services.getConfig({

	   apiKey:'3khfvdmyo297hwxvm6o2c53',

	   onSuccess: function (response) {

//la carte
var mapCenter = [43.1306 , 2.4242];

var map = L.map('map',{
	
	//home
	defaultExtentControl: true,
	center: mapCenter,
  	zoom: 9,
	//fullscreen
	  fullscreenControl: true,
	  fullscreenControlOptions: {
    	position: 'topleft'
  }
});


//les couche



	var baseLayers = [
	{
		active: true,
		name: "OpenStreetMap",
		layer: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
	},
	{
		name: "Carte IGN",
		layer: L.tileLayer(
            "https://wxs.ign.fr/95lyjqk2htkhpun5cr3zu6lx/geoportail/wmts?" +
                                                                "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
                                                                "&STYLE=normal" +
                                                                "&TILEMATRIXSET=PM" +
                                                                "&FORMAT=image/jpeg"+
                                                                "&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD"+
                                                                "&TILEMATRIX={z}" +
                                                                "&TILEROW={y}" +
                                                                "&TILECOL={x}",{minZoom : 0,
                                                                maxZoom : 18,
                                                                opacity : 0.5,
                                                                attribution : "IGN-F/Geoportail",
                                                                tileSize : 256 // les tuiles du Géooportail font 256x256px
                                                                })
	},
	{
		
		name: "ORTHOPHOTOS_IGN",
		layer: L.tileLayer
		('https://wxs.ign.fr/95lyjqk2htkhpun5cr3zu6lx/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal',
            {
                minZoom : 0,
                maxZoom : 18,
                tileSize : 256,
                attribution : "IGN-F/Géoportail"
            })
	}
	,{
		name: "Hike and bike",
		layer: L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png')
	}
	
];





// MASQUE AUTOUR DE L AUDE ----------------------------------------------------------------

	var masquegeojson = L.geoJson(masque,{         // appel du masque autour de l'Aude
		style:{
			weight: 1,
			opacity: 1,
			color: '#A3B2B8',
			fillOpacity: 0.5
		}
	}).addTo(map);

		

// geojson des trace veloroute ----------------------------------------------------------------
	
	//popup geojson

		function onEachtrace(feature, layer) {
    
		    var popupContent="";
		   if (feature.properties && feature.properties.nom) {
		        popupContent += "Voie verte : " + feature.properties.nom + "<br/>";
		   }
		   if (feature.properties && feature.properties.couleur) {
		        popupContent += " Marquage : " + feature.properties.couleur + "<br/>";
		   }
		   layer.bindPopup(popupContent);
		}
		
		//style affichage thématique diferentiation des centier suivant leurs noms
		var tracestyle = L.geoJson(trace, {
		    style: function(feature) {
		        switch (feature.properties.nom) {
		            case 'Castelnaudary \/ Saint-Papoul': return {color: "#ff0000", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'V81 - VÃ©loroute du PiÃ©mont PyrÃ©nÃ©en':   return {color: "#FFC300", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'Puivert \/ Puilaurens':   return {color: "#FF5733", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'Du Tarn Ã* Couiza':   return {color: "#900C3F", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'TrÃ¨bes \/ HÃ©rault':   return {color: "#0000ff", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'Marseillette \/ Gorges de Galamus':   return {color: "#6C3483", weight: 2,opacity: 2,fillOpacity: 3};
		            case 'Roubia \/ Fontfroide':   return {color: "#27AE60", weight: 2,opacity: 2,fillOpacity: 3};
		            
		        }
		        
		    },
		//appel de la fonction
		onEachFeature: onEachtrace
		
		}).addTo(map);
	
// geojson des segment bis ----------------------------------------------------------------			
	
		//popup geojson

		function onEachseg(feature, layer) {
    
		    var popupContent="";
		   if (feature.properties && feature.properties.ID_ITI) {
		        popupContent += "Voie verte : " + feature.properties.ID_ITI + "<br/>";
		   }
		   if (feature.properties && feature.properties.AVANCEMENT) {
		        popupContent += " Avancement : " + feature.properties.AVANCEMENT + "<br/>";
		   }
		   layer.bindPopup(popupContent);
		}
		
		//style affichage thématique diferentiation des centier suivant leurs noms
		var segbisstyle = L.geoJSON(segbis, {
		    style: function(feature) {
		        switch (feature.properties.ID_ITI) {
		            case 'V84 - Rigole de la plaine': return {color: "#F7DC6F", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'V80 - Le Canal des deux mers à vélo':   return {color: "#f39c12", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'La Méditerranée à vélo':   return {color: "#e74c3c",weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'V84-1 - Voie verte des Pays Cathares :':   return {color: "#5b2c6f", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'Du canal du midi à Montségur':   return {color: "#262c6a", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'Axe Littoral - La Narbonaise':   return {color: "#6A262C", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case 'V81 - Véloroute du Piémont Pyrénéen':   return {color: "#2C6A26", weight: 3,opacity: 2,fillOpacity: 0, dashArray:'8'};
		            case null:   return {color: "#EB8AF1", weight: 0,opacity: 0,fillOpacity: 0, dashArray:'8'};
		            
		        }
		        
		    },
		//appel de la fonction
		onEachFeature: onEachseg
		
		}).addTo(map);
		

	

//gestion des couches avec legende
	var overLayers = [
	{

		name: "Castelnaudary \/ Saint-Papoul"+'<br />'
		+"Veloroute du Piemont Pyreneen"+'<br />'
		+"......Puivert \/ Puilaurens"+'<br />'
		+"......Du Tarn Ã* Couiza"+'<br />'
		+"......Trabes \/ Herault"+'<br />'
		+"......Marseillette \/ Gorges de Galamus"+'<br />'
		+"......Roubia \/ Fontfroide"+'<br />',
		icon:'<img src="dist/plugin/leaflet-panel-layers-master/images/icons/veloroute5.png" width="20px"/>',
		layer: tracestyle
	},	
	{
		
		name: "Rigole de la plaine"+'<br />'
		+"Le Canal des deux mers à vélo"+'<br />'
		+"......La Méditerranée à vélo"+'<br />'
		+"......Voie verte des Pays Cathares"+'<br />'
		+"......Du canal du midi à Montségur"+'<br />'
		+"......Axe Littoral - La Narbonaise"+'<br />'
		+"......Véloroute du Piémont Pyrénéen"+'<br />',
		icon: '<img src="dist/plugin/leaflet-panel-layers-master/images/icons/segbis.png" width="20px"/>',
		layer: segbisstyle
	}
];



map.addControl( new L.Control.PanelLayers(baseLayers,overLayers) );

//Faire fonctioner centerMap
/**
 * @function centerMap
 * @param {decimal} lat
 * @param {decimal} lng
 */

 function centerMap (lat,lng){
 	var lat = parseFloat(lat);
 	var lng = parseFloat(lng);
 	
 	//map.setView([lat, lng]);
 	map.flyTo([lat, lng],9);
 	
 }

// les evenement sont declanchés en entrant ou en sortant en plein ecran..

map.on('enterFullscreen', function(){
  console.log('entered fullscreen');
});

map.on('exitFullscreen', function(){
  console.log('exited fullscreen');
});

//recherche
// barre de recherche

				var searchCtrl = L.geoportalControl.SearchEngine({});

				map.addControl(searchCtrl);


 		
		}

   });

}

**lboulanger** · 16/03/2018, 15h05

Bonjour,

Comme je le précisais au dessus : les clés que vous utilisez ne sont pas valides, d'où l'erreur que vous rencontrez au chargement de la page.
Pour obtenir une clé de contrat permettant d'utiliser les ressources du Géoportail, cela se passe sur le site professionnels.ign.fr : http://professionnels.ign.fr/ign/contrats. Vous pourrez alors sélectionner les ressources que vous souhaitez utiliser.

Laurane

[Extension Geoportail pour leaflet] problème de connexion à Geoportail.

IGN API Géoportail

Discussions similaires

Partager

Partager