1

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.

4

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

  • This is the actual line of code, it was missing a quote inside the end-parenthesis at the end (the last character). This was pointed out by user @TimRo in another answer below. .setHTML('<h3><a href="' + feature.properties.URL + '">' + feature.properties.Company + '</a></h3>') – nittyjee Dec 7 '18 at 6:57
1

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

  • Thank you so much for this!! I modified the answer by tallistroan to include the quote. It is very important that the original answer is correct. Can you delete this answer? – nittyjee Dec 7 '18 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.