I implemented a Mapbox map on my website. On top of the Mapview I would like to add a button on the lower part of the page/map. As I couldn't figure out how to lay the button on top of the map (an HTML-button would just be below the map) I solved the problem with a programatical button in 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';
Now I would like to design/change the style of the button. Is there a way to do that? And if not, is there a way to put a normal HTML button on top of the map?
There are multiple ways to change the style of the button, best way is by setting an id to getting ahold of the button using it
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';
then later do that
const mapButton = document.getElementById('map-button');
mapButton.classList.add('map-button--edited');
and add your styles in the class you added map-button--edited in this case
If you wanted the style you said above than add this to your button.style :
border-radius: 5px;background-color: white; padding: 10px;font-size: 20px;
The changed code will be like this :
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';
The value of
border-radiuspaddingfont-sizecan be changed according to need