Ability to provide popup HTML/DOM content lazily via function

[stil]

User Story

I have a map with thousands of markers that all have assigned popups.
All markers need to be displayed at the same time so I have to provide all popups preemptively which is slow.

Rationale

The initial loading of all markers could be much faster if I didn't have to generate each marker's popup content preemptively but instead could provide a generator/callback function that returns popup content.

For example, such API would be excellent (I use React for popup content generation but it does not matter):

popup.setDOMContentGenerator(
  () => renderToDiv(
    <div>
      <ul>
        <li>Marker property: {marker.prop1}</li>
      </ul>
    </div>
  )
);

Generator function would be called only when marker is clicked and popup is about to being opened.

Currently it's possible to have a hacky workaround that does not work too well:

• do not set popup's HTML or DOM Content initially
• add popup "open" event listener and set content inside the callback function
• unfortunately, the popup anchor is decided earlier so it gets opened outside of viewport if the marker is close to map edges.
• "workaround" for the above would be to call setTimeout(() => { popup._update(); }, 0); after setting DOM content but now it has jerky behavior, for example shows anchored to top and then jumps to bottom.

Impact

It makes maps faster and at the same time it's very easy to implement.

[HarelM]

Why not listen to the marker's click event and create a popup in the callback (not update the popup html, but actually create a popup instance)?
I don't think a popup generator is necessary as a public API as I'm pretty sure this can be achieved with the current existing API, but I might not understand the full scenario, so a reproduction of the problem would be useful.

[stil]

Can you check the following sample? https://codesandbox.io/p/sandbox/sdd8cd

I followed https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-click/ but the popup is not showing when clicking the marker. I'm not sure what I'm doing wrong.

[HarelM]

The following worked for me, I don't know if this is a react thing or a different issue:

marker.getElement().addEventListener("click", () => {
        setTimeout(() => {
          const popup = new maplibregl.Popup()
            .setHTML("<b>popup content</b>")
            .setLngLat(marker.getLngLat())
            .addTo(map);
        }, 0);
      });

[HarelM]

The time out it not needed, what's causing the popup to close is the extra click on the map itself.
Setting e.stopPropagation(); will solve the need for a timeout as well.

[stil]

Thanks it solves my problem.
However this is unrelated to React and likely a bug in the library (or at least undocumented edge-case behavior). Check example without React here: https://codesandbox.io/p/sandbox/r7j44r

[HarelM]

Yeah, looks like there are some bugs there, also marker.on("click", ...) doesn't seem to work...

[HarelM]

Actually, the only events that Marker supports are documented, and click is not one of them...
In order to listen to a marker click you should pass an html element that listens to the marker click basically...