Mapbox GL JS : Modifier le décalage de la fenêtre popup en fonction du niveau de zoom

Question

Selon le niveau de zoom actuel de ma carte Mapbox, les icônes des marqueurs ont une taille différente. Tous mes marqueurs personnalisés sont dans un conteneur div et je change la classe pour modifier leur taille.

J'ai maintenant le problème que le décalage des popups (distance du popup à l'icône du marqueur) est trop grand si les icônes sont plus petites.

Est-il possible de modifier le décalage des fenêtres contextuelles en fonction du niveau de zoom ?

Answer 1

Parfois, la solution est plus simple que prévu. Les popups Mapbox ont déjà une classe qui dépend de la position du popup par rapport au marqueur (par exemple en bas à droite). Avec une classe de zoom que j'utilise en plus, je peux facilement changer les valeurs de décalage avec CSS. Voici un exemple.

.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

Dans mon cas, aucune classe css n'était appliquée en fonction du niveau de zoom. Ce que j'ai fait, c'est de forcer l'application d'une classe personnalisée à partir d'un listener en fonction du niveau de zoom. Quelque chose comme :

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");
            }
        }
    }
});

Ici mapboxgl-popup est la classe css standard pour les popups (vous pouvez utiliser n'importe quelle classe personnalisée à condition de l'appliquer à vos popups), tandis que my-offset-class est la classe css pour l'application du décalage.