[GIS] How to add links to popups in Mapbox GL JS

htmlhyperlinkmapboxmapbox-gl-js

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.

Best Answer

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>')
Related Question