nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legends for Tiled map services don't display in Print output?

JoanSteinbacher

I have downloaded the Basic Viewer template. I am creating my webmap with code (partial listing below).

        webmap.itemData = {           "operationalLayers": [              //Developable Land (display tiled service)            { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/LandUse/Developable_Land/MapServer",              "visibility": false,              "opacity": 1,              //"visibleLayers": [],              //"minScale": 100000,              //"maxScale": 0,              "title": "Developable Land",              "id": "devland",              "description": null            },            //Community-Based Planning Area (display dynamic map service)                                 { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/Websites/tpcCPA/MapServer",              "visibility": false,              "opacity": 0.6,              //"visibleLayers": [],              //"minScale": 100000,              //"maxScale": 0,              "title": "Community-Based Planning Areas",              "id": "cpa",              "description": null            },

I have added several operational layers (dynamic and tiled map services hosted on my server). All are being displayed in the map and legend as expected.

The problem is that when I print, the legend for the tiled map services are not being displayed on the print output. I have tested with a single tiled layer with only 1 legend entry, so I know it's not a matter of the legend getting cut off. The tiled service is displayed on the map of the printed output as expected.

Here's the addPrint function from the Basic Viewer. I commented out the 'legendLayers' setting so the legend will display.

function addPrint() {     var layoutOptions = {         'authorText': configOptions.owner,         'titleText': configOptions.title,         'scalebarUnit': (i18n.viewer.main.scaleBarUnits === 'english') ? 'Miles' : 'Kilometers',         //'legendLayers': [] //comment out so the legend will display by default, 6/13/13 jms.     };      //TODO - replace default templates with info from service     var templates = dojo.map(configOptions.printlayouts, function (layout) {         layout.layoutOptions = layoutOptions;         return layout;     });     // print dijit     var printer = new esri.dijit.Print({         map: map,         templates: templates,         url: configOptions.helperServices.printTask.url     }, dojo.create('span'));      dojo.query('.esriPrint').addClass('esriPrint');      dojo.byId('webmap-toolbar-center').appendChild(printer.printDomNode);      printer.startup();   }

Any idea why legends for tiled map services do not print? I am using the ESRI print service, though I wouldn't think that would make a difference.

Thanks,
Joan

Finde mehr Beiträge mit dem Tag

Accepted answers

ShreyasVakil

I would love to -- but how do I do that? Sorry, the obvious things evade me sometimes...

Please see the attached image.
[ATTACH=CONFIG]25376[/ATTACH]

Untitled.png

All comments

ShreyasVakil

You have to specify the LegendLayer for legends to show in the printout. Here is what I changed in the layout.js file for showing my basemap legend(tiled map service) in printout:

function addPrint() {

 var legendLayer = new esri.tasks.LegendLayer();
 legendLayer.layerId = "defaultBasemap";
 
    var layoutOptions = {
        'authorText': configOptions.owner,
            'titleText': configOptions.title,
            'scalebarUnit': (i18n.viewer.main.scaleBarUnits === 'english') ? 'Miles' : 'Kilometers',
            'legendLayers': [legendLayer]
    };

    //TODO - replace default templates with info from service
    var templates = dojo.map(configOptions.printlayouts, function (layout) {
        layout.layoutOptions = layoutOptions;
        return layout;
    });
 
    // print dijit
    var printer = new esri.dijit.Print({
        map: map,
        templates: templates,
        url: configOptions.helperServices.printTask.url
    }, dojo.create('span'));

    dojo.query('.esriPrint').addClass('esriPrint');

    dojo.byId('webmap-toolbar-center').appendChild(printer.printDomNode);

    printer.startup();
}

JoanSteinbacher

Thanks for leading me in the right direction.

To avoid hardcoding the layer ids for the legend, I've created a global variable 'legendLayers' that gets set in the buildLayerVisibleList function.

var legendLayers = [];  //use the same filtered list created in the 'buildLayerVisibleList' function in the legend dijit, added 5/23/13 jms
function buildLayerVisibleList(layers) {
    console.log("--> inside buildLayerVisibleList");
    var layerInfos = [];
    dojo.forEach(layers, function (mapLayer, index) {
     console.log("mapLayer.title: " + mapLayer.title + ", mapLayer.id: " + mapLayer.id);

     //If layer is for viewing popup info only, do not add to layer list. added 5/23/13 jms.
     //The id of the layer must start with 'pop' to filter it out.
     var isPopupLyr = false;
     if (mapLayer.id.substring(0,3) == "pop") { isPopupLyr = true} ;
     console.log("isPopupLyr: " + isPopupLyr);
     
     //Only include layers that are not used solely for 'popups', added 5/23/13 jms
     if (isPopupLyr == false) {
         if (mapLayer.featureCollection && !mapLayer.layerObject) {
             if (mapLayer.featureCollection.layers) {
                 //add the first layer in the layer collection... not all  - when we turn off the layers we'll 
                 //turn them all off 
                 if (mapLayer.featureCollection.layers) {
                     layerInfos.push({
                         "layer": mapLayer,
                             "visible": mapLayer.visibility,
                             "title": mapLayer.title
                     });
                 }
             }
         } else if (mapLayer.layerObject) {
             layerInfos.push({
                 layer: mapLayer.layerObject,
                 visible: mapLayer.layerObject.visible,
                 title: mapLayer.title
             });
         }
        }
    });
    legendLayers = layerInfos; //set global var for use with the legend dijit, added 5/23/13 jms
    return layerInfos;
}

I use the 'legendLayers' global variable in the addPrint function to create the list of layer ids for the legend.

function addPrint() {
 console.log("--> inside addPrint function"); 
 //legendLayers global var set in the buildLayerVisibleList fn. 
 //Array contains layer object, visible setting, and title.
 console.log("legendLayers.length: " + legendLayers.length); 
 
 //Create array containing the layer objects ids.
 var layerIds = [];
 //Loop thru each layer object and push id into the new array.
 for (var i = 0; i < legendLayers.length; i++) {
        //var layer = layers;
  console.log("legendLayers.layer.id: " + legendLayers.layer.id);
  var legendLyr  = new esri.tasks.LegendLayer();
  legendLyr.layerId = legendLayers.layer.id
  layerIds.push(legendLyr);
    }    
    console.log("layerIds.length: " + layerIds.length);
 
    var layoutOptions = {
        'authorText': configOptions.owner,
        'titleText': configOptions.title,
        'scalebarUnit': (i18n.viewer.main.scaleBarUnits === 'english') ? 'Miles' : 'Kilometers',
        //'legendLayers': [] //comment out so the legend will display by default, 6/13/13 jms. But this won't print the legend for tiled services...
        //'legendLayers': [legendLayer]
        'legendLayers': layerIds //set to the layer id array
    };

    //TODO - replace default templates with info from service
    var templates = dojo.map(configOptions.printlayouts, function (layout) {
        layout.layoutOptions = layoutOptions;
        return layout;
    });
    // print dijit
    var printer = new esri.dijit.Print({
        map: map,
        templates: templates,
        url: configOptions.helperServices.printTask.url
    }, dojo.create('span'));

    dojo.query('.esriPrint').addClass('esriPrint');

    dojo.byId('webmap-toolbar-center').appendChild(printer.printDomNode);

    printer.startup();  
}

In the function 'initUI', I had to move the call to 'addPrint' below the call to 'addLayerList' (which calls 'buildLayerVisibleList') so the global variable was set before addPrint needed it.

This approach works, though I have found the following legend print limitations which I'll need to address:

Space allotted for the legend in the out-of-the-box templates is too small
Layers in the legend don't display the layer's title.

Note: In case you're wondering, in the buildLayerVisibleList function, I'm filtering out any map layer that I've added solely for popup functionality, because I have added their corresponding map service so the labels display. Kind of a pain that individual layers won't display labels...

ShreyasVakil

Thanks for leading me in the right direction.

The code I posted was just a proof of concept, just to demonstrate how to add the legends.

I am glad you found a good solution to dynamically create a list of layer ids!!!

It would be great if you could mark this as answer, might help other.

Thanks,
Shreyas

JoanSteinbacher

I would love to -- but how do I do that? Sorry, the obvious things evade me sometimes...

ShreyasVakil

I would love to -- but how do I do that? Sorry, the obvious things evade me sometimes...

Please see the attached image.
[ATTACH=CONFIG]25376[/ATTACH]

Untitled.png

JeffJacobson

This is definitely a bug in Esri's code. According to the documentation:

If legendLayers is not specified, all operational layers will be present in the legend.

I recently encountered this problem and came up with this function to createLegend Layers.

/**
 * Creates an array of LegendLayers of all layers currently visible in the map.
 * @param {esri.Map} map
 * @returns {esri.tasks.LegendLayer[]}
 */
function getLegendLayersFromMap(map) {
    var layer, legendLayer, output = [];
    for (var i = 0, l = map.layerIds.length; i < l; i += 1) {
        layer = map.getLayer(map.layerIds);
        if (layer.visible && layer.visibleAtMapScale) {
            legendLayer = new LegendLayer();
            legendLayer.layerId = layer.id;
            if (layer.visibleLayers) {
                legendLayer.subLayerIds = layer.visibleLayers;
            }
            output.push(legendLayer);
        }
    }

    // Return null if the output array has no elements.
    return output.length > 0 ? output : null;
}

// Sample call
var printParameters = new PrintParameters();
printParameters.map = map;
var template = new PrintTemplate();
template.format = "PDF";
// printUI is a custom class in my app that creates and manages the HTML UI for a print task form.
template.layout = printUI.getSelectedTempalteName();
template.layoutOptions = {
    authorText:printUI.form.querySelector("input[name=author]").value,
    titleText: printUI.form.querySelector("input[name=title]").value,
    legendLayers: getLegendLayersFromMap(map)
};
printParameters.template = template;

printTask.execute(printParameters);

JoelBennett


This is definitely a bug in Esri's code.
/**
 * Creates an array of LegendLayers of all layers currently visible in the map.
 * @param {esri.Map} map
 * @returns {esri.tasks.LegendLayer[]}
 */
function getLegendLayersFromMap(map) {
    var layer, legendLayer, output = [];
    for (var i = 0, l = map.layerIds.length; i < l; i += 1) {
        layer = map.getLayer(map.layerIds);
        if (layer.visible && layer.visibleAtMapScale) {
            legendLayer = new LegendLayer();
            legendLayer.layerId = layer.id;
            if (layer.visibleLayers) {
                legendLayer.subLayerIds = layer.visibleLayers;
            }
            output.push(legendLayer);
        }
    }

    // Return null if the output array has no elements.
    return output.length > 0 ? output : null;
}

// Sample call
var printParameters = new PrintParameters();
printParameters.map = map;
var template = new PrintTemplate();
template.format = "PDF";
// printUI is a custom class in my app that creates and manages the HTML UI for a print task form.
template.layout = printUI.getSelectedTempalteName();
template.layoutOptions = {
    authorText:printUI.form.querySelector("input[name=author]").value,
    titleText: printUI.form.querySelector("input[name=title]").value,
    legendLayers: getLegendLayersFromMap(map)
};
printParameters.template = template;

printTask.execute(printParameters);

Agreed (somewhat)...a look at _createOperationalLayers in PrintTask.js of v3.9 of the JavaScript API shows a switch for which there is no case for "esri.layers.ArcGISTiledMapService". I think it's only a bug, though, if omitting this type of layer was unintentional. However, I can't think of any good reason as to why they would omit it. Whatever the case, their own documentation is, at minimum, misleading.

AlexeiB

I don't know if you had success with this, but were you able to have the legend appear in more than 1 column inside your print template? I have my map being printed to the custom template I made and the legend is also appearing but the problem is that it appears as 1 column and goes behind the map. I'd like to make it a 2 or 3 column legend so it spreads width-wise.

Thanks,

Alexei

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.