How do i set event inside setHtml on Mapbox GL JS?

Question

I am having problems with following example :

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 5,
    center: [-77.04, 38.907],
});
map.on('load', function() {
        
        map.addLayer({
        "id": "places",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "id" : 1,
                        "name" :"My Icon",
                        "icon": "theatre"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.038659, 38.931567]
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "ferry-15",
            "icon-allow-overlap": true
        }
    });

        map.on('click', 'places', function (e) {
          var coordinates = e.features[0].geometry.coordinates.slice();
          var id = e.features[0].properties.id;
          var name = e.features[0].properties.name;
      
          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
              coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
          }

          new mapboxgl.Popup()
              .setLngLat(coordinates)
              .setHTML("<table>" +
                    "<tr>" +
                        "<td>ID</td>" +
                        "<td>:</td>" +
                        "<td>"+id+"</td>" +
                    "</tr>" +
                    "<tr>" +
                        "<td>Name</td>" +
                        "<td>:</td>" +
                        "<td>"+name+"</td>" +
                    "</tr>" +
                    "</table>" +
                    "<button type='button' onclick='"+alert("Success")+"'>This Button</button>"

                )
              .addTo(map);
        });

        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%; }

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>WEBAPP</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
</body>
</html>

My problem is,i don't know this is bug,or i wrote the wrong code. The result i was expecting was when i clicked ship icon,and click the button called "This Button" ,an alert showed . But in this code,when i clicked ship icon,an alert shows,then popup . although i already set onclick event inside setHtml.
How do i fix this ? Thank you

calmar calmar · Accepted Answer · 2018-11-13T07:18:01

The way you're concatenation your HTML string is problematic. When you add the +alert("Success")+"

You're actually calling the function alert before rendering it as an HTML string

if you replace it with

"<button type='button' onclick=alert('Success')>This Button</button>"

You'll see it works, as the string is construct corrected.

I recommend you to replace the concatenation with template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals It is much cleaner

Example:

.setHTML(`<table> 
                    <tr>
                        <td>ID</td>
                        <td>:</td>
                        <td>${id}</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>:</td>
                        <td>${name}</td>
                    </tr>
                    </table>
                    <button type="button" onclick="alert('Success on ${name} ${id})">This Button</button>`)

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 5,
    center: [-77.04, 38.907],
});
map.on('load', function() {
        
        map.addLayer({
        "id": "places",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "id" : 1,
                        "name" :"My Icon",
                        "icon": "theatre"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.038659, 38.931567]
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "ferry-15",
            "icon-allow-overlap": true
        }
    });

        map.on('click', 'places', function (e) {
          var coordinates = e.features[0].geometry.coordinates.slice();
          var id = e.features[0].properties.id;
          var name = e.features[0].properties.name;
      
          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
              coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
          }

          new mapboxgl.Popup()
              .setLngLat(coordinates)
        .setHTML(`<table> 
                        <tr>
                            <td>ID</td>
                            <td>:</td>
                            <td>${id}</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>:</td>
                            <td>${name}</td>
                        </tr>
                        </table>
                        <button type="button" onclick="alert('Success on ${name}')">This Button</button>`)
               
              .addTo(map);
        });

        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%; }

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>WEBAPP</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
</body>
</html>

How do i set event inside setHtml on Mapbox GL JS?

1 Answers