topic Customize the PrintTemplate in ArcGIS JavaScript Maps SDK Questions

Customize the PrintTemplate

DavidKucharski — Tue, 11 Sep 2018 12:59:36 GMT

I have 2 Graphic Layers that I add to my map.

var colorOverlayLyr = new GraphicsLayer({ opacity: 0.5 });
var locationOverlayLyr = new GraphicsLayer({ opacity: 0.5 });

var map = new Map({
basemap: basemapDefault,
layers: [colorOverlayLyr, locationOverlayLyr]
});

I add graphics to the colorOverlayLyr using the QueryTask, I do this for 5 colors, only the Blue code is included but the other colors are the same. They all are added to the colorOverlayLyr.

params.where = "ID_ IN (" + blue.value + ")";
qTask.execute(params)
.then(getBlueResults)
.catch(promiseRejected);

function getBlueResults(response) {
var peakResults = arrayUtils.map(response.features, function (
feature) {

feature.symbol = {
type: "simple-fill", // autocasts as new PointSymbol3D()
color: {
r: 0,
g: 0,
b: 255,
a: 0.5
},
style: "solid",
opacity: 0.2,
outline: { color: "black", width: 1 }
};

return feature;
});

colorOverlayLyr.addMany(peakResults);

}

I add Graphics to the locationOverlayLyr. The user has the option to add up to 5 different locations on the map. This code is used passing in the different styles.

var symbolBlack = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: values[0],
color: values[1],
size: "8px",
outline: {
color: values[1]
}
};

var point = {
type: "point",
longitude: values[9],
latitude: values[8]
};

var lineAtt = {
Name: values[2],
Number: values[3],
Display: values[4]
};

var pointGraphic = new Graphic({
geometry: point,
symbol: symbolBlack,
attributes: lineAtt
});
locationOverlayLyr.add(pointGraphic);

The layers come out on the map. I then use the PrintTask to allow a user to print the map. I want to customize the Legend so the user knows exactly what is on the map. I use the LegendLayer to tell what layers to show but I do know know how to customize the description that comes out for the Graphics/Features that are displayed. I can customize the title of the actual layer but the individual graphics I don't know how to. They system shows some default values. How can I change those descriptions.

