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?

CodePudding user response：

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

CodePudding user response：

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-radius padding font-size can be changed according to need