Estoy tratando de hacer una tarjeta desde un mapbox para poder agregar algunos botones debajo de la pantalla, pero parece que no puedo encontrar cómo hacerlo. Dondequiera que miro, me dice cómo agregar una imagen y no un mapa. Con lo que tengo ahora, mi mapa va encima del texto incluso si agrego class="card-img-top"
esto es lo que tengo hasta ahora en mi map.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body > <div class="card" > <div class="card-header"> <div id="map"> </div> </div> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </body> <script src="../js/map.js"> </script> </html>así es como se ve mi map.js
mapboxgl.accessToken = 'my_token'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-96, 37.8], // starting position zoom: 3 // starting zoom }); const geolocate = new mapboxgl.GeolocateControl() map.addControl(geolocate) map.on('load', function() { geolocate.trigger(); });