var printTask = new PrintTask({
url: "https://esridev.nsamedia.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});

var colorlegendLayer = new LegendLayer();
colorlegendLayer.layerId = colorOverlayLyr.id;
colorlegendLayer.title = "Color: This is the color";

var locationlegendLayer = new LegendLayer();
locationlegendLayer.layerId = locationOverlayLyr.id;
locationlegendLayer.title = "Location: This is the location";

var template = new PrintTemplate({
format: "pdf",
exportOptions: {
dpi: 300
},
layout: "tabloid-ansi-b-landscape",
layoutOptions: {
titleText: "Test Map",
authorText: "Ben Loewe",
copyrightText: "My Company",
scalebarUnit: "Miles",
legendLayers: [colorlegendLayer, locationlegendLayer]
},
preserveScale: true
});

var params = new PrintParameters({
view: view,
template: template
});

printTask.execute(params).then(printResult, promiseRejected);

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:49:04 GMT

David,

Are you applying a UniqueValueRenderer to those layers?

  var renderer = new UniqueValueRenderer( ... );
  renderer.addValue("KS", symbol);

  //Specify the symbol and value using the info object.
  renderer.addValue({
    value: "KS",
    symbol: new SimpleFillSymbol(),
    label: "Kansas",
    description: "The Sunflower State"
  });

That way you can specify the label and description for the feature

Re: Customize the PrintTemplate

DavidKucharski — Tue, 11 Sep 2018 13:51:28 GMT

Looking at the documentation for the UniqueValueRenderer, that object can only be used on certain Layer Types. Graphic Layers are not one of the layer types in the list to use.

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Tue, 11 Sep 2018 13:54:30 GMT

Absolutely it can.

Re: Customize the PrintTemplate

DavidKucharski — Tue, 11 Sep 2018 14:32:38 GMT

In my example above where I am getting a list of geographies to show in a blue color based on a demographic they chose, I get the results back from the QueryTask and loop through the array of results assigning a simple-fill symbol to it. Is it at this point that I apply a renderer to the feature? I am not quite sure of when to apply the renderer. The value, label, and description will change everytime this QueryTask is ran. Especially for the other 4 QueryTasks that I run to also fill this colorOverlayLyr.

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Tue, 11 Sep 2018 14:39:03 GMT

David,

So after the values have changed (post query) you can reset the layer renderer to the new values added to the UniqueValueRenderer.

Re: Customize the PrintTemplate

DavidKucharski — Tue, 11 Sep 2018 14:57:22 GMT

I tried the following additions:

var blueColoreOverlay = {
type: "simple-fill",
color: {
r: 0,
g: 0,
b: 255,
a: 0.5
},
style: "solid",
opacity: 0.2,
outline: { color: "black", width: 1 }
};

var colorRenderer = {
type: "unique-value",
uniqueValueInfos: [{
symbol: blueColoreOverlay,
label: "Residential"
}]
};

// Create graphics layer and symbol to use for displaying the results of query
var highlightGeographyLyr = new GraphicsLayer({ renderer: colorRenderer, id: 1, opacity: 0.1 });

Then I used the blueColoreOverlay in the QueryTask:

function getBlueResults(response) {
var peakResults = arrayUtils.map(response.features, function (
feature) {

feature.symbol = blueColoreOverlay;
return feature;
});

colorOverlayLyr.addMany(peakResults);
}

It seems as my overlays are still coming up correctly. When I try to print I am getting the following error:

a.renderer.toJSON is not a function

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Tue, 11 Sep 2018 15:11:02 GMT

David,

I missed the fact that you are using 4.x API. I don't think my UniqueValueRendere suggestion will work in your case using 4.x.

Re: Customize the PrintTemplate

DavidKucharski — Wed, 12 Sep 2018 20:56:49 GMT

Is there any other way to manipulate the PrintTemplate to show customized text?

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Wed, 12 Sep 2018 20:59:31 GMT

Only if you are using your own print service on your ArcGIS Server.

Re: Customize the PrintTemplate

DavidKucharski — Wed, 12 Sep 2018 22:39:43 GMT

Here is my print code, I am using my own print service on my server. How can I customize the Legend?

document.body.style.cursor = "wait";

var printTask = new PrintTask({
url: "https://esridev.nsamedia.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});

var colorlegendLayer = new LegendLayer();
//RJS not fireLayer.layerId. Its fireLayer.id
colorlegendLayer.layerId = colorOverlayLyr.id;
colorlegendLayer.title = "Color: This is the color";

var locationlegendLayer = new LegendLayer();
//RJS not fireLayer.layerId. Its fireLayer.id
locationlegendLayer.layerId = locationOverlayLyr.id;
locationlegendLayer.title = "Location: This is the location";

var template = new PrintTemplate({
format: "pdf",
exportOptions: {
dpi: 300
},
layout: "tabloid-ansi-b-landscape",
layoutOptions: {
titleText: "Test Map",
authorText: "Ben Loewe",
copyrightText: "My Company",
scalebarUnit: "Miles",
legendLayers: [colorlegendLayer, locationlegendLayer]
},
preserveScale: true
});

var params = new PrintParameters({
view: view,
template: template
});

printTask.execute(params).then(printResult, promiseRejected);

Re: Customize the PrintTemplate

RobertScheitlin__GISP — Thu, 13 Sep 2018 13:57:58 GMT

David,

Sorry when you said

Is there any other way to manipulate the PrintTemplate to show customized text?

I thought you were just talking about adding so custom text element to the layout, not trying to control the text inside the legend element.

Creating a custom text element in the layout is absolutely possible with the use of your own print service that has a custom print layout defined. Like here (image attached) in my custom layout I add the Owner Name, PPIN, Parcel Number, Address to the layout based on the selected parcel Polygon: