¿Cómo puedo cambiar la posición de un MapBox Popup?

2 minutos de lectura

avatar de usuario de blogob
blogob

Estoy usando cuadro de mapa con wordpress.

Veo que la ventana emergente de forma predeterminada tiene una posición de anclaje que genera css.

No puedo centrar la ventana emergente al hacer clic: por ejemplo, algunas de las ventanas emergentes se truncan cuando las abro porque el mapa no se centra en ellas.

Probé todas las soluciones que encontré aquí, ninguna funciona. No estoy usando Json sino wordpress loop para mostrar marcadores y poner contenido en ventanas emergentes. No encuentro soluciones para nada más que json. Entonces, solo quiero saber si es posible deshabilitar por completo la posición de la ventana emergente para poder colocarla siempre en la esquina del mapa, independientemente del marcador en el que haga clic.

EDITAR

Finalmente, solo cambié algunos CSS para hacer que la ventana emergente se pegara a la izquierda del mapa: deshabilité la posición predeterminada del ancla con transform: none, lo coloco en la esquina del contenedor del mapa con la parte superior e izquierda … Y luego deshabilité el flecha alrededor de la ventana emergente.

.mapboxgl-popup{
    transform:none !important;
     top: 15%;
    left: 10px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
    display:none !important;
}

use este ejemplo del ejemplo de cuadro de mapa oficial:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Display a popup</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-96, 37.8],
    zoom: 3
});

var popup = new mapboxgl.Popup({closeOnClick: false})
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);
</script>

</body>
</html>

y puede ver el resultado del ejemplo en el siguiente enlace:

https://www.mapbox.com/mapbox-gl-js/example/popup/

¿Ha sido útil esta solución?