How to add a dynamic number of pictures into a Leaflet popup?

Question

I have a huge dataset of playgrounds I want to represent in a Leaflet map.

Each playground has a different number of photos (between 1 and 13) connected as an attribute value.

The value contains the relative path to each photo, the structure could be changed to e.g. a comma-separated list or anything else that could help. The popup content as an HTML-table should place one photo in each row.

How do I manage to adapt the showing table rows inside the popup dynamically, depending on the number of photos?

Answer 1

We are using a variable called popupContent as it is being used in the Leaflet 1.3.4 documentation for a popup. First of all we need to start the table, then add 1-13 rows and then close it again.

popupContent = '<table><tbody>'
imgPathes.forEach(path => popupContent += `<tr><td><img src="${path}"/></td></tr>`)
popupContent += '</tbody></table>'

This is using ES2015's template literals in line 2.

---

I personally would rather use a list as it is more flexible than the rigid <table> and style it with CSS (list-style-type: none). You could switch between horizontal and vertical display at any time, whereas table rows always (?) are beneath each other.

popupContent = '<ul>'
imgPathes.forEach(path => popupContent += `<li><img src="${path}"/></li>`)
popupContent += '</ul>'

Answer 2

Thanks to @Stefan_Fairphone I found a temporary way to append the photos as a new table under the popup-table.

path_array.forEach(path_array => popupContent = popupContent + '<div class="datagrid"><table><tbody><tr><td><img src="' + path_array + '"height="180px"</td></tr></tbody></table></div>');