I am trying to format the info window template and it is not working. here is my code below:
Also, is it possible to change the background color of the info window header through css?
var identify = new esri.tasks.IdentifyTask(".../MapServer");
var identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.geometry = evt.mapPoint;
identifyParams.mapExtent = map.extent;
identifyParams.returnGeometry = true;
identifyParams.tolerance = 3;
map.infoWindow.clearFeatures();
//Define a good infoTemplate
var infoTemplateUtilities = new InfoTemplate();
infoTemplateUtilities.setTitle("Facility: <b>${FACILITYID}</b>");
infoTemplateUtilities.setContent("MAPREF NUMBER : <b>${MAPREF}</b><br/>" +
"<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
"<b>2000: </b>${POP2000:NumberFormat}<br/>" +
"<b>2000 density: </b>${POP00_SQMI:NumberFormat}");
try {
identify.execute(identifyParams, function (results) {
map.infoWindow.setFeatures(dojo.map(results, function (result) {
var feature = result.feature;
feature.infoTemplate.setInfoTemplate(infoTemplateUtilities); //<====== This method here does not work at all...
//feature.setInfoTemplate(new esri.InfoTemplate()); //<====== This method here works fine...
return feature;
}));
map.infoWindow.show(evt.mapPoint);
});
}
catch (ex) {
alert(ex.toString());
}
Solved! Go to Solution.
Hi Richard,
Two things to check
1) do you require esri/InfoTemplate
2) on line 12 above var infoTemplateUtilities = new InfoTemplate();
I think you should define it like var infoTemplateUtilities = new esri.InfoTemplate();
Hi Richard,
feature.setInfoTemplate(infoTemplateUtilities); should work.
for changing the backgrounf color use
.esriPopup .titlePane{
background-color: #ffffff
}
Thank you Riyas, the css worked but the info template did not. I am not sure why the Info Window is not showing up when I use feature.setInfoTemplate(infoTemplateUtilities);
It does work when I use feature.setInfoTemplate(new esri.InfoTemplate());
I am also wondering if the number of fields to show could be the issue?
because when using the default method feature.setInfoTemplate(new esri.InfoTemplate());
it shows all the fields in the info window.
Hi Richard,
Have you got fields POP07_SQMI, POP2000, POP00_SQMI in your layer. can you post a screenshot of your infowindow output?
here is the infoTemplate I want to use:
//Define a good infoTemplate
var infoTemplateUtilities = new InfoTemplate();
infoTemplateUtilities.setTitle("Facility: <b>${FACILITYID}</b>");
infoTemplateUtilities.setContent("MAPREF NUMBER : <b>${MAPREF}</b><br/>" +
"<b>Install Date: </b>${INSTALLDATE}<br/><br/>" +
"<b>Material: </b>${MATERIAL}<br/>" +
"<b>Diameter: </b>${DIAMETER}");
try {
identify.execute(identifyParams, function (results) {
map.infoWindow.setFeatures(dojo.map(results, function (result) {
var feature = result.feature;
feature.setInfoTemplate(infoTemplateUtilities);
//feature.setInfoTemplate(new esri.InfoTemplate());
return feature;
}));
map.infoWindow.show(evt.mapPoint);
});
}
catch (ex) {
alert(ex.toString());
}
and here is the Default info Template
The method set setInfoTemplate() belongs to the feature (graphic) not the feature's infoTemplate object.
feature.setInfoTemplate(infoTemplateUtilities)
The popup is fully customizable w/ css. Look it up with dev tools. It's a div in the map dom node w/ base class "esriPopup".
Thank you Ben,
still did not work.
Hi Richard,
Two things to check
1) do you require esri/InfoTemplate
2) on line 12 above var infoTemplateUtilities = new InfoTemplate();
I think you should define it like var infoTemplateUtilities = new esri.InfoTemplate();
Richard,
Scott's right. Looks like you're using legacy. Consider switching to AMD.