使用 mapbox 在弹出窗口中添加链接

Question

我正在尝试使用 mapbox 制作地图。我正在脚本中创建我的数据，我想在按钮的“Var Data”中添加变量“urlfr”的链接 - 例如，我还想在弹出窗口中输入国家/地区的名称。我是 html 的新手，不知道如何编码。 这是我的代码：

''' 
<script>
    mapboxgl.accessToken = 'pk....';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        center: [-2, 35],
        zoom: 1.2
    });

    // Data
    var data = [
        { 'code': 'DEU', 'red': 146, 'green': 194, 'blue': 139, 'nom': 'Allemagne', urlfr : 'https://.../Allemagne/'}
                
    ];   

    map.on('load', function () {
        map.addSource('countries', {
            type: 'vector',
            url: 'mapbox://mapbox.country-boundaries-v1'
        });

        var matchExpression = ['match', ['get', 'iso_3166_1_alpha_3']];


        data.forEach(function (row) {
            var green = row['green'];
            var red = row['red'];
            var blue = row['blue'];

            matchExpression.push(row['code'], color);

        });

       
        matchExpression.push('rgba(0, 0, 0, 0)');

  
        map.addLayer(
            {
                'id': 'countries-join',
                'type': 'fill',
                'source': 'countries',
                'source-layer': 'country_boundaries',
                'paint': {
                    'fill-color': matchExpression
                }
            },
            'admin-1-boundary-bg'
        );
        
        
        map.on('click', 'countries-join', function (e) {
        new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        //.setHTML(e.features[0].properties.name_en)
        //.addTo(map);

        .setHTML(`<table>
                        <tr>
                            <td>nom</td>
                            <td>:</td>
                            <td></td>
                        </tr>
                        </table>
                        <button type="button">GO TO COUNTRY</button>`)
               
        .addTo(map);


        });
         

    });
    
</script>
'''