Popup contents

ITApplications

Hi

I have a popup that displays coordinates and I'd like the popup to also display details of a feature if selected. I can get my popup to display the coordinates or the feature details but I'm missing the connection on how to get it to do both at the same time. 

My knowledge is fairly basic and I've cobbled together what I've currently got from other templates. I'm just missing the final piece in the jigsaw.

I got from here how to display the coordinates: https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/

I'm aware that this line disables the popup template for my features from automatically opening so it can do some calculations before displaying the coordinates  view.popup.autoOpenEnabled = false;   so if I toggle to true I can see my feature details but not the coordinates.

My full code is here: https://codepen.io/RFletERYC/pen/gOoLxGy

I'm guessing I need some sort of function in the code that follows (view.popup.open) to fire the template up as part of the click event for the coordinates?

The coordinates work great (flag set to false)

The popup template works great (flag set to true)

 

How do I combine two? Thank you

 

 

KristianEkenes

Hey,

 

To combine the two, you will need to use a custom content element outside of the text element. Here's a working example: https://codepen.io/kekenes/pen/abEjpoY

The key code snippet is in the poupTemplate:

 

const popupStreets = {
  "title": "Streets",
  "content": [{
    type: "text",
    text: "<b>USRN:</b> {SITE_CODE}<br><b>Street Name:</b> {SITE_NAME}<br><b>Town Name:</b> {TOWN_NAME}"
  }, {
    type: "custom",
    creator: (graphic) => {
      const location = view.popup.location;
      return `x: ${location.x}<br>y: ${location.y}`;
    }
  }]
}

 

Just keep the first content as a text element. Then add a custom element that defines a function. You can use this function do do whatever you need to in the popup that is "custom". In this case, you just want to return the popup location, which happens to be where the user clicked.

 

Hopefully that helps.