Mapbox GL JS: Changing the Popup Offset at the Zoom Level

Question

Depending on the current zoom level of my Mapbox, the marker icons have different sizes. All of my custom marker is in a div container, and I am changing the class to resize it.

Now I have a problem that the offset of the pop-ups (the distance from the pop-up to the marker icon) is too large if the icons are smaller.

Is it possible to change the offset of the pop-ups also with the zoom level?

Answer 1

, . Mapbox (, ). , , CSS. .

.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-left,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-right
{
    top: 10px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-left {
    top: 6px;
    left: -4px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-right {
    top: 6px;
    left: 2px;
}

Answer 2

CSS . , . - :

this.map.on('zoom', () => {
    if (this.map.getZoom() > 8) {
        // zooming in, remove offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (popup.classList.contains("my-offset-class")) {
                popup.classList.remove("my-offset-class");
            }
        }
    } else {
        // zooming out, add left offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (!popup.classList.contains("my-offset-class")) {
                popup.classList.add("my-offset-class");
            }
        }
    }
});

Hide result

mapboxgl-popup css ( , ), my-offset-class css .