Bonjour,

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

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.

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
function getLayers(){
 
  var bounds = map.getBounds(); // je récupère l'emprise de la carte affichée à l'écran avec :
  var bn = bounds._ne.lat; // la latitude et la longitude du coin NE
  var be = bounds._ne.lng;
  var bs = bounds._sw.lat; // la latitude et la longitude du coin SW
  var bw = bounds._sw.lng;
 
  var baselayers = []; // initialisation d'un tableau 
 
  $.ajax({ // appel AJAX à mon API LAYERS (api qui recense des fonds de carte qui demande ici 4 paramètres qui correspondent à l'emprise de la couche elle-même)
    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)) { // fonction que j'ai moi même créée pour débogage
        var layer_res = res.responseJSON;
        var layer_record = layer_res.layer; // je récupère les données sous forme JSON
 
        for(i=0;i<layer_record.length;i++) //ici je cherche à boucler sur chaque layer qui intersectent l'emprise de la carte à l'écran
        {
 
        var record = layer_record[i];
 
        var layer_item = { // je créé un élément JS qui correspond à ce que demande le module MapLibreGLBasemapsControl
          id: record['id_flux'],
          tiles: record['url'],
          name: record['layername'],
          sourceExtraParams: {
            tileSize: 256,
            attribution: record['layername'],
            minzoom: 0,
            maxzoom: 22
          }
        };
 
        baselayers.push(layer_item); // j'injecte tous les éléments précédents dans le tableau que j'avais initialisé
 
      }
    }
 
  }
})
 
return baselayers; // ici un console.log renvoie un tableau (celui que je cherche)
 
}
 
 
// C'est là que ça se complique...
// Je demande que quand la carte enregistre un changement, la fonction précédente soit appelée... Ca marche mais seulement dans les premières lignes
 
map.on('idle', function(){
  getLayers();
 
  console.log(getLayers()); // ce console.log me renvoie aussi mon tableau
 
 
// mais quand j'ajoute le module MapLibreGLBaseMapsControl, rien ne se passe et voila le code que je tente de mettre....
 
  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 sais que je ne suis plus très loin de la vérité mais je n'arrive pas à voir ce qui cloche.

Merci d'avance pour vos contributions,

Sylvain


Mise à jour :

Ce que je récupère de l'appel AJAX pose problème à cause des doubles quotes.....

Ce que j'ai :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
    {
        "id": "Arcgis Online Sat",
        "tiles": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        "name": "Arcgis Online Sat",
        "sourceExtraParams": {
            "tileSize": 256,
            "attribution": "Arcgis Online Sat",
            "minzoom": 0,
            "maxzoom": 22
        }
    },
Ce que je dois avoir :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
{
      id: "Arcgis Online Sat",
      tiles: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
      name: "Arcgis Online Sat",
      sourceExtraParams: {
          tileSize: 256,
          attribution: "Arcgis Online Sat",
          minzoom: 0,
          maxzoom: 22
      }
  },
Comment fais ton pour supprimer ces guillemets ?

Merci