Print Widget Error with Graphic Layers

GiovanniMarrero3 · ‎05-02-2018

Hello,

I added a print widget to the script below but it does not create/export the pdf. I have tried the exact print widget on other applications and it executes as it should.

The server error says "Layer "graphicsLayer1": Field 'SCHOOL' not part of schema for this feature collection. Failed to execute (ExportWebMap). "

Is this a limitation of the print widget due to the graphics layer? Any workaround?

<!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>Redistricting Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #mapDiv {
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #HomeButton {
        position: absolute;
        top: 95px;
        left: 21px;
        z-index: 50;
      }

      #header {
        border: solid 2px #462d44;
        background: #fff;
        color: #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-size: 1.2em;
        padding-left: 20px;
      }

      #rightPane {
        width: 250px;
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #info {
        font-weight: bold;
        font-size: 0.85em;
      }

      #legendDiv {
        padding-top: 23px;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map, gra, schoolGL;
      var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
      var executeSchool4Evt, executeSchool5Evt;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
        "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/dijit/HomeButton", "esri/graphic",
        "esri/renderers/SimpleRenderer", "esri/Color",
        "esri/config", "esri/dijit/Legend",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "dojo/_base/array", "dijit/registry",
        "dojo/query", "esri/tasks/LegendLayer",
        "esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
        "dojo/store/Memory", "dojo/dom-construct",
        "dijit/form/Button", "dojo/dom",
        "dojo/on", "dojo/parser",
        "esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Print,
        InfoTemplate, Draw,
        SimpleLineSymbol, SimpleFillSymbol,
        HomeButton, Graphic,
        SimpleRenderer, Color,
        esriConfig, Legend,
        Query, QueryTask,
        array, registry,
        dojoQuery, LegendLayer,
        StatisticDefinition, geometryEngine,
        Memory, domConstruct,
        Button, dom,
        on, parser,
        GraphicsLayer, UniqueValueRenderer
      ) {
        parser.parse();

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

        var selectionToolbar;

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-84.20, 33.78], // lon, lat
          zoom: 11
        });

        var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));

        //create renderer
        var renderer = new SimpleRenderer(defaultSymbol);

        var content = "<b>ES Population</b>: ${ES_Pop}" +
          "<br><b>MS Population</b>: ${MS_Pop}" +
          "<br><b>HS Population</b>: ${HS_Pop}";
        var infoTemplate = new InfoTemplate("${ES_Name}", content);

        var fields = ["ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];

        var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          //infoTemplate: infoTemplate,
          outFields: fields
        });

        var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
        var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
        var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
        var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
        var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

        schoolGL = new GraphicsLayer();
        var uvRenderer = new UniqueValueRenderer(defaultSymbol, "SCHOOL");
        uvRenderer.addValue({
          value: 1,
          symbol: sSymbol1,
          label: "School 1",
          description: "School 1"
        });
        uvRenderer.addValue({
          value: 2,
          symbol: sSymbol2,
          label: "School 2",
          description: "School 2"
        });
        uvRenderer.addValue({
          value: 3,
          symbol: sSymbol3,
          label: "School 3",
          description: "School 3"
        });
        uvRenderer.addValue({
          value: 4,
          symbol: sSymbol4,
          label: "School 4",
          description: "School 4"
        });
        uvRenderer.addValue({
          value: 5,
          symbol: sSymbol5,
          label: "School 5",
          description: "School 5"
        });
        on(schoolGL, "click", function(e) {
          if (e.shiftKey) {
            schoolGL.remove(e.graphic);
            calculatePop();
          }
        });

        blocks.setRenderer(uvRenderer);
        schoolGL.setRenderer(uvRenderer);
        map.addLayers([blocks, schoolGL]);

        dom.byId("SchoolsButton1").onclick = executeSchool1;
        dom.byId("SchoolsButton2").onclick = executeSchool2;
        dom.byId("SchoolsButton3").onclick = executeSchool3;
        dom.byId("SchoolsButton4").onclick = executeSchool4;
        dom.byId("SchoolsButton5").onclick = executeSchool5;

        function clearEvts() {
          if (executeSchool1Evt) {
            executeSchool1Evt.remove();
          }
          if (executeSchool2Evt) {
            executeSchool2Evt.remove();
          }
          if (executeSchool3Evt) {
            executeSchool3Evt.remove();
          }
          if (executeSchool4Evt) {
            executeSchool4Evt.remove();
          }
          if (executeSchool5Evt) {
            executeSchool5Evt.remove();
          }
        }

        function doPreEvents() {
          clearEvts();
          map.disableClickRecenter();
          map.disableShiftDoubleClickZoom();
          map.disableKeyboardNavigation();
          map.disableRubberBandZoom();
        }

        function undoPreEvents() {
          clearEvts();
          map.enableClickRecenter();
          map.enableShiftDoubleClickZoom();
          map.enableKeyboardNavigation();
          map.enableRubberBandZoom();
        }

        function executeSchool1() {
          doPreEvents();
          executeSchool1Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.SCHOOL = 1;
            //gra.setSymbol(sSymbol1);
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool2() {
          doPreEvents();
          executeSchool2Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.SCHOOL = 2;
            //gra.setSymbol(sSymbol2);
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool3() {
          doPreEvents();
          executeSchool3Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.SCHOOL = 3;
            //gra.setSymbol(sSymbol3);
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool4() {
          doPreEvents();
          executeSchool4Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.SCHOOL = 4;
            //gra.setSymbol(sSymbol4);
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool5() {
          doPreEvents();
          executeSchool5Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.SCHOOL = 5;
            //gra.setSymbol(sSymbol5);
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function calculatePop(id) {
          var PopSumObj = {
            1: 0,
            2: 0,
            3: 0,
            4: 0,
            5: 0
          }
          //summarize the ES Population to display
          array.forEach(schoolGL.graphics, function(feature) {
            switch (feature.attributes.SCHOOL) {
              case 1:
                PopSumObj[1] += feature.attributes.ES_Pop;
                break;
              case 2:
                PopSumObj[2] += feature.attributes.ES_Pop;
                break;
              case 3:
                PopSumObj[3] += feature.attributes.ES_Pop;
                break;
              case 4:
                PopSumObj[4] += feature.attributes.ES_Pop;
                break;
              case 5:
                PopSumObj[5] += feature.attributes.ES_Pop;
                break;
            }
          });
          var CapDiv, Capacity;
          for (var i = 0; i < 5; i++) {
            CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
            if (CapDiv >= 80 && CapDiv <= 99) {
              Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
            } else if (CapDiv >= 100) {
              Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
            } else {
              Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
            }
            dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
          }
        }

        //add the legend
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: blocks,
            title: "School Re-Districting"
          }]
        }, "legendDiv");
        legend.startup();

        //function for refreshing block layer for use on button
        var refreshlayer = new Button({
          label: "Reset Map",
          onClick: function() {
            //the refresh will force it to get the original layer
            schoolGL.clear();
            dom.byId("countResult_1").innerHTML = "";
            dom.byId("countResult_2").innerHTML = "";
            dom.byId("countResult_3").innerHTML = "";
            dom.byId("countResult_4").innerHTML = "";
            dom.byId("countResult_5").innerHTML = "";
            undoPreEvents();
          }
        }, "refreshbutton").startup();

        //home button to return to map's default extent
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        //Print Button 
        var printer = new Print({
          map: map,
          url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
        }, dom.byId("printButton"));
        printer.startup();
        on(printer, "onPrintComplete", function(result) {
          var currentTime = new Date();
          result.url += "?ts=" + currentTime.getTime();
        });

        // Code to edit the default print button text
        printer._printText = 'Submit Map';
        printer._printingText = 'Sending.., Please wait';
        printer._printoutText = 'Map Submitted, Thank you.';

        $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');

        on(printer, '_createPrintButton', function(value) {
          $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
        });

      });

    </script>
  </head>

  <body class="tundra">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
            <div id="info">
              <button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
              <button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
              <button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
              <button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
              <button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
              <div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
              <div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
            </div>
            <div id="legendDiv"></div>
          </div>
        </div>
      </div>
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        <div id="HomeButton"></div>
      </div>
    </div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎05-02-2018

