Setting legendLayer subLayerIds for PrintTask with Multiple Map Services

LoriEmerson_McCormack · ‎06-13-2017

I have successfully gotten the PrintTask to work with multiple map services with a legend. By hard-coding the list of legendLayer.subLayerIds, it works.

However, I want to look up the visible layers in the map and return an array of layer indexes and assign that array to the legendLayer.subLayerIds for each map service. I have tried various things such as (1.) using a loop and pushing each array value into legendLayer.subLayerIds, (2.) using brackets (e.g., legendLayer.subLayerIds = [returnedArray], (3.) creating a string instead of an array with commas in between each layer index (e.g., "[38,44]"). Option (3.) actually works, but even if I pass a blank string (e.g., "[ ]"), all of the visible layers for that map service are included in the print legend.

Here is the code that works with the hard-coded values for the legendLayer.subLayerIds:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

.esriPopup .titlePane {
text-shadow: none;
}

.esriPopup .titleButton.next {
right: 40px;
}

.esriPopup .titleButton.prev {
right: 53px;
}

.demographicInfoContent {
padding-top: 10px;
}

.demographicInnerSpacing {
display: inline-block;
width: 8px;
}

.demographicNumericPadding {
width: 90px;
display: inline-block;
text-align: right;
}
#info{
top: 0px;
right: 0px;
position: absolute;
z-index: 99;
opacity: 0.9;
background-color: whitesmoke;
border-bottom-left-radius: 8px;
padding: 0px 0px 0px 10px;
}

#infoPrint{
bottom: 5px;
left: 5px;
position: absolute;
z-index: 99;
opacity: 0.9;
background-color: lightpink;
border-top-right-radius: 8px;
padding: 10px 10px 20px 10px;
width: 20%;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
$(document).ready(function () {
var map;
// layer indexes in the map services
var indexPoint_StormwaterOuterZoom = 34;
var indexPoint_StormwaterMiddleZoom = 35;
var indexPoint_StormwaterCloseUpZoom = 36;
var indexPoint_ControlPts = 1;
var indexPoint_FiberPts = 9;
var indexPoint_ReferencePts = 11;
var indexPoint_SchoolBusStopsOSPI = 19;
var indexPoint_AvistaPoleStructure = 28;
var indexPoint_Shop = 5;
var indexLine_PriorityArray = 13;
var indexLine_RoadSegments = 38;
var indexLine_Railroad = 41;
var indexLine_Waterline = 44;
var indexPoly_NoTrucks = 32;
var indexPoly_CountyBdry = 13;
var indexPoly_Parcels = 53;
var indexPoly_MuniBdry = 83;
var indexPoly_Waterbody = 27;
require([
"dojo/dom-construct",
"esri/Color",
"esri/dijit/Popup",
"esri/InfoTemplate",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/map",
"esri/tasks/PrintTask",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/tasks/LegendLayer",
"esri/config",
"dojo/parser",
"dojo/domReady!"
], function (
domConstruct, Color, Popup, InfoTemplate, Legend,
ArcGISDynamicMapServiceLayer, Map,
PrintTask, PrintTemplate, PrintParameters, LegendLayer,
esriConfig,
parser
) {

parser.parse();
//This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;

var initialExtent = new esri.geometry.Extent(
-117.83, 47.23,
-117.03, 48.055,
new esri.SpatialReference({ wkid: 4326 })
);

map = new Map("ui-esri-map", {
basemap: "topo",
extent: initialExtent,
sliderStyle: "small"
});

var polygonsLayer = new ArcGISDynamicMapServiceLayer("http://igis.spokanecounty.org/arcgis/rest/services/PublicWorks/PublicWorksQueriesPolygons/MapServer", {
"id": "polygonsLayer",
"opacity": 0.75
});

polygonsLayer.setVisibleLayers([53]);
map.addLayer(polygonsLayer);

var linesLayer = new ArcGISDynamicMapServiceLayer("http://igis.spokanecounty.org/arcgis/rest/services/PublicWorks/PublicWorksQueriesLines/MapServer", {
"id": "linesLayer",
"opacity": 0.75
});

linesLayer.setVisibleLayers([38]);
map.addLayer(linesLayer);

var pointsLayerURL = "http://igis.spokanecounty.org/arcgis/rest/services/PublicWorks/PublicWorksQueriesPoints/MapServer";
var pointsLayerOptions = {
"id": "pointsLayer",
"opacity": 0.8,
"showAttribution": false
};
var pointsLayer = new ArcGISDynamicMapServiceLayer(pointsLayerURL, pointsLayerOptions);

pointsLayer.setVisibleLayers([4, 5]);
map.addLayer(pointsLayer);

map.on("load", function (evt) {
var legend = new Legend({
map: map,
layerInfos: [{
layer: linesLayer,
title: "Lines Layer"
},
{
layer: pointsLayer,
hideLayers: [4],
title: "Points Layer"
}]
}, "legendDiv");

legend.startup();

firstPrint();
});

var customHeader = 'Spokane County Public Works';
var customScale;
var printToScale;

// ***************************************************************
// btnPrint click function
// ***************************************************************
$('#btnPrint').on('click', function () {
$(document.body).css({ 'cursor': 'wait' });
map.setMapCursor("wait");
if ($('#txtCustomHeader').val().length < 1) {
customHeader = 'Spokane County Public Works'
}
else {
customHeader = $('#txtCustomHeader').val();
}
if ($('#chkPrintScale').is(':checked')) {
printToScale = true;
}
else {
printToScale = false;
}

if ($('#txtCustomScale').val().length < 1) {
customScale = map.getScale();
}
else {
customScale = $('#txtCustomScale').val();
}
// points legend
var legendLayerPrintPoints = new LegendLayer();
legendLayerPrintPoints.layerId = "pointsLayer";
legendLayerPrintPoints.subLayerIds = [indexPoint_Shop];
// lines legend
var legendLayerPrintLines = new LegendLayer();
legendLayerPrintLines.layerId = "linesLayer";
legendLayerPrintLines.subLayerIds = [indexLine_RoadSegments];
// polygons legend
var legendLayerPrintPolygons = new LegendLayer();
legendLayerPrintPolygons.layerId = "polygonsLayer";
legendLayerPrintPolygons.subLayerIds = [indexPoly_CountyBdry, indexPoly_Parcels, indexPoly_MuniBdry];

if ($('#chkPrintLegend').is(':checked')) {
legendLayerPrintPoints.subLayerIds = visiblePrintSublayerPoints;
legendLayerPrintLines.subLayerIds = visiblePrintSublayerLines;
legendLayerPrintPolygons.subLayerIds = visiblePrintSublayerPolygons;
}
else {
legendLayerPrintPoints.subLayerIds = [];
legendLayerPrintLines.subLayerIds = [];
legendLayerPrintPolygons.subLayerIds = [];
}

var printUrl = "http://gisfarm.spokanecounty.org/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%...";
var printTask = new PrintTask(printUrl);
var template = new PrintTemplate();
template.format = "PDF";
template.layout = $('#dlPrintTemplates').val();
template.layoutOptions = {
legendLayers: [legendLayerPrintPoints, legendLayerPrintLines, legendLayerPrintPolygons],
titleText: customHeader,
scalebarUnit: "Feet"
};
template.preserveScale = printToScale;
template.outScale = customScale;
var params = new PrintParameters();
params.map = map;
params.template = template;
printTask.execute(params, getPrinted, getPrintError);

function getPrinted(evt) {
window.open(evt.url);
$(document.body).css({ 'cursor': 'pointer' });
map.setMapCursor("pointer");
}

function getPrintError(evt) {
alert(evt);
$(document.body).css({ 'cursor': 'pointer' });
map.setMapCursor("pointer");
}
}); // end btn-Print click function

// ***************************************************************
// first print ; need to execute this on map load to avoid a print error
// ***************************************************************
function firstPrint() {
var legendLayer = new esri.tasks.LegendLayer();
legendLayer.layerId = "pointsLayer";
legendLayer.subLayerIds = [4];
//alert(e.target.id);
printUrl = "http://gisfarm.spokanecounty.org/arcgis/rest/services/PublicWorks/CustomPrintLayouts/GPServer/Export...";
var printTask = new PrintTask(printUrl);
var template = new PrintTemplate();
//var nparcel = ;
template.format = "PDF";
template.layout = "ParcelLayoutLandscape";
template.layoutOptions = {
legendLayers: []
};
template.preserveScale = true;
var params = new PrintParameters();
params.map = map;
params.template = template;
printTask.execute(params, getPrinted, getPrintError);

function getPrinted(evt) {
//window.open(evt.url);
}

function getPrintError(evt) {
alert(evt);
}
// do something on button click
}

}); // end require
}); // end document ready

