topic Re: Dynamically update custom text element for print template layout in ArcGIS JavaScript Maps SDK Questions

Dynamically update custom text element for print template layout

NhuMai — Sun, 12 Dec 2021 16:48:26 GMT

I'm working on setting custom text elements via the template layout options for a print task to be used in a print widget. I am trying to get the custom text to display the lat long coordinates of the current map extent.

I followed this sample to get the widget up and going. However, it sets up the template layouts and starts up the print widget when the app is loaded. This means that my "current" map extent for the layout is the initial map extent. Any suggestions on how to get the template custom text element to update to the current map extent? For the moment, I'm thinking that I have to set up and start up the print widget every time the extent changes...

Here is what I have so far:

require([
 "esri/layers/FeatureLayer",
 "esri/dijit/Print",
 "esri/tasks/PrintTemplate",
 "esri/request",
 "esri/config",
 "dojo/_base/array",
 "dojo/dom",
], function(
 FeatureLayer,
 Print, PrintTemplate,
 esriRequest, esriConfig,
 arrayUtils, dom
) {

//var printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
 var printUrl = "http://ourserver/arcgis/rest/services/Our_Tools/Our_Print_Tool/GPServer/Exporter%20une%20carte%20Web";

esriConfig.defaults.io.proxyUrl = "http://ourserver/Java/proxy.jsp";

dojo.connect(window.myMap, "onExtentChange", showExtent);

// get print templates from the export web map task
 var printInfo = esriRequest({
 "url": printUrl,
 "content": {
 "f": "json"
 }
 });
 printInfo.then(handlePrintInfo, handleError);

 var center = "";
 var latLong = "";

function handlePrintInfo(resp) {
 var layoutTemplate, templateNames, mapOnlyIndex, templates;

 showExtent(window.myMap.extent)

 layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {
  return param.name === "Layout_Template";
 });

if ( layoutTemplate.length === 0 ) {
 console.log("print service parameters name for templates must be \"Layout_Template\"");
 return;
 }
 templateNames = layoutTemplate[0].choiceList;

// remove the MAP_ONLY template then add it to the end of the list of templates
 mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");
 if ( mapOnlyIndex > -1 ) {
 var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
 templateNames.push(mapOnly);
 }

// create a print template for each choice
 templates = arrayUtils.map(templateNames, function(ch) {
 var plate = new PrintTemplate();
 plate.layout = plate.label = ch;
 plate.format = "PDF";
 plate.layoutOptions = {
 customTextElements : [
 {
 centerLatLong: latLong,
 centerXY: center
 }
 ]
 };
 return plate;
 });

// create the print dijit
 printer = new Print({
 "map": window.myMap,
 "templates": templates,
 url: printUrl
 }, dom.byId("print_button"));
 printer.startup();
 }

function showExtent(extent) {
 var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
 var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

 latLong = "Latitude : " + lat + " - Longitude : " + long;

 var X = window.myMap.extent.getCenter().x.toFixed(2);
 var Y = window.myMap.extent.getCenter().y.toFixed(2);

center = "X : " + X + " - Y : " + Y;

 console.log(latlong);
 console.log(center);
 }

function handleError(err) {
 console.log("Something broke: ", err);
 }
});

Re: Dynamically update custom text element for print template layout

RobertScheitlin__GISP — Sat, 26 Nov 2016 02:29:05 GMT

Nhu,

I would not setup or display the print widget until the user clicks a button in the app that says something like prepare to print or something.

Re: Dynamically update custom text element for print template layout

FC_Basson — Sun, 12 Dec 2021 05:04:26 GMT

You could handle your print template "plate" as a global variable and on the map extent change event (Map | API Reference | ArcGIS API for JavaScript 3.18 ) set the properties for the dynamic text

map.on('extent-change', function(){
  plate.layoutOptions.customTextElements.centerLatLong = latLong;
  plate.layoutOptions.customTextElements.centerXY = center;‍‍
});‍‍‍‍

Re: Dynamically update custom text element for print template layout

Quynh_NhuMai — Wed, 30 Nov 2016 01:52:50 GMT

This is interesting, but the plate variable is used when creating the printer. With your solution, how could I get the print widget this take into consideration the updates to the plate variable? The way I have it set up now, I think that even updating the plate variable with every extent change, the printer would have the values that plate had when the widget was declared.

Re: Dynamically update custom text element for print template layout

Quynh_NhuMai — Wed, 30 Nov 2016 01:57:11 GMT

Robert,

I considered this option, but there is the possibility that users will pan or zoom right before making their template selection. The print widget template selection is only accessible after the printer is created (or so i believe...).

To make sure the extent printed to the map is correct, I think I would have to prevent users from zooming or panning, which isn't preferable. Do you see any way around this?

Re: Dynamically update custom text element for print template layout

RobertScheitlin__GISP — Wed, 30 Nov 2016 02:06:34 GMT

I would re-build the print widget on each extent change then if the print has already been opened.

Re: Dynamically update custom text element for print template layout

FC_Basson — Wed, 30 Nov 2016 06:03:43 GMT

You're right - you just need to define the "plate" variable outside of the current function scope, so jou could define it at the start of the main require function (var plate;) and remove the variable declaration within the handlePrintInfo function.