Giovanni,

Here is the code fixed. The issue was I created a new field called SCHOOL in the previous code that did not exist in your layer. So now the code just uses the ES_Num field instead.

<!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>Redistricting Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #mapDiv {
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #HomeButton {
        position: absolute;
        top: 95px;
        left: 21px;
        z-index: 50;
      }

      #header {
        border: solid 2px #462d44;
        background: #fff;
        color: #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-size: 1.2em;
        padding-left: 20px;
      }

      #rightPane {
        width: 250px;
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #info {
        font-weight: bold;
        font-size: 0.85em;
      }

      #legendDiv {
        padding-top: 23px;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map, gra, schoolGL;
      var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
      var executeSchool4Evt, executeSchool5Evt;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
        "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/dijit/HomeButton", "esri/graphic",
        "esri/renderers/SimpleRenderer", "esri/Color",
        "esri/config", "esri/dijit/Legend",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "dojo/_base/array", "dijit/registry",
        "dojo/query", "esri/tasks/LegendLayer",
        "esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
        "dojo/store/Memory", "dojo/dom-construct",
        "dijit/form/Button", "dojo/dom",
        "dojo/on", "dojo/parser",
        "esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Print,
        InfoTemplate, Draw,
        SimpleLineSymbol, SimpleFillSymbol,
        HomeButton, Graphic,
        SimpleRenderer, Color,
        esriConfig, Legend,
        Query, QueryTask,
        array, registry,
        dojoQuery, LegendLayer,
        StatisticDefinition, geometryEngine,
        Memory, domConstruct,
        Button, dom,
        on, parser,
        GraphicsLayer, UniqueValueRenderer
      ) {
        parser.parse();

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

        var selectionToolbar;

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-84.20, 33.78], // lon, lat
          zoom: 11
        });

        var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));

        //create renderer
        var renderer = new SimpleRenderer(defaultSymbol);

        var content = "<b>ES Population</b>: ${ES_Pop}" +
          "<br><b>MS Population</b>: ${MS_Pop}" +
          "<br><b>HS Population</b>: ${HS_Pop}";
        var infoTemplate = new InfoTemplate("${ES_Name}", content);

        var fields = ["ES_Num", "ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];

        var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          //infoTemplate: infoTemplate,
          outFields: fields
        });

        var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
        var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
        var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
        var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
        var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

        schoolGL = new GraphicsLayer();
        var uvRenderer = new UniqueValueRenderer(defaultSymbol, "ES_Num");
        uvRenderer.addValue({
          value: 1,
          symbol: sSymbol1,
          label: "School 1",
          description: "School 1"
        });
        uvRenderer.addValue({
          value: 2,
          symbol: sSymbol2,
          label: "School 2",
          description: "School 2"
        });
        uvRenderer.addValue({
          value: 3,
          symbol: sSymbol3,
          label: "School 3",
          description: "School 3"
        });
        uvRenderer.addValue({
          value: 4,
          symbol: sSymbol4,
          label: "School 4",
          description: "School 4"
        });
        uvRenderer.addValue({
          value: 5,
          symbol: sSymbol5,
          label: "School 5",
          description: "School 5"
        });
        on(schoolGL, "click", function(e) {
          if (e.shiftKey) {
            schoolGL.remove(e.graphic);
            calculatePop();
          }
        });

        blocks.setRenderer(uvRenderer);
        schoolGL.setRenderer(uvRenderer);
        map.addLayers([blocks, schoolGL]);

        dom.byId("SchoolsButton1").onclick = executeSchool1;
        dom.byId("SchoolsButton2").onclick = executeSchool2;
        dom.byId("SchoolsButton3").onclick = executeSchool3;
        dom.byId("SchoolsButton4").onclick = executeSchool4;
        dom.byId("SchoolsButton5").onclick = executeSchool5;

        function clearEvts() {
          if (executeSchool1Evt) {
            executeSchool1Evt.remove();
          }
          if (executeSchool2Evt) {
            executeSchool2Evt.remove();
          }
          if (executeSchool3Evt) {
            executeSchool3Evt.remove();
          }
          if (executeSchool4Evt) {
            executeSchool4Evt.remove();
          }
          if (executeSchool5Evt) {
            executeSchool5Evt.remove();
          }
        }

        function doPreEvents() {
          clearEvts();
          map.disableClickRecenter();
          map.disableShiftDoubleClickZoom();
          map.disableKeyboardNavigation();
          map.disableRubberBandZoom();
        }

        function undoPreEvents() {
          clearEvts();
          map.enableClickRecenter();
          map.enableShiftDoubleClickZoom();
          map.enableKeyboardNavigation();
          map.enableRubberBandZoom();
        }

        function executeSchool1() {
          doPreEvents();
          executeSchool1Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 1;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool2() {
          doPreEvents();
          executeSchool2Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 2;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool3() {
          doPreEvents();
          executeSchool3Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 3;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool4() {
          doPreEvents();
          executeSchool4Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 4;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool5() {
          doPreEvents();
          executeSchool5Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 5;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function calculatePop(id) {
          var PopSumObj = {
            1: 0,
            2: 0,
            3: 0,
            4: 0,
            5: 0
          }
          //summarize the ES Population to display
          array.forEach(schoolGL.graphics, function(feature) {
            switch (feature.attributes.ES_Num) {
              case 1:
                PopSumObj[1] += feature.attributes.ES_Pop;
                break;
              case 2:
                PopSumObj[2] += feature.attributes.ES_Pop;
                break;
              case 3:
                PopSumObj[3] += feature.attributes.ES_Pop;
                break;
              case 4:
                PopSumObj[4] += feature.attributes.ES_Pop;
                break;
              case 5:
                PopSumObj[5] += feature.attributes.ES_Pop;
                break;
            }
          });
          var CapDiv, Capacity;
          for (var i = 0; i < 5; i++) {
            CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
            if (CapDiv >= 80 && CapDiv <= 99) {
              Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
            } else if (CapDiv >= 100) {
              Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
            } else {
              Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
            }
            dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
          }
        }

        //add the legend
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: blocks,
            title: "School Re-Districting"
          }]
        }, "legendDiv");
        legend.startup();

        //function for refreshing block layer for use on button
        var refreshlayer = new Button({
          label: "Reset Map",
          onClick: function() {
            //the refresh will force it to get the original layer
            schoolGL.clear();
            dom.byId("countResult_1").innerHTML = "";
            dom.byId("countResult_2").innerHTML = "";
            dom.byId("countResult_3").innerHTML = "";
            dom.byId("countResult_4").innerHTML = "";
            dom.byId("countResult_5").innerHTML = "";
            undoPreEvents();
          }
        }, "refreshbutton").startup();

        //home button to return to map's default extent
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        //Print Button
        var printer = new Print({
          map: map,
          url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
        }, dom.byId("printButton"));
        printer.startup();
        on(printer, "onPrintComplete", function(result) {
          var currentTime = new Date();
          result.url += "?ts=" + currentTime.getTime();
        });

        // Code to edit the default print button text
        printer._printText = 'Submit Map';
        printer._printingText = 'Sending.., Please wait';
        printer._printoutText = 'Map Submitted, Thank you.';

        $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');

        on(printer, '_createPrintButton', function(value) {
          $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
        });

      });

    </script>
  </head>

  <body class="tundra">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
            <div id="info">
              <button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
              <button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
              <button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
              <button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
              <button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
              <div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
              <div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
            </div>
            <div id="legendDiv"></div>
          </div>
        </div>
      </div>
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        <div id="HomeButton"></div>
      </div>
    </div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-02-2018