</script>
</head>
<body>
<div id="ui-esri-map"></div>
<div id="info">
<div id="legendDiv"></div>
</div>
<div id="infoPrint">
<div id="PrintDiv">
<div>Basic Print: To print the map with added graphics select Template from Print Template list. To include custom header or print at specficied scale select Template then enter those values.</div>


<br>
<div>
<label for="txtPrintTemplates">Print Templates</label>
<select id="dlPrintTemplates" style="width:100%;">
<option value="Letter ANSI A Landscape">Letter Landscape(PDF)</option>
<option value="Letter ANSI A Portrait">Letter Portrait(PDF)</option>
<option value="MAP_ONLY">Map Only Landscape(PNG)</option>
<option value="Tabloid ANSI B Landscape">Tabloid Landscape(PDF)</option>
<option value="Tabloid ANSI B Portrait">Tabloid Portrait(PDF)</option>
</select>
</div>
<div>
<label for="txtCustomHeader">Custom Header</label>
<input id="txtCustomHeader" placeholder="Enter custom Header..." style="width:100%;" />
</div>
<div>
<input id="chkPrintScale" type="checkbox" />
<label for="chkPrintScale">Print to Scale</label>
</div>
<div>
<label for="txtCustomScale">Custom Scale</label>
<input id="txtCustomScale" placeholder="Enter print Scale in inches" style="width:100%;" />
</div>
<div>
<input id="chkPrintLegend" type="checkbox" />
<label for="chkPrintLegend">Print Legend</label>
</div>
<input type="submit" value="Print" id="btnPrint" />
</div>
</div>
</body>
</html>

LoriEmerson_McCormack · ‎06-23-2017

The problem was that the array I was building considered the numbers as string rather than integer, so I had to use parseInt.

I should have included this code in my original post. I thought I was misunderstanding the subLayerIds String[] type.