AnsweredAssumed Answered

JavaScript API Print Widget / dom.byID

Question asked by dshaw34_GISandData on Nov 8, 2017
Latest reply on Nov 8, 2017 by dshaw34_GISandData

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>

Outcomes