Giovanni,

Here is the code fixed. The issue was I created a new field called SCHOOL in the previous code that did not exist in your layer. So now the code just uses the ES_Num field instead.

<!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>Redistricting Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #mapDiv {
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #HomeButton {
        position: absolute;
        top: 95px;
        left: 21px;
        z-index: 50;
      }

      #header {
        border: solid 2px #462d44;
        background: #fff;
        color: #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-size: 1.2em;
        padding-left: 20px;
      }

      #rightPane {
        width: 250px;
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #info {
        font-weight: bold;
        font-size: 0.85em;
      }

      #legendDiv {
        padding-top: 23px;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map, gra, schoolGL;
      var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
      var executeSchool4Evt, executeSchool5Evt;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print",
        "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/dijit/HomeButton", "esri/graphic",
        "esri/renderers/SimpleRenderer", "esri/Color",
        "esri/config", "esri/dijit/Legend",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "dojo/_base/array", "dijit/registry",
        "dojo/query", "esri/tasks/LegendLayer",
        "esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
        "dojo/store/Memory", "dojo/dom-construct",
        "dijit/form/Button", "dojo/dom",
        "dojo/on", "dojo/parser",
        "esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Print,
        InfoTemplate, Draw,
        SimpleLineSymbol, SimpleFillSymbol,
        HomeButton, Graphic,
        SimpleRenderer, Color,
        esriConfig, Legend,
        Query, QueryTask,
        array, registry,
        dojoQuery, LegendLayer,
        StatisticDefinition, geometryEngine,
        Memory, domConstruct,
        Button, dom,
        on, parser,
        GraphicsLayer, UniqueValueRenderer
      ) {
        parser.parse();

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

        var selectionToolbar;

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-84.20, 33.78], // lon, lat
          zoom: 11
        });

        var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));

        //create renderer
        var renderer = new SimpleRenderer(defaultSymbol);

        var content = "<b>ES Population</b>: ${ES_Pop}" +
          "<br><b>MS Population</b>: ${MS_Pop}" +
          "<br><b>HS Population</b>: ${HS_Pop}";
        var infoTemplate = new InfoTemplate("${ES_Name}", content);

        var fields = ["ES_Num", "ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];

        var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/Featu...", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          //infoTemplate: infoTemplate,
          outFields: fields
        });

        var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
        var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
        var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
        var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
        var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

        schoolGL = new GraphicsLayer();
        var uvRenderer = new UniqueValueRenderer(defaultSymbol, "ES_Num");
        uvRenderer.addValue({
          value: 1,
          symbol: sSymbol1,
          label: "School 1",
          description: "School 1"
        });
        uvRenderer.addValue({
          value: 2,
          symbol: sSymbol2,
          label: "School 2",
          description: "School 2"
        });
        uvRenderer.addValue({
          value: 3,
          symbol: sSymbol3,
          label: "School 3",
          description: "School 3"
        });
        uvRenderer.addValue({
          value: 4,
          symbol: sSymbol4,
          label: "School 4",
          description: "School 4"
        });
        uvRenderer.addValue({
          value: 5,
          symbol: sSymbol5,
          label: "School 5",
          description: "School 5"
        });
        on(schoolGL, "click", function(e) {
          if (e.shiftKey) {
            schoolGL.remove(e.graphic);
            calculatePop();
          }
        });

        blocks.setRenderer(uvRenderer);
        schoolGL.setRenderer(uvRenderer);
        map.addLayers([blocks, schoolGL]);

        dom.byId("SchoolsButton1").onclick = executeSchool1;
        dom.byId("SchoolsButton2").onclick = executeSchool2;
        dom.byId("SchoolsButton3").onclick = executeSchool3;
        dom.byId("SchoolsButton4").onclick = executeSchool4;
        dom.byId("SchoolsButton5").onclick = executeSchool5;

        function clearEvts() {
          if (executeSchool1Evt) {
            executeSchool1Evt.remove();
          }
          if (executeSchool2Evt) {
            executeSchool2Evt.remove();
          }
          if (executeSchool3Evt) {
            executeSchool3Evt.remove();
          }
          if (executeSchool4Evt) {
            executeSchool4Evt.remove();
          }
          if (executeSchool5Evt) {
            executeSchool5Evt.remove();
          }
        }

        function doPreEvents() {
          clearEvts();
          map.disableClickRecenter();
          map.disableShiftDoubleClickZoom();
          map.disableKeyboardNavigation();
          map.disableRubberBandZoom();
        }

        function undoPreEvents() {
          clearEvts();
          map.enableClickRecenter();
          map.enableShiftDoubleClickZoom();
          map.enableKeyboardNavigation();
          map.enableRubberBandZoom();
        }

        function executeSchool1() {
          doPreEvents();
          executeSchool1Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 1;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool2() {
          doPreEvents();
          executeSchool2Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 2;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool3() {
          doPreEvents();
          executeSchool3Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 3;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool4() {
          doPreEvents();
          executeSchool4Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 4;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function executeSchool5() {
          doPreEvents();
          executeSchool5Evt = on(blocks, "click", function(e) {
            gra = e.graphic.clone();
            gra.attributes.ES_Num = 5;
            schoolGL.add(gra);
            calculatePop();
          });
        }

        function calculatePop(id) {
          var PopSumObj = {
            1: 0,
            2: 0,
            3: 0,
            4: 0,
            5: 0
          }
          //summarize the ES Population to display
          array.forEach(schoolGL.graphics, function(feature) {
            switch (feature.attributes.ES_Num) {
              case 1:
                PopSumObj[1] += feature.attributes.ES_Pop;
                break;
              case 2:
                PopSumObj[2] += feature.attributes.ES_Pop;
                break;
              case 3:
                PopSumObj[3] += feature.attributes.ES_Pop;
                break;
              case 4:
                PopSumObj[4] += feature.attributes.ES_Pop;
                break;
              case 5:
                PopSumObj[5] += feature.attributes.ES_Pop;
                break;
            }
          });
          var CapDiv, Capacity;
          for (var i = 0; i < 5; i++) {
            CapDiv = Math.round((PopSumObj[(i + 1)] / 900) * 100);
            if (CapDiv >= 80 && CapDiv <= 99) {
              Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
            } else if (CapDiv >= 100) {
              Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
            } else {
              Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
            }
            dom.byId('countResult_' + (i + 1)).innerHTML = PopSumObj[(i + 1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
          }
        }

        //add the legend
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: blocks,
            title: "School Re-Districting"
          }]
        }, "legendDiv");
        legend.startup();

        //function for refreshing block layer for use on button
        var refreshlayer = new Button({
          label: "Reset Map",
          onClick: function() {
            //the refresh will force it to get the original layer
            schoolGL.clear();
            dom.byId("countResult_1").innerHTML = "";
            dom.byId("countResult_2").innerHTML = "";
            dom.byId("countResult_3").innerHTML = "";
            dom.byId("countResult_4").innerHTML = "";
            dom.byId("countResult_5").innerHTML = "";
            undoPreEvents();
          }
        }, "refreshbutton").startup();

        //home button to return to map's default extent
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        //Print Button
        var printer = new Print({
          map: map,
          url: "http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ExportWebMap_Test/GPServer..."
        }, dom.byId("printButton"));
        printer.startup();
        on(printer, "onPrintComplete", function(result) {
          var currentTime = new Date();
          result.url += "?ts=" + currentTime.getTime();
        });

        // Code to edit the default print button text
        printer._printText = 'Submit Map';
        printer._printingText = 'Sending.., Please wait';
        printer._printoutText = 'Map Submitted, Thank you.';

        $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Submit Map');

        on(printer, '_createPrintButton', function(value) {
          $(".esriPrintButton").children(".dijitButtonNode").children(".dijitButtonContents").children(".dijitButtonText").text('Map Submitted, Thank you.');
        });

      });

    </script>
  </head>

  <body class="tundra">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
            <div id="info">
              <button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
              <button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
              <button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
              <button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
              <button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br><br>
              <div id="printButton" style="text-align: center; vertical-align: bottom;"></div>
              <div id="refresh" style="text-align: center; vertical-align: bottom;"><button id="refreshbutton" type="button"></button></div>
            </div>
            <div id="legendDiv"></div>
          </div>
        </div>
      </div>
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        <div id="HomeButton"></div>
      </div>
    </div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

GiovanniMarrero3 · ‎05-02-2018

That was it!, Thanks again!.