I have a featureLayer that has attachments. I'd like the attachments to be added as an image in the infoTemplate. I have a function to generate its content . If I put in a breakpoint on the line return formatString, it gets to it before it evaluates queryAttachmentInfos.
It is finding the right URL for the attachment. The rest of the tag is populated, it just doesn't have the image I expect.
var infoTemplate = new InfoTemplate(); infoTemplate.setContent(setWindowContent); function setWindowContent(graphic){ var formatString = ""; var imageString = ""; var imageStyle = " height='30' width='30' alt='site image'"; var objectId = graphic.attributes[featureLayer.objectIdField]; formatString = "<b>"+graphic.attributes.Facility +"</b><br/>" +graphic.attributes.Address+"<br/>" + graphic.attributes.City+", " + graphic.attributes.State ; featureLayer.queryAttachmentInfos(objectId, function(infos){ var imgSrc; if (!!infos[0].url) { imgSrc = infos[0].url; } if (imgSrc){ imageString = "</br><img src='"+imgSrc +"' " + imageStyle+">"; console.log(imageString); // I am getting value here formatString += imageString; } }); return formatString; }
Solved! Go to Solution.
I fixed it, I think. I'll leave my jsBin out there. Someone will need this eventually, there are too many unanswered threads related to it.
The last thing I wanted to do is change the alignment of the image so that it appears next to the next and not above it.
This is crude, but you get the idea.
This is the code for having the image be above the text:
var selectQuery = new Query(); on(featureLayer, "click", function(evt){ formatString = ""; var objectId = evt.graphic.attributes[featureLayer.objectIdField]; selectQuery.objectIds = [objectId]; featureLayer.selectFeatures(selectQuery); on(featureLayer, 'selection-complete', setWindowContent); function setWindowContent(results){ var imageString = ""; var imageStyle = " height='60' width='60' alt='site image' float='left'"; var deferred = new Deferred; var graphic = results.features[0]; var objectId = graphic.attributes[featureLayer.objectIdField]; featureLayer.queryAttachmentInfos(objectId).then(function(response){ var imgSrc; if (response.length === 0) { deferred.resolve("no attachments"); }else { imgSrc = response[0].url; imageString = "<img src='"+imgSrc +"' " + imageStyle+">"; formatString += imageString; } formatString += "<br><b>"+graphic.attributes.Facility +"</b><br/>" +graphic.attributes.Address+"<br/>" + graphic.attributes.City+", " + graphic.attributes.State ; infoTemplate.setContent(formatString); }); map.enableMapNavigation(); }
Here's the variation where the image is placed next to the text, rather than above it, using a table with one row:
function setWindowContent(results){ map.infoWindow.resize(240, 100); var imageString = "<table><tr>"; var imageStyle = "alt='site image' style='height=:40px width:40px float:left'"; var deferred = new Deferred; var graphic = results.features[0]; var objectId = graphic.attributes[featureLayer.objectIdField]; featureLayer.queryAttachmentInfos(objectId).then(function(response){ var imgSrc; if (response.length === 0) { deferred.resolve("no attachments"); } else { imgSrc = response[0].url; imageString += "<td><img src='" + imgSrc + "' " + imageStyle + "></td>"; formatString += imageString; } formatString += "<td><b>" + graphic.attributes.Facility + "</b><br/>" + graphic.attributes.Address + "<br/>" + graphic.attributes.City + ", " + graphic.attributes.State + "<td></tr></table>"; infoTemplate.setContent(formatString); infoTemplate.setTitle(" "); }); map.enableMapNavigation(); }
I'm not feeling too good about this. There are several threads related to this, but none of them have much of a solution. He're what I have so far:
I fixed it, I think. I'll leave my jsBin out there. Someone will need this eventually, there are too many unanswered threads related to it.
The last thing I wanted to do is change the alignment of the image so that it appears next to the next and not above it.
This is crude, but you get the idea.
This is the code for having the image be above the text:
var selectQuery = new Query(); on(featureLayer, "click", function(evt){ formatString = ""; var objectId = evt.graphic.attributes[featureLayer.objectIdField]; selectQuery.objectIds = [objectId]; featureLayer.selectFeatures(selectQuery); on(featureLayer, 'selection-complete', setWindowContent); function setWindowContent(results){ var imageString = ""; var imageStyle = " height='60' width='60' alt='site image' float='left'"; var deferred = new Deferred; var graphic = results.features[0]; var objectId = graphic.attributes[featureLayer.objectIdField]; featureLayer.queryAttachmentInfos(objectId).then(function(response){ var imgSrc; if (response.length === 0) { deferred.resolve("no attachments"); }else { imgSrc = response[0].url; imageString = "<img src='"+imgSrc +"' " + imageStyle+">"; formatString += imageString; } formatString += "<br><b>"+graphic.attributes.Facility +"</b><br/>" +graphic.attributes.Address+"<br/>" + graphic.attributes.City+", " + graphic.attributes.State ; infoTemplate.setContent(formatString); }); map.enableMapNavigation(); }
Here's the variation where the image is placed next to the text, rather than above it, using a table with one row:
function setWindowContent(results){ map.infoWindow.resize(240, 100); var imageString = "<table><tr>"; var imageStyle = "alt='site image' style='height=:40px width:40px float:left'"; var deferred = new Deferred; var graphic = results.features[0]; var objectId = graphic.attributes[featureLayer.objectIdField]; featureLayer.queryAttachmentInfos(objectId).then(function(response){ var imgSrc; if (response.length === 0) { deferred.resolve("no attachments"); } else { imgSrc = response[0].url; imageString += "<td><img src='" + imgSrc + "' " + imageStyle + "></td>"; formatString += imageString; } formatString += "<td><b>" + graphic.attributes.Facility + "</b><br/>" + graphic.attributes.Address + "<br/>" + graphic.attributes.City + ", " + graphic.attributes.State + "<td></tr></table>"; infoTemplate.setContent(formatString); infoTemplate.setTitle(" "); }); map.enableMapNavigation(); }