[GIS] Mapbox GL JS – Adding variable dependent images to popup

mapboxmapbox-gl-js

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

Best Answer

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.

Related Question