topic Re: JavaScript API Print Widget / dom.byID in ArcGIS JavaScript Maps SDK Questions

JavaScript API Print Widget / dom.byID

DonaldShaw5 — Sat, 11 Dec 2021 12:04:03 GMT

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>

Re: JavaScript API Print Widget / dom.byID

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:04:05 GMT

Donald,

You are making a mistake that most beginner JS Developers make with they are unfamiliar with AMD style coding.

Your module require list and their subsequent vars have to be in the same order. You have:

    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
    ) {‍‍‍‍‍‍‍‍‍‍

You need:

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",
      "esri/renderers/UniqueValueRenderer", "esri/Color", "esri/config", 
      "dojo/parser", "dojo/dom", "dijit/form/Button",
      "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Print, 
      SimpleLineSymbol, SimpleMarkerSymbol, graphic,
      UniqueValueRenderer, Color, esriConfig, parser, dom, Button
    ) {‍‍‍‍‍‍‍‍‍‍‍

Re: JavaScript API Print Widget / dom.byID

DonaldShaw5 — Sat, 11 Dec 2021 12:04:09 GMT

Mr. Scheitlin, nice catch, but I am now receiving an error "Uncaught TypeError: Cannot read property 'io' of undefined" referring to

     esriConfig.defaults.io.proxyUrl = "/proxy/";

Any thoughts on this?

Re: JavaScript API Print Widget / dom.byID

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:04:11 GMT

Donald,

OK, I missed the fact that you have graphic in your vars but not in your module require list:

require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/Graphic",
      "esri/renderers/UniqueValueRenderer", "esri/Color", "esri/config", 
      "dojo/parser", "dojo/dom", "dijit/form/Button",
      "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Print, 
      SimpleLineSymbol, SimpleMarkerSymbol, graphic,
      UniqueValueRenderer, Color, esriConfig, parser, dom, Button
    ) {‍‍‍‍‍‍‍‍‍‍‍

Re: JavaScript API Print Widget / dom.byID

RobertScheitlin__GISP — Wed, 08 Nov 2017 20:08:29 GMT

Donald,

You had a reply here a while ago that seemed like you were having more problems. Did you delete it because you are good to go now? If so then don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: JavaScript API Print Widget / dom.byID

DonaldShaw5 — Sat, 11 Dec 2021 12:04:15 GMT

Sorry about that, I forgot to add the comment after removing the last one. I was able to get the print button to generate but not in the position that I wanted. This was after rearranging the <style> section and the divs down in the body. For now it will work. JavaScript has been quite a big learning curve, but it is good to dive in and see how things work! Next up for me is finding out about Legends! Thanks for everything, here is the code that got it to finally populate!

<!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;
    }
    body{
      background-color: #fff; overflow:hidden;
      font-family: sans-serif;
    }
    label {
      display: inline-block;
      padding: 5px 5px 0 5px;
      font-weight: 400;
      font-size: 12pt;
    }
    .button {
      width: 100%;
      margin: 3px auto;
      text-align: center;
    }
    #header {
      padding-top: 4px;
      padding-right: 15px;
      color: #444;
      font-size:16pt; text-align:right;font-weight:bold;
      height:55px;
      background: #fff;
      border-bottom: 1px solid #444;
    }
    #subheader {
      font-size:small;
      color: #444;
      text-align:right;
      padding-right:20px;
    }
    #rightPane{
      margin: 0;
      padding: 10px;
      background-color: #fff;
      color: #421b14;
      width: 180px;
    }

    /* make all dijit buttons the same width */
    .dijitButton .dijitButtonNode, #printButton
    {width: 160px;}
    .esriPrint {
      padding: 0;
    }

  </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/InfoTemplate", "esri/dijit/Print",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",
      "esri/renderers/UniqueValueRenderer", "esri/Color", "esri/config",
      "dojo/parser","dojo/query", "dojo/dom", "dijit/form/Button",
      "dojo/domReady!"
    ], function(
      Map, FeatureLayer, InfoTemplate, Print,
      SimpleLineSymbol, SimpleMarkerSymbol,
      UniqueValueRenderer, Color, esriConfig, parser, query, dom, Button
    ) {
      parser.parse();
      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 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);

    });


  </script>
</head>

<body class="nihilo">
<div id="mainWindow"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="header"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'top'">
    Colorado 14ers Map
    <div id="subheader"></div>
  </div>
  <div id="map" class="shadow"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"><div id="ds">


<div id="rightPane"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-props="region:'right'">

  <div id="printButton"></div>
  <hr />
</div>
  </div>
  </div>
</div>
</body>

</html>