Our popups are set to display outside of the map container initially, but when the map is moved, they adjust to fit inside the container with the correct anchor. However, upon inspecting the DOM, we noticed that the popups do not always have the correct anchor class, leading to alignment issues (see screenshots).
// Initializing the Map
let map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/kevin-fabre/ck8a28d160noh1imv3a9abrlu",
bounds: [
[bbox[0], bbox[1]],
[bbox[2], bbox[3]]
],
maxBounds: this.bboxToBounds(this.getMaxBbox()),
});
//Popups
let hoverPopup = new mapboxgl.Popup({
offset: 32,
closeButton: false,
closeOnClick: true
});
let clickPopup = new mapboxgl.Popup({
offset: 32,
closeButton: false,
closeOnClick: true
});
// Adding popup to the map
map.on("displayClickPopup", e => {
// Code for adding popup
});
We are incorporating vuejs and vuetify components within our popups as well.
We are experiencing an issue where the anchor for popups always defaults to "bottom" when they open. Any insights on why this might be happening?
Thank you.
https://i.sstatic.net/QR2Od.png https://i.sstatic.net/BP4vy.png https://i.sstatic.net/zKGVc.png