Mapbox GL Popup .setDOMContent example

Question

I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.

Here's my very poor attempt at setting this up.

This function creates the popup

function GameObjectPopup(myObject) {
    var features = map.queryRenderedFeatures(myObject.point, {
        layers: ['seed']
    });

    if (!features.length) {
        return;
    }

    var feature = features[0];
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(ClickedGameObject(feature))
        .setDOMContent(ClickedGameObject2(feature))
        .addTo(map);
};

This function adds the html via the .setHTML

function ClickedGameObject(feature){
    console.log("clicked on button");
    var html = '';

    html += "<div id='mapboxgl-popup'>";
    html += "<h2>" + feature.properties.title + "</h2>";
    html += "<p>" + feature.properties.description + "</p>";
    html += "<button class='content' id='btn-collectobj' value='Collect'>";
    html += "</div>";
    return html;
}

This function wants to add the DOM content via the .setDOMContent

function ClickedGameObject2(feature){
    document.getElementById('btn-collectobj').addEventListener('click', function()
    {
        console.log("clicked a button");
        AddGameObjectToInventory(feature.geometry.coordinates);
    });
}

I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()

the error I'm getting when clicking on an object (so as popup is being generated)

Uncaught TypeError: Cannot read property 'addEventListener' of null

Answer 1

Popup#setHTML takes a string that represents some HTML content:

var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);

while Popup#setDOMContent takes actual HTML nodes. i.e:

var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);

both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.

The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/