topic Re: Popup - URL link in ArcGIS JavaScript Maps SDK Questions

Popup - URL link

ITApplications — Thu, 11 Aug 2022 08:28:01 GMT

This may be an extremely simple answer but I can't work out how to get it to work (I'm very new to this so apologies if this is something very simple) .

I have a Web Map in ArcGIS Online and in there I am able to add custom HTML into the popup that provides a URL link to a 3rd party system (and it also passes data via URL params). That works great as a customer clicks on the link in the popup and it passes the feature data over.

I have a ArcGIS JS map that I've developed and I'd like to put the URL link into that popup also but I can't work out how to do it. My popup in JS is customised as well so it can pick up X/Y coordinates of where a customer puts their marker (it's to report potholes on a street).

How do I add the URL link (and params) into my existing code?

// Define pop-up for Streets layer
const popupStreets = {
"title": "Click to report an issue:",
"content": [{
type: "text",
text: "Street: {SITE_NAME} Town: {TOWN_NAME} "
}, {
type: "custom",
creator: (graphic) => {
const location = view.popup.location;
return `X: ${location.x.toFixed (0) } Y: ${location.y.toFixed (0)}`; //gets x/y coordinates
}
}]
}

This is code from the Online popup and I'm guessing I only need the part boxed in red.

How do I get that to work in my JS code please? Thanks

Re: Popup - URL link

JoelBennett — Thu, 11 Aug 2022 17:12:08 GMT

I think this may be what you're looking for (may need to double-check my typing for that URL though):

The most likely issue you were having is needing to escape the quotation marks surrounding the html element attributes, since this text is already inside of a JavaScript literal. When inside a JavaScript string, if you want a quotation mark in the string, you have to add a backslash before it, like: \"

Re: Popup - URL link

LaurenBoyd — Thu, 11 Aug 2022 21:59:19 GMT

Hi @ITApplications -

There are a couple of ways you could do this and I put together this sample to show how to add to your current custom content and display a hyperlink that contains information from the currently clicked feature: https://codepen.io/laurenb14/pen/VwXGbBP?editors=1000

Hope this helps!

Re: Popup - URL link

ITApplications — Fri, 19 Aug 2022 07:51:58 GMT

Thank you so much both you you. Both are great solutions. After trying them both I've ultimately gone with Lauren's suggestion as it allowed me to pass the X/Y of where a user drops a pin (to report a pothole) through the URL into a form on our CRM system. It works great.

Thanks both again

Ricky