Search code examples
javascriptmapboxsvelte

Why is the popup of the mapbox showing under (vertically not on the z-index) the map web view?


        map.addSource('unaza-goes', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [...]
                    ]
                }
            }
        });


    map.on('click', 'unaza-goes', (e: any) => {
        let popupElem = new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML('<p>THIS IS A POPUP</p>')
            .addTo(map);
    });


.map{ position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-popup {
    max-width: 400px;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
body { margin: 0; padding: 0; }

I have a onclick event in my unaza-goes layer, and i want to display the appropriate popup, I am doing it the same way I have seen in several examples, but the popup seems to expand the window and show under the map web view (under as in vertically not on the z-index), do not hesitate to ask me for details because it's the first time I am working with mapbox and I could be missing something, thank you!

Image on how it looks like when the popup is triggered

Solution

  • the issue gets fixed after adding the mapbox css style to the html file:

    <link
  href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
  rel="stylesheet"
/>

    it worked for me!