Bonjour,

Je débute avec les classes, j'ai déjà quelques notions mais pas suffisamment pour faire ce que je souhaite faire.

J'ai une appli web carto dans laquelle j'ai des couches qui sont affichées via l'appel à des fonctions qui utilisent Mapbox. Le problème est que le code est particulièrement lourd désormais et ça devient difficile à bouger.

Une évolution récente de l'application est la présence de modules. Historiquement, l'appli de base était une appli spécifique à une seule thématique, cette appli tend désormais à s'universaliser avec d'autres thématiques. D'où l'apparition de notions de modules, de classes....

Donc j'aimerais intégrer toutes mes fonctions dans une classe... sauf que les prototypes Mapbox ne sont pas reconnus dans ma classe.

Quand j'exécute le code suivant, j'ai un retour console : "map.addSource is not a function"

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var module_carte = new Module_Carte({
  map:map
});
module_carte.add(map);
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
class Module_Carte {
  constructor (map){
    this._map = map;
    this._style = 'url/tileset.json';
  }
 
  add(map){
    map.addSource('src', {
      type: 'vector',
      url: this._style
    });
 
    map.addLayer({
      'id': 'layer',
      "type": 'circle',
      'source': 'src',
      'source-layer': 'src_carte',
      'maxzoom': 24,
      'minzoom': 1,
      "paint":{
        "circle-radius": [
          'interpolate',
          ['linear'],
          ['zoom'],
          7, 3,
          14, 6
        ],
        "circle-color" : "#00A3CB",
        "circle-stroke-width": 1,
        "circle-stroke-color": "#00495B"
      }
  });
  }
 
}
Que dois-je modifier dans ce code pour que cela fonctionne ?

Merci pour vos retours,

Sylvain