JS Leaflet : passage de paramètres à une fonction Fermé

Question

Bonjour,
Un code qui fonctionne très bien ne fonctionne plus une fois qu'il est encapsulé dans une fonction.
Ceci fonctionne très bien pour afficher un popup quand on clique sur une trace
var customLayer = L.geoJson(null, {
 ...
  }, 
  onEachFeature: function(feature, layer) {
    if (feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  } 
});
mais je ne parviens pas à le mettre dans une fonction
function popup(e) {
    layer = e.layer,
    feature = layer.feature;                <==
    if (feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  }
...
function Interaction(feature, layer) {
    layer.on({
        click: popup
    });
}
...
var customLayer = L.geoJson(null, {
 ...
  }, 
  onEachFeature: Interaction
});
quand je clique j'obtiens
Uncaught TypeError: Cannot read property 'feature' of undefined
sur la ligne en face de laquelle j'ai mis une flèche
et si je commente froidement cette ligne j'obtiens
Uncaught ReferenceError: feature is not defined sur la ligne suivante

Je pense qu'il s'agit simplement d'un passage de paramètres mais mes connaissances en JS ne sont pas suffisante pour que je comprenne mon erreur : un petit coup de main ?
Merci

jordane45 · Answer

onEachFeature: function(feature, layer) {
  Interaction(feature, layer);
}

Herve_be · Answer

Bonjour,
effectivement, visuellement ça fonctionne comme souhaité, merci beaucoup,
mais j'ai une erreur dans Leaflet quand je clique sur la trace

Uncaught TypeError: Cannot read property 'call' of undefined
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)

Voici le code complet (j'ai mis directement la fonction Interaction dans onEachFeature mais ça ne change rien)
function popup(feature, layer) {
    if (feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  }
function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });
    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
}
function resetHighlight(e) {
    customLayer.resetStyle(e.target);
}
...
var customLayer = L.geoJson(null, {
  style: function(feature) {
    if (!feature.properties.id) {
      feature.properties.id = n++;
    }
    var iColor = feature.properties.id % colors.length;
    return { color: colors[iColor] };
  }, 
 onEachFeature: function(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: popup(feature, layer)
    });
  }

});

Herve_be · Answer

Je comprends ce que tu écris,
par contre je ne comprends pas pourquoi parmi
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: popup(feature, layer)
les 2 premières auxquelles je ne donne pas de paramètre fonctionnent correctement sans erreur
alors que popup à qui je passe 2 paramètres fonctionne très bien aussi mais donne une erreur dans Leaflet.

JS Leaflet : passage de paramètres à une fonction

3 réponses

Discussions similaires