3

I've been working with popups in Mapbox GL JS, using HTML and want to be able to use variables within the Mapbox dataset, so different popups show different images, depending on attributes in the Mapbox dataset. (see below)

map.on('click', function(e) {       
var features2 = map.queryRenderedFeatures(e.point, { layers: ['stadium'] });

// if the features have no info, return nothing
if (!features2.length) {
    return;
}

var feature2 = features2[0];

// Populate the popup and set its coordinates
// based on the feature found
var popup = new mapboxgl.Popup()
    .setLngLat(feature2.geometry.coordinates)
    .setHTML('<div id="popup" class="popup" style="z-index: 10;">' +
        '<ul class="list-group">' +
        '<img src="url-address/" >' + feature2.properties['Image'] +
        '<li class="list-group-item"> <b> Stadium: </b>' + feature2.properties['Address'] +" </li>" + 
        '<li class="list-group-item"> Capacity: ' + feature2.properties['Capacity'] + " </li>" + 
        '<li class="list-group-item">' + feature2.properties['Fixtures'] + " </li>" +
        '<li class="list-group-item">' + feature2.properties['Fixtures2'] + " </li>" + 
        '<li class="list-group-item">' + feature2.properties['Fixtures3'] + " </li>" +
        '<li class="list-group-item">' + feature2.properties['Fixtures4'] + " </li>" +
        '<li class="list-group-item">' + feature2.properties['Fixtures5'] + " </li>" +
        '<li class="list-group-item">' + feature2.properties['Fixtures6'] + " </li>" +
        '<li class="list-group-item">' + feature2.properties['Fixtures7'] + " </li>" +'</ul> </div>'
        )
    .addTo(map);

Basically I have Img src HTML tag, which I want to add the different image attribute depending on what is clicked. However, I've tried several ways of doing this, but can't get it to work - the pic below shows what I currently get below (without it crashing entirely). Hope this makes sense and someone is able to help...or at least let me know if it's not possible!

Screenshot of what it looks like in the popup

Improve this question
3
  • It would help to answer the question if you could provide an example from your data for feature2.properties['Image'].
    – pathmapper
    Commented Jun 11, 2018 at 5:32
  • Sorry, I've probably not explained the issue very well. The 'Image' attribute is the name of the image and extension - e.g. stpetersburgnew_top.jpg
    – TheMole
    Commented Jun 11, 2018 at 10:18
  • If your images are located in the same directory as your HTML file with the map, the following from the existing answer should work '<img src="' + feature2.properties['Image'] +'">' + .... If the images are located in a different directory, you have to add also the path to this image directory: '<img src="url-address/' + feature2.properties['Image'] +'">' + ...
    – pathmapper
    Commented Jun 12, 2018 at 5:38

1 Answer 1

Reset to default
4

I hope I got your question right, but currently this is the "image" you try to show for every popup: 

<img src="url-address/" >

The specific image path from feature2.properties['Image'] is simply text printed after the image and it is not part of the image source, but this is presumably what you intended.

Something like this should render your image in the popup:

'<img src="url-address/' + feature2.properties['Image'] +'">' + ...

Maybe you also need to add the image extension (jpg, png, etc.) depending on the specific property in your data.

Improve this answer
2
  • Thanks for the spot, I've changed this, but I don't think it's the <li> tag causing the issue as the <img> is self enclosing tag anyway if I'm right in thinking.
    – TheMole
    Commented Jun 10, 2018 at 20:12
  • 3
    You are right, however currently this is the image you try to show for every popup: <img src="url-address/" > The part with feature2.properties['Image'] is simply text printed after the image and has nothing to do with the image source
    – tallistroan
    Commented Jun 10, 2018 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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