Leaflet error 'Cannot read property' on bindPopup

Question

I try to display a popup when clicking on a multi tracks XML track.
This seems to work fine but JS console gives error:
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)

Where is the problem? This is the concerned code:
    function popup(feature, layer) {
      if (feature.properties.desc) {
        layer.bindPopup(feature.properties.desc);
      }
    }
    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)
        });
      }
    });

TomazicM · Accepted Answer

As @IvanSanchez wrote in his comment, the reason for the error is that you are using function call instead of function object when defining click event handler. It should be click: popup, not popup(feature, layer).
But even in that case it would not be correct, since popup handler would bind layer popup again and again at each click.
Correct way is to bind popup only once, as explained in the answer to the question Display a track comment when clicking a track in Leaflet multi track layer.
So code could then look something like this:
onEachFeature: function(feature, layer) {
  if (feature.properties.desc) {
    layer.bindPopup(feature.properties.desc);
  }
  layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight
  });
}

Leaflet error 'Cannot read property' on bindPopup

One Answer

Add your own answers!

Ask a Question