Popup addClassName throws an error

I’m using this code to generate the markers on the map

function createMarker(icon, position, color, popupText) {
    let markerElement = document.createElement('div');
    markerElement.className = 'marker';
    
    let markerContentElement = document.createElement('div');
    markerContentElement.className = 'marker-content';
    markerContentElement.style.backgroundColor = color;
    markerElement.appendChild(markerContentElement);
    
    let iconElement = document.createElement('div');
    iconElement.className = 'marker-icon';
    iconElement.style.backgroundImage = 'url('+icon+')';
    markerContentElement.appendChild(iconElement);
    
    const popup = new tt.Popup()
        .addClassName('map-v5-popup')
        .setHTML(popupText);
    
    return new tt.Marker({element: markerElement, anchor: 'bottom'})
        .setLngLat(position)
        .setPopup(popup)
        .addTo(map);
}

but I get this error

TypeError: this._container is undefined
addClassName mapbox-gl.js:33
createMarker map-v5.js:78
refreshMarkers map-v5.js:136
forEach self-hosted:235
refreshMarkers map-v5.js:132
complete (index):1200
fire mapbox-gl.js:29
fire mapbox-gl.js:29
fire mapbox-gl.js:29
fire mapbox-gl.js:29
_tileLoaded mapbox-gl.js:33
bind_applyFunctionN self-hosted:1056
self-hosted:1035
request mapbox-gl.js:33
processTask mapbox-gl.js:29
receive mapbox-gl.js:29
self-hosted:876

Removing the addClassName() method no error appears.
What am I doing wrong?

We are investigating this issue and will inform you about the progress.

Thank you for reporting this issue. Before this method can be used, two conditions have to be fulfilled:

  • popup has to be added to map (using addTo() method)
  • popup has to have set coordinates (using setLngLat() method)

Moreover, this method is not chainable, so it has to be called like this:

popup.addClassName('my-class');

As a substitute for this method, we suggest using className option passed to popup’s constructor:

const popup = new tt.Popup({ className: 'my-class' })

We are still working on making this functionality more friendly.

1 Like