Re: Dynamically update custom text element for print template layout

Quynh_NhuMai — Thu, 01 Dec 2016 01:09:10 GMT

I see what you mean about making "var plate" global. It is true that when doing so, "plate" is correctly updated with each extent change. However, it doesn't update "printer" which uses plate, as the widget is initialized on page load.

I am still not seeing how just making plate global will update the layouts in the print widget with extent changes.

Re: Dynamically update custom text element for print template layout

FC_Basson — Sun, 12 Dec 2021 05:04:29 GMT

That's because the "plate" template has not been redefined in the list of templates for the "printer". So after each extent change, you also need to redefine the printer templates. You can define "printer" also as a global variable first.

Try this:

map.on('extent-change', function(){
  plate.layoutOptions.customTextElements.centerLatLong = latLong;
  plate.layoutOptions.customTextElements.centerXY = center;
  printer.templates = [plate];
});

Re: Dynamically update custom text element for print template layout

Quynh_NhuMai — Sun, 12 Dec 2021 16:48:29 GMT

So I believe this is taking me closer to where I need. With the code below, though, I'm having issues debugging the following errors that occurs on map extent change :

-exception in animation handler for: onEnd

-TypeError: Cannot read property 'call' of undefined(...)

I connected the signal to update extents with map extent change within printInfoHandler, as I was having issues with parameters being defined within the latter. I don't know if this is the correct way to do so.

require([
 "esri/layers/FeatureLayer",
 "esri/dijit/Print",
 "esri/tasks/PrintTemplate",
 "esri/request",
 "esri/config",
 "dojo/_base/array",
 "dojo/dom",
], function(
 FeatureLayer,
 Print, PrintTemplate,
 esriRequest, esriConfig,
 arrayUtils, dom
) {

//var printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
 var printUrl = "http://ourserver/arcgis/rest/services/Our_Tools/Our_Print_Tool/GPServer/Exporter%20une%20carte%20Web";
var center = "";
 var latLong = "";
 var printer;
 var plate;

esriConfig.defaults.io.proxyUrl = "http://ourserver/Java/proxy.jsp";

// get print templates from the export web map task
 var printInfo = esriRequest({
 "url": printUrl,
 "content": {
 "f": "json"
 }
 });
 printInfo.then(handlePrintInfo, handleError);


 function handlePrintInfo(resp) {
 var layoutTemplate, templateNames, mapOnlyIndex, templates;

var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
 var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

latLong = "Latitude : " + lat + " - Longitude : " + long;

var X = window.myMap.extent.getCenter().x.toFixed(2);
 var Y = window.myMap.extent.getCenter().y.toFixed(2);

center = "X : " + X + " - Y : " + Y;

console.log(latLong);
 console.log(center);

layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {
 return param.name === "Layout_Template";
 });

if ( layoutTemplate.length === 0 ) {
 console.log("print service parameters name for templates must be \"Layout_Template\"");
 return;
 }
 templateNames = layoutTemplate[0].choiceList;

// remove the MAP_ONLY template then add it to the end of the list of templates
 mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");
 if ( mapOnlyIndex > -1 ) {
 var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
 templateNames.push(mapOnly);
 }

// create a print template for each choice
 templates = arrayUtils.map(templateNames, function(ch) {
 plate = new PrintTemplate();
 plate.layout = plate.label = ch;
 plate.format = "PDF";
 plate.layoutOptions = {
 customTextElements : [
 {
 centerLatLong: latLong,
 centerXY: center
 }
 ]
 };
 return plate;
 });

// create the print dijit
 printer = new Print({
 "map": window.myMap,
 "templates": templates,
 url: printUrl
 }, dom.byId("print_button"));
 printer.startup();

window.myMap.on('extent-change', showExtent());
 }

function showExtent(extent) {


 var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
 var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

latLong = "Latitude : " + lat + " - Longitude : " + long;

var X = window.myMap.extent.getCenter().x.toFixed(2);
 var Y = window.myMap.extent.getCenter().y.toFixed(2);

center = "X : " + X + " - Y : " + Y;

plate.layoutOptions.customTextElements.centerLatLong = latLong;
 plate.layoutOptions.customTextElements.centerXY = center;
 printer.templates = [plate];

console.log(latLong);
 console.log(center);
 }

function handleError(err) {
 console.log("Something broke: ", err);
 }
});

Re: Dynamically update custom text element for print template layout

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:04:32 GMT

Quynh,

Change:

window.myMap.on('extent-change', showExtent());

to:
window.myMap.on('extent-change', showExtent);

Re: Dynamically update custom text element for print template layout

Quynh_NhuMai — Tue, 06 Dec 2016 20:51:33 GMT

Ah whoops, okay--so that fixed the mentioned error.

The printer now fails to reset the print layout list. No errors given, but the dropdown menu disappears and printing gives the map only output. I wonder if has to do with the way this line runs:

printer.templates = [plate];

Re: Dynamically update custom text element for print template layout

RobertScheitlin__GISP — Sun, 12 Dec 2021 16:48:32 GMT

Quynh,

In your code the plate var is only going to be the last print template that you worked with in your

templates = arrayUtils.map(templateNames, function(ch) {
loop