topic Re: Labels missing in Print output in ArcGIS JavaScript Maps SDK Questions

Labels missing in Print output

UjjwalNigam — Thu, 18 Oct 2018 01:27:15 GMT

Hi,

I am trying to print secured services and it works fine for most of the part except that the labeling info does not show on the print output.

While I am preparing the map, the labels do appear, but do not show up on print output.

I am using ESRI JS API v3.25.

var labelJson = {
"labelExpressionInfo": { "expression": "" },
"useCodedValues": false,
"labelPlacement": ""
};

labelJson.labelExpressionInfo.expression = "CONCATENATE([$feature.NAME, $feature.CLASS], ' / ')";
labelJson.labelPlacement = "above-right";

var labelSymbol = new textSymbol();

var lblClass = new labelClass(labelJson);
lblClass.symbol = labelSymbol;
printFeatLyrEquipment.setLabelingInfo([lblClass]); //this is a Feature layer

map.addLayer(printFeatLyrEquipment);

Not sure why is it not printing the labels...any clues?

Thanks in advance!

~UJ

Re: Labels missing in Print output

UjjwalNigam — Mon, 22 Oct 2018 11:38:34 GMT

Okay...so feature layers don't seem to support labels while printing.

I turned on the relevant layers from the dynamic service using setVisibleLayers() and apply definition query/label expression using setDefinitionExpression() & setDynamicLayerInfos() respectively - and the labels appear beautifully in the print output!!!

Regards

Re: Labels missing in Print output

Noah-Sager — Thu, 08 Nov 2018 23:27:48 GMT

Just to chime in here, there are a couple of caveats about printing labels with FeatureLayers:

Labels currently cannot be printed as part of a FeatureLayer with ArcGIS Server 10.5.1 or any Printing Service published with ArcMap.

PrintTask | API Reference | ArcGIS API for JavaScript 4.9

Currently the labelsVisible property must be explicitly set to true for labels to be printed.

FeatureLayer | API Reference | ArcGIS API for JavaScript 4.9

-Noah

Re: Labels missing in Print output

RubyStroschein — Tue, 09 Apr 2019 10:44:31 GMT

So if I understand well with 4.9 API it is not possible to print FeatureLayer labels but with older 3.xx this is possible?

I have same problem and I'm using 4.9 js API.

Re: Labels missing in Print output

Noah-Sager — Tue, 09 Apr 2019 15:42:14 GMT

This should work fine at 4.9. I am pretty sure that printing labels has been supported since labeling was introduced to 2D MapViews at version 4.8. What sort of issue are you seeing?

Re: Labels missing in Print output

RubyStroschein — Mon, 22 Apr 2019 19:40:55 GMT

We now use view.takeScreenshot() but labels added to view as labelClass didn't show on result image of PrintTask

var labelClass = {

// autocasts as new LabelClass()

symbol: {

type: "text", // autocasts as new TextSymbol()

color: "white",

haloColor: "black",

labelPlacement: "above-center",

labelExpressionInfo: {

expression: "Round($feature.CALCACRES,2)"

}

};

cluLayer = new w.FeatureLayer({url: url,
labelingInfo: [labelClass],
renderer: renderer
})
map.add(cluLayer);

Re: Labels missing in Print output

Noah-Sager — Thu, 25 Apr 2019 17:10:21 GMT

I think in this case the labelsVisible property must be explicitly set to true for labels to be printed.

Re: Labels missing in Print output

ReaganSenoron — Tue, 18 Aug 2020 10:32:07 GMT

Is it possible to post your solution here? We have the same problem. We are using FeatureLayer and labels are missing when exported as pdf/image. Thanks

Re: Labels missing in Print output

UjjwalNigam — Wed, 19 Aug 2020 04:11:00 GMT

Hello Reagan,

I cannot post the entire solution, but the main snippets on labeling are shown below.

I Hope it helps.

PS: I replied to your email but the mail bounced back.

Regards

Ujjwal

if (readyToPrint) {

$.when(ExportMapOverview()).done(function () {

$.when(AddPrintLayers(selectedPrintTemplate)).done(function () {

showProgressBar();

$.when(OverlayMapGrid()).done(function () {

setTimeout(TriggerPrintJob, 3000); //otherwise labels don't make it to the output!

});

readyToPrint = false;

});

}

function PrepareLabellingInfo(lblFields) {

if (lblFields.indexOf(",") > 0) {

labelAttr = "CONCATENATE([";

$.each(lblFields.split(","), function (indx, val) {

labelAttr += "$feature." + val.trim() + ",";

});

labelAttr = labelAttr.slice(0, labelAttr.lastIndexOf(","));

labelAttr += "],',')"; //separator is ','

}

else

labelAttr = "$feature." + lblFields;

}

function TriggerPrintJob() {

var printTemplateObj, printParams, printTaskObj;

printTaskObj = new printTask(printGPTaskUrl + "?token=" + token);

printTemplateObj = new printTemplate();

printParams = new printParameters();

printTemplateObj.exportOptions = {

width: pageWidth,

height: pageHeight,

dpi: pageDpi

};

printTemplateObj.format = "PNG32";

printTemplateObj.layout = "MAP_ONLY";

printParams.map = map;

printParams.template = printTemplateObj;

var Web_Map_as_JSON = printTaskObj._getPrintDefinition(map, printParams);

delete Web_Map_as_JSON.operationalLayers[0].token;

//add export options

var expOptions = ', "exportOptions":{"outputSize":[' + pageWidth + ',' + pageHeight + '],"dpi":' + pageDpi + '}';

var strWebMapJson = JSON.stringify(Web_Map_as_JSON);

Web_Map_as_JSON = strWebMapJson.slice(0, strWebMapJson.lastIndexOf('}')) + expOptions + '}';

var payLoad = {

"Web_Map_as_JSON": Web_Map_as_JSON,

"Format": "PNG32",

"Layout_Template": "MAP_ONLY",

"f": "json"

};

//call execute endpoint via XHR

$.ajax({

type: "POST",

url: printGPTaskUrl + "?token=" + token,

data: payLoad,

success: printSuccess

});

function printSuccess(result) {

readyToPrint = false;

var resultJson = JSON.parse(result);

if (resultJson.error == null) {//success

printImgSrc = resultJson.results[0].value.url;

var printPageElements = '{' +

'"templateName" : "' + selectedPrintTemplate + '",' +

'"imageSource" : "' + printImgSrc + '",' +

'"overviewImageSource" : "' + overviewImgSrc + '",' +

'"mapExtents" : "' + map.extent.xmin + ';' + map.extent.ymin + ';' + map.extent.xmax + ';' + map.extent.ymax + '",' +

'"mapScale" : "' + map.getScale() + '",' +

...

'"remarks" : "' + document.getElementById("txtRemarks").value + '"' +

'}';

localStorage.setItem("printPageElements", printPageElements);

ShowPrintOutput();

$.when(RemovePrintLayers(selectedPrintTemplate)).done(function () {

hideProgressBar();

});

}

else {

readyToPrint = false;

alert("Error generating print!\nPlease contact administrator.");

console.log("Error generating print - " + resultJson.error.message);

$.when(RemovePrintLayers(selectedPrintTemplate)).done(function () {

hideProgressBar();

});

}