Popup addClassName throws an error

Maps SDK for Web (JavaScript)
#1

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?

#3

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

#4

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