No popup when clicking on specific icons (BeautifyIcon plugin)

[EmanuelCastanho]

Hi!

I was checking the BeautifyIcon plugin demo and I don't understand why when I click on the plane icon the popup doesn't show up. Here is the example: https://python-visualization.github.io/folium/latest/user_guide/plugins/beautify_icon.html

Is this a font-awesome related problem?

[hansthen]

I can confirm the issue. In the browser console I see the following stack trace:

Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at p._add (Point.js:55:19)
    at p.add (Point.js:50:23)
    at e._updatePosition (DivOverlay.js:303:45)
    at e.update (DivOverlay.js:189:8)
    at e.onAdd (DivOverlay.js:113:8)
    at e.onAdd (Popup.js:135:30)
    at e._layerAdd (Layer.js:114:8)
    at e.whenReady (Map.js:1477:13)
    at e.addLayer (Layer.js:172:8)
    at e.openOn (DivOverlay.js:63:8)

[EmanuelCastanho]

I think the problem is inside Point.js, here:

_add: function (point) {
    // destructive, used directly for performance in situations where it's safe to modify existing point
    this.x += point.x;
    this.y += point.y;
    return this;
},

At least according to the console.

[EmanuelCastanho]

Any suggestions on how to solve this?

[Conengmo]

This is likely an issue with the underlying Leaflet plugin we wrap around: https://github.com/masajid390/BeautifyMarker. Someone would have to go look at that library and see what the issue is. My theory would be that Leaflet updated something somewhere in the last few years that broke the behavior for this plugin.

[thisisvk45]

The popup issue with the BeautifyIcon plugin demo is due to an undefined point in Point.js during the _add function call, likely caused by a Leaflet update that broke compatibility with the BeautifyMarker plugin.