Discussion :

[sylvain257]

Bonjour,

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
function getLayers(){
 
  var bounds = map.getBounds();
  var bn = bounds._ne.lat;
  var be = bounds._ne.lng;
  var bs = bounds._sw.lat;
  var bw = bounds._sw.lng;
 
  var baselayers = [];
 
  $.ajax({
    url: API_LAYERS+'api/layer/intersects.php?',
    type:'GET',
    datatype:'json',
    data:{
      "bw":bw,
      "bs":bs,
      "be":be,
      "bn":bn
    },
    complete: function(res) {
      if (checkAjaxError(res)) {
        var layer_res = res.responseJSON;
        var layer_record = layer_res.layer;
 
        for(i=0;i<layer_record.length;i++)
        {
 
        var record = layer_record[i];
       //  console.log(record['id_flux']);
 
        var layer_item = {
          id: record['id_flux'],
          tiles: record['url'],
          name: record['layername'],
          sourceExtraParams: {
            tileSize: 256,
            attribution: record['layername'],
            minzoom: 0,
            maxzoom: 22
          }
        };
 
        baselayers.push(layer_item);
 
      }
    }
 
  }
})
 
return baselayers; //ici un console.log renvoie un tableau (celui que je cherche)
 
}
 
map.on('idle', function(){
  getLayers();
 
  console.log(getLayers()); // ce console.log me renvoie aussi mon tableau
 
  var basemapscontrol = new MaplibreGLBasemapsControl( // normalement, le tableau étant bien formé, il devrait afficher le module comme dans la démo, mais c'est pas le cas
    {
      basemaps: getLayers(),
      initialBasemap: "OpenStreetMap",
      expandDirection: "top"
    }); 
 
    map.addControl(basemapscontrol, 'bottom-right');
 
})

Je travaille sur ce code. Il s'agit d'un module Mapbox qui permet d'afficher des couches sous forme d'un switcher. Il s'agit du module MapLibreGLBasemapsControl.

Voila une démo : https://ka7eh.github.io/maplibre-gl-basemaps/example

Ce module est appelé de cette façon :

Code :

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

map.addControl(basemaps, 'bottom-right');

basemaps est un tableau constitué d'élément comme ceux-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
      id: "OpenTopoMap",
          tiles: ["https://tile.opentopomap.org/{z}/{x}/{y}.png"],
          name: 'OpenTopoMap',
          sourceExtraParams: {
            tileSize: 256,
            attribution: "OpenTopoMap",
            minzoom: 0,
            maxzoom: 22
          }
        },

Mes données proviennent d'une base de données dans laquelle est référencée des fonds de carte (IGN, OpenStreetMap, SwissTopo etc.).

J'ai une application côté front avec une carte et je cherche avec la fonction getLayers() à n'afficher que les fonds de carte qui sont dans le canevas de carte. Ainsi, un utilisateur qui est en Suisse n'aura pas le fond de carte "Catalogne" suggéré. Ce qui est bcp plus confort.

N'arrive correctement à avoir un tableau ligne 52 et 59. Seulement, je n'arrive pas à afficher le module comme présenté dans la démo. Pourquoi ?
Merci pour vos retours,

Sylvain

[mathieu]

la réponse de la requête http se fait de façon asynchrone donc les données sont seulement disponibles dans la partie "complete".

donc vous devez faire quelque chose comme cela :

Code javascript :

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
$.ajax({
    url: API_LAYERS+'api/layer/intersects.php?',
    type:'GET',
    datatype:'json',
    data:{
      "bw":bw,
      "bs":bs,
      "be":be,
      "bn":bn
    },
    complete: function (res) {
 
		var baselayers = [];
 
 
		if (checkAjaxError(res)) {
			var layer_res = res.responseJSON;
			var layer_record = layer_res.layer;
 
			for(i=0;i<layer_record.length;i++)
			{
 
				var record = layer_record[i];
			//  console.log(record['id_flux']);
 
				var layer_item = {
					id: record['id_flux'],
					tiles: record['url'],
					name: record['layername'],
					sourceExtraParams: {
						tileSize: 256,
						attribution: record['layername'],
						minzoom: 0,
						maxzoom: 22
					}
				};
 
				baselayers.push(layer_item);
 
			}
		}
 
 
		mise_en_place_calques(baselayers);
 
	}
);
 
 
function mise_en_place_calques(baselayers)
{
 
	var basemapscontrol = new MaplibreGLBasemapsControl({
		basemaps: baselayers,
		initialBasemap: "OpenStreetMap",
		expandDirection: "top"
	});
 
    map.addControl(basemapscontrol, 'bottom-right');
 
}

[sylvain257]

Bonjour,

La solution a été d'utiliser success plutôt que complete, et surtout d'ajouter async = false avant ce success.

Bonne journée

Sylvain

[NoSmoking]

Bonjour,
je trouve cela moyen le passage par async="false", mais bon ...
De plus il est à noter que :

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0.
You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.