I can confirm, formatting this custom element object does not work.
ESRI should definitely consider allowing this ASAP as of next API release or so. And allow formatting from the ArcMap MXD print template. Which would be even easier than coding: So we can set up dynamic text in ArcMap, and perhaps link it to an attribute table that way, for example, to display an attribute table on the Print result based on what the user selects. or something else with dynamic text and Data Driven Pa
I would like to second this!
I have not been able to get a text string of variable to appear. I followed your example above exactly. version 3.11 and 3.13 of API. Note that if I explicitly set the variable, such as resultsPIN_COMM, to be a text string, e.g. "Teststring" then it appears on the printout in my customTextElements element i Created in ArcMap. However once I try to use a variable and pass a string into it, it doesn't. In other words if I have a line of code:
resultsPIN_COMM = "Teststring"
and then a code block similar to yours to pass everything into the printout, it works.
if I have an object somewhere else in the code, let's say parcelObject and I pass
resultsPIN_COMM = parcelObject.attributes.COMMID
then it doesn't work. I've noticed it's simply a blank in the JSON, it never makes it into there. And yet, if I log resultsPIN_COMM into the Console on a print_start event, it will give its value just fine. For example, Jimmy Dean. Would be a text string. (this is a field of names for us)
Thoughts?
Here is a complete working example you can paste into the ESRI Sandbox and it works. Except that it doesn't. Until you explicitly set a value. Notice I have a commented out line "vPIN" that you can uncomment to expliclity set and see what I mean. Any thoughts anyone? Support is saying variables are not supported in the customTextElements but it seems like you got it to work? All it is doing is passing a string, it seems like it should work, no? I was thinking that phrase from the API Docs meant that dynamicText from ArcMap in the MXD would not work. Nothing API related. i.e. you couldn't use Data-driven pages or something... but I would think variables in Javascript should work right?
/////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
padding: 0 0 5px 0;
text-align: center;
}
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
background: #fff;
color: #000;
position: absolute;
font-family: arial;
height: auto;
right: 20px;
margin: 5px;
padding: 10px;
top: 20px;
width: 300px;
z-index: 40;
}
#feedback a {
border-bottom: 1px solid #888;
color: #444;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #444;
text-decoration: none;
}
#note {
font-size: 80%;
font-weight: 700;
padding: 0 0 10px 0;
}
#info {
padding: 10px 0 0 0;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var getWebData = {};
// Web endpoints to user friendly names
//////// -- utilities
getWebData.SAGISPrintServiceAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Ex...";
getWebData.ArcGISCOMPrintServiceESRI = "http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%2...";
getWebData.GeometryServer = "http://sagisservices.thempc.org/saint/rest/services/Geometry/Geometry/GeometryServer";
getWebData.GeometryServerAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/Utilities/Geometry/GeometryServer";
//getWebData.GeometryServerAmazon = "http://sampleserver5.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer";
// ESRI provided data
//getWebData.ESRIWorldStreetMap = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
//getWebData.ESRIWorldImagery = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
//getWebData.ESRIWorldTopoMap = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
//getWebData.ESRIWorldBlackWhite = "http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer";
// SAGIS provided data
getWebData.SagisOrgLayers = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";
getWebData.BlankBasemap = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGIS1/MapServer/37";
getWebData.Imagery2008 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_Tiles/MapServer";
getWebData.Imagery2011 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_2011/MapServer";
getWebData.Imagery2013 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Chatham2013/ImageServer";
getWebData.Elevation = "http://sagisservices.thempc.org/saint/rest/services/Imagery/ElevationDEM/MapServer";
getWebData.SAGISCenterlineLocator = "http://sagisservices.thempc.org/saint/rest/services/Locator/CENTERLINES/GeocodeServer";
getWebData.ParcelAnnos = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISAnnotation/MapServer";
getWebData.ParcelAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISMapAnnotation/MapServer";
getWebData.StreetsAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGISROADAnnotation_TEST/MapServer";
// External Data
getWebData.BOA_URL_Source = "http://boa.chathamcounty.org/Home/Property-Record-Cards/PIN/";
</script>
<script>
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/dijit/Popup",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/layers/GraphicsLayer",
"esri/graphic",
"dojo/query",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/InfoTemplate",
"esri/geometry/Extent",
"esri/geometry/Multipoint",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"dojo/on",
"dojo/promise/all",
"esri/tasks/IdentifyTask",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Print", "esri/tasks/PrintTemplate",
"esri/request", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, FeatureLayer,
Popup,
SimpleFillSymbol,
SimpleLineSymbol,
Color,
GraphicsLayer,
Graphic,
query,
Query,
QueryTask,
InfoTemplate,
Extent,
Multipoint,
Point,
webMercatorUtils,
on,
all,
IdentifyTask,
ArcGISDynamicMapServiceLayer,
Print, PrintTemplate,
esriRequest, esriConfig,
arrayUtils, dom, parser
) {
parser.parse();
var
findTask,
findParams,
navToolbar,
esriConfig,
center,
zoom,
grid,
store,
content,
selectionToolbar,
imageServiceParams,
SAGIS2013Imagery,
SAGIS2011Imagery,
SAGIS2008Imagery,
SagisOrgLayers,
initialExtentWS,
initialExtentIS,
initialExtentDT,
initialExtentTI,
initialExtentSS,
bookmark,
storageName,
useLocalStorage,
bmJSON,
legend,
addressLocator,
addressLocatorUrl,
pinLocator,
pinLocatorUrl,
SAGISCenterlineLocator,
SAGISToC,
overview,
scalebar,
geocoder,
measurement,
maponclick,
selectionLayer,
featureLayer,
ClearBox,
tb,
editToolbar,
myText,
tip,
tooltip,
ctxMenuForGraphics,
ctxMenuForMap,
ctxMenuForMapGoogleStreetview,
selected,
currentLocation,
PolyArea,
visible = [],
measureUnit,
Lat,
Long,
linelength,
selectedTrans,
areaParams,
evt,
labelPoints,
labelPoint,
eventHandlerIdentify,
handlerPictometry,
handlerStreetView,
arrowTest,
addText,
printParcel,
DrawToolbar;
var activetext = "off";
printParcel = [];
printParcel.attributes = [];
printParcel.attributes.OWNERNAME = "";
printParcel.attributes.COMMID = "";
printParcel.attributes.FLOODID = "";
printParcel.attributes.ZONEID = "";
printParcel.attributes.FULLADDRESS = "";
printParcel.attributes.PIN = "";
printUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Ex...";
var popup = new Popup({ highlight: true, marginTop: 150, visibleWhenEmpty: true, fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.2])) }, dojo.create("div"));
// esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new esri.Map("map", {
basemap: "streets",
center: [-81.11, 32.06],
zoom: 14,
slider: false
});
//Selection layer for parcel widget
selectionLayer = new GraphicsLayer();
SagisOrgLayers = new ArcGISDynamicMapServiceLayer(getWebData.SagisOrgLayers, {
"opacity": 0.8,
});
var parcelData = SagisOrgLayers.url + "/24";
// add graphics for pools with permits
var permitUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";
var poolFeatureLayer = new ArcGISDynamicMapServiceLayer(permitUrl);
map.addLayer(poolFeatureLayer);
poolFeatureLayer.setVisibleLayers([24]);
map.addLayer(selectionLayer);
// Start of parcel widget
// Declare variables for this widget
var parcelData = SagisOrgLayers.url + "/24";
var infoTemplate = new InfoTemplate();
var qtParcels = new QueryTask(parcelData);
var qParcels = new Query();
var parcels;
var gridItems = [];
var memStore;
var toolbar;
function parcelSearchWidget() {
if (eventHandlerIdentify != null) {
eventHandlerIdentify.remove();
};
if (maponclick != undefined) maponclick.remove();
initializeSearchByAttributes();
}
infoTemplate.setTitle("Property ID: ${PIN}");
infoTemplate.setContent("<div class='col-md-12'>" +
"<div class='row'><div class='col-md-5'>Owner:</div><div class='col-md-7'>${OWNERNAME}</div></div>" +
"<div class='row'><div class='col-md-5'>PIN:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>${PIN}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Property Address:</div><div class='col-md-7'>${FULLADDRESS}</div></div>" +
"<div class='row'><div class='col-md-5'>Zoning:</div><div class='col-md-7'><a target='_blank' href='${ZoningLink}'>${ZONEID}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Flood Zone:</div><div class='col-md-7'><a target=_blank' href='http://www.sagis.org/Content/floodzonedefinitions.pdf'>${FLOODID}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Alderman:</div><div class='col-md-7'>${ALDER_TXT}</div></div>" +
"<div class='row'><div class='col-md-5'>Commissioner:</div><div class='col-md-7'>${COMMID}</div></div>" +
"<div class='row'><div class='col-md-5'>Voting Precinct:</div><div class='col-md-7'>${VOT_PRECINCT}</div></div>" +
"<div class='row'><div class='col-md-5'>Elementary School:</div><div class='col-md-7'>${ELEMENTARY}</div></div>" +
"<div class='row'><div class='col-md-5'>Middle School:</div><div class='col-md-7'>${MIDDLE}</div></div>" +
"<div class='row'><div class='col-md-5'>High School:</div><div class='col-md-7'>${HIGH}</div></div>" +
"<div class='row'><div class='col-md-5'>Zip Code:</div><div class='col-md-7'>${ZIP_CODE}</div></div>" +
"<div class='row'><div class='col-md-5'>Neighborhood Code:</div><div class='col-md-7'>${NBHD_CODE}</div></div>" +
"<div class='row'><div class='col-md-5'>Neighborhood:</div><div class='col-md-7'>${NBHD_DESC}</div></div>" +
"<div class='row'><div class='col-md-5'>Legal Description:</div><div class='col-md-7'>${LEGAL_1}</div></div>" +
"<div class='row'><div class='col-md-5'>Calculated Acreage:</div><div class='col-md-7'>${CALCAC}</div></div>" +
"<div class='row'><div class='col-md-5'>Land Value:</div><div class='col-md-7'>${LAND_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Building Value:</div><div class='col-md-7'>${BUILDING_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Real Estate Value:</div><div class='col-md-7'>${REAL_ESTATE_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Sale Price:</div><div class='col-md-7'>${SALE_PRICE}</div></div>" +
"<div class='row'><div class='col-md-5'>Sales Date:</div><div class='col-md-7'>${SALE_MM}/${SALE_DD}/${SALE_YY}</div></div>" +
"<div class='row'><div class='col-md-5'>Property Card:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>Board of Assessors</a></div></div>" +
"</div>");
var outFields = [
"OWNERNAME", "PIN", "FULLADDRESS", "ZONEID", "FLOODID", "ALDER_TXT", "COMMID", "VOT_PRECINCT", "ELEMENTARY", "MIDDLE", "HIGH", "ZIP_CODE", "NBHD_DESC",
"CALCAC", "LAND_VALUE", "BUILDING_VALUE", "REAL_ESTATE_VALUE", "SALE_PRICE", "SALE_YY", "SALE_MM", "SALE_DD", "LEGAL_1", "OBJECTID", "Shape", "Shape_Length", "Shape_Area"
];
qParcels.outSpatialReference = { wkid: 102100 };
qParcels.returnGeometry = true;
qParcels.outFields = outFields;
function cleanqParcels() {
if (qParcels.hasOwnProperty('text')) delete qParcels.text;
if (qParcels.hasOwnProperty('geometry')) delete qParcels.geometry;
}
function searchByGeometry(geometry) {
cleanqParcels();
qParcels.geometry = geometry;
qtParcels.execute(qParcels, handleQueryResults);
}
// click on map
maponclick = map.on("click", executeMapParcelQuery); //
function executeMapParcelQuery(e) {
var promises, qGeom, point, pxWidth, padding;
point = e.mapPoint;
pxWidth = map.extent.getWidth() / map.width;
padding = 3 * pxWidth;
qGeom = new Extent({
"xmin": point.x - padding,
"ymin": point.y - padding,
"xmax": point.x + padding,
"ymax": point.y + padding,
"spatialReference": point.spatialReference
});
cleanqParcels();
qParcels.geometry = qGeom;
qParcels.outFields = outFields;
parcels = qtParcels.execute(qParcels);
promises = new all([parcels]);
promises.then(handleClickQueryResults);
}
function handleClickQueryResults(results) {
if (!results[0].hasOwnProperty("features")) {
console.debug("Parcels query failed");
}
parcels = results[0].features;
arrayUtils.forEach(parcels, function (feat) {
// add data before adding to map.
if (feat.attributes.PIN != undefined) {
switch (feat.attributes.PIN.substring(0, 1)) {
case "1":
feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/ChathamCountyZoning.htm";
break;
case "2":
feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/SavannahZoning.htm";
break;
default:
break;
}
}
if (feat.attributes.ALDER_TXT != undefined) {
switch (feat.attributes.ALDER_TXT.substring(4, 5)) {
case "1":
feat.attributes.ALDER_TXT = "Van R. Johnson";
break;
case "2":
feat.attributes.ALDER_TXT = "Mary Osborne";
break;
case "3":
feat.attributes.ALDER_TXT = "John Hall";
break;
case "4":
feat.attributes.ALDER_TXT = "Mary Ellen Sprague";
break;
case "5":
feat.attributes.ALDER_TXT = "Dr. Estella Shabazz";
break;
case "6":
feat.attributes.ALDER_TXT = "Tony Thomas";
break;
default:
break;
}
}
if (feat.attributes.COMMID != undefined) {
// alert("success");
switch (feat.attributes.COMMID) {
case 1:
feat.attributes.COMMID = "Van R. Johnson";
break;
case 2:
feat.attributes.COMMID = "James J. Holmes";
break;
case 3:
feat.attributes.COMMID = "Tony Center";
break;
case 4:
feat.attributes.COMMID = "Patrick K. Farrell";
break;
case 5:
feat.attributes.COMMID = "Yusuf Shabazz";
break;
case 6:
feat.attributes.COMMID = "Lori L. Brady";
break;
case 7:
feat.attributes.COMMID = "Dean Kicklighter";
break;
case 8:
feat.attributes.COMMID = "Priscilla D. Thomas";
break;
default:
break;
}
}
}); /// end of adding data to feature for infowindow section...///
map.graphics.clear(); // consider disabling this after maponclick is no longer the default map click handler (which noel wants).. becaues otherwise if user has created drawings, closes Draw dialolog, and then clicks map, they will disapper.
arrayUtils.forEach(parcels, function (feat) {
feat.infoTemplate = infoTemplate;
feat.setSymbol(new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])).setOutline(null));
map.graphics.add(feat);
// printParcel = $.extend(true, {}, parcels[0]);
// printParcel.attributes.PIN = "222";
printParcel = parcels[0];
/// printParcel.attributes.PIN = "111";
console.log(printParcel);
});
} //end of handleClickQuery func
// End of parcel Widget
// Start of Print Widget
var templates = new PrintTemplate();
var layoutvar = {
"authorText": "Savannah Area Geographic Information System (SAGIS)",
"copyrightText": "www.SAGIS.org",
// "legendLayers": [], /// put a array of visible layers here or do NOT specify this to include all "operational" layers per esri docs at https://developers.arcgis.com/javascript/jsapi/legendlayer-amd.html and https://developers.arcgis.com/javascript/jsapi/printtemplate-amd.html#layoutoptions
"titleText": "www.SAGIS.org Map Viewer"
};
var Owner;
var PIN;
var PropertyAddress;
var Zoning;
var FloodZone;
var Alderman;
var Commissioner;
var VotingPrecinct;
var ElementarySchool;
var MiddleSchool;
var HighSchool;
var ZipCode;
var NeighborhoodCode;
var Neighborhood;
var LegalDescription;
var CalculatedAcreage;
var LandValue;
var BuildingValue;
var RealEstateValue;
var SalePrice;
var SalesDate;
Owner = "Owner:";
PIN = "PIN:";
PropertyAddress = "PropertyAddress:";
Zoning = "Zoning:";
FloodZone = "FloodZone:";
Alderman = "Alderman:";
Commissioner = "Commissioner:";
VotingPrecinct = "VotingPrecinct:";
ElementarySchool = "ElementarySchool:";
MiddleSchool = "MiddleSchool:";
HighSchool = "HighSchool:";
ZipCode = "ZipCode:";
NeighborhoodCode = "NeighborhoodCode:";
Neighborhood = "Neighborhood:";
LegalDescription = "LegalDescription:";
CalculatedAcreage = "CalculatedAcreage:";
LandValue = "LandValue:";
BuildingValue = "BuildingValue:";
RealEstateValue = "RealEstateValue:";
SalePrice = "SalePrice:";
SalesDate = "SalesDate:";
// printParcel.attributes.PIN = "text";
vPIN = printParcel.attributes.COMMID;
console.log(printParcel);
console.log(printParcel.attributes.COMMID);
//alert(vPIN);
// vPIN = "2-0165 -01-001";
//alert(vPIN);
var layoutvar2 = {
"authorText": "Savannah Area Geographic Information System (SAGIS)",
"copyrightText": "www.SAGIS.org",
"customTextElements": [{
"infoDetails":
//"PARCEL INFORMATION" + "\n" +
//vPIN
"PARCEL INFORMATION" + "\n" +
Owner + printParcel.attributes.OWNERNAME
+ "\n" + PIN + printParcel.attributes.PIN +
"\n" + PropertyAddress + printParcel.attributes.FULLADDRESS
+ "\n" + Zoning + printParcel.attributes.ZONEID +
"\n" + FloodZone + printParcel.attributes.FLOODID
+ "\n" + Alderman +
"\n" + Commissioner + vPIN + "\n"
+ "\n" + VotingPrecinct + "\n" + ElementarySchool
+ "\n" + MiddleSchool + "\n" + HighSchool
+ "\n" + ZipCode + "\n" + NeighborhoodCode
+ "\n" + Neighborhood
+ "\n" + LegalDescription
+ "\n" + CalculatedAcreage
+ "\n" + LandValue + "\n" + BuildingValue + "\n" + RealEstateValue + "\n" + SalePrice + "\n" + SalesDate + "\n"
}],
// "legendLayers": [], /// put a array of visible layers here or do NOT specify this to include all "operational" layers per esri docs at https://developers.arcgis.com/javascript/jsapi/legendlayer-amd.html and https://developers.arcgis.com/javascript/jsapi/printtemplate-amd.html#layoutoptions
"titleText": "www.SAGIS.org Map Viewer"
};
templates = [
{
label: "PDF 8.5 x 11 with Parcel Information",
format: "PDF",
layout: "test",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar2
},
{
label: "PDF Landscape 8.5 x 11",
format: "PDF",
layout: "Landscape 8.5 x 11",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar
},
{
label: "PDF Portrait 8.5 x 11",
format: "PDF",
layout: "Portrait 8.5 x 11",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar
},
{
label: "JPG Landscape 8.5 x 11",
format: "JPG",
layout: "Landscape 8.5 x 11",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar
},
{
label: "JPG Portrait 8.5 x 11",
format: "JPG",
layout: "Portrait 8.5 x 11",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar
}
];
var printTitlep;
// create the print dijit
printer = new Print({
"map": map,
"templates": templates,
url: getWebData.SAGISPrintServiceAmazon
}, dom.byId("print_button"));
//add the class with the print icon
query(".esriPrint").addClass("esriPrint");
printer.startup();
function handleError(err) {
console.log("Something broke: ", err);
}
printer.on('print-start', function (evt) {
console.log("printstart....");
console.log(printParcel);
console.log(printParcel.attributes.COMMID);
});
printer.on('print-complete', function (evt) {
window.open(evt.result.url); //auto open new window after clicking print
esri.show(printer); // hide printout link, show printer icon again
});
// End of Print Widget
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>
Print Templates Created from Info Returned by the Print Service using
<a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>
</h3>
<div id="info">
<div id="note">
Note: This sample uses an ArcGIS Server version 10.1 export web map task.
</div>
<!-- that will be used for the print dijit -->
<div id="print_button"></div>
<div id="info">
<a href="https://developers.arcgis.com/javascript/jsapi/printtemplate.html">Print templates</a> are generated
from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...">Layout_Template parameter</a>. This info is retrieved from the service
using <a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kevin:
I can try to help you get the attribute information passed to the print service (I was able to accomplish this), but the process, as I created it, was very clunky. Just let me know what information you need.
Michael,
I just got it working. wrapped the printing widget inside a function and trigger on click of parcel. I will post a working example today or tomorrow. Thank you though! I based it off of your work. But now it's extended. I'll post a full working sample in a bit.
///This works perfectly for the first time you click a parcel. Only thing left to do is fix one thing. It works for the first parcel clicked. but that parcel sticks in memory and the second, third etc click all point back to the first printParcel object. So it only works the first time. I will work on this today, and probably have the complete solution. once done I will post it here (edit and just stick it into this post)//////////
///I tried putting the following code block below inside the printWidget() function but it doesn't seem to work. My idea is that I need to destroy the printParcel widget after the infowindow is hidden. Conceptually that should work. but it's not, yet.
//map.infoWindow.on("hide", function (evt) {
// if (printerParcel) {
// printerParcel.destroy();
// };
//});
///past into ESRI Sandbox....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
h3 {
border-bottom: 1px solid #444;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
text-align: center;
}
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
background: #fff;
color: #000;
font-family: arial;
height: auto;
margin: 5px;
padding: 10px;
position: absolute;
right: 20px;
top: 20px;
width: 300px;
z-index: 40;
}
#feedback a {
border-bottom: 1px solid #888;
color: #444;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #444;
text-decoration: none;
}
#note {
font-size: 80%;
font-weight: 700;
padding: 0 0 10px 0;
}
#info {
padding: 10px 0 0 0;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var getWebData = {};
getWebData.SAGISPrintServiceAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Ex...";
getWebData.ArcGISCOMPrintServiceESRI = "http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%2...";
getWebData.GeometryServer = "http://sagisservices.thempc.org/saint/rest/services/Geometry/Geometry/GeometryServer";
getWebData.GeometryServerAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/Utilities/Geometry/GeometryServer";
// SAGIS provided data
getWebData.SagisOrgLayers = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";
getWebData.BlankBasemap = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGIS1/MapServer/37";
getWebData.Imagery2008 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_Tiles/MapServer";
getWebData.Imagery2011 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_2011/MapServer";
getWebData.Imagery2013 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Chatham2013/ImageServer";
getWebData.Elevation = "http://sagisservices.thempc.org/saint/rest/services/Imagery/ElevationDEM/MapServer";
getWebData.SAGISCenterlineLocator = "http://sagisservices.thempc.org/saint/rest/services/Locator/CENTERLINES/GeocodeServer";
getWebData.ParcelAnnos = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISAnnotation/MapServer";
getWebData.ParcelAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISMapAnnotation/MapServer";
getWebData.StreetsAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGISROADAnnotation_TEST/MapServer";
// External Data
getWebData.BOA_URL_Source = "http://boa.chathamcounty.org/Home/Property-Record-Cards/PIN/";
</script>
<script>
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/dijit/Popup",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/layers/GraphicsLayer",
"esri/graphic",
"dojo/query",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/InfoTemplate",
"esri/geometry/Extent",
"esri/geometry/Multipoint",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"dojo/on",
"dojo/promise/all",
"esri/tasks/IdentifyTask",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Print", "esri/tasks/PrintTemplate",
"esri/request", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, FeatureLayer,
Popup,
SimpleFillSymbol,
SimpleLineSymbol,
Color,
GraphicsLayer,
Graphic,
query,
Query,
QueryTask,
InfoTemplate,
Extent,
Multipoint,
Point,
webMercatorUtils,
on,
all,
IdentifyTask,
ArcGISDynamicMapServiceLayer,
Print, PrintTemplate,
esriRequest, esriConfig,
arrayUtils, dom, parser
) {
parser.parse();
var
esriConfig,
SagisOrgLayers,
maponclick,
selectionLayer,
eventHandlerIdentify,
printParcel = [];
printUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Ex...";
var popup = new Popup({ highlight: true, marginTop: 150, visibleWhenEmpty: true, fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.2])) }, dojo.create("div"));
esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new esri.Map("map", {
basemap: "streets",
center: [-81.11, 32.06],
zoom: 14,
slider: false
});
//Selection layer for parcel widget
selectionLayer = new GraphicsLayer();
SagisOrgLayers = new ArcGISDynamicMapServiceLayer(getWebData.SagisOrgLayers, {
"opacity": 0.8,
});
var parcelData = SagisOrgLayers.url + "/24";
// add graphics for pools with permits
var permitUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";
var poolFeatureLayer = new ArcGISDynamicMapServiceLayer(permitUrl);
map.addLayer(poolFeatureLayer);
poolFeatureLayer.setVisibleLayers([24]);
map.addLayer(selectionLayer);
// Start of parcel widget
// Declare variables for this widget
var parcelData = SagisOrgLayers.url + "/24";
var infoTemplate = new InfoTemplate();
var qtParcels = new QueryTask(parcelData);
var qParcels = new Query();
var parcels;
infoTemplate.setTitle("Property ID: ${PIN}");
infoTemplate.setContent("<div class='col-md-12'>" +
"<div class='row'><div class='col-md-5'>Owner:</div><div class='col-md-7'>${OWNERNAME}</div></div>" +
"<div class='row'><div class='col-md-5'>PIN:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>${PIN}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Property Address:</div><div class='col-md-7'>${FULLADDRESS}</div></div>" +
"<div class='row'><div class='col-md-5'>Zoning:</div><div class='col-md-7'><a target='_blank' href='${ZoningLink}'>${ZONEID}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Flood Zone:</div><div class='col-md-7'><a target=_blank' href='http://www.sagis.org/Content/floodzonedefinitions.pdf'>${FLOODID}</a></div></div>" +
"<div class='row'><div class='col-md-5'>Alderman:</div><div class='col-md-7'>${ALDER_TXT}</div></div>" +
"<div class='row'><div class='col-md-5'>Commissioner:</div><div class='col-md-7'>${COMMID}</div></div>" +
"<div class='row'><div class='col-md-5'>Voting Precinct:</div><div class='col-md-7'>${VOT_PRECINCT}</div></div>" +
"<div class='row'><div class='col-md-5'>Elementary School:</div><div class='col-md-7'>${ELEMENTARY}</div></div>" +
"<div class='row'><div class='col-md-5'>Middle School:</div><div class='col-md-7'>${MIDDLE}</div></div>" +
"<div class='row'><div class='col-md-5'>High School:</div><div class='col-md-7'>${HIGH}</div></div>" +
"<div class='row'><div class='col-md-5'>Zip Code:</div><div class='col-md-7'>${ZIP_CODE}</div></div>" +
"<div class='row'><div class='col-md-5'>Neighborhood Code:</div><div class='col-md-7'>${NBHD_CODE}</div></div>" +
"<div class='row'><div class='col-md-5'>Neighborhood:</div><div class='col-md-7'>${NBHD_DESC}</div></div>" +
"<div class='row'><div class='col-md-5'>Legal Description:</div><div class='col-md-7'>${LEGAL_1}</div></div>" +
"<div class='row'><div class='col-md-5'>Calculated Acreage:</div><div class='col-md-7'>${CALCAC}</div></div>" +
"<div class='row'><div class='col-md-5'>Land Value:</div><div class='col-md-7'>${LAND_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Building Value:</div><div class='col-md-7'>${BUILDING_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Real Estate Value:</div><div class='col-md-7'>${REAL_ESTATE_VALUE}</div></div>" +
"<div class='row'><div class='col-md-5'>Sale Price:</div><div class='col-md-7'>${SALE_PRICE}</div></div>" +
"<div class='row'><div class='col-md-5'>Sales Date:</div><div class='col-md-7'>${SALE_MM}/${SALE_DD}/${SALE_YY}</div></div>" +
"<div class='row'><div class='col-md-5'>Property Card:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>Board of Assessors</a></div></div>" +
"</div>");
var outFields = [
"OWNERNAME", "PIN", "FULLADDRESS", "ZONEID", "FLOODID", "ALDER_TXT", "COMMID", "VOT_PRECINCT", "ELEMENTARY", "MIDDLE", "HIGH", "ZIP_CODE", "NBHD_DESC",
"CALCAC", "LAND_VALUE", "BUILDING_VALUE", "REAL_ESTATE_VALUE", "SALE_PRICE", "SALE_YY", "SALE_MM", "SALE_DD", "LEGAL_1", "OBJECTID", "Shape", "Shape_Length", "Shape_Area"
];
qParcels.outSpatialReference = { wkid: 102100 };
qParcels.returnGeometry = true;
qParcels.outFields = outFields;
function cleanqParcels() {
if (qParcels.hasOwnProperty("text")) delete qParcels.text;
if (qParcels.hasOwnProperty("geometry")) delete qParcels.geometry;
}
// click on map
maponclick = map.on("click", executeMapParcelQuery); //
function executeMapParcelQuery(e) {
var promises, qGeom, point, pxWidth, padding;
point = e.mapPoint;
pxWidth = map.extent.getWidth() / map.width;
padding = 3 * pxWidth;
qGeom = new Extent({
"xmin": point.x - padding,
"ymin": point.y - padding,
"xmax": point.x + padding,
"ymax": point.y + padding,
"spatialReference": point.spatialReference
});
cleanqParcels();
qParcels.geometry = qGeom;
qParcels.outFields = outFields;
parcels = qtParcels.execute(qParcels);
promises = new all([parcels]);
promises.then(handleClickQueryResults);
}
function handleClickQueryResults(results) {
if (!results[0].hasOwnProperty("features")) {
console.debug("Parcels query failed");
}
parcels = results[0].features;
arrayUtils.forEach(parcels, function (feat) {
// add data before adding to map.
if (feat.attributes.PIN != undefined) {
switch (feat.attributes.PIN.substring(0, 1)) {
case "1":
feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/ChathamCountyZoning.htm";
break;
case "2":
feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/SavannahZoning.htm";
break;
default:
break;
}
}
if (feat.attributes.ALDER_TXT != undefined) {
switch (feat.attributes.ALDER_TXT.substring(4, 5)) {
case "1":
feat.attributes.ALDER_TXT = "Van R. Johnson";
break;
case "2":
feat.attributes.ALDER_TXT = "Mary Osborne";
break;
case "3":
feat.attributes.ALDER_TXT = "John Hall";
break;
case "4":
feat.attributes.ALDER_TXT = "Mary Ellen Sprague";
break;
case "5":
feat.attributes.ALDER_TXT = "Dr. Estella Shabazz";
break;
case "6":
feat.attributes.ALDER_TXT = "Tony Thomas";
break;
default:
break;
}
}
if (feat.attributes.COMMID != undefined) {
// alert("success");
switch (feat.attributes.COMMID) {
case 1:
feat.attributes.COMMID = "Van R. Johnson";
break;
case 2:
feat.attributes.COMMID = "James J. Holmes";
break;
case 3:
feat.attributes.COMMID = "Tony Center";
break;
case 4:
feat.attributes.COMMID = "Patrick K. Farrell";
break;
case 5:
feat.attributes.COMMID = "Yusuf Shabazz";
break;
case 6:
feat.attributes.COMMID = "Lori L. Brady";
break;
case 7:
feat.attributes.COMMID = "Dean Kicklighter";
break;
case 8:
feat.attributes.COMMID = "Priscilla D. Thomas";
break;
default:
break;
}
}
}); /// end of adding data to feature for infowindow section...///
map.graphics.clear(); // consider disabling this after maponclick is no longer the default map click handler (which noel wants).. becaues otherwise if user has created drawings, closes Draw dialolog, and then clicks map, they will disapper.
arrayUtils.forEach(parcels, function (feat) {
feat.infoTemplate = infoTemplate;
feat.setSymbol(new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])).setOutline(null));
map.graphics.add(feat);
printParcel = parcels[0];
printWidget();
});
} //end of handleClickQuery func
// End of parcel Widget
function printWidget() {
// Start of Print Widget
templates = new PrintTemplate();
//attribute table field title strings
Owner = "Owner: \n";
PIN = "PIN: ";
PropertyAddress = "PropertyAddress: \n";
Zoning = "Zoning: ";
FloodZone = "FloodZone: ";
Alderman = "Alderman: ";
Commissioner = "Commissioner: ";
VotingPrecinct = "Voting Precinct: ";
ElementarySchool = "Elementary School: ";
MiddleSchool = "Middle School: ";
HighSchool = "High School: ";
ZipCode = "Zip Code: ";
Neighborhood = "Neighborhood: \n";
LegalDescription = "Legal Description: \n";
CalculatedAcreage = "CalculatedAcreage: ";
LandValue = "LandValue: ";
BuildingValue = "Building Value: ";
RealEstateValue = "Real Estate Value: ";
SalePrice = "Sale Price: ";
SalesDate = "Sales Date: ";
layoutvar2 = {
"authorText": "Savannah Area Geographic Information System (SAGIS)",
"copyrightText": "www.SAGIS.org",
"customTextElements": [
{
"infoDetails":
"PARCEL INFORMATION \r\n" + "___________________" +
"\r\n" + "\n" + " " + "\n" + PIN + printParcel.attributes.PIN +
"\r\n" + "\n" + " " + "\n" + PropertyAddress + printParcel.attributes.FULLADDRESS +
"\r\n" + "\n" + " " + "\n" + Zoning + printParcel.attributes.ZONEID +
"\r\n" + "\n" + " " + "\n" + FloodZone + printParcel.attributes.FLOODID +
"\r\n" + "\n" + " " + "\n" + Alderman + printParcel.attributes.ALDERID +
"\r\n" + "\n" + " " + "\n" + Commissioner + printParcel.attributes.COMMID +
"\r\n" + "\n" + " " + "\n" + VotingPrecinct + printParcel.attributes.VOT_PRECINCT +
"\r\n" + "\n" + " " + "\n" + ElementarySchool + printParcel.attributes.ELEMENTARY +
"\r\n" + "\n" + " " + "\n" + MiddleSchool + printParcel.attributes.MIDDLE +
"\r\n" + "\n" + " " + "\n" + HighSchool + printParcel.attributes.HIGH +
"\r\n" + "\n" + " " + "\n" + ZipCode + printParcel.attributes.ZIPCODE +
"\r\n" + "\n" + " " + "\n" + Neighborhood + printParcel.attributes.NBHD_DESC +
"\r\n" + "\n" + " " + "\n" + LegalDescription + printParcel.attributes.LEGAL_1 +
"\r\n" + "\n" + " " + "\n" + CalculatedAcreage + printParcel.attributes.LCALCAC +
"\r\n" + "\n" + " " + "\n" + LandValue + printParcel.attributes.LAND_VALUE +
"\r\n" + "\n" + " " + "\n" + BuildingValue + printParcel.attributes.BUILDING_VALUE +
"\r\n" + "\n" + " " + "\n" + RealEstateValue + printParcel.attributes.REAL_ESTATE_VALUE +
"\r\n" + "\n" + " " + "\n" + SalePrice + printParcel.attributes.SALE_PRICE +
"\r\n" + "\n" + " " + "\n" + SalesDate + printParcel.attributes.SALE_DD + "/" + printParcel.attributes.SALE_MM + "/" + printParcel.attributes.SALE_YY
}
],
"titleText": "www.SAGIS.org Map Viewer"
};
templates = [
{
label: "PDF 8.5 x 11 with Parcel Information",
format: "PDF",
layout: "test",
exportOptions: { "dpi": "300" },
layoutOptions: layoutvar2
}
];
if (typeof printer == 'undefined') {
// create the print dijit
printer = new Print({
"map": map,
"templates": templates,
url: getWebData.SAGISPrintServiceAmazon
}, dom.byId("print_button"));
printer.startup();
}
};
// End of Print Widget
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="height: 100%; margin: 0; width: 100%;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>
Print Templates Created from Info Returned by the Print Service using
<a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>
</h3>
<div id="info">
<div id="note">
Note: This sample uses an ArcGIS Server version 10.1 export web map task.
</div>
<!-- that will be used for the print dijit -->
<div id="print_button"></div>
<div id="info">
<a href="https://developers.arcgis.com/javascript/jsapi/printtemplate.html">Print templates</a> are generated
from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...">Layout_Template parameter</a>. This info is retrieved from the service
using <a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>.
</div>
</div>
</div>
</div>
</div>
</body>
</html>