Discussion :

[babsolune]

Bonjour

Nous rencontrons un léger soucis sur l'utilisation du zoom sur les carte IGN, depuis la mise à jour de leaflet (0.0.7 -> 1.0.2).
Lorsqu'on effectue un zoom sur la carte, certaines parties ne se chargent pas (la console navigateur renvoie un 404 not found). Il suffit de changer de type de carte pour retrouver un affichage complet, mais ce n'est pas très pratique.
Plusieurs cartes sont utilisées (Google, OpenStreetMap et IGN) mais seules les cartes IGN présentent ce problème.

Débutant en javascript et après quelques recherches infructueuses, j'avoue ne pas trop comprendre et me tourne donc vers vous dans l'espoir d'une solution

Site : http://www.vtt64.com/tracks

code utilisé :

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
jQuery(document).ready(function() {
	L.Icon.Default.imagePath = '{PATH_TO_ROOT}/tracks/templates/images/';
        
	var map = new L.Map('map');
	var osm = new L.TileLayer('http://\{s\}.tile.openstreetmap.org/\{z\}/\{x\}/\{y\}.png');
	var ocm = new L.TileLayer('http://\{s\}.tile.thunderforest.com/cycle/\{z\}/\{x\}/\{y\}.png');
	var olm = new L.TileLayer('http://\{s\}.tile.thunderforest.com/landscape/\{z\}/\{x\}/\{y\}.png');
	var otm = new L.TileLayer('http://\{s\}.tile.thunderforest.com/transport/\{z\}/\{x\}/\{y\}.png');
	var oom = new L.TileLayer('http://\{s\}.tile.thunderforest.com/outdoors/\{z\}/\{x\}/\{y\}.png');
	var gglt = new L.gridLayer.googleMutant({type: 'terrain'}) ;
	var ggls = new L.gridLayer.googleMutant({type: 'satellite'}) ;
	var gglr = new L.gridLayer.googleMutant({type: 'roadmap'}) ;
	var gglh = new L.gridLayer.googleMutant({type: 'hybrid'}) ;
	/* IGN POWER ! */
	// You can get a key here: http://api.ign.fr/accueil (french)
	var ignKey = '**************';

	/** Define the layer type
	 *  GEOGRAPHICALGRIDSYSTEMS.MAPS
	 *  GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE
	 *  GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD
	 *	ORTHOIMAGERY.ORTHOPHOTOS
	 */
	//var layerIGNScanStd = 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD';

	// The WMTS URL
	var url = 'http://wxs.ign.fr/' + ignKey + '/geoportail/wmts';
	var copy = '&copy; <a href="http://www.ign.fr">IGN</a>';

	var ign0 = new L.TileLayer.WMTS(
		url ,
		{
			layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
			style: 'normal',
			tilematrixSet: 'PM',
			format: 'image/jpeg',
			attribution: copy
		}
	);
	var ign1 = new L.TileLayer.WMTS(
		url ,
		{
			layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE',
			style: 'normal',
			tilematrixSet: 'PM',
			format: 'image/jpeg',
			attribution: copy
		}
	);
	var ign2 = new L.TileLayer.WMTS(
		url ,
		{
			layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD',
			style: 'normal',
			tilematrixSet: 'PM',
			format: 'image/jpeg',
			attribution: copy
		}
	);
	var ign3 = new L.TileLayer.WMTS(
		url ,
		{
			layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
			style: 'normal',
			tilematrixSet: 'PM',
			format: 'image/jpeg',
			attribution: copy
		}
	);
	/* IGN POWER ! */
		
		
	// Icon/difficuly
		var BikeIcon = L.Icon.extend({
			options: {
				shadowUrl: PATH_TO_ROOT+'/tracks/templates/images/bike-shadow.png',
				iconSize: [32, 32],
				shadowSize: [40, 40],
				iconAnchor: [5, 30],
				shadowAnchor: [0, 45],
				popupAnchor:  [5, -30]
			}
		});
		var icon_1 = new BikeIcon({iconUrl: PATH_TO_ROOT+'/tracks/templates/images/green.png'});
			icon_2 = new BikeIcon({iconUrl: PATH_TO_ROOT+'/tracks/templates/images/blue.png'});
			icon_3 = new BikeIcon({iconUrl: PATH_TO_ROOT+'/tracks/templates/images/red.png'});
			icon_4 = new BikeIcon({iconUrl: PATH_TO_ROOT+'/tracks/templates/images/black.png'});
		
		L.icon = function (options) {
			return new L.Icon(options);
		};
		
		// liste des markers
		var markers = new L.FeatureGroup();
		var marker = new Array();
		var markersData = [
			# START tracks #
			[
				'<div class="left"><a href="{tracks.U_TRACK_LINK}">{tracks.JS_TITLE}</a> <br/> <i class="fa fa-arrows-h"></i> {tracks.TRACK_LENGTH}<br/><i class="fa fa-area-chart"></i> {tracks.TRACK_ELEVATION}</div>',
				{tracks.LATITUDE_X},
				{tracks.LONGITUDE_Y},
				icon_{tracks.DIFFICULTY},
			],		
			# END tracks #
		];	
		
		if(markersData.length > 0) {
			for (var i = 0; i < markersData.length; i++) {
				var lat = markersData[i][1];
				var lng = markersData[i][2];				
				var icon = markersData[i][3];
				var popup = markersData[i][0];
				
				marker = L.marker([lat,lng], {icon: icon})
				.bindPopup(popup);
				markers.addLayer(marker);
			}
		
		var bounds = markers.getBounds();
		map.fitBounds(bounds);
		map.addLayer(markers)
		}
	//add on the map
	map.addLayer(osm);
	map.addControl(new L.Control.Layers( {
		'OpenStreetMap':osm,
		'OpenCycleMap':ocm,
		'OpenLandingMap':olm,
		'OpenTransportMap':otm,
		'OpenOutdoorsMap':oom,
		'Google terrain':gglt,
		'Google satellite':ggls,
		'Google roadmap':gglr,
		'Google hybrid':gglh,
		'IGN':ign0,
		'IGN Express Classique':ign1,
		'IGN Express Standard':ign2,
		'IGN Satellite':ign3,
		},
	{})
	);
});

Cordialement

[gcebelieu]

Bonjour,

vous utilisez le plugin L.tileLayer.WMTS, qui n'a pas été mis à jour depuis deux ans et donc n'a pas suivi l'évolution vers Leaflet 1.0. NB : même s'il est issu de code IGN et y fait à juste titre référence, ce plugin n'est pas maintenu par l'IGN.

Je vous invite à utiliser l'extension Géoportail pour Leaflet qui est maintenue par l'IGN et fonctionne avec Leaflet 1.0.2, comme le montre l'exemple ici : http://jsfiddle.net/ignfgeoportail/n...t,js,html,css/ (je ne reproduis pas votre bug sur cet exemple)

Vous pouvez trouver toutes les infos ici : https://github.com/IGNF/geoportal-ex...DME-leaflet.md

[babsolune]

merci de votre réponse rapide

plus qu'à essayer