topic Re: [JSAPI 4.7][PopupTemplate] mediaInfo image click to open link in new window in ArcGIS JavaScript Maps SDK Questions

[JSAPI 4.7][PopupTemplate] mediaInfo image click to open link in new window

QiZhao — Sun, 12 Dec 2021 05:11:23 GMT

I'm making a map with images shown in popup. Because the popup is relatively small in size, I only show thumbnail of the image in popup. When user click the image, I'd like to show a full-resolution image. The popup looks like below:

Here is the popup template:

{
  "popupInfo": {
    "title": "{Name}",
    "fieldInfos": [...],
    "mediaInfos": [{
      "title": "Image",
      "type": "image",
      "value": {
        "sourceURL": "{Thumbnail}",
        "linkURL": "{Image}"
      }
    }]
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

By using "linkURL", I can put a link on the image inside popup. Is there a way to open the link in new window/new tab by default? Currently the link will be opened in place, which means that the map page will be redirected and user will not be able to access map page unless he/she click "Back" button in browser.

Here is an running example:

https://codepen.io/anon/pen/YLzoZP

Maybe in the future we can add a new flag in "mediaInfos" json to tell popup opening the link in new window or not? Maybe we can make all links open in new window by default? Thanks.

Re: [JSAPI 4.7][PopupTemplate] mediaInfo image click to open link in new window

QiZhao — Sun, 12 Dec 2021 05:11:25 GMT

I figured out a work around by using JavaScript in the linkURL of mediaInfo. The code is not pretty, but it works in the latest v4.7 API. If anyone has a better alternative, please let me know. Thanks.

{
  "popupInfo": {
    "title": "{Name}",
    "fieldInfos": [...],
    "mediaInfos": [{
      "title": "Image",
      "type": "image",
      "value": {
        "sourceURL": "{Thumbnail}",
        "linkURL": "javascript:window.open('{Image}','_blank')"
      }
    }]
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: [JSAPI 4.7][PopupTemplate] mediaInfo image click to open link in new window

irtizahussain — Tue, 12 Feb 2019 06:55:04 GMT

In your service define any field name let's suppose Image_URL and set it's property as (<img alt="File" src="YOUR_SERVICE_HERE"/>) and call that field in popup as below.

Hope it work for you

{
fieldName: "Image_URL",
label: "Image URL",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}