Saltar al contenido

¿Cómo agregar estilo CSS en Mapbox GL Popup?

Solución:

He leído esto y varias publicaciones en SE, que me indicaron la dirección correcta.

Tu enlace apunta a los documentos sobre mapbox.js que es diferente de mapbox-gl.js.

Documentos para Mapbox GL JS: https://www.mapbox.com/mapbox-gl-js/api/#popup

Hay un tutorial oficial de Mapbox que muestra también cómo diseñar una ventana emergente Mapbox GL JS usando CSS: https://www.mapbox.com/help/building-a-store-locator/

La siguiente captura de pantalla se toma a partir de ahí:

ingrese la descripción de la imagen aquí

Mapbox GL JS:

Si necesita aún más control sobre el estilo de la ventana emergente (por ejemplo, establecer el color de fondo para diferentes tipos de ventanas emergentes), puede establecer un nombre de clase personalizado directamente en el nivel superior de la ventana emergente con:

JS:

new mapboxgl.Popup({ className: "apple-popup" })

new mapboxgl.Popup({ className: "banana-popup and-another-css-class" })

CSS:

/* change background and tip color to green */
.apple-popup .mapboxgl-popup-content {
  background-color: green;
}
.apple-popup .mapboxgl-popup-tip {
  border-top-color: green;
}

/* change background and tip color to yellow */
.banana-popup .mapboxgl-popup-content {
  background-color: yellow;
}
.banana-popup .mapboxgl-popup-tip {
  border-top-color: yellow;
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *