Issue when displaying a Popup window in the ESRI Map

UsmanAziz — Wed, 29 Dec 2021 09:42:39 GMT

Currently, my Esri Map is displaying the locations on the Esri Map as pinpoints after I pass the location details(latitude, longitude, etc..) to the Esri Map.

So, now what I wanted is when a user clicks on a specific pinpoint, I want to show a popup template and display a table containing its Address, longitude, latitude, etc. I want to dynamically iterate through the array of location objects which I already have(locationData) and set popupTemplate title, content, feildInfo, fieldName etc.

Here is what I have done and I'm getting the following console error now.

const popUpTemplate = new PopupTemplate({
title: '',
content: locationData.map((d,i)=>(
[
  {
    type:"fields",
    fieldInfos: [
      {
          fieldName: d.address,
          label: "Address"
      },
      {
          fieldName: d.latitude,
          label: "Latitude",
          format: {
              places: 2
          }
      },
      {
          fieldName: d.longitude,
          label: "Longitude",
          format: {
              places: 2
          }
      }
    ]
  },
  new CustomContent({
    outFields: ["*"],
    creator: (event) => {
        const a = document.createElement("a");
        // a.href = event.graphic.attributes.url;
        a.target = "_blank";
        // a.innerText = event.graphic.attributes.url;
        return a;
    }
 })
 ]
 ))
});



const dataFeedLayer = new FeatureLayer({
 source: horizonData.map((d,i)=>(
  {
      geometry: new Point({
        longitude: d.longitude,
        latitude: d.latitude
      }),
      attributes: {
        ObjectID: i,
        ...d
      }
  }
)),
fields: [
  {
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
  },
  {
      name: "name",
      alias: "Name",
      type: "string"
  },
  {
      name: "addrs",
      alias: "addrs",
      type: "string"
  },
  {
      name: "url",
      alias: "url",
      type: "string"
  },
  {
      name: "lat",
      alias: "Latitude",
      type: "double"
  },
  {
      name: "lon",
      alias: "Longitude",
      type: "double"
  }
],
 objectIdField: 'ObjectID',
 geometryType: "point",
 renderer: renderer,
 popupTemplate: popUpTemplate,
});

webmap.add(dataFeedLayer);

[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.popup.content.MediaContent', 'esri.popup.content.CustomContent', 'esri.popup.content.TextContent', 'esri.popup.content.AttachmentsContent', 'esri.popup.content.FieldsContent', or a plain object that can autocast (having .type = 'media', 'custom', 'text', 'attachments', 'fields')

Any idea on how to resolve this. Thanks in advance.

topic Issue when displaying a Popup window in the ESRI Map in ArcGIS JavaScript Maps SDK Videos

Issue when displaying a Popup window in the ESRI Map