Adding a button to the popup in Mapboxgl.js

Question

How to add a button to the popup and add an onClick to the function?

.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<button onclick=' + { this.handlePop } + '> Button</button>'))
.addTo(map);

It does not work.

Answer 1

The way I solved the problem was to use setDOMContent instead of setHTML .

This way you can easily manipulate what happens with each element like so

const name = 'abc';
const innerHtmlContent = `<div style="min-width: 600px;font-size: large;color : black;">
            <h4 class="h4Class">${name} </h4> </div>`;

const divElement = document.createElement('div');
const assignBtn = document.createElement('div');
assignBtn.innerHTML = `<button class="btn btn-success btn-simple text-white" > Assign</button>`;
divElement.innerHTML = innerHtmlContent;
divElement.appendChild(assignBtn);
// btn.className = 'btn';
assignBtn.addEventListener('click', (e) => {
  console.log('Button clicked' + name);
});

const popup = new mapboxgl.Popup({
    offset: 25
  })
  .setDOMContent(divElement);

Answer 2

You can addEventListner to button using this.

const btn = document.getElementsByClassName("btn")[0];
btn.addEventListener("click", () => {
      console.log("hello");
});

I have added working example with React here. You can find it here

var popup = new mapboxgl.Popup()
      .setLngLat([-96, 37.8])
      .setHTML(
        `<h1>Hello World!</h1> 
    <button class="btn" ref=${this.buttonRef.current}>todo</button>`
      )
      .addTo(map);
    const btn = document.getElementsByClassName("btn")[0];
    btn.addEventListener("click", () => {
      console.log("hello");
    });

Answer 3

Below function will added a popup button for given coordinates. Hope it will help!

map.on('click',function() {
    var coordinates = [-77.03171253204346, 38.91457788952212];
    var description = "<button onclick=' + { this.handlePop } + '> Button</button>"
    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
});

Also please refer to the Mapbox documentation it is very handy and clean!

Full code snippet

    mapboxgl.accessToken = 'place your mapbox token';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-77.04, 38.907],
        zoom: 11.15
    });

    map.on('load', function() {
        map.on('click',function() {
            var coordinates = [-77.03171253204346, 38.91457788952212];
            var description = "<button onclick=' + { this.handlePop } + '> Button</button>"
            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(description)
                .addTo(map);
        });

        // Change the cursor to a pointer when the mouse is over the places layer.
        map.on('mouseenter', 'places', function() {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'places', function() {
            map.getCanvas().style.cursor = '';
        });
    });

    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .mapboxgl-popup {
        max-width: 400px;
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }

<div id="map"></div>