I want to display a hyperlink on the bottom of the popup template in arcgis esri map. I've added the code I've tried, but hyperlink is not displaying in the popup template. Only the fields table is displaying. Could you please have look into this code and let me know if I've missed something.
.ts file
const popUpTemplate = new PopupTemplate({
title: "{name}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "PhysicianName",
label: "Physician Name"
},
{
fieldName: "Practice",
label: "Primary Practise",
},
]
},
new CustomContent({
outFields: ["*"],
creator: (graphic) => {
const a = document.createElement("a");
a.href = "https://www.youtube.com/";
a.target = "_blank";
a.innerText = graphic.attributes.PhysicianName;
return a;
}
})
],
outFields: ["*"]
});
const myLayer = new FeatureLayer({
source: physicianData.map((d,i)=>(
{
geometry: new Point({
longitude: d.Longitude,
latitude: d.Latitude
}),
attributes: {
ObjectID: i,
name : d.PhysicianName,
PhysicianName : d.PhysicianName,
Practice : d.Practice,
...d
}
}
)),
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "name",
alias: "Physician : ",
type: "string"
},
{
name: "PhysicianName",
alias: "Physician Name",
type: "string"
},
{
name: "Practice",
alias: "Practice",
type: "string"
},
],
objectIdField: 'ObjectID',
geometryType: "point",
popupTemplate : popUpTemplate,
});
.html file
<div #mapViewNode></div>
I think your issue is that you need to define the fields of the layer.
If you are working with client side graphics and FeatureLayer, you need to set:
source, the collection of graphics (geometry + attributes)objectIdField, the field that is going to identify the graphics, type oid (*)fields, the name, alias, and type of each field of the graphics attributesIn your case, just by deducing the possible attributes, it should be something like this
const dataFeedLayer = new FeatureLayer({
source: locationData.map((d,i)=>(
{
geometry: new Point({
longitude: d.longitude,
latitude: d.latitude
}),
attributes: {
ObjectID: i,
...d
}
}
)),
objectIdField: 'ObjectID',
popupTemplate : popUpTemplate,
fields: [
{
name: "ObjectID",
alias: "ID",
type: "oid"
},
{
name: "PhysicianName",
alias: "Physician Name",
type: "string"
},
{
name: "PrimarySpecialty",
alias: "Primary Specialty",
type: "string"
},
{
name: "url",
alias: "Url",
type: "string"
}
]
});
When creating a FeatureLayer from client-side features, this property should be set in the constructor along with the source property. The objectId field also must be set either in this array or in the objectIdField property.