topic Re: Using Multiple Buttons to Select and Query on One Layer in ArcGIS JavaScript Maps SDK Questions

Using Multiple Buttons to Select and Query on One Layer

GiovanniMarrero3 — Fri, 10 Dec 2021 22:46:56 GMT

Hello,

I'm trying to develop an app that will allow the users to make new areas using the several buttons to highlight and create areas on the map. Currently, the buttons can select individual areas but it does not separate from the individual buttons. The buttons keep adding on the selection while changing colors. I need help in figuring out how to separate the buttons so that it highlight the areas that they were clicked on and to make their query calculation display.

<!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">
    <link rel="stylesheet" href="css/loader.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;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var map;

      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", "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
      ) {
        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]));
        //defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

        //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/FeatureServer/0", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          //infoTemplate: infoTemplate,
          outFields: fields
        });

        blocks.setRenderer(renderer);
        map.addLayers([blocks]);

        //map.on("load", initSelectToolbar);

        var selectionSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
        var selectionSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
        var selectionSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
        var selectionSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
        var selectionSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

        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 executeSchool1() {
          on(blocks, "click", function(e) {
            var selectQuery = new Query();
            blocks.setSelectionSymbol(selectionSymbol1);
            selectQuery.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery, FeatureLayer.SELECTION_SUBTRACT, calculatePop1);
            } else {
              blocks.selectFeatures(selectQuery, FeatureLayer.SELECTION_ADD, calculatePop1);
            }
          });
        }

        function executeSchool2() {
          on(blocks, "click", function(e) {
            var selectQuery2 = new Query();
            blocks.setSelectionSymbol(selectionSymbol2);
            selectQuery2.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery2, FeatureLayer.SELECTION_SUBTRACT, calculatePop2);
            } else {
              blocks.selectFeatures(selectQuery2, FeatureLayer.SELECTION_ADD, calculatePop2);
            }
          });
        }

        function executeSchool3() {
          on(blocks, "click", function(e) {
            var selectQuery3 = new Query();
            blocks.setSelectionSymbol(selectionSymbol3);
            selectQuery3.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery3, FeatureLayer.SELECTION_SUBTRACT, calculatePop3);
            } else {
              blocks.selectFeatures(selectQuery3, FeatureLayer.SELECTION_ADD, calculatePop3);
            }
          });
        }

        function executeSchool4() {
          on(blocks, "click", function(e) {
            var selectQuery4 = new Query();
            blocks.setSelectionSymbol(selectionSymbol4);
            selectQuery4.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery4, FeatureLayer.SELECTION_SUBTRACT, calculatePop4);
            } else {
              blocks.selectFeatures(selectQuery4, FeatureLayer.SELECTION_ADD, calculatePop4);
            }
          });
        }

        function executeSchool5() {
          on(blocks, "click", function(e) {
            var selectQuery5 = new Query();
            blocks.setSelectionSymbol(selectionSymbol5);
            selectQuery5.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery5, FeatureLayer.SELECTION_SUBTRACT, calculatePop5);
            } else {
              blocks.selectFeatures(selectQuery5, FeatureLayer.SELECTION_ADD, calculatePop5);
            }
          });
        }



        function calculatePop1(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          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_1").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop2(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          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_2").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop3(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          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_3").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop4(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          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_4").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop5(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          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_5").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        //add the legend
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: blocks,
            title: ""
          }]
        }, "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
            blocks.clearSelection();
            blocks.refresh();
            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 = "";
          }
        }, "refreshbutton").startup();

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


      });

    </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>
            </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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Using Multiple Buttons to Select and Query on One Layer

RobertScheitlin__GISP — Thu, 26 Apr 2018 20:02:13 GMT

Giovanni,

You forgot to include the css/loader.css file contents.

Can you explain the workflow you are wanting?

When the user clicks school 1 and then on the map it should?

and when they click on school 2 it should start over or just start assigning the next click as the school 2 color?

Re: Using Multiple Buttons to Select and Query on One Layer

GiovanniMarrero3 — Thu, 26 Apr 2018 20:58:01 GMT

Robert,

You can delete the css line, I was trying to clean up the file to only show the problem areas.

As far as the process, the user clicks on school 1 button and starts to click on areas on the map. Each click will be highlighted in yellow while the calculation section updates next to the button.

When the user clicks on school 2 button, it will start assigning another color and doing the separate calculation for that button. This will go on until the all 5 school buttons are completed.

Re: Using Multiple Buttons to Select and Query on One Layer

RobertScheitlin__GISP — Thu, 26 Apr 2018 21:08:43 GMT

So when school 2 is clicked school 1 colors are suppose to stay yellow and school 1 colors should start with the new school 2 color? If that is the intended workflow then your code will never work. When you change the selection color it changes for all the selected feature in that layer.

Re: Using Multiple Buttons to Select and Query on One Layer

GiovanniMarrero3 — Thu, 26 Apr 2018 21:14:03 GMT

Understood, that was the intended workflow.

do you have other suggestions to explore that would allow users to create different colored graphics and provided calculations based on the graphics?

Re: Using Multiple Buttons to Select and Query on One Layer

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:47:01 GMT

Giovanni,

You need to get the graphics (polygon) that is clicked on and add it to a GraphicsLayer using the selected school symbol. Forget the whole featurelayer select route and just add graphics to a GL that you have added to the 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>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 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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/FeatureServer/0", {
        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();
    });
  </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='refreshbutton'></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Using Multiple Buttons to Select and Query on One Layer

GiovanniMarrero3 — Mon, 30 Apr 2018 12:55:06 GMT

Robert,

Your method above works similarly to what I was trying to do. Thank you for the help!

Re: Using Multiple Buttons to Select and Query on One Layer

GiovanniMarrero3 — Wed, 02 May 2018 16:50:05 GMT

Robert,

This is a separate issue but it's using the above code. I added a print widget to the script but it does not export. 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?

Re: Using Multiple Buttons to Select and Query on One Layer

RobertScheitlin__GISP — Wed, 02 May 2018 17:23:47 GMT

Giovanni,

You should start a new question and provide a sample of how you added the print portion to the above code.