Discussion :

[sylvain257]

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

[NoSmoking]

Bonjour,
une première interrogation, pourquoi dans ta class qui attend une variable en paramètre map, constructor (map) alors que dans la création d'un objet tu passes un objet {map: map}.

Regarde ce que vaut map dans ta méthode :

Code :

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

1
2
3
4
5
  add(map){
    console.log("add :",map);
    map.addSource('src', {
      //  ...
    }

[sylvain257]

map est définie avec tous les paramètres de la carte



Le problème est que "addSource" fait parti des prototypes....



Merci

[NoSmoking]

Le problème est que "addSource" fait parti des prototypes....

pas pu reproduire ton erreur, l'erreur est donc ailleurs, mais il nous manque quand même le contexte d’exécution.

Nota : je m'interroge quand même sur l'utilité de créer une classe pour cela !

[sylvain257]

J'ai abandonné et effectivement il n'était pas forcément utile de passer par une classe...

Merci pour vos retours

Sylvain