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?

  • 2
    I'd put the pathes into an array and then do a forEach() on it to add a row for each path: E.g. pathes.forEach(path => table = table + '<tr>' + path + '</tr>'); – Stefan Sep 3 '18 at 20:23
  • @Stefan_Fairphone I think this is worth posting as an answer. – Jochen Schwarze Sep 4 '18 at 6:18
  • Okay, thanks. :) I will add some links to the docs, etc. – Stefan Sep 4 '18 at 12:01
  • 1
    @pascatl Well, so much to this. You could have waited until I wrote up an answer. – Stefan Sep 4 '18 at 15:20

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>'
| improve this answer | |

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>');
| improve this answer | |
  • This will create path_array.length tables in your popup, rather than one table with multiple rows. – Stefan Sep 4 '18 at 15:22
  • 1
    @Stefan_Fairphone In this case you should consider to write another answer! – Jochen Schwarze Sep 7 '18 at 10:58
  • @Jochen Schwarze I followed your advice and posted another answer. – Stefan Sep 7 '18 at 16:55

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.