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.