How do I get coordinates in a popup?

[ITApplications]

Good afternoon all

I'm just (for the first time)  attempting to build a simple ArcGIS API that will allow a customer to click on a street on a map (using our streets feature layer) and log a pothole defect. Please forgive me if I use the wrong terminology or my request is overly simple.

When a customer clicks on the street to log the pothole we need some basic info which we'll then capture. Using our streets feature layer I've created a popup which will give us three (out the four) essential details we need to pass back to our CRM system. 

The final detail we need to feed back is the X,Y coordinates for the exact geographical location of the pothole. so wherever the customer clicks on the street it will give us those exact coordinates.  I currently can't fathom how to get these to appear in the popup. I can add a reverse geocode service which gives me the coordinates but it then doesn't fire the popup from the feature layer, so I'm then missing 3 out of the 4 details. 

I'm hoping someone can please advise/show me the code of how to add this function to the popup. The API is in its early stage hence it currently being untidy.

Thank you in advance.

Ricky

Here is my current code: Master - Access features with point events (ESRI Map) (codepen.io)

Sample of my very basic popup code:

// Define a pop-up template for Streets
const popupStreetLayer = {
"title": "Drop Pin",
"content": "<b>Street:</b> {SITE_NAME}<br><b>Town:</b> {TOWN_NAME}<br><b>USRN:</b> {SITE_CODE}"
}
const streetLayer = new FeatureLayer({
url: "https://services6.arcgis.com/Qptn479QktK11k72/arcgis/rest/services/Stsearch/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupStreetLayer
});

[SteveCole]

Rather than defining the popup content during layer construction like you have listed, I would suggest using the function option for popup content instead. The benefit of doing this is that the function is passed a graphic feature which then gives you access to the coordinates of where a user clicked.

// The following snippet shows how to use a function
// to create a simple node and display it in the popup template content
let template = new PopupTemplate({
  title: "Population by Gender",
  content: setContentInfo
});

function setContentInfo(feature){
  // create a chart for example
  let node = domConstruct.create("div", { innerHTML: "Text Element inside an HTML div element." });
  return node;
}

Steve

[ITApplications]

Hi Steve

Thank you for the info. I've tried to incorporate the function option as suggested into the popup that displays coordinates as suggested by Lauren below. I can get the coordinates popup to fire up fine, but I can't get the function option to bring back the field from the feature layer. I'm sure I'm missing something somewhere, what have I missed?

https://codepen.io/RFletERYC/pen/RwxLroP

// Streets feature layer
var streetLayer = new FeatureLayer({
url: "https://services6.arcgis.com/Qptn479QktK11k72/arcgis/rest/services/StsearchTest/FeatureServer/0",
outFields: ["*"]
});

map.add(streetLayer, 0); //Adds Streets layer to map


view.popup.autoOpenEnabled = false;
view.on("click", (event) => {
// Get the coordinates of the click on the view
// around the decimals to 3 decimals
const x = Math.round(event.mapPoint.x * 1) / 1;
const y = Math.round(event.mapPoint.y * 1) / 1;

view.popup.open({
// Set the popup's title to the coordinates of the clicked location
title: "X, Y Coordinates: [" + x + ", " + y + "]",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: setContentInfo
});
});
let template = new PopupTemplate ({
title: "Test",
content: "Site: {SITE_NAME}"
});

function setContentInfo(streetLayer){
let node = domConstruct.create("div", {innerHTML: "Text Element inside an HTML div element."});
return node;

}

Thank you in advance.

[LaurenBoyd]

Hi @ITApplications -

Have you seen this sample we have that disables the popup from automatically opening so that you can do some calculations before you call popup.open manually at the location that was clicked?https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/

This allows you to configure the popup template how you want it to look with the x,y coordinates from the click event before opening the popup. I would also suggest that you use a function to format the content as @SteveCole mentioned, you can also get the x,y coordinates of the clicked feature that way!

Hope this helps!

[ITApplications]

Hi Lauren

Thank you for the info. I've tried to incorporate the function option as suggested by Steve into the popup that displays coordinates as suggested by you. I can get the coordinates popup to fire up fine, but I can't get the function option to bring back the field from the feature layer. I'm sure I'm missing something somewhere, what have I missed?

https://codepen.io/RFletERYC/pen/RwxLroP

// Streets feature layer
var streetLayer = new FeatureLayer({
url: "https://services6.arcgis.com/Qptn479QktK11k72/arcgis/rest/services/StsearchTest/FeatureServer/0",
outFields: ["*"]
});

map.add(streetLayer, 0); //Adds Streets layer to map


view.popup.autoOpenEnabled = false;
view.on("click", (event) => {
// Get the coordinates of the click on the view
// around the decimals to 3 decimals
const x = Math.round(event.mapPoint.x * 1) / 1;
const y = Math.round(event.mapPoint.y * 1) / 1;

view.popup.open({
// Set the popup's title to the coordinates of the clicked location
title: "X, Y Coordinates: [" + x + ", " + y + "]",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: setContentInfo
});
});
let template = new PopupTemplate ({
title: "Test",
content: "Site: {SITE_NAME}"
});

function setContentInfo(streetLayer){
let node = domConstruct.create("div", {innerHTML: "Text Element inside an HTML div element."});
return node;

}

Thank you in advance.