0

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)
        });
      }
    });
8
  • Compare you code with the answer to the question gis.stackexchange.com/questions/387588/… – TomazicM Feb 21 at 15:16
  • The code is effectively attaching undefined instead of a function as the event handler. So the event handler is not an instance of Function and therefore is lacking a call method, which the internals of Leaflet expect there to be. In effect, this is a duplicate of stackoverflow.com/questions/35428801/… – IvanSanchez Feb 21 at 15:43
  • Sorry, I don't understand. The link you give says he should replace function onItemClick(id) { alert(id); } by function onItemClick(id) { return function(){ alert(id); } } I've edited my question to show a little more of my code mouseover and mouseout work fine, click gives Leaflet error – Hervé Feb 21 at 16:22
  • So you don't see difference in your implementation of popup and that in the answer? If not, I can't help you further. – TomazicM Feb 21 at 16:34
  • 1
    Problem you have is understanding the basics of JS programming. Since GIS SE is intended for GIS related problems, not JS coding problems, your question is more suited for StackOverflow site. I'll answer it, but please, in the future don't use GIS SE site as debugging site when learning JS programming, StackOverflow site is the place for that. – TomazicM Feb 22 at 9:36
1

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
  });
}
1
  • I did not understand how to combine popup and mouse hoover, your answer is clear and solves the problem, thank you. – Hervé Feb 22 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.