I am trying to set up a map that classifies Colorado peaks by their unique values (Class of peak) and allows the user to print the map. I had the map displaying nicely until I tried to implement the print widget. Somewhere I became lost in the code and keep receiving the error "dom.byID is not a function." I have used the samples for Unique Values Renderer and the Print widget but I can not get them all into one functioning map.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Unique Value Renderer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/nihilo/nihilo.css">
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
}
#rightPane{
margin: 0;
padding: 10px;
background-color: #fff;
color: #421b14;
width: 180px;
}
#printButton {
width: 160px;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var app = {};
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",
"esri/renderers/UniqueValueRenderer", "esri/Color", "esri/config", "dojo/dom", "dijit/form/Button",
"dojo/domReady!"
], function(
Map, Print, FeatureLayer,
SimpleLineSymbol, SimpleFillSymbol, graphic,
UniqueValueRenderer, Color, parser, dom, Button
) {
esriConfig.defaults.io.proxyUrl = "/proxy/";
app.map = new Map("map", {
basemap: "streets",
center: [-105.78, 39.55],
zoom: 6,
slider: false
});
app.printer = new Print({
map: app.map,
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
app.printer.startup();
var uvrJson = {
"type": "uniqueValue",
"field1": "Class",
"defaultSymbol": {
"color": [0, 0, 0, 64],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSMS",
"style": "esriSMSCircle"
},
"type": "esriSMS",
"style": "esriSMSCircle"
},
"uniqueValueInfos": [{
"value": "Class 1",
"symbol": {
"color": [255, 204, 204, 1],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSMS",
"style": "esriSMSCircle"
},
"type": "esriSLS",
"style": "esriSLSSolid"
}
}, {
"value": "Class 2",
"symbol": {
"color": [255, 102, 102, 1],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSMS",
"style": "esriSMSCircle"
},
"type": "esriSLS",
"style": "esriSLSolid"
}
},
{
"value": "Class 3",
"symbol": {
"color": [255, 0, 0, 1],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSMS",
"style": "esriSMSCircle"
},
"type": "esriSLS",
"style": "esriSLSolid"
}
},
{
"value": "Class 4",
"symbol": {
"color": [102, 0, 0, 0],
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSMS",
"style": "esriSMSCircle"
},
"type": "esriSLS",
"style": "esriSLSolid"
}
}]
}
var renderer = new UniqueValueRenderer(uvrJson);
var featureLayer = new FeatureLayer("https://services.arcgis.com/IZtlGBUe4KTzLOl4/ArcGIS/rest/services/Colorado14ers/FeatureServer/0", {
infoTemplate: new InfoTemplate(" ", "${Class}"),
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["Class"]
});
app.map.addLayer(featureLayer);
featureLayer.setRenderer(uvrjson);
});
</script>
</head>
<body>
<div id="map"></div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div id="printButton"></div>
<hr />
</div>
</body>
</html>
