This worked for me
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MISIN Treatment Tracker: Print</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<!--js scripts to print map-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.15.0/js/canvas-to-blob.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<!--end print scripts-->
<style>
@media print {
#printButton {
display: none;
}
}
</style>
<!-- START ESRI MAP SCRIPT -->
<script>var dojoConfig = { parseOnLoad: true }</script>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var theMap;
var cred = "esri_jsapi_id_manager_data";
var symbol, infoTemplate;
var OID;
require([
"esri/map",
"esri/SpatialReference",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/LayerDrawingOptions",
"esri/layers/LabelLayer",
"esri/layers/LabelClass",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/graphic",
"esri/InfoTemplate",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/graphicsUtils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/dijit/Print",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/PrintTask",
"esri/tasks/PrintParameters",
"esri/tasks/PrintTemplate",
"esri/request",
"esri/config",
"esri/geometry/Extent",
"esri/IdentityManager",
"esri/lang",
"dojo/_base/array",
"dojo/_base/Color",
"dojo/_base/unload",
"dojo/cookie",
"dojo/json",
"dojo/parser",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/dom",
"dojo/on",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!",
], function(
Map,
SpatialReference,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
FeatureLayer,
ImageParameters,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
LayerDrawingOptions,
LabelLayer,
LabelClass,
TextSymbol,
SimpleRenderer,
Graphic,
InfoTemplate,
urlUtils,
arcgisUtils,
graphicsUtils,
Legend,
Scalebar,
Print,
Query,
QueryTask,
PrintTask,
PrintParameters,
PrintTemplate,
esriRequest,
esriConfig,
Extent,
esriId,
esriLang,
arrayUtils,
Color,
baseUnload,
cookie,
JSON,
parser,
domConstruct,
domClass,
dom,
on,
BorderContainer,
ContentPane,
Button
){
function init()
{
baseUnload.addOnUnload(storeCredentials);
loadCredentials();
esriConfig.defaults.io.proxyUrl = "/proxy/";
theMap = new Map("mapdiv", {
basemap:"topo",
showLabels: true,
});
theMap.on("load", function() {
theMap.disableMapNavigation();
theMap.hideZoomSlider();
});
var printer = new Print({
map: theMap,
url: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
printer.startup();
var labelField = "WETLAND_TYPE"
var wetlandsColor = new Color ("#0E881B");
var wetlandsLine = new SimpleLineSymbol("solid", wetlandsColor, 1.5);
var wetlandsRenderer = new SimpleRenderer(wetlandsLine);
var wetlandsLabel = new TextSymbol().setColor(wetlandsColor);
wetlandsLabel.font.setSize("10pt");
wetlandsLabel.font.setFamily("arial");
var json = {
"labelExpressionInfo": {"value": "{WETLAND_TYPE}"}
};
var labelClass = new LabelClass(json);
labelClass.symbol = wetlandsLabel;
var wetlands = new FeatureLayer("https://gisago.mcgi.state.mi.us/arcgis/rest/services/OpenData/hydro/MapServer/18");
wetlands.setRenderer(wetlandsRenderer)
wetlands.setLabelingInfo([ labelClass ]);
theMap.addLayer(wetlands);
var imageParameters = new ImageParameters();
imageParameters.layerIds = [2];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParameters.transparent = true;
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://fuzzy.asets.msu.edu/arcgis/rest/services/MISIN/misin_treatments/MapServer",
{"opacity": 0.0},
{"imageParameters": imageParameters});
theMap.addLayer(dynamicMapServiceLayer);
var queryTask = new QueryTask("https://fuzzy.asets.msu.edu/arcgis/rest/services/MISIN/misin_treatments/MapServer/2");
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([64,124,248]), 2),new dojo.Color([189,209,253]));
var urlObject = urlUtils.urlToObject(window.location.href);
if (urlObject.query)
{
if (urlObject.query.id)
{ OID = urlObject.query.id; }
var treatmentid = "OBJECTID = '" + OID + "'";
query.where = treatmentid;
}
queryTask.execute(query, showResults);
}
function showResults(featureSet)
{
theMap.graphics.clear();
theMap.infoWindow.hide();
var resultFeatures = featureSet.features;
for (var i=0, il=resultFeatures.length; i<il; i++)
{
var graphic = resultFeatures[i];
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
theMap.graphics.add(graphic);
}
var myFeatureExtent = esri.graphicsExtent(resultFeatures);
theMap.setExtent(myFeatureExtent.getExtent().expand(3));
window.history.pushState(null,null,"?id=" + graphic.attributes.OBJECTID);
}
function loadCredentials(){
var idJson, idObject;
if (supports_local_storage()) {
idJson = window.localStorage.getItem(cred);
}
else {
idJson = cookie(cred);
}
if (idJson && idJson != "null" && idJson.length > 4) {
idObject = JSON.parse(idJson);
esriId.initialize(idObject);
}
else {
}
}
function storeCredentials(){
if (esriId.credentials.length === 0) {
return;
}
var idString = JSON.stringify(esriId.toJson());
if (supports_local_storage()) {
window.localStorage.setItem(cred, idString);
}
else {
cookie(cred, idString, {expires: 1});
}
}
function supports_local_storage(){
try {
return "localStorage" in window && window["localStorage"] !== null;
} catch (e) {
return false;
}
}
dojo.addOnLoad(init);
});
</script>
</head>
<!-- START OF PAGE LAYOUT -->
<body class="claro">
<div id="printButton"></div>
<!--<input type="button" id="printButton" value="Print" onclick="print()">-->
<div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 800px; height: 800px; margin: 0;">
<div id="mapdiv" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"></div>
</div>
</body>
<!-- END OF PAGE LAYOUT -->
</html>