Implementé un mapa de Mapbox en mi sitio web. En la parte superior de Mapview, me gustaría agregar un botón en la parte inferior de la página/mapa. Como no pude averiguar cómo colocar el botón en la parte superior del mapa (un botón HTML estaría justo debajo del mapa), resolví el problema con un botón programático en JavaScript.
function setupMap(center){ const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: center, zoom: 14 }); const nav = new mapboxgl.NavigationControl(); map.addControl(nav); var button = document.body.appendChild(document.createElement('button')); button.style = 'z-index:10;position:absolute;top:10px;right:10px;'; button.textContent = 'Calculate Consumption';Ahora me gustaría diseñar/cambiar el estilo del botón. ¿Hay una manera de hacer eso? Y si no, ¿hay alguna manera de poner un botón HTML normal encima del mapa?
Hay varias formas de cambiar el estilo del botón, la mejor manera es establecer una identificación para obtener el botón que lo usa.
function setupMap(center){ const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: center, zoom: 14 }); const nav = new mapboxgl.NavigationControl(); map.addControl(nav); var button = document.body.appendChild(document.createElement('button')); button.style = 'z-index:10;position:absolute;top:10px;right:10px;'; button.textContent = 'Calculate Consumption'; button.id = 'map-button';luego haz eso
const mapButton = document.getElementById('map-button'); mapButton.classList.add('map-button--edited'); y agregue sus estilos en la clase que agregó map-button--edited en este caso
Si desea el estilo que dijo anteriormente, agregue esto a su button.style :
border-radius: 5px;background-color: white; padding: 10px;font-size: 20px;El código modificado será así:
function setupMap(center){ const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: center, zoom: 14 }); const nav = new mapboxgl.NavigationControl(); map.addControl(nav); var button = document.body.appendChild(document.createElement('button')); button.style = 'z-index:10;position:absolute;top:10px;right:10px;border-radius: 5px;background-color: white; padding: 10px;font-size: 20px;'; button.textContent = 'Calculate Consumption';El valor del
font-sizepaddingborder-radiusse puede cambiar según sea necesario