MapBox Hide Layer Button Text Change - mapbox

Question

Sorry of this is a simple question but I have a Mapbox map with 2 layers running on my website. Each layer can be toggled on or off using the example code on the MapBox support site.
However it uses the name of the layers directly for the text of the menu buttons. Is there a way to change this to a more aesthetically pleasing title?
Many thanks
Col
Code added below :
map.on('load', function() {
// add source and layer for 2020 Tour
map.addSource('pjuk-2020-tour', {
type: 'vector',
url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
});
map.addLayer({
'id': 'pjuk-2020-tour',
'type': 'circle',
'source': 'pjuk-2020-tour',
'layout': {
// make layer visible by default
'visibility': 'visible'
},
'source-layer': 'pjuk-2020-tour'
});
map.addSource('pjuk-previous-tours', {
type: 'vector',
url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
});
map.addLayer({
'id': 'pjuk-previous-tours',
'type': 'circle',
'source': 'pjuk-previous-tours',
'layout': {
// make layer visible by default
'visibility': 'visible'
},
'source-layer': 'pjuk-previous-tours'
});
});
// enumerate ids of the layers
var toggleableLayerIds = ['pjuk-2020-tour', 'pjuk-previous-tours'];
// set up the corresponding toggle button for each layer
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;

Answer 1

Using this example as a model, there are many ways which you could go about doing this. One is to create a variable storing a mapping from the desired title to the name of the layer, so that clicking on the relevant button will use the textContent as a key in this mapping to retrieve a value representing the name of the layer. For example:
var titleToLayerName = {
'PJUK Previous Tours': 'pjuk_previous_tours',
'PJUK 2020 Tour': 'pjuk_2020_tour'
}
...
link.onclick = function(e) {
var clickedLayer = titleToLayerName[this.textContent];
...
};