Discussion :

[GuttV]

Bonjour a toutes et tous,
J'avance bien sur la découverte de Leaflet et j'en arrive a la création de contrôles personnalisés.

Je cherche à me créer un composant externe histoire de rendre mon fichier.js gérant toute ma map un peu plus lisible.

Mais je me heurte au message d'erreur

leaflet__WEBPACK_IMPORTED_MODULE_4___default().control.extend is not a function

Je tourne en rond et aurait besoin d'une boussole pour m'en sortir.

Le code qui suit a été simplifié a l'extrème, mais, même tel quel, ça foire.

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
function CreateBoiteInfo(data) {
    if (maBoite) {
        maBoite.createContent(data, true)
        return
    }
 
 
    L.Control.BoiteInfo = L.control.extend({
        options: {
            position: 'topleft'
        },
        onAdd: function (map) {
            return this.createContent(data,true)
        },
        onRemove: function (map) {
 
        },
        createContent: function (data, create) {
            if (create) {
                this._div = L.DomUtil.create('div', '')
            }
            L.DomEvent.disableClickPropagation(this._div);
 
            this._div.innerHTML = data
 
            return this._div
        }
    })
 
     L.Control.maBoite = function (options) {
        return new L.Control.BoiteInfo(options);
    };

D'avance un grand merci pour le coup de main !

[NoSmoking]

Bonjour,
il faudrait nous en dire plus sur ton environnement, fichier/module inclus.

As-tu importé le module leaflet ?

Je ne comprends pas pourquoi tu mets ton code dans une fonction, ici CreateBoiteInfo !?!

[GuttV]

Bonjour
pour commencer, merci de bien vouloir me répondre.

C'est vrai, je n'ai pas été très rigoureux, mais oui, j'ai bien importé le module leaflet : a rajouter la première ligne import L from 'leaflet'.

Ensuite, j'ai un fichier .js qui gère ma carte leaflet, les différents layers et les taches a effectuer avant de modifier une base de données sur le serveur.
Ce fichier est déjà bien copieux et je cherchais un moyen de créér ma boite d'information (qui affiche en gros des informations diverses et variées d'une commune quand on l'affiche).
Pour ce faire, je pense faire un peu comme avec react ; créer un composant dans un fichier dédié et l'importer dans mon fichier .js "de travail'.

Certes, passer par une fonction n'est peut-être pas l'idéal... Une classe peut-être ?

A vos avis...

J'espère avoir éclairer le chemin, sinon je peux en rajouter !

[NoSmoking]

C'est vrai, je n'ai pas été très rigoureux, mais oui, j'ai bien importé le module leaflet : a rajouter la première ligne import L from 'leaflet'.

qui dit import dit qu'il a eu possibilité d'importer via la directive export.

Ensuite, j'ai un fichier .js qui gère ma carte leaflet, les différents layers et les taches a effectuer avant de modifier une base de données sur le serveur.
Ce fichier est déjà bien copieux et je cherchais un moyen de créér ma boite d'information (qui affiche en gros des informations diverses et variées d'une commune quand on l'affiche).

C'est effectivement une bonne pratique que de scinder les fichiers en « module » chacun s'occupant de faire ce qu'il a à faire.
L'utilisation de webpack n'est pas forcément requis et plutôt destiné à générer des livrables pour le fronts.

Tu peux tout à fait imaginer d'inclure plusieurs fichier.js, voir utiliser des outils comme gulp peut-être plus « simple d'emploi »

Code html :

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

1
2
3
4
5
<script src="srcipts/leaflet.js"></script>
<script src="srcipts/leaflet-plugins.js"></script>
<script src="srcipts/leaflet-request.js"></script>
<script src="srcipts/leaflet-renderer.js"></script>
<script src="srcipts/leaflet-index.js"></script>

Pour ce faire, je pense faire un peu comme avec react ; créer un composant dans un fichier dédié et l'importer dans mon fichier .js "de travail'.

Je dirais que dans ton cas tu n'es absolument pas obligé de passer par un L.Control.extend, tu peux toujours gérer les affichages de tes données directement dans un élément de ta page.

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
/**
 * NameSpace : regroupe les fonctions, variables pour affichage
 */
const Renderer = {
  create: function(idWrapper) {
    this.wrapper = document.getElementById(idWrapper);
    this.element = document.createElement("DIV");
    // la suite
    return this;
  },
  clear: function() {
    this.element.textContent = "";
    // la suite
    return this;
  },
  setResult: function(data) {
    // la suite
    return this;
  },
  // les autres méthodes
}

et un appel au lancement dans index.js, du style :

Code :

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

1
2
3
document.addEventListener("DOMContentLoaded", function() {
  Renderer.create("infos");
});

ou quelque chose dans ce style

A vos avis...

Voilà

[GuttV]

Merci Nickel !

Je vais pouvoir creuser ces quelques pistes et m'adapter !

De quoi bien m'occuper !