How to add links to popups in Mapbox GL JS

Question

I have managed to make a map w/ styled pops and such. However, what I am trying to do now is to have it such that the links inside of the popups connect directly to websites. If possible, I would like the title text (h3) of the popups to go directly to the websites when clicked.

I am a bit of a js/css/webmapping newbie.

Code:

    map.on('click', function(e) {
 var features = map.queryRenderedFeatures(e.point, {
layers: ['masterdirectory-qc-v5-dyz490'] 
 });

 if (!features.length) {
return;

}

var feature = features[0];

 var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h3>' + feature.properties.Company + '</h3><p>' + feature.properties.City + '</p>' + feature.properties.URL + '</p>')
.setLngLat(feature.geometry.coordinates)
.addTo(map);

});

My goal is to take all the URL's contained in the column referenced by feature.properties.URL and connect them to the title, retrieved by feature.properties.Company.

My research turned up Display a link in a popup with Leaflet which seems to be a very similair question. I'm guessing my issue is less a problem understanding mapbox gl js and more a lack of knowledge about webdev in general.

Answer 1

Your assumption in the last paragraph is actually true, because this has nothing to do with Mapbox GL JS, but only with basic HTML.

Basically you have to define a link with the <a> tag inside your <h3> tag in the popup like this:

.setHTML('<h3><a href="' + feature.properties.URL + '">' + feature.properties.Company + '</a></h3>')

---

Answer 2

Thanks, both for discussing this.

I was facing the same issue.

My only addition: the code in the answer is missing an ' at the end. Took me a while to find it.

Here the adjusted code that worked for me

.setHTML('<h3><a href="' + feature.properties.URL + '">' + feature.properties.Company + '</a></h3>')

---

NOTE: This modification was added to the answer it is referring to, by @tallistroan