0

I am displaying a bunch of points on a map that have a field with an image name to popup when the point is clicked. The images are in a subfolder.

Is there an easy way to make the popup go to a new window with the target="_blank" tag?

I am using qgis2web, so I have this code snip to work with, it seems like this would be the right place to put a new window request, but instead I spawn a new tab for every feature in the map*

code from qgis2web

    var popupContent = '<table>\
            <tr>\
                <td colspan="2">' + (feature.properties['Image'] !== null ? '<img width="300" src="images/' + String(feature.properties['Image']).replace(/[\\/:]/g, '_').trim() + '">' : '') + '</td>\
            </tr>\
        </table>';
    layer.bindPopup(popupContent, {maxHeight: 100});
}

end of qgis2web code

*because this gets called by the GeoJSON loader...

2
  • What do you mean by "make the popup go to a new window"? Can you clarify? Do you mean you want an image in the popup which is clickable? If so, what does it link to? Another URL? Feb 27, 2018 at 9:37
  • It's simpler than that... Here's the desired behavior: When the user clicks a point that has a popup attached, instead of having a popup open, a new tab or window opens. The contents of the tab would be a .PNG image. The location and image name are stored in a field called Image.
    – Percy
    Feb 27, 2018 at 17:18

1 Answer 1

1

Try the following:

  1. Add a field to your layer for the filename (if you don't already have one)
  2. Change that field's edit widget type to "Attachment" (QGIS3)/"Photo" (QGIS2)
  3. If it was a new field, populate the rows with the image paths

Now, when you use qgis2web, your export should include the images which will then appear in your popups.

4
  • Hi Tom, thanks for answering! I have already gotten to the point you describe. But instead of having the images popup over the map (like a "popup") we would like to have the image open in a new tab that doesn't have the map in it. Just the raw .PNG file in a new tab.
    – Percy
    Feb 27, 2018 at 19:00
  • I'm afraid that's beyond the sphere of qgis2web, so I'm not the best person to answer. I can show you how to amend the qgis2web code so that you can click the image in the Leaflet popup, and it takes you to the raw image in a new tab/window, but that's not what you asked for. Feb 28, 2018 at 11:07
  • I think what you describe is probably the solution. So I just need to wrap the img tag with an href tag with _target new, right? Something like this? “<a href = ‘<"images/' + String(feature.properties['Image']) + '">' : '') + ' target="_blank"> + <img width="300" src="images/' + String(feature.properties['Image']) + '">' : '') + ' </a>
    – Percy
    Feb 28, 2018 at 17:55
  • 1
    Something like `<td colspan="2">' + (feature.properties['Image'] !== null ? '<a href="images/' + String(feature.properties['Image']).replace(/[\\/:]/g, '').trim() + '"><img width="300" src="images/' + String(feature.properties['Image']).replace(/[\\/:]/g, '').trim() + '"></a>' : '') + '</td>` Feb 28, 2018 at 18:12

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.